Adding A Mini Cart To A Custom Template

Shopper Experience- Last updated Nov 2, 2016

If you already have a custom page template that you're using in your ShopSite Pro store, you can easily add the mini cart by just copying some code from this page and pasting it into your template. After copying in the code, you can optionally set some values to change the colors in the cart. You may want to print out these instructions so that you are not having to constantly switch windows on your screen to read them.

1. Copy and Paste the Code
In this step, you select a mini cart style and copy and paste the code for that style into a text editor.

  1. While you have this help page open in your browser, open a text editing application on your computer, such as Notepad.
  2. Select one of the four mini cart styles to use in your store (ItemCount, Subtotal, Summary, or Detail). Scroll down this page and find the text box that has the code for that style.
  3. Click once with your mouse inside the text box, then type Ctrl+A (Command-A on a Macintosh) to select all of the code in the box.
  4. Type Ctrl+C (Command-C) to copy all of the code to the clipboard.
  5. Switch to the text editing application.
  6. Type Ctrl+V (Command-V) to paste the code into the text editing application.
  7. At this point you should save the file with a file name like minicart. Since it is part of a ShopSite custom template, it does not need a file extension

ItemCount Style MiniCart Item Count 

#### YOU CAN CHANGE THESE VALUES IF NEEDED ####
[-- VAR.ShowCart "yes" --][-- VAR.MiniCartColor "black" --]
#### DON'T CHANGE ANYTHING BELOW HERE ####
<script type="text/javascript">
var cookies=document.cookie;  //read in all cookies
var start = cookies.indexOf("ss_cart_[-- STORE_Serial_Number --]=");var cartvalues = "";var linecount = 0;var start1;var end1;var tmp;
// Start Output
[-- IF VAR.ShowCart "yes" --]
  document.write("<a href=\"[-- SHOPPING_CART_URL --]\">");
  document.write("<img src=\"[-- OUTPUT_DIRECTORY_URL --]/media/themesmedia/cart-[-- VAR.MiniCartColor --].gif\" border=\"0\" name=\"cart\" align=\"top\">");
  document.write("<\/a> ");
[-- END_IF --]
if (start == -1)  //No cart cookie
{
  document.write("<a href=\"[-- SHOPPING_CART_URL --]\">0 [-- STORE.Items --]<\/a>");
}
else   //cart cookie is present
{
  start = cookies.indexOf("=", start) +1;  
  var end = cookies.indexOf(";", start);  
  if (end == -1)
  {
    end = cookies.length;
  }
  cartvalues = unescape(cookies.substring(start,end)); //read in just the cookie data
  start = 0;
  while ((start = cartvalues.indexOf("|", start)) != -1)
  {
    start++;
    end = cartvalues.indexOf("|", start);
    if (end != -1)
    {
      linecount++;
      if (linecount == 2) // Total Quantity of Items
      {
        tmp = cartvalues.substring(start,end);
        colon = tmp.indexOf(":", 0);
        document.write("<a href=\"[-- SHOPPING_CART_URL --]\">");
        document.write(tmp.substring(colon+1,end - start));
        if ((tmp.substring(colon+1,end - start)) == 1 ){document.write(" [-- STORE.Item --]");}
        else {document.write(" [-- STORE.Items --]");}
      document.write("<\/a>");
      }
      start = end;
    }
    else
      break;
    }
  }
</script>

Subtotal Style
MiniCart Subtotal 

#### YOU CAN CHANGE THESE VALUES IF NEEDED ####
[-- VAR.ShowCart "yes" --][-- VAR.MiniCartColor "black" --]
#### DON'T CHANGE ANYTHING BELOW HERE ####
<script type="text/javascript">
var cookies=document.cookie;  //read in all cookies
var start = cookies.indexOf("ss_cart_[-- STORE_Serial_Number --]=");var cartvalues = "";var linecount = 0;var start1;var end1;var tmp;
// Start Output
[-- IF VAR.ShowCart "yes" --]
  document.write("<a href=\"[-- SHOPPING_CART_URL --]\"><img src=\"[-- OUTPUT_DIRECTORY_URL --]/media/themesmedia/cart-[-- VAR.MiniCartColor --].gif\" border=\"0\" name=\"cart\" align=\"top\"><\/a> ");
