Creating a Custom Shopping Cart Template

Screen: ShopSite > Merchandising > Custom Templates

Creating a Custom Shopping Cart Template

A shopping cart template defines the layout and elements of the shopping cart pages for a store. The template actually defines five separate pages in one file:

The Shopping Cart Page
The Shipping Page (which includes billing information)
The optional Confirmation Page
The Thank You Page
The E-Mail Receipt that is sent to customers

A template contains standard HTML tags to specify the layout of each page and ShopSite custom template tags to specify the shopping cart elements that are to appear on each page, such as the shipping address and payment method.

To Create a Shopping Cart Template:

A shopping cart template uses fewer custom template tags than a page or product template. However, the amount of information produced by some of the tags can vary quite a bit, depending on options set by the merchant and selections made by the customer. Because of this, you have to construct the HTML layout carefully, and you should test your template thoroughly to make sure everything looks as expected in all situations.

1. Get Acquainted with ShopSite and the Default Shopping Cart

If you do not have experience with ShopSite, you should become somewhat familiar with it before designing a shopping cart template. Place some orders using a ShopSite demo stores to see what information is gathered and displayed on the different cart pages.

Add and remove items from the shopping cart.
Select different shipping and tax options.
Select a surcharge.
Try different payment options, such as credit card and COD.
Use the "shipping address is the same as billing address" checkbox.
Try a demo store from a merchant’s perspective and make changes to the fields under Commerce Setup > Order System, then make purchases in your store to see the effect of those changes.

2. Study the Examples

Look over the custom template specification to see the tags that are available. It will be one of your primary references while creating templates, or you can use the short version once you have the hang of it.

Study these example shopping cart templates and resulting HTML pages. You can even copy any parts of these examples and paste them into your own template.

Shopping Cart Page	Shipping Page	Confirmation Page, Thank You Page and E-Mail Receipt
Required Tags Page Colors Title, Header, and Footer Product Listing Tax and Shipping Surcharges Totals Coupons Buttons Ordering Instructions Payment Selection	Required Tags Page Colors Title, Header, and Footer Products and Totals Comments Addresses Payment E-Mail List Custom Checkout Fields Buttons	Required Tags Page Colors Title, Header, and Footer Order Number Products and Totals Ordering Instructions, Comments, and E-Mail List Addresses Payment Custom Checkout Fields Buttons

3. Create Your Template

Use an HTML authoring program or a text editor to create a shopping cart template.

You may find it easier to modify the default cart template than to start from scratch. Use the Copy ShopSite Template button to copy the sc_default template. You can then edit the template in ShopSite, or copy the template contents and paste it into your own editing program.

Give the template file a descriptive name. The file name does not need an extension.

If you use an HTML authoring program, enter the ShopSite custom template tags as plain text.

4. Upload Your Template

Once you have your template complete (or at least ready for testing), you need to upload it into your store.

From the ShopSite back office, click on Merchandising > Custom Templates.
On the Custom Templates screen, click Upload Template in the shopping cart templates section.
Use the Browse button to locate your template, then click Upload File to upload the template to your store.

You can also use FTP to upload the template to the correct directory. Keep these points in mind:

Transfer the files using ASCII mode transfer, so that the line break characters get converted from the operating system of your computer to the operating system that ShopSite is running on. Do no just copy the files over a network or via floppy.
To make the template available to a single store, copy it to the /templates/sc directory under the store's data directory. Create the directories if they don't already exist.
To make the template available to all stores in a mall, copy it to the /templates/sc directory under the ShopSite shopping cart (sc) directory.

5. Test Your Template

You probably don’t want to test your template in a live store. Create a test store in which you can place test orders to see all aspects of the shopping cart pages.

Add some products to your test store and place them on pages.
Go to your test store and add products to the shopping cart. Try different cart functions, such as removing products, changing the quantity, or emptying the cart.
Enter values in all fields on the cart pages and test all possible selections.
Enter values for all shipping and billing fields, then place additional orders and leave some fields blank.
Make sure that all information flows correctly.
Verify that the e-mail receipt is sent to the customer’s e-mail address.
View the source of each page. If the ShopSite parser did not recognize a tag, or if a database field was empty, it replaced the custom template tag with an HTML comment tag containing information about the problem, like this:

Make any necessary changes and test the template again, then tell the merchant that it is available. The merchant should be able to select the template from the Commerce Setup > Order System > Layout screen.

ShopSite Help and Resource Center
Give Feedback