Checkout
From Online Business Wiki
Click on + to expand the category
Shopping Cart
Adding {module_shoppingcartsummary,horizontal} to the Overall Catalogue layout, which can be found in Admin -> More Customization Options -> Online Shop Layouts will render the View Cart link.
Refreshing the shopping cart when the back button is pressed
To achieve this you simply need to add the following code to site-wide template (not the shopping cart layout) to ensure the shopping cart is refreshed if back button is pressed:
<input id="refresh" type="hidden" value="0" />
<script type="text/javascript">
onload=function() {
var r = document.getElementById('refresh');
if (r.value == "0") r.value = "1";
else RefreshCart();
}
</script>
RefreshCart() function is already in the JavaScript file which is loaded when the shopping cart is accessed.
Adding the small product image to the shopping cart
If you look at the HTML code in the shopping cart, you will find the following:
<tr class="val">
<td>{tag_productname}</td>
<td>{tag_productextaxamount}</td>
<td class="quantity">{tag_productquantity}</td>
<td>{tag_producttaxrate}</td>
<td>{tag_producttotal}</td>
<td>{tag_productremovelink}</td>
</tr>
All you have to do to add the image is to add the following tag to the layout:
<td>{tag_productimage}</td>
to make:
<tr class="val">
<td>{tag_productimage}</td>
<td>{tag_productname}</td>
<td>{tag_productextaxamount}</td>
<td class="quantity">{tag_productquantity}</td>
<td>{tag_producttaxrate}</td>
<td>{tag_producttotal}</td>
<td>{tag_productremovelink}</td>
</tr>
What you have to make sure is that you make the height of each row equivalent or greater to the height of the small product image.
The following class inside your stylesheet ModuleStyleSheets.css controls the height of the each row:
.productitemcell {
height:50px;
line-height:50px;
margin:0;
width:auto;
}
You need to change the height in that class to accommodate the image.
Changing "shopping cart is empty" message
To Change the 'shopping cart is empty' message, you will need to use Javascript, ensuring this is afaibalbe when viewing the shopping cart -
<script type="text/javascript">
var ele = GetElementsByClass('cartLink');
if(ele[0]) ele[0].innerHTML = 'Empty';// replace with your own message!
function UpdateProductExtras(c, p, res) {
document.getElementById('catCartDetails').innerHTML = 'This Cart Is Empty'; // replace with your own message!
</script>
Buy vs. Quote
This e-commerce system provides functionality for customers to either buy products or request a quote. Both options are useful and depending on your business you can have both or choose the one relevant to you.
Buy
If the purpose of your online shop is to sell products and take payments then you should use this option and not include the Quote button in the Shopping Cart step of the Checkout Process (step 1). When customers choose to buy a product, they will be asked to provide a payment for the purchase.
In this option, the system will create an Invoiced Order which is emailed to customer upon the completion of the order. The Invoice layout is used when emailing customer.
Quote
This option is useful for those retailers that want their customers to request quotes instead of purchase and pay for goods online. For example if you are a retailer which provides bulk discounts or need to make calculations before knowing the final price of an order, choosing this option will be more valuable.
This is how the quote system works:
Customer goes to the site, adds the products they are interested in to the cart, goes to the checkout and enters their information into the registration form and checks out. Please note that in that case, the system will use a quote button in the shopping cart, quote layout and quote receipt.
The site owner will then edit the quote order that is created and add the prices to the products and anything else they want to add to the order, invoice the customer and send them the invoice. The customer will then receive the invoice and either decide to go through with the purchase or not. You can setup a form to collect the customers payment details and add a link to that form in the invoice layout.
Registration form
Registration form is the final step of the checkout process and it comes after the customer clicks on "checkout button" in the shopping cart. Registration form collects customer's details such as name, email address, shipping address, billing address, payment details and it can collect anything else you want to collect, because the registration form is really just a standard form that has been placed onto the Registration layout in Admin -> More Customization Options -> Online Shop Layouts -> Registration (Buy). The form that's made into registration form by default is Online Shop Purchase Form in Modules -> Web forms but you can also build your own.
Customizing registration form
Adding additional fields to the registration form
If you wish to add an additional field to the registration form you need to go to Modules -> Web forms and find Online Shop Purchase Form which is a default checkout form. If you have built another form or renamed the default form you need to click on that form.
You then need to choose which field you want add to the form. First see is that field is one of the system fields. If it is add that field by ticking it and clicking on Save. If it's not one of the system fields, click on Add custom fields to Web Form and create your field.
If, for example you wanted to add a field that will be a checkbox that will have "Have you read terms and conditions..." next to it you would type in Terms and Conditions in the Field name field, for Field Type you would select List(Checkbox List) and for the List Items the would type in "Have you read terms and conditions...". In this case you only have one item.
After you have done that you would need to go to Admin -> More Customization Options -> Online Shop Layouts -> Registration (Buy) and delete the old form from that layout and re-insert the newly updated form. Th best way to delete the old form is to go to HTML view by clicking <> on the bottom of the editor window and deleting everything between <form> tags. then use the Module Manager to insert the new form. Module Manager can be accessed by a click on a white plus sign in the blue circle on the editor toolbar. In the Module Manager you click on Web Forms -> choose Online Shop Purchase Form and insert it. Please note that this is the only form that can not be inserted into the layout as a module!
Adding and removing unwanted payment options
Adding payment options
Sometimes you may need to add a payment method type to the registration form that is not there by default.
The following is the list of all payment method types that system will recognize:
- CreditCard = 1
- Cheque = 2
- Cash = 3
- EFT = 4
- PayPal = 5
- BPay = 6
- HostedCreditCard = 7 ' - Non-Seamless gateways other than Standard PayPal (Google Checkout, etc.)
- DirectDebit = 8
- GiftVoucher = 9
- Free = 10
Example:
If you need a Direct Debit option in addition to COD, you will need to create a radio button with value 8 in the checkout form in Registration Template.
You would use the following code:
<input id="PaymentMethodType" type="radio" name="PaymentMethodType" value="8"/>Direct Debit
Removing payment options
To remove the certain payment options from the registration form all you have to do do is go to Admin -> More Customization Options -> Online Shop Layouts -> Registration (Buy) and go into the HTML view. There you need to find the radio button code that looks like this -
<input class="PaymentMethodType" type="radio" onclick="ShowCCFields(this.value);" value="7" name="PaymentMethodType"/> Credit Card (Hosted) (remove if not required)
You just need to delete the options you do not need there and save the layout.
Credit Card Types
These are currently available credit card types:
<select class="cat_dropdown" id="CardType" name="CardType"> <option value="1">Visa</option> <option value="2">Master Card</option> <option value="3">Bank Card</option> <option value="4">American Express</option> <option value="5">Diners Club</option> <option value="5">Discover</option> <option value="6">JCB</option> <option value="8">Maestro</option> <option value="9">Solo</option> <option value="10">VisaDebit</option> <option value="11">Switch</option> </select>
Removing countries from the form
All you need to do here is you need to go to Admin -> More Customization Options -> Online Shop Layouts -> Registration (Buy) and click on the HTML view ( <> )on the bottom of the editor window and find the following code, e.g.:
<select id="ShippingCountry" class="cat_dropdown" name="ShippingCountry"> <option> -- Select Country -- </option> <option value="AF"> AFGHANISTAN </option> <option value="AX"> ALAND ISLANDS </option> <option value="AL"> ALBANIA </option> <option value="DZ"> ALGERIA </option> <option value="AS"> AMERICAN SAMOA </option> <option value="AD"> ANDORRA </option> <option value="AO"> ANGOLA </option>
Then simply remove the options you do not need. Do the same thing for the Billing Country.
Adding opt-in box to purchase form
Firstly, you need add a campaign list to your registration web form. To do this go to Modules -> Web Forms -> select the correct form (by default it's Online Shop Purchase Form) then Add system fields to the web form. This is where you add one or more campaign list to a form and Save changes.
You now need to reinsert the form into a Registration layout.
To do this, you go to Admin -> More Customization Options -> Online Shop Layouts then click Registration Buy.
Now simply delete the old form and insert the new form using the Module manager.
When you are deleting a form, the best way to do it is to delete everything between <form> tags including the <form> tags in HTML view of the editor.
Prepopulating the form for returning customers
There are two ways in which you can setup your eCommerce to pre-populate the registration form for the returnign customers. Any of these methods will work.
Method 1.
Go to Admin -> More Customization Options -> Online Shop Layouts and choose the Shopping Cart layout. Using the Module Manager on the WYSIWYG editor's tool bar simply insert a Generic Secure Zone Login Form. With this on your page, customers can either click on the existing 'Checkout' button or choose to login and be redirected to the checkout form.
You also need to add the CRM modules to help you prepopulate the billing and shipping address fields. You can use {module_shippingaddress}, {module_shippingcity}, {module_billingaddress} and so forth to pre-populate the checkout form. The full list can be found HERE
Once an online shopper is finished shopping they go to the shopping cart step to see the details of their cart. From there they click on the "Checkout" link to enter their details/payment information and complete the sale. This is where you need to implement this functionality.
Method 2.
Basically when the user arrives on this step you should hide the form using CSS (instructions) below. And put 2 big boxes on the page that read:
* New Users? Click here to complete your purchase * Existing User? Presented with a login box to enter username/password
Here is the process:
- Go to Admin->More Customization Options->Online Shop Layouts and choose the "Registration (Buy)" form.
- Add the relevant modules to the form so the form is populated if the customer logs in, e.g. {module_firstname}
- Wrap the form in a <div></div>. Using css hide it. Make sure you give your div an ID also, e.g. <div id="myform" style="display:none;">
- Insert a Secure Zone Login box on this page
- Edit the action URL of this secure zone form from: action="/ZoneProcess.aspx?....." to action="/ZoneProcess.aspx?.....&PageID={module_pageaddress}"
- Add this Javascript to your page which will check if the user is logged in it will display the form:
(add script at the end of the page and remove spaces from the module tag)
<script type="text/javascript">
var loggedin = { module_isloggedin };
if (loggedin == 1)
document.getElementById('myform').style.display='inline';
</script>
If the user is a new user you would simply add some JavaScript to show the form instantly. e.g.
<a href="#" onclick="document.getElementById('myform').style.display='inline';return false;">New User? Click Here to complete purchase</a>
The very first version of our checkout framework used to have this feature however this has a tendency to produce higher abandon rates since customers generally cannot remember their username/passwords.
Disabling secure zone login details email once the user is logged in (Registration Purchase)
In order to avoid sending emails to registered members once they make a purchase, you can disable this feature by adding the "SAR=false" parameter into your form action Url.
You need to do the following changes in your Registration-Buy form:
1) Modify the action value in your Form:
<form action=" " enctype="multipart/form-data" onsubmit="return checkWholeForm65533(this)" method="post" name="catwebformform65533" id="catwebformform65533">
- In the above code, leave the action value equals to one empty space
- Replace the number 65533 with the one that is part of your form.
2) Add the following code at the bottom of your Registration-Buy form
<script type="text/javascript">
<!-- Extra javascript code (BEGIN) -->
var isLoggedIn = "{module_isloggedin}"; //Check if user is logged in
LoadFormAction();
//The idea here is to use the 'SAR' parameter, so we have the option to stop autoresponder if a member is already registered
function LoadFormAction()
{
var _disableSendEmail = "&SAR=false";
var _requestToURL = "/FormProcessv2.aspx?WebFormID=18293&OID={module_oid}&OTYPE={module_otype}&EID={module_eid}&CID={module_cid}&Step=13";
if (isLoggedIn == "1")
{
//Add extra parameter to disable email Auto Responder
_requestToURL = _requestToURL + _disableSendEmail;
}
//We use our form [name], then we use:
document.catwebformform65533.action = _requestToURL;
}
</script>
Things you need to change:
- Line 9, change the number 18293 with your respective WebFormID
- Line 16, change the number 65533 with your respective number as specified in step 1.
Receipt (Buy)
This is the receipt and confirmation page for the purchase made on eCommerce checkout. This page is customizable and can include any number of transaction related information.
To customize it you need go to Admin -> More Customization Options -> Online Shop Layouts then click Receipt (Buy).
The default receipt page look something like this:
Click here for the list of available tags for this layout.
Replacing the View Cart link with an image
You can use CSS to make "View Cart" text an image.
so for example, here is the code rendered by the shopping cart summary module:
<td class="cartSummaryItem">
1 item(s), Total: $289.00
<a href="/OrderRetrievev2.aspx?CatalogueID=10197" class="cartSummaryLink">View Cart</a>
</td>
Add this code to the layout or your CSS file:
a.cartSummaryLink {
background: url(myimage.gif) 0 0 no-repeat;
width: 120px;
height: 27px;
vertical-align:middle;
display:-moz-inline-block; /* for Firefox */
display:-moz-inline-box; /* for Firefox */
display:inline-block;
text-indent: -9999px; /* hides the text */
}
Related Videos
Related Articles
- Payment gateway - has all the information about setting up payment gateways and adding them to your site
