Checkout is the final stage of the ordering process. By the time a customer reaches checkout, they have already added their desired items to the shopping cart. Generally, checkout includes the following steps:
Enter information about the customer.
Enter information about the payer. The payer and the customer don't have to be the same person.
Enter information about the recipient.
Select a payment method.
Select a shipping method.
Review all entered information and revise if necessary.
Confirm order placement.
Complete the payment for the order.
The customer, the payer and the recipient specified during order placement can be different entities. For example, the customer, John Doe, can pay for an order with the credit card of his employer and then specify the shipping address as that of his contractor located in another city.
With Avactis Shopping Cart software you can customize the design of all of the checkout steps. If you want, you can also remove certain steps from the process.
The checkout process is customized through templates. All checkout templates are stored in the folder avactis-templates/checkout/checkout-sequence/default/
To display checkout steps on any given website page, use the tag <?php Checkout(); ?>
The checkout sequence in Avactis Shopping Cart includes the following three steps: Step 1. The customer fills in Customer Info, Shipping Info, and Billing Info and then selects a payment method and a shipping method. The template responsible for this step is provided in the file "step1.tpl.html".
Step 2. The customer reviews the information entered in Step 1 and confirms that is it correct. After clicking Place Order, the customer is redirected to the payment gateway. The template responsible for this step is provided in the file "step2-confirmation.tpl.html".
Step 3. Provided the payment was completed successfully at the payment gateway, the customer is redirected to the third checkout step. The template responsible for this step is provided in the file "step3-success.tpl.html". The checkout sequence flowchart is shown below.
Downloaded templates can be easily joined with your Avactis Shopping Cart installation. Extract the contents of the archived file. The folder "checkout-sequence" will be created. Copy this folder to your web-server and place it in the folder avactis-templates/checkout/.
Further details are given below about the templates and tags used to create the checkout design.
Step 1. Customization step1.tpl.html
Step 1 of the checkout process entails entering the information required to generate an order.
The template for Step 1 is provided in the file step1.tpl.html, which is stored in the folder avactis-templates/checkout/checkout-sequence/default/.
The following tags are used to generate Step 1:
<?php CheckoutOrder(); ?> - displays the items ordered, including the order total as well as shipping cost and taxes.
<?php CheckoutCustomerInfoInput(); ?> - the form for filling in customer information.
<?php CheckoutShippingInfoInput(); ?> - the form for filling in Shipping Info.
<?php CheckoutBillingInfoInput(); ?> - the form for filling in Billing Info.
<?php CheckoutShippingMethodsSelect(); ?> - the form for selecting a shipping method.
<?php CheckoutPaymentMethodsSelect(); ?> - the form for selecting a payment method.
NOTE: The templates and descriptions of the above tags are explained in their respective sections below. You can change the sequence in which the forms are displayed by rearranging the appropriate tags into a different sequence.
In the template step1.tpl.html you can can define border color and border width of the form, and place titles as necessary. You can also move the tags to different parts of the template to change their location.
Copy the downloaded template to your web-server and place it in the folder avactis-templates/checkout/checkout-sequence/default/.
Step 2. Customization step2-confirmation.tpl.html
Step 2 of the checkout process is used to display the information entered in Step 1, which is required for generating an order. In this step the customer can review the entered data and go back to Step 1 to make any changes necessary.
The template for Step 2 is provided in the file step2-confirmation.tpl.html, which is stored in the folder avactis-templates/checkout/checkout-sequence/default/.
The following tags are used to generate Step 2:
<?php CheckoutOrder(); ?> - displays the items ordered, including the order total as well as shipping cost and taxes.
<?php CheckoutCustomerInfoOutput(); ?> - displays the data entered in the Customer Info form.
<?php CheckoutShippingInfoOutput(); ?> - displays the data entered in the Shipping Info form.
<?php CheckoutBillingInfoOutput(); ?> - displays the data entered in the Billing Info form.
<?php CheckoutShippingMethodsOutput(); ?> - displays the name of the selected shipping method.
<?php CheckoutPaymentMethodsOutput(); ?> - displays the name of the selected payment method.
NOTE: The templates and descriptions of the above tags are explained in their respective sections below. You can change the sequence in which the forms are displayed by rearranging the appropriate tags into a different sequence.
In the template step2-confirmation.tpl.html you can define border color and border width of the form, and place titles as necessary. You can also move the tags to different parts of the template to change their location.
Copy the downloaded template to your web-server and place it in the folder avactis-templates/checkout/checkout-sequence/default/.
Step 3. Customization step3-success.tpl.html
The customer reaches Step 3 after they have successfully completed the checkout process.
The template for Step 3 is provided in the file step3-success.tpl.html, which is stored in the folder avactis-templates/checkout/checkout-sequence/default/.
The contents of this template are arbitrary. Typically you will want to congratulate the customer on the completion of their purchase. The use of special checkout tags is not expected for this template.
Copy the downloaded template to your web-server and place it in the folder avactis-templates/checkout/checkout-sequence/default/.
Checkout Store Blocks
The checkout process includes three steps as outlined above. Each of these steps implies the use of checkout store blocks. The following is a detailed description of the individual checkout store blocks that can be used on the checkout pages.
It must be noted that all checkout store blocks can be called through tags only in templates devoted to checkout steps (stored in avactis-templates/checkout/checkout-sequence/default/). In other words, the use of checkout store blocks is not expected on any other site pages or in any other templates.
CheckoutOrder
The CheckoutOrder block allows to display the order contents: items, prices, shipping cost, taxes, and the subtotal and total sums. This store block can be displayed by using the tag <?php CheckoutOrder(); ?>.
All templates of the CheckoutOrder block are stored in the folder avactis-templates/checkout/order/default/.
The CheckoutOrder block consists of the following templates:
The container template (order-container.tpl.html) is required to define the design of the overall CheckoutOrder block. For example, you can define border width and border color of the block, background color, block font, etc.
The individual item template (order-item.tpl.html) is used to display the information about an individual item contained in the order. It can include the image for the product (Product Image), the product name (Product Name), the quantity of this item added to the cart (Qty), the price (Price), and the total price for this item considering its quantity (Total Price).
The individual tax template (order-tax-item.tpl.html) is used to display taxes. For each tax, it displays the tax name and the tax amount.
The figure below shows the outline of templates of the CheckoutOrder block provided with Avactis Shopping Cart by default.
Downloaded templates can be easily joined with your Avactis Shopping Cart installation. Extract the contents of the archived file. The folder “order” will be created. Copy this folder to your web-server and place it in the folder avactis-templates/checkout/.
CheckoutCustomerInfoInput
The CheckoutCustomerInfoInput block represents the form for filling in basic customer information: name, email and phone number. This store block can be displayed by using the tag <?php CheckoutCustomerInfoInput (); ?>.
All templates of the CheckoutCustomerInfoInput block are stored in the folder avactis-templates/checkout/customer-info/default/.
The CheckoutCustomerInfoInput block can be customized in the same way as the CheckoutBillingInfoInput block.
Downloaded templates can be easily joined with your Avactis Shopping Cart installation. Extract the contents of the archived file. The folder “customer-info” will be created. Copy this folder to your web-server and place it in the folder avactis-templates/checkout/.
CheckoutCustomerInfoOutput
The CheckoutCustomerInfoOutput block is used to let the customer double check the accuracy of data entered in the Customer Info form before the order is finally generated. It is implied that, upon discovering a misprint or an error, the customer will return to the previous checkout step and make corrections. This store block can be displayed by using the tag <?php CheckoutCustomerInfoOutput (); ?>.
A single template is used to display the CheckoutCustomerInfoOutput block:
output-customer-info-item.tpl.html - is used for each pair “Field Label: Field Value”. For example, "First Name: John".
The CheckoutCustomerInfoOutput block can be customized in the same way as the CheckoutBillingInfoOutput block.
Template of the CheckoutBillingInfoOutput block is stored in the folder avactis-templates/checkout/billing-info/default/.
Downloaded templates can be easily joined with your Avactis Shopping Cart installation. Extract the contents of the archived file. The folder “customer-info” will be created. Copy this folder to your web-server and place it in the folder avactis-templates/checkout/.
CheckoutShippingInfoInput
The CheckoutShippingInfoInput block is the form for entering shipping information for the order: the recipient’s name, address, etc. This store block can be displayed by using the tag <?php CheckoutShippingInfoInput (); ?>.
All templates of the CheckoutShippingInfoInput block are stored in the folder avactis-templates/checkout/shipping-info/default/. The CheckoutShippingInfoOutput block can be customized in the same way as the CheckoutBillingInfoInput block.
Downloaded templates can be easily joined with your Avactis Shopping Cart installation. Extract the contents of the archived file. The folder “shipping-info” will be created. Copy this folder to your web-server and place it in the folder avactis-templates/checkout/.
CheckoutShippingInfoOutput
The purpose of the CheckoutShippingInfoOutput block is to let the customer review the information he or she entered in the Shipping Info form before proceeding to the final ordering stage. If the customer finds an error or misprint, he or she can return and make the necessary corrections. This store block can be displayed by using the tag <?php CheckoutShippingInfoOutput (); ?>.
The CheckoutShippingInfoOutput block can be customized in the same way as the CheckoutBillingInfoOutput block.
Template of the CheckoutShippingInfoOutput block is stored in the folder avactis-templates/checkout/shipping-info/default/.
Downloaded templates can be easily joined with your Avactis Shopping Cart installation. Extract the contents of the archived file. The folder “shipping-info” will be created. Copy this folder to your web-server and place it in the folder avactis-templates/checkout/.
CheckoutBillingInfoInput
The CheckoutBillingInfoInput block is a form for entering billing information. This store block can be displayed by using the tag <?php CheckoutBillingInfoInput (); ?>.
All templates of the CheckoutBillingInfoInput block are stored in the folder avactis-templates/checkout/billing-info/default/.
It’s worth noting that the tag <?php CheckoutBillingInfoInput(); ?> generates a Billing Info form based on individual fields. A Billing Info form can have two kinds of fields: textboxes and drop-down lists.
Fields such as First Name, Last Name, E-Mail, etc are textbox fields. Drop-down can include fields such as Country or State. A typical drop-down list is a list of state names.
You can define the appearance of textboxes and drop-down lists by editing the block templates. Any form field (textbox as well as drop-down list) can be either optional or required. To complete the checkout, the customer must enter all required fields.
The information the customer enters here may be valid or invalid. For instance, "my.email.com" is not a valid email. If this is the case, the customer will be notified of the error.
Thus, four templates are defined for each form field:
Downloaded templates can be easily joined with your Avactis Shopping Cart installation. Extract the contents of the archived file. The folder “billing-info” will be created. Copy this folder to your web-server and place it in the folder avactis-templates/checkout/.
CheckoutBillingInfoOutput
The purpose of the CheckoutBillingInfoOutput block is to let the customer review the information he or she entered in the Billing Info form before proceeding to the final ordering stage. If the customer finds an error or misprint, he or she can go back to a previous step and make the necessary corrections. This store block can be displayed by using the tag <?php CheckoutBillingInfoOutput (); ?>.
A single template is used to display the CheckoutBillingInfoOutput block:
output-billing-info-item.tpl.html - is used for each pair “Field Label: Field Value”. For example, "First Name: John".
Template of the CheckoutBillingInfoOutput block is stored in the folder avactis-templates/checkout/billing-info/default/.
Downloaded templates can be easily joined with your Avactis Shopping Cart installation. Extract the contents of the archived file. The folder “billing-info” will be created. Copy this folder to your web-server and place it in the folder avactis-templates/checkout/.
CheckoutShippingMethodsSelect
The tag <?php CheckoutShippingMethodsSelect(); ?> displays the form that lets the customer select the shipping method. The contents of the form are generated automatically based on the shipping methods activated from within the Admin Area.
The templates used when populating the Shipping Method form are stored in the folder avactis-templates/checkout/shipping-methods/. Each shipping method has a specific template stored in this folder. For instance, templates for the shipping method Flat Shipping Rates are stored in avactis-templates/checkout/shipping-methods/flat-shipping-rates/.
Downloaded templates can be easily joined with your Avactis Shopping Cart installation. Extract the contents of the archived file. The folder “shipping-methods” will be created. Copy this folder to your web-server and place it in the folder avactis-templates/checkout/.
CheckoutShippingMethodsOutput
The purpose of the CheckoutShippingMethodsOutput block is to let the customer review the payment method information he or she has entered, before proceeding to the final ordering stage. If the customer finds an error or misprint, he or she can go back to a previous step and make the necessary corrections.
The tag <?php CheckoutShippingMethodsOutput(); ?> displays the name of the selected shipping method. This is done with the template stored in avactis-templates/checkout/shipping-methods/. Each shipping method has a specific template in that folder. For instance, templates for the shipping method Flat Shipping Rates are stored in avactis-templates/checkout/shipping-methods/flat-shipping-rates/.
Downloaded templates can be easily joined with your Avactis Shopping Cart installation. Extract the contents of the archived file. The folder “flat-shipping-rates” will be created. Copy this folder to your web-server and place it in the folder avactis-templates/checkout/shipping-methods.
CheckoutPaymentMethodsSelect
The tag <?php CheckoutPaymentMethodsSelect(); ?> displays a form for entering the payment method for an order. This form is generated automatically based on the payment methods activated from within the Admin Area.
The templates used when populating the Payment Method form are stored in the folder avactis-templates/checkout/payment-methods/. Each payment method has a specific template in this folder.
For instance, the templates for the payment method PayPal are stored in avactis-templates/checkout/payment-methods/paypal/.
Downloaded templates can be easily joined with your Avactis Shopping Cart installation. Extract the contents of the archived file. The folder “payment- methods” will be created. Copy this folder to your web-server and place it in the folder avactis-templates/checkout/.
CheckoutPaymentMethodsOutput
The purpose of the CheckoutPaymentMethodsOutput block is to let the customer review the payment method he or she has chosen before proceeding to the final order placement stage. If an error is found, the customer can go back to a previous step and make the necessary corrections.
The tag <?php CheckoutPaymentMethodsOutput(); ?> displays the name of the selected payment method. This is done with the template stored in avactis-templates/checkout/payment-methods/. Each payment method has a specific template stored in this folder. For instance, the templates for the payment method PayPal are stored in avactis-templates/checkout/payment-methods/paypal/.
Downloaded templates can be easily joined with your Avactis Shopping Cart installation. Extract the contents of the archived file. The folder “payment - methods” will be created. Copy this folder to your web-server and place it in the folder avactis-templates/checkout/.
