Using Google Shopping Cart: Requiring Product Attribute Selections

Implementing Required Product Attribute Selections

This sample shows one way (certainly not the only way) of requiring certain product attribute entries/selections for an item added to your Google Shopping Cart. In the sample below, in order to purchase a PayCircuit Coffee Mug Set priced at $19.95, a customer must choose 2 coffee blends.

In some ways, this is a much simplified version of a previous sample on Required Items in that a product itself must be "complete" when added to the cart (in order to purchase Item A, you must include certain Item A "attributes" that make it up). The previous sample implemented different/unique item/product relationships (in order to purchase Item A, you must also purchase Item B).

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. This page likewise clears the cart contents each time it is requested and/or refreshed.

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 Set
Price: $19.95

Text to print around mug:
Text to print on bottom of mug:
This set includes 2, 1 lb. bag, coffee blends. Please choose 2 coffee blends:
Major Dickason
House Blend
Seasonal Blend
Decaf House Blend
Decaf Major Dickason
Decaf Seasonal Blend

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. While this function is unrelated to the objective, this sample makes extensive use of product attributes that need to be identified. See a previous post on Identifying Custom Product Attributes for more information on why you may need this.
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">
        /*
        ===============================================================
        Array.prototype.indexOf
        =======================
        Array.prototype.indexOf is provided by the Mozilla foundation
        and is distributed under the MIT license.
        http://www.ibiblio.org/pub/Linux/LICENSES/mit.license
        
        What this is for:
        Necessary because Internet Explorer still does not
        support Array.indexOf  as of 2009. Oh gawd!
        ===============================================================
        */
        if (!Array.prototype.indexOf) {
            Array.prototype.indexOf = function(elt /*, from*/) {
                var len = this.length;

                var from = Number(arguments[1]) || 0;
                from = (from < 0)
         ? Math.ceil(from)
         : Math.floor(from);
                if (from < 0)
                    from += len;

                for (; from < len; from++) {
                    if (from in this &&
          this[from] === elt)
                        return from;
                }
                return -1;
            };
        }

        /*
        =====================================
        array of sku that need to be evaluated, add items as needed
        product-sku annotation is required
        use unique skus for each item in your inventory
        =====================================
        */
        var sets = ["sku2"];

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

            //blends array will contain selections made
            var blends = [];

            //boolean toggle that checks if item being added needs to be evaluated
            var foreval = sets.indexOf(item.getSku()) > -1;

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

                    //if the custom attribute is named "blends"                    
                    if (i == "blends") {
                        /*
                        =======================
                        Important: do not include commas in your product-attr-xxx values!
                        We're splitting the string value (comma-separated by default)
                        into an array, on the comma....
                        =======================
                        */
                        blends = attribs[i].split(",");
                    }
                }
            }

            /*
            =======================
            If item needs to be evaulated, 2 choices required
            Test can be extended/changed into min/max combinations, dynamic min/max values, etc.
            =======================
            */
            if (foreval && blends.length != 2) {
                //do not add item to cart if rule is not met
                alert("Our " + item.getTitle() + " requires 2 coffee blend selections");
                return false;
            } else {
                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:

product-sku annotation is required
Ensure that all your items have a globally unique product-sku within your listing/database

<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" />
    <input class="product-sku" value="sku1" type="hidden" />
    <div class="googlecart-add-button">
    </div>
</div>

<div class="product" style="margin-top: 30px;">
    <span class="product-title">PayCircuit Coffee Mug Set</span>
    <br />
    Price: <span class="product-price">$19.95</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>
        <li style="list-style-type: none; font-weight: bold;">This set includes 2, 1 lb. bag,
        coffee blends. Please choose 2 coffee blends:</li>
        <li>
        <input class="product-attr-blends" type="checkbox" value="Major Dickason" />Major
        Dickason</li>
        <li>
        <input class="product-attr-blends" type="checkbox" value="House Blend" />House Blend</li>
        <li>
        <input class="product-attr-blends" type="checkbox" value="Seasonal Blend" />Seasonal
        Blend</li>
        <li>
        <input class="product-attr-blends" type="checkbox" value="Decaf House Blend" />Decaf
        House Blend</li>
        <li>
        <input class="product-attr-blends" type="checkbox" value="Decaf Major Dickason" />Decaf
        Major Dickason</li>
        <li>
        <input class="product-attr-blends" type="checkbox" value="Decaf Seasonal Blend" />Decaf
        Seasonal Blend</li>
    </ul>
    <input class="product-weight" type="hidden" value="2" />
    <input class="product-sku" value="sku2" type="hidden" />
        <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>