Difference between revisions of "Standard Order Form Templates"

From WHMCS Documentation

(Disabling Feature Highlights)
(Templates)
Line 1: Line 1:
 
WHMCS includes a number of standard order form templates to choose from to provide the best ordering experience for your visitors. To select a template navigate to '''Setup > General Settings > Ordering tab'''. This page describes the various templates, for instructions customising them refer to [[Order Form Templates]].
 
WHMCS includes a number of standard order form templates to choose from to provide the best ordering experience for your visitors. To select a template navigate to '''Setup > General Settings > Ordering tab'''. This page describes the various templates, for instructions customising them refer to [[Order Form Templates]].
  
==Templates==
+
=Templates=
  
===Ajax Cart===
+
==Standard Cart==
[[File:Ajaxcartthumb.gif‎|thumb|Ajax Cart]]
 
This replaces the previous Ajax Order Form to bring together the best of both worlds - the intuitive one-page ajax order form and useful floating summary box with a fully featured shopping cart. It enables clients to order multiple products in a single order and see the total price update live as they add/remove items and adjust options/addons.
 
  
Allow Multiple Quantities and Product Bundles are not available on this template.
+
<div class="docs-alert-warning">
For technical reasons it is not possible for the PayPal Express Checkout payment gateway to be used in conjunction with this template.
+
'''Supported Features'''
  
===Comparison===
+
Headline: Yes<br />
 +
Tagline: Yes<br />
 +
Feature Highlights: Yes<br />
 +
Featured Products: Yes<br />
 +
Product Group Features: Yes<br />
 +
Number of Products: For best results 3, supports unlimited.<br />
 +
Compatible With: Six template/Bootstrap 3
 +
</div>
 +
 
 +
The default shopping cart experience in Version 6.1 and later. Compatible with all types of products.
 +
 
 +
==Premium Comparison==
 +
[[File:Premium-Comparison.png‎|thumb|Premium Comparison]]
 +
<div class="docs-alert-warning">
 +
'''Supported Features'''
 +
 
 +
Headline: Yes<br />
 +
Tagline: Yes<br />
 +
Feature Highlights: Yes<br />
 +
Featured Products: Yes<br />
 +
Product Group Features: Yes<br />
 +
Number of Products: For best results 3, supports unlimited.<br />
 +
Compatible With: Six template/Bootstrap 3
 +
</div>
 +
 
 +
Perfect for comparing a number of products/services. You should utilise the product features functionality to define comparable features/values, and ensure you have the same format/order for all descriptions of products within the group for best results.
 +
 
 +
==Pure Comparison==
 +
[[File:Pure-Comparison.png‎|thumb|Pure Comparison]]
 +
<div class="docs-alert-warning">
 +
'''Supported Features'''
 +
 
 +
Headline: Yes<br />
 +
Tagline: Yes<br />
 +
Feature Highlights: Yes<br />
 +
Featured Products: Yes<br />
 +
Product Group Features: Yes<br />
 +
Number of Products: For best results 4, supports unlimited.<br />
 +
Compatible With: Six template/Bootstrap 3
 +
</div>
 +
 
 +
Perfect for comparing a number of products/services. You should utilise the product features functionality to define comparable features/values, and ensure you have the same format/order for all descriptions of products within the group for best results.
 +
 
 +
==Cloud Slider==
 +
[[File:Cloud-Slider.png‎|thumb|Cloud Slider]]
 +
<div class="docs-alert-warning">
 +
'''Supported Features'''
 +
 
 +
Headline: Yes<br />
 +
Tagline: Yes<br />
 +
Feature Highlights: Yes<br />
 +
Featured Products: Yes<br />
 +
Product Group Features: Yes<br />
 +
Number of Products: For best results between 2 and 12, supports unlimited space permitting.<br />
 +
Compatible With: Six template/Bootstrap 3
 +
</div>
 +
 
 +
Perfect for comparing a number of products/services. You should utilise the product features functionality to define comparable features/values. For best results use 4 feature/value comparisons. and ensure you have the same format/order for all descriptions of products within the group for best results.
 +
 
 +
