Difference between revisions of "Order Form Templates"

From WHMCS Documentation

(Configuring the Order Form Template)
 
(18 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 
==Introduction==
 
==Introduction==
 
+
Order Form Templates define the look and feel of the shopping cart process.
+
Order Form templates define the look and feel of the shopping cart process.
 
+
 
==Built-in Order Form Templates==
 
==Built-in Order Form Templates==
 
+
WHMCS ships with a number of order form templates.
+
WHMCS ships with several order form templates.
 
+
<div class="docs-related-pages">See [[Standard Order Form Templates]] for information on Order Form templates and functionality.</div>
+
* For information on Order Form templates and functionality, see [[Standard Order Form Templates]].
 
+
* For details of deprecated and discontinued order form templates, see [[Discontinued Order Form Templates]].
 +
 
==Configuring the Order Form Template==
 
==Configuring the Order Form Template==
 
+
Definition of Order Form templates can occur in two locations.
+
You can set Order Form templates in two locations.
 
+
The first is in '''Setup > General Settings > Ordering'''. This defines the system default order form template directory. By default, this is set to ''Standard Cart''.
+
* The '''[[Ordering Tab|Ordering]]''' tab at '''Configuration (<i class="fa fa-wrench" aria-hidden="true"></i>) > System Settings > General Settings''' or, prior to WHMCS 8.0, '''Setup > General Settings'''. This defines the system default order form template. By default, this is ''Standard Cart''.
 
+
* The product group at '''Configuration (<i class="fa fa-wrench" aria-hidden="true"></i>) > System Settings > [[Products and Services|Products/Services]]''' or, prior to WHMCS 8.0, '''Setup > Products/Services'''. To set this, create or edit a product group. Selecting an Order Form template here will override the system default when viewing that product group in the client area. It will also define the styling for the product configuration part of the order process for products and bundles within that group.
There is also an option to configure an Order Form template on a per product group basis. Done in '''Setup > Products/Services > Create/Edit Product Group'''. Selecting an Order Form template here, will override the system default when viewing that product group in the client area. As well, it will define the styling used for the product configuration part of the order process for products and bundles within that group.
+
 
+
<div class="docs-alert-warning">
<div class="docs-alert-warning">Please Note: The view cart and checkout steps will always use the default order form template. This is because the cart can contain products from many different product groups at the same time.</div>
+
The view cart and checkout steps will always use the default order form template. This is because the cart can contain products from many different product groups at the same time.
 
+
</div>
 +
 
===Dynamic Order Form Switching===
 
===Dynamic Order Form Switching===
 
+
You can also specify an order form "on the fly" using a crafted url. An order form template you specify using this method takes precedence over the system or product group order form template. This will last for the duration of the users visit.
+
You can also specify an order form using a crafted URL. An order form template that you create using this method takes precedence over the system order form template or product group order form template. This will last for the duration of the user's visit.
 
+
To do this, use an URL such as <nowiki>http://www.yourdomain.com/whmcs/?carttpl=xxxxx</nowiki>. In this URL, xxxxx is the name of the template directory.  
+
To do this, use a URL that resembles <tt>http://www.example.com/whmcs/?carttpl=xxxxx</tt>. In this URL, <tt>xxxxx</tt> is the name of the order form template directory.
 
+
<div class="docs-related-pages">See [[Linking to WHMCS]] for further information.</div>
+
For more information, see [[Linking to WHMCS]].
 
+
 
==Template Files==
 
==Template Files==
 
+
Order Form templates are located in the '''/templates/orderforms/''' directory. Each sub-directory is a different order form template. Within those directories, you will find the following files.
+
Order Form templates exist in the <tt>/templates/orderforms/</tt> directory. Each subdirectory is a different order form template. Within those directories, you will find the following files:
 
+
The names and what each of them controls is provided below.
+
* <tt>adddomain.tpl</tt> — Begins the process for domain registration-only orders (WHMCS 8.0 and earlier).
 
+
* <tt>addons.tpl</tt> — Lists the addons a user can order for their existing packages when they log in.
* products.tpl - Lists product categories and products
+
* <tt>domain-renewals.tpl</tt> — Lists domains in the client's account. This can also allow for domain renewals to in advance.
* adddomain.tpl - First step for domain registration only orders
+
* <tt>configureproductdomain.tpl</tt> — Allows domain selection for domains for a specific product.
* addons.tpl - Lists the addons a user can order for their existing packages when logged in
+
* <tt>domainoptions.tpl</tt> — For some templates, displays domain availability check results.
* domainrenewals.tpl - Lists domains in the clients account and allows for renewals to be ordered in advance
+
* <tt>checkout.tpl</tt> — Displays checkout page where visitors enter their contact and payment details.
* configureproductdomain.tpl - Domain selection for domains attached to a product
+
* <tt>common.tpl</tt> — Includes CSS elements specific to the order pages.
* domainoptions.tpl - Used by some templates to display domain availability check results
+
* <tt>complete.tpl</tt> — Displays at the end of the checkout process.
* configureproduct.tpl - Configure the product before adding to the cart eg. billing cycle, configurable options, custom fields
+
* <tt>configureproduct.tpl</tt> — Configures the product before adding it to the cart (for example, the billing cycle, configurable options, or custom fields).
* configuredomains.tpl - Choose domain addons, complete custom field requirements & custom nameservers
+
* <tt>configuredomains.tpl</tt> — Chooses domain addons, complete custom field requirements, and custom nameservers.
* ordersummary.tpl - Used to display cart contents and product total summaries during order process
+
* <tt>domainregister.tpl</tt> — Domain searching and suggestions.
* viewcart.tpl - Showing cart contents & checkout process
+
* <tt>domaintransfer.tpl</tt> — Domain transfers eligibility check and EPP code provision.
* login.tpl - Used for login for existing users
+
* <tt>error.tpl</tt> — An error page that's specific to the cart process.
* complete.tpl - This page is showed at the end of the checkout process
+
* <tt>fraudcheck.tpl</tt> — Displayed if the client fails a fraud check.
 
+
* <tt>linkedaccounts.tpl</tt> — Includes any activated Social [[Sign-In Integrations]].
 +
* <tt>login.tpl</tt> — Displays the login page for existing users (WHMCS 8.0 and earlier).
 +
* <tt>marketconnect-promo.tpl</tt> — Promotes [[MarketConnect]] products when the client views the cart (WHMCS 7.6 and later).
 +
* <tt>ordersummary.tpl</tt> — Displays cart contents and product total summaries during the order process.
 +
* <tt>products.tpl</tt> — Lists product categories and products.
 +
* <tt>sidebar-categories.tpl</tt> — A sidebar that lists group or contextual product information.
 +
* <tt>sidebar-categories-collapsed.tpl</tt> — The <tt>sidebar-categories.tpl</tt> sidebar, collapsed for a smaller viewport.
 +
* <tt>viewcart.tpl</tt> — Displays cart contents, tax estimators, and promotion code applicators.
 +
 
==Creating a Custom Order Form Template==
 
==Creating a Custom Order Form Template==
 
+
So you want to create your own order form template. Nice!
+
To create a custom order form template:
 
+
   
'''Step 1:''' Choose a name - The first step is to create a custom folder to store your custom templates files in so that they are not overwritten or lost when upgrading. Names must be alphanumeric, all lowercase and you may use underscores.
+
# Choose a name. The first step is to create a custom folder to store the custom order form template files. This ensures they are not overwritten or lost when upgrading. Names must be alphanumeric, all lowercase, and may use underscores.
 
+
# Decide how to create your order form template. If you are running WHMCS 6.1 and later, we recommend using the parent relationships method (see below). For earlier versions of WHMCS, copy all the order form template files from an existing order form template folder. You can then use these as a starting point for the custom order form.
'''Step 2:''' Decide how you will create your template - if running 6.1 and later, we recommend using the parent relationships method (see below). For any earlier versions of WHMCS however, or simply if you prefer, you will need to copy all of the template files from one of the existing order form template folders to use as a starting point for your custom order form process.
+
 
 
 
===Parent Relationships===
 
===Parent Relationships===
 
+
In an effort to make upgrading and maintaining order form customisations easier, Order Form templates support the concept of parent/child relationships. What this allows is to create an order form that inherits template files from another directory, eliminating the need to create a custom copy of all twelve template files. Only the pages you wish to customise need be created, the rest will then automatically be loaded from the parent order form when defined.
+
To make upgrading and maintaining order form template customisations easier, Order Form templates support parent-child relationships. This allows an order form that inherits template files from another directory. It will end the need to create a custom copy of all of the template files. Only create the pages that need customisation. The remaining order form templates will then load from the parent order form when you define them.
 
+
By leveraging this functionality, you can create templates that are simpler and easier to maintain and keep up-to-date as any changes made to template files that you haven't customised, and that exist only within the parent order form template, are automatically updated any time you upgrade.
+
By leveraging this functionality, a developer can create order form templates that are simple and easy to maintain. When you upgrade, the system updates any changes to order form template files that aren't customised.
 
+
This is most simply illustrated by way of an example:
+
For example, the '''Standard Cart''' order form template is the parent for the '''Premium Comparison''' order form template. '''Premium Comparison''' consists only of a <tt>products.tpl</tt> order form template file. So, all other steps of the order process use order form templates and design from '''Standard Cart'''.
 
+
The ''Standard Cart'' order form template is the parent order form for the ''Premium Comparison'' order form template. Therefore since the Premium Comparison consists of only a products.tpl template file, all other steps of the order process for products and groups assigned to that order form template use the templates and design/styling as provided by the Standard Cart.
 
 
 
 
<div class="docs-alert-info">
 
<div class="docs-alert-info">
<span class="title">TIP: </span><br />
+
<span class="title">Template Locations</span><br />
* The "Standard Cart" order form template is selected under '''Setup > General Settings > Ordering tab'''.
+
* '''Standard Cart''' is in the '''[[Ordering Tab|Ordering]]''' tab at '''Configuration (<i class="fa fa-wrench" aria-hidden="true"></i>) > System Settings > General Settings''' or, prior to WHMCS 8.0, '''Setup > General Settings'''.
* Then the "Premium Comparison" order form is selected for the product groups for which we wish to use its product selection page '''Setup > Products/Services > Products/Services > Edit Group'''.
+
* '''Premium Comparison''' is for the product groups that will use its product selection page at '''Configuration (<i class="fa fa-wrench" aria-hidden="true"></i>) > System Settings > [[Products and Services|Products/Services]]''' or, prior to WHMCS 8.0, '''Setup > Products/Services > Products/Services'''.
 
</div>
 
</div>
 
+
 
===Creating a New Template based on a Parent===
 
===Creating a New Template based on a Parent===
 
+
<div class="docs-alert-info">The following is supported in WHMCS 6.1.0 and later only.</div>
+
<div class="docs-alert-info">
 
+
We only support this in WHMCS 6.1.0 and later.
Once you have created a new template directory with your desired name, to define a parent relationship, you need to create a YAML file within the new template directory you just created that specifies the parent template it is based upon.  This yaml file should be named ''theme.yaml''' and include the following content:
+
</div>
 
+
[[File:Order-theme-yaml-file.png]]
+
After creation of a custom order form template, you must specify the parent order form template. To do this, create a YAML file within the new directory. Name the YAML file <tt>theme.yaml</tt> and include the following code:
 
+
In the above example, "standard_cart" is the name of the parent template we're using.
+
<div class="source-cli">
 
+
<br/>config:
At this stage your new order form template is ready to be used and can be activated and used either via the Ordering tab of General Settings, or by selecting the custom order form template name within the configuration area for a specific product group.
+
<br/>    parent: standard_cart
 
+
</div>
Now let's look at how we would customise a step of the order process.
+
 
+
In the above example, <tt>standard_cart</tt> is the name of the parent template we're using.
#Begin by identifying the name of the template file that controls the step of the process you want to customise (see the list above).
+
#Next, copy that template file from the defined parent template to your new template directory
+
At this stage, the new order form template is ready. You can activate it in the '''[[Ordering Tab|Ordering]]''' tab at '''Configuration (<i class="fa fa-wrench" aria-hidden="true"></i>) > System Settings > General Settings''' or, prior to WHMCS 8.0, '''Setup > General Settings'''. You can also now select the custom Order Form template name within the configuration area for a specific product group.
#Now make your desired changes to the copy of the template within your custom template directory
+
#Finally enable your new order form to see it in action and you will find the step you customised is loaded from your custom template directory, while all other steps are loaded from and act as per the parent.
+
If you want to customize a step in the ordering process, follow these steps:
##Typically the parent template would be the system default (Setup > General Settings > Ordering tab).
+
##Your custom template would then be selected on the product groups for which it to be used (Setup > Products/Services > Products/Services > Edit Group).
+
# Identify the order form template file that controls the step you want to customize.
 
+
# Copy that order form template file from the defined parent order form template to the new directory.
 +
# Make the desired changes to the copy within the custom order form template directory.
 +
# Enable the new order form template. The custom order form template will load the step that has had customization. Other steps will load from the parent order form template. Usually, the parent order form template is the system default in the '''[[Ordering Tab|Ordering]]''' tab at '''Configuration (<i class="fa fa-wrench" aria-hidden="true"></i>) > System Settings > General Settings''' or, prior to WHMCS 8.0, '''Setup > General Settings'''.
 +
 +
Then, select the custom order form template in the necessary product groups in '''Configuration (<i class="fa fa-wrench" aria-hidden="true"></i>) > System Settings > [[Products and Services|Products/Services]]''' or, prior to WHMCS 8.0, '''Setup > Products/Services > Products/Services'''.
 +
 
==Third Party Order Conversion/Affiliate Tracking==
 
==Third Party Order Conversion/Affiliate Tracking==
 
+
When checkout is completed and the customer makes payment for their order, they get returned to the order completed page. This page is controlled by the complete.tpl template file in your active order template folder.  So if you want to use a third party order conversion tracking or affiliate system and need to execute javascript after checkout, then you will need to insert code into this file.
+
After checkout and payment, a client will see the '''Order Completed''' page. The <tt>complete.tpl</tt> file in the active order form template directory controls this. This file contains an <tt>{if $ispaid}{/if}</tt> section, as in the example below. Code inside those tags runs once a customer pays for an order. Code outside runs regardless of payment status.
 
+
This file contains an {if $ispaid}{/if} section as below so you can put code either inside those tags so that it only runs once an order has been paid for, or outside them so it runs regardless of payment status.
 
 
 
 
<source lang="php">
 
<source lang="php">
 
{if $ispaid}
 
{if $ispaid}
 
Enter any HTML code which needs to be displayed once a user has
 
Enter any HTML code which needs to be displayed once a user has
completed the checkout of their order here - for example
+
completed the checkout of their order here - for example
 
conversion tracking and affiliate tracking scripts
 
conversion tracking and affiliate tracking scripts
 
{/if}
 
{/if}
 
</source>
 
</source>
 
+
You can use variables including {$orderid} {$ordernumber} and {$amount} where necessary to fill in order details.
+
<div class="docs-alert-info">
 +
Many variables, including <tt>{$orderid}</tt>, <tt>{$ordernumber}</tt>, and <tt>{$amount}</tt>, are available. Use these where necessary to fill in order details.
 +
</div>

Latest revision as of 20:53, 26 April 2022

Introduction

Order Form templates define the look and feel of the shopping cart process.

Built-in Order Form Templates

WHMCS ships with several order form templates.

Configuring the Order Form Template

You can set Order Form templates in two locations.

  • The Ordering tab at Configuration () > System Settings > General Settings or, prior to WHMCS 8.0, Setup > General Settings. This defines the system default order form template. By default, this is Standard Cart.
  • The product group at Configuration () > System Settings > Products/Services or, prior to WHMCS 8.0, Setup > Products/Services. To set this, create or edit a product group. Selecting an Order Form template here will override the system default when viewing that product group in the client area. It will also define the styling for the product configuration part of the order process for products and bundles within that group.

The view cart and checkout steps will always use the default order form template. This is because the cart can contain products from many different product groups at the same time.

Dynamic Order Form Switching

You can also specify an order form using a crafted URL. An order form template that you create using this method takes precedence over the system order form template or product group order form template. This will last for the duration of the user's visit.

To do this, use a URL that resembles http://www.example.com/whmcs/?carttpl=xxxxx. In this URL, xxxxx is the name of the order form template directory.

For more information, see Linking to WHMCS.

Template Files

Order Form templates exist in the /templates/orderforms/ directory. Each subdirectory is a different order form template. Within those directories, you will find the following files:

  • adddomain.tpl — Begins the process for domain registration-only orders (WHMCS 8.0 and earlier).
  • addons.tpl — Lists the addons a user can order for their existing packages when they log in.
  • domain-renewals.tpl — Lists domains in the client's account. This can also allow for domain renewals to in advance.
  • configureproductdomain.tpl — Allows domain selection for domains for a specific product.
  • domainoptions.tpl — For some templates, displays domain availability check results.
  • checkout.tpl — Displays checkout page where visitors enter their contact and payment details.
  • common.tpl — Includes CSS elements specific to the order pages.
  • complete.tpl — Displays at the end of the checkout process.
  • configureproduct.tpl — Configures the product before adding it to the cart (for example, the billing cycle, configurable options, or custom fields).
  • configuredomains.tpl — Chooses domain addons, complete custom field requirements, and custom nameservers.
  • domainregister.tpl — Domain searching and suggestions.
  • domaintransfer.tpl — Domain transfers eligibility check and EPP code provision.
  • error.tpl — An error page that's specific to the cart process.
  • fraudcheck.tpl — Displayed if the client fails a fraud check.
  • linkedaccounts.tpl — Includes any activated Social Sign-In Integrations.
  • login.tpl — Displays the login page for existing users (WHMCS 8.0 and earlier).
  • marketconnect-promo.tpl — Promotes MarketConnect products when the client views the cart (WHMCS 7.6 and later).
  • ordersummary.tpl — Displays cart contents and product total summaries during the order process.
  • products.tpl — Lists product categories and products.
  • sidebar-categories.tpl — A sidebar that lists group or contextual product information.
  • sidebar-categories-collapsed.tpl — The sidebar-categories.tpl sidebar, collapsed for a smaller viewport.
  • viewcart.tpl — Displays cart contents, tax estimators, and promotion code applicators.

Creating a Custom Order Form Template

To create a custom order form template:

  1. Choose a name. The first step is to create a custom folder to store the custom order form template files. This ensures they are not overwritten or lost when upgrading. Names must be alphanumeric, all lowercase, and may use underscores.
  2. Decide how to create your order form template. If you are running WHMCS 6.1 and later, we recommend using the parent relationships method (see below). For earlier versions of WHMCS, copy all the order form template files from an existing order form template folder. You can then use these as a starting point for the custom order form.

Parent Relationships

To make upgrading and maintaining order form template customisations easier, Order Form templates support parent-child relationships. This allows an order form that inherits template files from another directory. It will end the need to create a custom copy of all of the template files. Only create the pages that need customisation. The remaining order form templates will then load from the parent order form when you define them.

By leveraging this functionality, a developer can create order form templates that are simple and easy to maintain. When you upgrade, the system updates any changes to order form template files that aren't customised.

For example, the Standard Cart order form template is the parent for the Premium Comparison order form template. Premium Comparison consists only of a products.tpl order form template file. So, all other steps of the order process use order form templates and design from Standard Cart.

Template Locations

  • Standard Cart is in the Ordering tab at Configuration () > System Settings > General Settings or, prior to WHMCS 8.0, Setup > General Settings.
  • Premium Comparison is for the product groups that will use its product selection page at Configuration () > System Settings > Products/Services or, prior to WHMCS 8.0, Setup > Products/Services > Products/Services.

Creating a New Template based on a Parent

We only support this in WHMCS 6.1.0 and later.

After creation of a custom order form template, you must specify the parent order form template. To do this, create a YAML file within the new directory. Name the YAML file theme.yaml and include the following code:


config:
parent: standard_cart

In the above example, standard_cart is the name of the parent template we're using.

At this stage, the new order form template is ready. You can activate it in the Ordering tab at Configuration () > System Settings > General Settings or, prior to WHMCS 8.0, Setup > General Settings. You can also now select the custom Order Form template name within the configuration area for a specific product group.

If you want to customize a step in the ordering process, follow these steps:

  1. Identify the order form template file that controls the step you want to customize.
  2. Copy that order form template file from the defined parent order form template to the new directory.
  3. Make the desired changes to the copy within the custom order form template directory.
  4. Enable the new order form template. The custom order form template will load the step that has had customization. Other steps will load from the parent order form template. Usually, the parent order form template is the system default in the Ordering tab at Configuration () > System Settings > General Settings or, prior to WHMCS 8.0, Setup > General Settings.

Then, select the custom order form template in the necessary product groups in Configuration () > System Settings > Products/Services or, prior to WHMCS 8.0, Setup > Products/Services > Products/Services.

Third Party Order Conversion/Affiliate Tracking

After checkout and payment, a client will see the Order Completed page. The complete.tpl file in the active order form template directory controls this. This file contains an {if $ispaid}{/if} section, as in the example below. Code inside those tags runs once a customer pays for an order. Code outside runs regardless of payment status.

{if $ispaid}
Enter any HTML code which needs to be displayed once a user has
completed the checkout of their order here - for example
conversion tracking and affiliate tracking scripts
{/if}

Many variables, including {$orderid}, {$ordernumber}, and {$amount}, are available. Use these where necessary to fill in order details.