[-- END_IF --]
if (start == -1)  //No cart cookie
{
  document.write("<a href=\"[-- SHOPPING_CART_URL --]\">");
  document.write("0 [-- STORE.Items --]");
  document.write("<\/a> ");
}
else   //cart cookie is present
{
  start = cookies.indexOf("=", start) +1;  
  var end = cookies.indexOf(";", start);  
  if (end == -1)
  {
    end = cookies.length;
  }
  cartvalues = unescape(cookies.substring(start,end)); //read in just the cookie data
  start = 0;
  while ((start = cartvalues.indexOf("|", start)) != -1)
  {
    start++;
    end = cartvalues.indexOf("|", start);
    if (end != -1)
    {
      linecount++;

      if (linecount == 2) // Total Quantity of Items
      {
        tmp = cartvalues.substring(start,end);
        colon = tmp.indexOf(":", 0);
        document.write("<a href=\"[-- SHOPPING_CART_URL --]\">");
        document.write(tmp.substring(colon+1,end - start));
        if ((tmp.substring(colon+1,end - start)) == 1 ){document.write(" [-- STORE.Item --]");}
        else{document.write(" [-- STORE.Items --]");}
        document.write(": ");
      }
      if (linecount == 3)  // Product Subtotal
      {
        tmp = cartvalues.substring(start,end);
        colon = tmp.indexOf(":", 0);
        document.write(tmp.substring(colon+1,end - start));
        document.write("<\/a>");
      }
      start = end;
    }
    else
      break;
    }
  }
</script>

Summary Style
MiniCart Summary 

#### YOU CAN CHANGE THESE VALUES IF NEEDED ####
[-- VAR.ShowCart "no" --][-- VAR.MiniCartColor "black" --]
#### DON'T CHANGE ANYTHING BELOW HERE ####
<script type="text/javascript">
var cookies=document.cookie;  //read in all cookies
var start = cookies.indexOf("ss_cart_[-- STORE_Serial_Number --]=");var cartvalues = "";var linecount = 0;var start1;var end1;var tmp;
// Start Output
[-- IF VAR.ShowCart "yes" --]
  document.write("<a href=\"[-- SHOPPING_CART_URL --]\"><img src=\"[-- OUTPUT_DIRECTORY_URL --]/media/themesmedia/cart-[-- VAR.MiniCartColor --].gif\" border=\"0\" name=\"cart\" align=\"top\"><\/a> ");
[-- END_IF --]
document.write("<a href=\"[-- SHOPPING_CART_URL --]\">");
document.write("[-- STORE.SC_YourShoppingCart --]");
document.write("<\/a>");
if (start == -1)  //No cart cookie
{
}
else   //cart cookie is present
{
  start = cookies.indexOf("=", start) +1;  
  var end = cookies.indexOf(";", start);  
  if (end == -1)
  {
    end = cookies.length;
  }
  cartvalues = unescape(cookies.substring(start,end)); //read in just the cookie data
  start = 0;
  while ((start = cartvalues.indexOf("|", start)) != -1)
  {
    start++;
    end = cartvalues.indexOf("|", start);
    if (end != -1)
    {
      linecount++;
      if (linecount == 2) // Total Quantity of Items
      {
        tmp = cartvalues.substring(start,end);
        colon = tmp.indexOf(":", 0);
        document.write("<br>[-- STORE.Contains --] <b>");
        document.write(tmp.substring(colon+1,end - start));
        document.write("<\/b>");
        if ((tmp.substring(colon+1,end - start)) == 1 ){document.write(" [-- STORE.Item --]");}
        else {document.write(" [-- STORE.Items --]");}
      }
      if (linecount == 3)  // Product Subtotal
      {
        tmp = cartvalues.substring(start,end);
        colon = tmp.indexOf(":", 0);
        document.write("<br>[-- STORE.Subtotal --]: <b>");
        document.write(tmp.substring(colon+1,end - start));
        document.write("<\/b>");
      }
      start = end;
    }
    else
      break;
    }
  }
