Customizing the Shopping Cart Widget's Behavior

To use JavaScript controls, add each control as an attribute of the <script> tag that retrieves the Google Checkout shopping cart JavaScript file on your page. The HTML snippet below shows the basic <script> tag that you would use to include the JavaScript with the addition of several JavaScript customizations:

<script id="googlecart-script" type="text/javascript"
  src="http://checkout.google.com/seller/gsc/v2/cart.js?mid=MERCHANT_ID"
  currency="USD"
  highlight-time="5000"
  highlight-color="#FF7878"
  cart-opening-time="500"
  hide-cart-when-empty="true"
  close-cart-when-click-away="false"
  post-cart-to-sandbox="true">
</script>

This example uses seven JavaScript customizations:

• The currency setting specifies that prices are in U.S. dollars.
• The highlight-time setting specifies that an item should be highlighted for five seconds (5000 milliseconds) after being added to the cart.
• The highlight-color setting specifies that newly added items should be highlighted in a shade of red.
• The cart-opening-time setting indicates that the cart will take one half second (500 milliseconds) to expand and collapse.
• The hide-cart-when-empty setting indicates that the cart's top bar should not appear until an item is added to the cart. (Thus, you need to add an item to the cart to view the other customizations.)
• The close-cart-when-click-away setting specifies that once the cart contains an item, it will remain expanded even if the user clicks on the page outside of the shopping cart widget.
• The post-cart-to-sandbox setting indicates that the order is a test order that will be sent to the Checkout sandbox, a system for merchants to test Google Checkout. Sandbox orders, including payments for those orders, are not actually processed.

To see the effect of these JavaScript customizations, add the item below to the shopping cart. Note that since the value of the hide-cart-when-empty setting is true, you must add an item to the cart before the cart will display on the page.

Google T-Shirt Price: $12.99 Shipping: $4.99 Add to Cart

JavaScript Controls

Shopping Cart Widget Controls

The following controls let you modify various aspects of the shopping cart's visible behavior and appearance. Visible behavior includes cart properties that the user can see, such as the amount of time that the cart takes to expand and collapse.

Additional Shopping Cart Controls

The following controls let you customize other aspects of cart behavior that are not immediately visible to the user. For example, you can specify that the widget should use the current page URL as the product URL for any products added to the cart from that page.