Pasting Mini Cart Code Into Your Store Pages

One of the easiest ways to add the mini cart to your ShopSite Pro store is to copy one of the examples on this page and paste it into the Page Header or Footer for your store. In addition to a simple copy and paste, you will need to:

The instructions on this page will walk you through these steps. You may want to print out these instructions so that you are not having to constantly switch windows on your screen to read them.

Note:
The MiniCart uses a cookie set by the shopping cart. In order for the MiniCart to work on a store page, the shopper must have cookies enabled, and the shopping cart domain must be the same as the store page domain.

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 may want to save the file. Since it contains JavaScript code, it should have a .js extension, so you might save it with a file name like minicart.js.

ItemCount Style

Subtotal Style

Summary Style

Detail Style

2. Put In Your Store's Serial Number

In this step, you will put your store's serial number into the mini cart code.

  1. You should still have the ShopSite back office open in a browser window. Switch to that window now.
  2. Click the Preferences icon, then click Hosting Service.
  3. On the Hosting Service screen, scroll down until you see your Serial Number. Either write the number down, or select it with your mouse and copy it.
  4. Switch back to the text editing application that contains the mini cart code.
  5. If you can't see the top of the code, scroll up in the window.
  6. Look for this line, and type or paste your store serial number in place of "0000007011". Be sure to leave the quotation marks.

    var serialnum="0000007011";

  7. Save the file to save your changes.

3. Put In Your Store's Shopping Cart URL

In this step, you will put the URL to your store's shopping cart into the mini cart code.

  1. Switch back to the ShopSite back office window.
  2. Click the Merchandising Icon, then click OrderAnywhere.
  3. Select any product in the list of products -- it doesn't matter which one.
  4. Click Show Selected HTML.
  5. On the OrderAnywhere HTML screen, use your mouse to carefully select part of the second line of HTML (the line that says "View Cart" near the end). Click and drag your mouse to select everything between the quotation marks. It should start with "http" and end with "show" like this:

    http://www.mystore.com/sc/order.cgi?storeid=*1cfd55e48574687be5b7564ac9b9547f&function=show

  6. With that text selected (highlighted), type Ctrl+C (Command-C) to copy it to the clipboard.
  7. Switch back to the text editing application that contains the mini cart code.
  8. Use your mouse to select the cartURL near the top of the code, then type Ctrl+V to paste in the URL for your store. Be sure to leave the quotation marks.

    var cartURL="http://www.mystore.com/sc/order.cgi?storeid=*1a484557c5eb4b795d9463eed85a11&function=show";

  9. Save the file

4. Set Colors and Options

The default settings in the mini cart code produce black text on a transparent background. 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 "black" in this line near the top of the file with a different color name (leave the 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 textColor="black";

  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.

    var backgroundColor="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".

    4. var showCart="yes"; var cartColor="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="right";

  5. Save any changes that you've made.

5. Paste the Code into Your Store

Now that you've copied the code and customized it, you're ready to paste it into the Page Header or Footer of your ShopSite store. (You may want to put the mini cart in a page field, such as Text 3; 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 Preferences icon, then click Page Header and Footer.
  4. Click once with your mouse in either the Header or Footer field. If you already have some text in the chosen field, be sure to click before or after the text, depending on where you want the mini cart to appear. You may want to press Enter a couple of times to separate the existing text from the mini cart code (the extra lines will not show in your store pages).
  5. Type Ctrl+V to paste the code into the field.
  6. Click Save Changes.
  7. Publish your store.
  8. Click the My Store icon to view your store. You should see the mini cart display in the header or footer, and it will probably say "0 Items" or just show the "Your Shopping Cart" header.
  9. Add an item to your cart, then click the Continue Shopping button. The mini cart display should now show the updated information.

6. Make Final Adjustments and Troubleshooting

The mini cart should now be working in your store, but it may not be placed exactly where you want it or it may not look "quite right."

  1. If the mini cart still says "0 Items" after you have added items to your cart, click the Refresh or Reload button on your browser. If it still says "0 Items," check to make sure that you put the correct store serial number in at the top of the code.
  2. If you want to change the color or alignment or any other aspect of the mini cart, you should make the changes in the text editor. After you've saved the change, select the entire code and copy it to the clipboard again. Go to the Page Header or Footer field in the ShopSite back office. Select the entire code that you pasted in before and delete it. Paste in the new code.
  3. Other formatting and alignment changes will require HTML code, and are beyond the scope of the ShopSite online help.
  4. If you want to put the mini cart in one of the Text fields on one or more pages instead of in the page header or footer, simply use the Edit Page Content button with those pages and paste the code into that field. You can save time by using the PowerEdit function to put the code in all of the pages at once.
ShopSite Help and Resource Center
February 13, 2004
Give Feedback
© 2007, ShopSite, Inc.
ShopSite Shopping Cart Software