Copy and Customize the Mini Cart Include Files

The mini cart is created from two "include" files:

• MiniCart.js - the JavaScript code that reads the cart values from a browser cookie and formats the mini cart display
• A Cascading Style Sheet (CSS) that defines colors and alignment for the mini cart. (There are actually four CSS files, one for each of the Rounded, Tab, Sidebar, and Stained Glass themes, but they are all pretty similar.)

You can copy either of these include files and make changes to suit your needs, and then include your changed versions in your page template for ShopSite Pro stores. You should be comfortable with JavaScript before editing the MiniCart.js file, and you should be comfortable with CSS before editing the style sheet. If you do not have experience in these areas, you should choose one of the other methods for adding the mini cart to your store.

Possible Changes

You are, of course, free to make any changes that you desire and your technical skills allow. However, here are some changes that you might want to consider:

• Hard-code some variable definitions.
• Change style definitions in the CSS style sheet to change the look of the mini cart.
• Remove unnecessary style definitions in the CSS style sheet. For example, if you are not using the Detail mini cart style, you do not need any of the table, td, tr, and td definitions.
• Remove unnecessary JavaScript code. The MiniCart.js file contains the code required to produce all four display styles, plus some code for processing information in the cookie that is not used by any of the display styles. You will probably only use one display style, so you can remove the extra code. Be careful, though, as the code for the four styles is intermixed with if conditions. The four styles are already available as individual JavaScript files and individual include files on other help pages, and you can just copy and paste those.
• Create your own mini cart display style. It's probably easiest to take one of the individual include files and start there.

Step 1: Variables

The mini cart display uses the values of four variables to set colors. You can either set these variables near the top of your page template, or you can hard-code values in the JavaScript and CSS code where you see these variables. 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: Copying the Include Files

You can copy the include files used by the mini cart (and any ShopSite template files) in a few easy steps:

1. In the ShopSite back office, click on Merchandising, then Custom Templates.
2. Scroll down the screen to the Include Files section.
3. Click Copy ShopSite Include.
4. In the list of Global Files, scroll down and click on MiniCart.js.
5. Type in a new name for the file, such as minicart. (You cannot give the copied file the same name as the original file.)
6. Repeat the above steps to copy the Sidebar-MiniCart.css file or the equivalent file for one of the other themes. You might want to name it minicart.css

Step 3: Edit the Include Files

You can edit the include files in the ShopSite back office, or you can copy the contents of a file and paste it into an editor on your computer and then upload the changed file.

1. On the Custom Templates screen, scroll down to the Include Files section.
2. Click name of the include file that you want to edit, then click Edit Include.
3. If you are editing the file in ShopSite, simply make any changes desired and then click Save Changes.
4. To copy the file to your computer:
   1. Click once in the editing window.
   2. Click Edit > Select All in the browser menus (or type Ctrl+A).
   3. Click Edit > Copy (or Ctrl+C).
   4. Paste the code into an editing application on your computer.
   5. When you have finished editing, either copy and paste the revised code back into the editing window in ShopSite, or save your file and then upload it to ShopSite.

Step 4: Including the JavaScript for the Mini Cart

JavaScript functions are best defined in the <head> section of an HTML page. Once you have finished any changes to the mini cart JavaScript, place this code in the <head> part of your page template (assuming you used minicart as the name of your include file):

[-- IF MiniCart --] [-- INCLUDE minicart 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

Once you have made changes to the CSS file for the mini cart, you should include it in the <head> section of your template, like this:

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

Step 5: Add the JavaScript Call

All that's left to do is adding the tag that calls your JavaScript and displays 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 lines like this:

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

This example assumes that you have not changed the name of the function and that the function still takes two parameters. The first parameter is the cookie name (which includes the store serial number), and the second parameter identifies which mini cart style to display.

Step 6: 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. Add one or more products to your cart and make sure the mini cart display updates correctly.

ShopSite Help and Resource Center February 13, 2004 Give Feedback

© 2007, ShopSite, Inc. ShopSite Shopping Cart Software