Using Google Shopping Cart: Custom Product Attributes and JavaScript

Custom Product Attributes and JavaScript

It's easy to add custom product attributes to items using "product-attr-xxx". Custom attributes are added as comma separated values to your item description in the Google Shopping Cart. But what if you need to identify what they actually refer to?

The sample below is such a case. In each product below, you will need to know where to print the text provided by your customer. A string of comma separated values is insufficient.

This sample shows one way of accomplishing this.
Note that this expands on the same sample code provided in this web site. As such it may contain other functions/features not necessarily relevant to this topic.

PayCircuit T-shirt
Price: $29.99
Color: Black
Brand: Paycircuit
Description The best shirt ever

Text to print on front:
Text to print on back:
Text to print on sleeves:

PayCircuit Coffee Mug
Price: $5.99

Text to print around mug:
Text to print on bottom of mug:

Source/Reference

JavaScript

This should be in <head> of your HTML file, or you can create a .js file and reference it for easier management.

This code:

Modifies the product-attr-xxx text to allow you to identify each attribute
Important Notes:
- Using this code prevents the Cart script from identifying the same item that already exists in the cart. That is, if the add to cart button for the same item is clicked, a new line item is added to the cart instead of increasing quantity.
- Be aware of possible truncation: Maximum number of characters is unknown at this time. Limiting number of characters for text input is highly recommneded. See HTML source below for samples.
- Only attributes with values set are "captured". That is, if no text is provided, the attribute is not used.

<script type="text/javascript">

    function googlecartBeforeAdd(item) {
        //Get all the attributes of the item added to cart        
        var attribs = item.getCustomAttributes();

        for (var i in attribs) {
            //Obtain attributes with values
            //and use attribute name: value for text value
            if (attribs[i] != "") {
                var attr_val = i + ": " + attribs[i];
                item.setCustomAttribute(i, attr_val);
            }
        }
        return true;
    } 
        
</script>

HTML

This sample should be within your <body>. Note that this makes use of the Google Checkout Shopping Cart (v. 2_2).

Copy the code below and modify the following for this to work:

Provide your own Merchant ID (replace the mid=000000000000000 with your own merchant ID)
post-cart-to-sandbox="true" is for Sandbox testing with your Sandbox Merchant ID
post-cart-to-sandbox="false" for production/live use with your Production Merchant ID

Usage Tips:

As stated, controlling maximum number of characters for text boxes is recommended. This sample limits text entry to 50 characters (maxlength="50").
Use short descriptive attributes: i.e. product-attr-sleeves, product-attr-text-bottom. They are used to identify the value:
sleeves: text on sleve
text-bottom: Hello, World

<div class="product">
    <span class="product-title">PayCircuit T-shirt</span>
    <br />
    Price: <span class="product-price">$29.99</span>
    <br />
    Color: <span class="product-attr-color">Black</span>
    <br />
    Brand: <span class="product-attr-brand">Paycircuit</span>
    <br />
    Description <span class="product-description">The best shirt ever</span>
    <ul>
        <li>Text to print on front:
        <input class="product-attr-front" type="text" maxlength="50" /></li>
        <li>Text to print on back:
        <input class="product-attr-back" type="text" maxlength="50" /></li>
        <li>Text to print on sleeves:
        <input class="product-attr-sleeves" type="text" maxlength="50" /></li>
    </ul>
    <input class="product-weight" type="hidden" value="1" />
    <div class="googlecart-add-button">
    </div>
</div>

<div class="product" style="margin-top: 30px;">
    <span class="product-title">PayCircuit Coffee Mug</span>
    <br />
    Price: <span class="product-price">$5.99</span>
    <ul>
        <li>Text to print around mug:
        <input class="product-attr-text-around" type="text" maxlength="50" /></li>
        <li>Text to print on bottom of mug:
        <input class="product-attr-text-bottom" type="text" maxlength="50" /></li>
    </ul>
    <input class="product-weight" type="hidden" value="2" />
    <div class="googlecart-add-button">
    </div>
</div>

<form id="googlecart-checkout-config">

    <input type="hidden" name="ccs_company_1" value="UPS" />
        <input type="hidden" name="ccs_shipping_type_1" value="Ground" />
        <input type="hidden" name="ccs_price_1" value="9.00" />
        <input type="hidden" name="ccs_company_2" value="UPS" />
        <input type="hidden" name="ccs_shipping_type_2" value="3 Day Select" />
        <input type="hidden" name="ccs_price_2" value="18.00" />
        <input type="hidden" name="ccs_package_ship_from_id_1" value="PayCircuit" />
        <input type="hidden" name="ccs_package_ship_from_city_1" value="San Francisco " />
        <input type="hidden" name="ccs_package_ship_from_region_1" value="CA" />
        <input type="hidden" name="ccs_package_ship_from_country_1" value="US" />
        <input type="hidden" name="ccs_package_ship_from_postal_code_1" value="94111" />
        
        <!-- 5% additional charge to to UPS Ground  which is ccs_shipping_type_1 -->
        <input type="hidden" name="checkout-flow-support.merchant-checkout-flow-support.shipping-methods.carrier-calculated-shipping-1.carrier-calculated-shipping-options.carrier-calculated-shipping-option-1.additional-variable-charge-percent" value="5" />
        
        <!-- 2% additional charge to UPS 3 Day Select which is ccs_shipping_type_2 -->
        <input type="hidden" name="checkout-flow-support.merchant-checkout-flow-support.shipping-methods.carrier-calculated-shipping-1.carrier-calculated-shipping-options.carrier-calculated-shipping-option-2.additional-variable-charge-percent" value="2" />

</form>

<!-- replace mid with your merchant id -->
<!-- set post-cart-to-sandbox = false when done testing -->
<script id="googlecart-script" type="text/javascript" src="http://checkout.google.com/seller/gsc/v2_2/cart.js?mid=000000000000000"  currency="USD" post-cart-to-sandbox="true"></script>