Use the Mini Cart Include Files in Your Custom Page Template

Four ShopSite themes -- Rounded, Tab, Sidebar, and Stained Glass -- are built with custom templates, and use custom template "include" files to display the mini cart in ShopSite Pro stores. You can insert a few lines into your own custom page template to include the same files and put the mini cart on your own store pages. Because the custom template code for the mini cart already exists as "include" files, adding the mini cart is a simple process:

  1. Set a few variables near the beginning of your template.
  2. Add an [-- INCLUDE --] line in the <head> section of your page template to bring in the JavaScript for the mini cart.
  3. Add a second [-- INCLUDE --] line in the <head> section to bring in the CSS syle sheet used by the mini cart.
  4. Add the JavaScript call where you want the mini cart to appear in your page template.

Step 1: Set Variables

The mini cart display uses the values of four variables to set colors. You'll need to set these variables near the top of your page template, above the [-- INCLUDE --] tags in the following sections. Here is the list of variables with suggested settings:

[-- VAR.MiniCartColor "black" --] [-- VAR.MiniCartTextColor Page.LinkColor --] [-- VAR.MiniCartHoverColor Page.ActiveLinkColor --] [-- VAR.Media media/themesmedia --]

VAR.MiniCartColor
Sets the color of the small shopping cart graphic. The only valid values are "black" and "white." The Summary and Detail mini cart styles do not use the cart graphic, so you do not need to set this variable if you use either of those styles.
VAR.MiniCartTextColor
Sets the color of the text used in the mini cart.
VAR.MiniCartHoverColor
Sets the color of the link text when the user puts the mouse cursor on top of it. This highlight color change confirms that the text is indeed a hyperlink and not just plain text.
VAR.Media
Defines the location of the cart graphic file. The value given here is the only valid value, but you still need to define this variable in your template.

Step 2: Including the JavaScript for the Mini Cart

JavaScript functions are best defined in the <head> section of an HTML page, so place this code in that part of your page template:

[-- IF MiniCart --] [-- INCLUDE MiniCart.js PROCESS --] [-- END_IF --]

The IF tag is optional and tests for whether the merchant has enabled the mini cart. If not, the JavaScript is not added to the page, which helps keep pages from being needlessly large.

Step 3: Add the CSS Style Sheet

The HTML for the mini cart uses a CSS style sheet to format the display. You can use an [-- INCLUDE --] tag to add the style sheet to your template, like this:

[-- IF MiniCart --] [-- INCLUDE Sidebar-MiniCart.css PROCESS --] [-- END_IF --]

This tag brings in the mini cart style sheet used by the Sidebar theme. You can experiment with the style sheets for the other themes to see which one gives the best results in your page layout. These are the valid INCLUDE statements, but only use one:

Step 4: Add the JavaScript Call

All that's left to do is adding the tag to actually display the mini cart. Scroll down in your template and find the location where you want the mini cart displayed. You may want to add a table cell or some other HTML structure to define the location. Once you find the spot, add these lines:

[-- IF MiniCart --] <script LANGUAGE="javascript"> DisplayMiniCart("ss_cart_[-- STORE_Serial_Number --]","Subtotal"); </script> [-- END_IF --]

This little script calls the main JavaScript function to display the mini cart. Notice the word "Subtotal" at the end of the line -- that tells the JavaScript which mini cart style to display. You can change the style just by changing that word to any of the four display styles, but be careful to use the correct capitalization:

Step 5: Test Your Template

Save the changes to your template. If you were editing the template as a file on your computer, upload it to ShopSite. Regenerate your store and then view your store to see how the mini cart looks. You can make minor changes by changing the variable definitions for colors, or by including a different CSS file, or by trying a different mini cart display style. If you want to have greater control over the mini cart, you can copy and customize the include files.

ShopSite Help and Resource Center
February 13, 2004
Give Feedback
© 2007, ShopSite, Inc.
ShopSite Shopping Cart Software