</script>

Detail Style
MiniCart Detail 

#### YOU CAN CHANGE THESE VALUES IF NEEDED ####
[-- VAR.ShowCart "no" --][-- VAR.MiniCartColor "black" --]
#### DON'T CHANGE ANYTHING BELOW HERE ####
<script type="text/javascript">
var cookies=document.cookie;  //read in all cookies
var start = cookies.indexOf("ss_cart_[-- STORE_Serial_Number --]=");var cartvalues = "";var linecount = 0;var start1;var end1;var tmp;
// Start Output
document.write("<table>");
document.write("<tr>");
document.write("<th colspan=\"3\" align=\"center\">");
[-- IF VAR.ShowCart "yes" --]
  document.write("<a href=\"[-- SHOPPING_CART_URL --]\">");
  document.write("<img src=\"[-- OUTPUT_DIRECTORY_URL --]/media/themesmedia/cart-[-- VAR.MiniCartColor --].gif\" border=\"0\" name=\"cart\" align=\"top\">");
  document.write("<\/a> ");
[-- END_IF --]
document.write("<a href=\"[-- SHOPPING_CART_URL --]\">");
document.write("[-- STORE.SC_YourShoppingCart --]");
document.write("<\/a>");
document.write("<\/th><\/tr>");
if (start == -1)  //No cart cookie
{
  document.write("<\/table>");
}
else   //cart cookie is present
{
  start = cookies.indexOf("=", start) +1;  
  var end = cookies.indexOf(";", start);  
  if (end == -1)
  {
    end = cookies.length;
  }
  cartvalues = unescape(cookies.substring(start,end)); //read in just the cookie data
  start = 0;
  while ((start = cartvalues.indexOf("|", start)) != -1)
  {
    start++;
    end = cartvalues.indexOf("|", start);
    if (end != -1)
    {
      linecount++;
      if (linecount == 3)  // Product Subtotal
      {
        start1 = start;
        end1 = end;
        document.write("<tr><td>Qty<\/td>");
        document.write("<td align=\"center\">Product<\/td>");
        document.write("<td align=\"center\">Price</td><\/tr>");
      }
      if (linecount > 3)  // individual products
      {
        tmp = cartvalues.substring(start,end);
        colon = tmp.indexOf(":", 0);
        document.write("<tr>");
        document.write("<td>");
        document.write(tmp.substring(0,colon));
        document.write("<\/td><td>");
        colon2 = tmp.indexOf(":", colon+1);
        document.write(tmp.substring(colon2+1,end - start));
        document.write("<\/td><td align=\"right\">");
        document.write(tmp.substring(colon+1,colon2));
        document.write("<\/td><\/tr>");
      }
      start = end;
    }
    else
    {
      break;
    }
  } // end while loop
  //close minicart HTML
  document.write("<tr>");
  document.write("<td colspan=\"2\" align=\"right\">Subtotal<\/td>");
  document.write("<td align=\"right\">");
  tmp = cartvalues.substring(start1,end1);
  colon = tmp.indexOf(":", 0);
  document.write(tmp.substring(colon+1,end1 - start1));
  document.write("<\/td>");
  document.write("<\/tr>");
  document.write("<\/table>");
}
</script>