==Boxes==
 +
[[File:Boxesthumb.gif‎|thumb|Boxes]]
 +
<div class="docs-alert-warning">
 +
'''Supported Features'''
 +
 
 +
Headline: No<br />
 +
Tagline: No<br />
 +
Feature Highlights: No<br />
 +
Featured Products: No<br />
 +
Product Group Features: No<br />
 +
Number of Products: Unlimited<br />
 +
Compatible With: Six template/Bootstrap 3
 +
</div>
 +
 
 +
A flexible cart that is designed to work for most types of products.
 +
 
 +
==Cart==
 +
[[File:Cartthumb.gif‎|thumb|Cart]]
 +
<div class="docs-alert-warning">
 +
'''Supported Features'''
 +
 
 +
Headline: No<br />
 +
Tagline: No<br />
 +
Feature Highlights: No<br />
 +
Featured Products: No<br />
 +
Product Group Features: No<br />
 +
Number of Products: Unlimited<br />
 +
Compatible With: Five template/Bootstrap 2
 +
</div>
 +
 
 +
Replaced by the Standard Cart in 6.1. This cart is now deprecated and will no longer receive updates.
 +
 
 +
==Comparison==
 
[[File:Comparisonthumb.gif‎|thumb|Comparison]]
 
[[File:Comparisonthumb.gif‎|thumb|Comparison]]
 +
<div class="docs-alert-warning">
 +
'''Supported Features'''
 +
 +
Headline: No<br />
 +
Tagline: No<br />
 +
Feature Highlights: Yes<br />
 +
Featured Products: No<br />
 +
Product Group Features: No<br />
 +
Number of Products: For best results 4, supports unlimited.<br />
 +
Compatible With: Five template/Bootstrap 2
 +
</div>
 +
 
This visually appealing template allows you to display a comparison table of your products & services. This is done using the feature highlights method described below. Domain availability checking is handled with ajax, a live summary displays the total due for a product and recurring summary as options are selected, and the checkout page is laid out in 2 columns.
 
This visually appealing template allows you to display a comparison table of your products & services. This is done using the feature highlights method described below. Domain availability checking is handled with ajax, a live summary displays the total due for a product and recurring summary as options are selected, and the checkout page is laid out in 2 columns.
  
===Slider===
+
==Modern==
 +
[[File:Modernthumb.gif‎|thumb|Modern]]
 +
<div class="docs-alert-warning">
 +
'''Supported Features'''
 +
 
 +
Headline: No<br />
 +
Tagline: No<br />
 +
Feature Highlights: Yes<br />
 +
Featured Products: No<br />
 +
Product Group Features: No<br />
 +
Number of Products: Unlimited<br />
 +
Compatible With: Six template/Bootstrap 3
 +
</div>
 +
 
 +
A flexible cart that is designed to work for all types of products.
 +
 
 +
==Slider==
 
[[File:Sliderthumb.gif‎|thumb|Slider]]
 
[[File:Sliderthumb.gif‎|thumb|Slider]]
This template uses a slider bar for product selection. Country flags are displayed for currency selection, and feature highlight bubbles can be created to highlight the key differences between each package (see feature highlights described below). An ajax domain availability checker reduces page reloads, and an order summary is updated instantly as clients configure the products they order.
+
<div class="docs-alert-warning">
 +
'''Supported Features'''
  
It is also possible to link to the slider and preselect a product on the slider bar using a link such as this: /cart.php?pid=xxx
+
Headline: No<br />
 +
Tagline: No<br />
 +
Feature Highlights: Yes<br />
 +
Featured Products: No<br />
 +
Product Group Features: No<br />
 +
Number of Products: For best results between 2 and 12, supports unlimited space permitting.<br />
 +
Compatible With: Five template/Bootstrap 2
 +
</div>
  
===Modern===
+
This template uses a slider bar for product selection. Country flags are displayed for currency selection, and feature highlight bubbles can be created to highlight the key differences between each package (see feature highlights described below). An ajax domain availability checker reduces page reloads, and an order summary is updated instantly as clients configure the products they order.
[[File:Modernthumb.gif‎|thumb|Modern]]
 
