Annotating Pages with Product Data

To use the Google Checkout shopping cart, you need to annotate your web page's HTML tags with CSS class names that identify information about your products to the JavaScript. For example, in the simple example below, the product class encapsulates HTML for a particular product. In turn, the product-image, product-title and product-price classes identify the portion of the HTML that contains the product's image, title and price, respectively.

<div class="product">
  <img class="product-image" src="http://www.example.com/image1.jpg"/><br/>
  <span class="product-title">Blue T-shirt</span><br/>
  <span class="product-price">$12.99</span><br/>
</div>

This page contains the following information:

• The Product Annotation Examples section provides several examples that demonstrate how to annotate an HTML page to identify product information to the Google Checkout shopping cart. The following list identifies the examples in this section:

  • Specifying basic product information
  • Adding custom attribute information
  • Letting users customize a product before adding it to the shopping cart
  • Updating page content based on selected product attributes

• The Identifying Product Information section contains a full list of all of the CSS classes that you can use to identify product information to the shopping cart.

• The Adding an Item to the Shopping Cart section explains the CSS annotations that let your customer add an item to the shopping cart.

Product Annotation Examples

The following examples illustrate several product annotation examples. Each example shows an image of a page that displays a T-shirt that can be added to a shopping cart. The HTML snippet below each image includes shows the class names that identify the product information that appears on the web page and in the shopping cart widget. Please note that the HTML examples do not include elements that only affect page layout, such as <table>, <td> or <br> tags.

Example 1: Specifying basic product information

This example shows a simple annotation with a product image, product title, product price, shipping cost and add-to-cart button.

This example uses the following HTML:

<div class="product">
  <img class="product-image" src="files/google_tshirt.jpg"/>
  <span class="product-title">Google T-shirt</span>
  Price: <span class="product-price">$12.99</span>
  Shipping: <span class="product-shipping">$4.99</span>
  <div  role="button" alt="Add to cart" tabindex="0" class="googlecart-add-button">
  </div>
</div>

Example 2: Adding custom attribute information

The Google Checkout shopping cart allows you to define as many custom attributes as you want for a product. For example, you could use custom attributes to specify the color of a T-shirt or a topping for a pizza.

To define a custom attribute, identify the attribute value using a CSS class named product-attr-XXX where XXX is the name of the attribute. Attribute names should be short – either one or two words – and may not contain spaces. If the attribute name is multiple words, use hyphens to separate the words – e.g. product-attr-release-date. For example, the following HTML snippet indicates to the shopping cart that the corresponding item is blue:

<span class="product-attr-color">Blue</span>

The example below adds two custom attributes to the annotation shown in example 1. In the shopping cart widget, the color and size values both appear below the product title. As shown in the image below, the custom attribute values are separated by commas ("blue, XL").

This example uses the following HTML:

<div class="product">
  <img class="product-image"
    src="files/google_tshirt.jpg"/>
  <span class="product-title">Google T-shirt</span>
  Price: <span class="product-price">$12.99</span>
  Shipping: <span class="product-shipping">$4.99</span>
  Size: <span class="product-attr-size">XL</span>
  Color: <span class="product-attr-color">blue</span>
  <div  role="button" alt="Add to cart" tabindex="0" class="googlecart-add-button">
  </div>
</div>

Example 3: Letting users customize a product before adding it to the shopping cart

You can enable your customer to specify certain product attributes before adding the product to the shopping cart. For example, if you sell clothing, you might want to let the customer choose the appropriate size of each item before adding it to the cart.

This example shows how to use custom attributes to let the user select the size and color of a T-shirt.

This example uses the following HTML:

<div class="product">
  <img class="product-image"
    src="files/google_tshirt.jpg"/>
  <span class="product-title">Google T-shirt</span>
  Price: <span class="product-price">$12.99</span><br/>
  Shipping: <span class="product-shipping">$4.99</span>

  <!-- The shopping cart automatically adds the selected color -->
  Color: <br/>
    <input class="product-attr-color" name="color" type="radio" value="blue"/> blue<br/>
    <input class="product-attr-color" name="color" type="radio" value="green"/> green<br/>
    <input class="product-attr-color" name="color" type="radio" value="red"/> red<br/>

  <!-- The shopping cart automatically adds the selected size -->
  Size: <select class="product-attr-size">
          <option>Small</option>
          <option>Medium</option>
          <option>Large</option>
          <option>X-Large</option>
        </select> 
  <div role="button" alt="Add to cart" tabindex="0" class="googlecart-add-button">
  </div> 
</div>

Example 4: Updating page content based on selected product attributes

This example shows how to define special rules that are applied when the user selects particular product attributes. This example adds a rule to the previous example that states that if the customer selects to buy an XL-sized T-shirt, the price for the shirt will be $14.99 instead of $12.99. To implement this rule, each option in the product-attr-size select menu uses the googlecart-set-product-price attribute to specify the price of that shirt size.

To use this functionality, add an attribute of the form googlecart-set-XXX="replacement value" to the element that triggers the change. In the attribute name, replace XXX with the name of the CSS class associated with the value is being updated. If that attribute is selected, the shopping cart JavaScript will use the replacement value that you have specified as the value of the element that uses the CSS class. For example, the googlecart-set-product-price attribute in the following HTML tag indicates that if the customer selects the X-Large size, then the price should be set to $14.99.

<option googlecart-set-product-price="$14.99">X-Large</option>

This example uses the following HTML:

<div class="product">
  <img class="product-image"
    src="files/google_tshirt.jpg"/>
  <div class="product-title">Google T-shirt</div>
  Price: <span class="product-price">$12.99</span><br/>
  Shipping: <span class="product-shipping">$4.99</span>
  Color: <br/>
    <input class="product-attr-color" name="color" type="radio" value="blue"/> blue<br/>
    <input class="product-attr-color" name="color" type="radio" value="green"/> green<br/>
    <input class="product-attr-color" name="color" type="radio" value="red"/> red<br/>
  Size: <select class="product-attr-size">
          <option googlecart-set-product-price="$12.99">Small</option>
          <option googlecart-set-product-price="$12.99">Medium</option>
          <option googlecart-set-product-price="$12.99">Large</option>
          <option googlecart-set-product-price="$14.99">X-Large</option>
        </select><br/><br/>
 <div role="button" alt="Add to cart" tabindex="0" class="googlecart-add-button">
 </div> 
</div>

Identifying product information

The following table summarizes the CSS class names that you can use to provide product information:

The following guidelines apply to the product information that you specify:

• Any HTML element annotated with one of these CSS classes can also contain other classes for CSS or other purposes.

• A single product should not contain multiple elements annotated with the same standard product keyword. (All of the keywords in the list above are for standard product classes except for the product-attr-XXX class.

• A single product may contain multiple elements annotated with the same custom keyword. The Google Checkout shopping cart JavaScript will set the value for that keyword to be a comma-separated list of the values of those elements.

  For example, if a product node – e.g. <div class="product"> – has two child nodes with the class product-attr-artist, then when the item is added to the shopping cart, the item's artist property will be set to the value of both child nodes separated by a comma.

  If the elements that contain the same custom keyword are checkboxes, radio buttons or options in a select menu, then the comma-separated list will only contain the values of the selected elements. For example, if a restaurant lets a customer select toppings for a pizza and then add the pizza to the shopping cart, the shopping cart will only list the selected toppings.

Adding an Item to the Shopping Cart

The following CSS class names identify elements on your web page that a customer can click to add an item to the shopping cart. Each item should contain an HTML element annotated with one of these CSS class names: