Brought to you by
2BlueSolutions Creative Web Design

Friday, October 15, 2010

Developer’s Note: Condensing Forms Displayed During VirtueMart Checkout

By default, the VirtueMart checkout process will ask for more information from your customer than is actually needed by your store.  To help reduce the form-field overload that you customer may face when trying to purchase a product from your online store, it can help to actually remove fields that are not necessary to your business.   Do you really need to know the “company", "title", or "fax number” of a customer?  If not, then this tutorial will show you how to remove those fields.

Changing the following file will impact the Billing Information and the Shipping Information (Shipping Address) forms that appear during the VirtueMart checkout process.

The file you will need to edit can be found here:

/administrator/components/com_virtuemart/classes/ps_userfield.php

Search for the function getSkipFields()

By default, the skipped fields are the username, password, password check, and the check for the terms of service agreement.

function getSkipFields() {
return array( 'username', 'password', 'password2', 'agreed' );
}

What this function does is returns an array to the caller of the fields that should be skipped when generating the forms.  The choice for fields are (* required by VirtueMart):

  • username
  • password
  • password2
  • agreed
  • company
  • title
  • fax
  • phone*
  • phone_2
  • first_name*
  • middle name
  • last_ name*
  • city*
  • address*
  • address_2
  • zip*
  • country*
  • state*

You can add any of the above fields to the return array.  For example:

function getSkipFields() {
return array( 'username', 'password', 'password2', 'agreed', 'company', 'title', 'fax', 'phone_2', 'middle_name' );
}

After adding the fields that you don’t want shown, you need to make one more change to the ps_userfield.php file.

Search for the function getUserFields and change the variable $exclude_skipfields to true.  Basically, this will tell the function to obey the array in getSkipFields() when generating the form for user information.

The final step is to edit the following file which displays the information back to the user on the shipping address page:

/components/com_virtuemart/themes/default/templates/checkout/customer_info.tpl.php


Look within this file and remove the table rows that correspond with the fields that your removed.  For example, if you added company to the skip fields array above, you will want to remove the entire row that displays company in customer_info.tpl.php.

After you have completed those two steps, upload the files to your server and you should see the changes immediately.

Tuesday, October 12, 2010

Developer Note: PayPal Only Checkout - Changing the Confirm Order Button

If your store will only be using PayPal as a payment handler, the customer experience can be improved by replacing the "Confirm Order" button at the end of the checkout process with an actual PayPal button.

The old button doesn't convey to your customer that they will be taken to PayPal to complete their order.

All we're going to do with this post, is show how to change that "Confirm Order" button into this a Paypal button

The file you want to edit is found here:

\components\com_virtuemart\themes\default\templates\checkout\get_final_confirmation.tpl.php

Within this file, search near the bottom for the following code:

<div align="center">
<input type="submit" onclick="return( submit_order( this.form ) );" class="button" name="formSubmit" value="<?php echo $VM_LANG->_('PHPSHOP_ORDER_CONFIRM_MNU') ?>" />
</div>
The button has a class called input.button found in your templates css file, but we’ll be changing it to a specific id.  Basically, the idea will be to remove the text that is shown so delete the PHP echoed text.  On top of that, we need to change the class to a class or id (this example will assign an id) to handle the new appearance.



The old code should be changed to something similar to the code shown below:
<div align="center">
<input type="submit" onclick="return( submit_order( this.form ) );" id="confirm_button" name="formSubmit" value="" />
</div>
Notice, in the above code, that the id of the button has been changed to confirm_button. You can give it whatever declaration you wish, but you just need it to be unique. You will declare a style for it in your CSS file. We are going to add the id declaration to the template css (ie. template.css) where the class input.button is declared.

Now, go to your template css file and search for the class input.button. Create 2 new id declarations similar to the button class declarations:

#confirm_button{

}
#confirm_button:hover, #confirm_button:focus{

}

Now, grab a PayPal image from the PayPal site. Just right-click and select save image. They give you the option to point to an image on their server, but it’s better to host your own image so that you’re in control if they decide to update their images, again, in the future.

Now, you need to edit your CSS entries for the new button id. Check the width and height of the image you downloaded and enter them into the CSS class. You can play around with the padding, but I just left it the same as the button class. The background image will be the location of the image on your server relative to this CSS file.
#confirm_button{
 width:145px;
 height:42px;
 padding: 3px 5px;
 background: url(../images/btn_xpressCheckout.gif) no-repeat top #FFFFFF;
}
For the hover and focus traits, change the cursor to a pointer. Changing it to an pointer gives this background image the semblance of being an actual button.
#confirm_button:hover, #confirm_button:focus {
 cursor: pointer;
}
After this, you will need to upload 3 files to your server:

1) get_final_confirmation.tpl.php -> with the edited submit button code.
2) the CSS file you edited with the new id for your submit button.
3) the PayPal image in the correct directory relative to your CSS file where it is mentioned.

In summary, you need to edit the style of submit button in get_final_confirmation.tpl.php and remove it’s text that gets echoed to the screen. You then need to either handle the style change right there in the file or in your general CSS file. You will also need to provide the PayPal image to show, which can be found by searching for PayPal images or by going to the link mentioned above in this article.  You may need to edit the button (borders, background color) to get it to fit in with your site.

Overall, this is a great way to customize a site that will only rely on PayPal as your payment option. Adding an actual PayPal button gives your visitors a clear message of where they are going when they click on the button.

Friday, October 1, 2010

Developer Note: Virtuemart - Moneris / ESelectPlus Integration - API Token Mismatch

One quick solution to a common problem.  When running Virtuemart and using Moneris as your payment processor, you may occassionally run into the following error:

A message from the processor:  API Token Mismatch: (N/A)
ERROR:  FAILURE IN PROCESSING THE PAYMENT (ps_moneris)

The quick and easy way to fix this is to log into http://www.eselectplus.ca with your credentials and make sure that, under “My Account -> Account Settings”, the default transaction ECI is set to SSL.  It normally defaults to another transaction type (non-electronic commerce transaction), so you need to change it to represent the type of transaction you prefer.  Whether that is an SSL transaction or not is dependent on you site.