The modern order form template is based upon the Slider template, identical in every way except for the initial product selection step. This can be used for products that don't really suit a slider based selection method should you still wish to get the look and style of the product configuration and checkout steps used in Slider.
 
  
===Web 2.0 Cart===
+
It is also possible to link to the slider and preselect a product on the slider bar using a link such as this: /cart.php?pid=xxx
[[File:Web20cartthumb.gif‎|thumb|Web 2.0 Cart]]
 
This template features generous use of white space to create a web 2.0-like appearance. Like the original cart template below, it allows clients to configure and add multiple products before checking out to pay in one single transaction.
 
  
===Cart===
+
==Verticalsteps==
[[File:Cartthumb.gif‎|thumb|Cart]]
+
[[File:Verticalstepsthumb.gif‎|thumb|Vertical Steps]]
The original cart template. This template provides a simple cart process, very flexible & easily integratable into any website design. There is little default styling to make customisation as easy as possible. It behaves like a regular shopping cart, with buttons to empty cart, and continueing shopping prior to checkout.
+
<div class="docs-alert-warning">
 +
'''Supported Features'''
  
===Boxes===
+
Headline: No<br />
[[File:Boxesthumb.gif‎|thumb|Boxes]]
+
Tagline: No<br />
This traditional order form template allows clients to order a domain & product in a form that guides the user through the process from product selection to checkout.  This template is not intended to behave like a shopping cart and so restricts the user to one product & domain in the cart at a time.
+
Feature Highlights: No<br />
 +
Featured Products: No<br />
 +
Product Group Features: No<br />
 +
Number of Products: Unlimited<br />
 +
Compatible With: Five template/Bootstrap 2
 +
</div>
  
===Vertical Steps===
+
A flexible cart that is designed to work for all types of products. This cart is now deprecated and will no longer receive further updates.
[[File:Verticalstepsthumb.gif‎|thumb|Vertical Steps]]
 
Previously named 'default', this template is predominantly aimed at web hosting sales with a guided 5 step process, highlighting the current step at each stage, and allowing the customer to order a single product & domain - it does not behave like a shopping cart.
 
  
 
==Using Feature Highlights==
 
==Using Feature Highlights==

Revision as of 18:33, 10 September 2015

WHMCS includes a number of standard order form templates to choose from to provide the best ordering experience for your visitors. To select a template navigate to Setup > General Settings > Ordering tab. This page describes the various templates, for instructions customising them refer to Order Form Templates.

Templates

Standard Cart

Supported Features

Headline: Yes
Tagline: Yes
Feature Highlights: Yes
Featured Products: Yes
Product Group Features: Yes
Number of Products: For best results 3, supports unlimited.
Compatible With: Six template/Bootstrap 3

The default shopping cart experience in Version 6.1 and later. Compatible with all types of products.

Premium Comparison

Premium Comparison

Supported Features

Headline: Yes
Tagline: Yes
Feature Highlights: Yes
Featured Products: Yes
Product Group Features: Yes
Number of Products: For best results 3, supports unlimited.
Compatible With: Six template/Bootstrap 3

Perfect for comparing a number of products/services. You should utilise the product features functionality to define comparable features/values, and ensure you have the same format/order for all descriptions of products within the group for best results.

Pure Comparison

Pure Comparison

Supported Features

Headline: Yes
Tagline: Yes
Feature Highlights: Yes
Featured Products: Yes
Product Group Features: Yes
Number of Products: For best results 4, supports unlimited.
Compatible With: Six template/Bootstrap 3

Perfect for comparing a number of products/services. You should utilise the product features functionality to define comparable features/values, and ensure you have the same format/order for all descriptions of products within the group for best results.

Cloud Slider

Cloud Slider

Supported Features

Headline: Yes
Tagline: Yes
Feature Highlights: Yes
Featured Products: Yes
Product Group Features: Yes
Number of Products: For best results between 2 and 12, supports unlimited space permitting.
Compatible With: Six template/Bootstrap 3

Perfect for comparing a number of products/services. You should utilise the product features functionality to define comparable features/values. For best results use 4 feature/value comparisons. and ensure you have the same format/order for all descriptions of products within the group for best results.

Boxes

Boxes

Supported Features

Headline: No
Tagline: No
Feature Highlights: No
Featured Products: No
Product Group Features: No
Number of Products: Unlimited
Compatible With: Six template/Bootstrap 3

A flexible cart that is designed to work for most types of products.

Cart

Cart

Supported Features

Headline: No
Tagline: No
Feature Highlights: No
Featured Products: No
Product Group Features: No
Number of Products: Unlimited
Compatible With: Five template/Bootstrap 2

Replaced by the Standard Cart in 6.1. This cart is now deprecated and will no longer receive updates.

Comparison

Comparison

Supported Features

Headline: No
Tagline: No
Feature Highlights: Yes
Featured Products: No
Product Group Features: No
Number of Products: For best results 4, supports unlimited.
Compatible With: Five template/Bootstrap 2

This visually appealing template allows you to display a comparison table of your products & services. This is done using the feature highlights method described below. Domain availability checking is handled with ajax, a live summary displays the total due for a product and recurring summary as options are selected, and the checkout page is laid out in 2 columns.

Modern

Modern

Supported Features

Headline: No
Tagline: No
Feature Highlights: Yes
Featured Products: No
Product Group Features: No
Number of Products: Unlimited
Compatible With: Six template/Bootstrap 3

A flexible cart that is designed to work for all types of products.

Slider

Slider

Supported Features

Headline: No
Tagline: No
Feature Highlights: Yes
Featured Products: No
Product Group Features: No
Number of Products: For best results between 2 and 12, supports unlimited space permitting.
Compatible With: Five template/Bootstrap 2

This template uses a slider bar for product selection. Country flags are displayed for currency selection, and feature highlight bubbles can be created to highlight the key differences between each package (see feature highlights described below). An ajax domain availability checker reduces page reloads, and an order summary is updated instantly as clients configure the products they order.

It is also possible to link to the slider and preselect a product on the slider bar using a link such as this: /cart.php?pid=xxx

Verticalsteps

Vertical Steps

Supported Features

Headline: No
Tagline: No
Feature Highlights: No
Featured Products: No
Product Group Features: No
Number of Products: Unlimited
Compatible With: Five template/Bootstrap 2

A flexible cart that is designed to work for all types of products. This cart is now deprecated and will no longer receive further updates.

Using Feature Highlights

Feature Highlights are supported by the Slider, Modern and Comparison cart templates. The idea behind these is to allow you to highlight or bring attention to certain key features of each product/service.

They are used by entering features in the format "Attribute: Value" within the product description field, one per line, starting on the first line of the description. And in the case of the Slider & Modern templates, you can also include a text description to be displayed below them.

For best results it is recommended that you make it so that all products in the same group, have the exact same attributes specified.

For example, on shared hosting products you might create a description like this:

Disk Space: 1000MB
Bandwidth: 5GB
Email Accounts: 5
Subdomains: 3
Addon Domains: 1

And a further text description can go here to be displayed below the highlights...


Disabling Feature Highlights

There may be occasions when it's desirable to disable feature highlights, such as when wishing to use colons in the product description (as these would normally be converted to a feature highlight). Edit the /templates/orderforms/*your active template*/products.tpl template file and perform these two edits:

  1. Replace {$product.featuresdesc} with {$product.description}
  2. Remove/comment out:
{foreach from=$product.features key=feature item=value}

<span class="prodfeature"><span class="feature">{$feature}</span><br />{$value}</span>
{/foreach}

Save changes and upload the files modified files. Now on the cart.php file, your products descriptions will be displayed without feature highlights.

Using Different Templates for Different Products

It is possible to specify the template you want to use for a product in the URL you use to link to the order form. And therefore by doing that you can use multiple different templates concurrently and thus use the one that best suits each product or type of product you offer.

Details on how to do this can be found in the article: Linking to WHMCS - Order Links