2. Set Colors and Options
The default settings in the mini cart code use the page link color and a transparent background colors. The ItemCount and Subtotal layouts also display a small black graphic of a shopping cart. You can follow these steps to change these colors, or you can skip this part to use the default colors.

  1. To change the color of the text in the mini cart, replace the [-- PAGE.LinkColor --] in this line near the top of the file with a color name in quotation marks. Not all color names are recognized, but most of the basic colors (such as red, green, blue, etc.) should work. You can also enter a hex RGB color value if you are familiar with that kind of color coding.
    [-- VAR.MiniCartTextColor PAGE.LinkColor --]
  2. The background color is set to "transparent," which means that the underlying colors will show through. To specify a color, replace the "transparent" in this line with a color name like you did for the text color. Or you can delete this line entirely and delete the pound sign at the beginning of the previous line to use the page background color.
    [-- VAR.MiniCartBackgroundColor "transparent" --]
  3. You can set the cart graphic to display or not, and you can set the color to either black or white. For these two lines, the only valid values are "yes" or "no" and "black" or "white".
    [-- VAR.ShowCart "yes" --] [-- VAR.MiniCartColor "black" --]
  4. By default, the mini cart display will appear on the left side of whatever space it is in. You can move the mini cart to the right side or the center if it looks better in your page layout. The only valid values in this line are "left" "right" and "center".
    [-- VAR.TextAlign "left" --]
  5. Save any changes that you've made.

3. Paste the Code into Your Template
Now that you've copied the code and customized it, you're ready to paste it into your custom page template. (You may want to save it as an "include" file, which looks cleaner but has the same end result; see the next section for instructions on how to do that.)

  1. In your text editing application, select all of the code by typing Ctrl+A, then copy it to the clipboard by typing Ctrl+C.
  2. Switch to the browser window containing the ShopSite back office.
  3. Click on the Merchandising icon, then click Custom Templates.
  4. Your template should be listed in the Page Templates section. Click on it once to select it, then click Edit Template.
  5. Scroll to the place in your template where you want the mini cart to appear and click once to put the insertion point there.
  6. If you want the mini cart to appear only if the merchant has enabled it, type these lines into your template:
    [-- IF MiniCart --] [-- END_IF MiniCart --]
    Then insert a blank line between those two lines and put the insertion point there.
  7. Type Ctrl+V to paste the code into the field.
  8. Click Save Changes.
  9. Publish your store.
  10. Click the My Store icon to view your store. You should see the mini cart display, and it will probably say "0 Items" or just show the "Your Shopping Cart" header.
  11. Add an item to your cart, then click the Continue Shopping button. The mini cart display should now show the updated information.

4. Saving Your Mini Cart Code as an Include File
Custom template "include" files make it easy to modularize your templates, which can result in cleaner code and reusable components. By saving your mini cart code as an include file, it will be easier to make changes to that code and your page template will be easier to read.

  1. In your text editing application, select all of the code by typing Ctrl+A, then copy it to the clipboard by typing Ctrl+C.
  2. Switch to the browser window containing the ShopSite back office.
  3. Click on the Merchandising icon, then click Custom Templates.
  4. Scroll down the page to the Include Files section.
  5. Click New Include.
  6. Type a name for the include file, such as "minicart," then click Create.
  7. Back on the Custom Templates screen, scroll down to the Include Files section.
  8. Select your new include file, then click Edit Include.
  9. On the Edit Custom Include File screen, select and delete the one line in the editing window.
  10. Type Ctrl+V to paste the code into the field.
  11. Click Save Changes.
  12. On the Custom Templates screen, select your page template and click Edit Template.
  13. Scroll to the place in your template where you want the mini cart to appear and click once to put the insertion point there.
  14. If you want the mini cart to appear only if the merchant has enabled it, type these lines into your template:
    [-- IF MiniCart --] [-- END_IF MiniCart --]
  15. Then insert a blank line between those two lines and put the insertion point there.
  16. Type this line (assuming that you used "minicart" as the name of your include file):
    [-- INCLUDE minicart PROCESS --]
  17. Click Save Changes.
  18. Publish your store.
  19. Click the My Store icon to view your store. You should see the mini cart display, and it will probably say "0 Items" or just show the "Your Shopping Cart" header.
  20. Add an item to your cart, then click the Continue Shopping button. The mini cart display should now show the updated information.

Non-ShopSite Template MiniCart

If you have some non-ShopSite created pages that are still at the same domain, or if you want to paste the minicart directly into a text field instead of in your template, you can use non-template populated JavaScript for the minicart.