Using Google Shopping Cart: Requiring Items In Your Google Shopping Cart

Implementing Item Relationships

This sample shows one way (certainly not the only way) of implementing item relationships with the Google Shopping cart. Item relationships form the basis for "required items" - a situation where an item can only be purchased along with its related item(s). For example, to purchase a mobile phone/device, you'd also need to purchase an voice and/or data plan. Therefore, this rule should be enforced before an order can be submitted.

Legend (see source code for detail):

sku1: PayCircuit T-Shirt has no dependencies (but has a relationship), and therefore can be purchased on its own
sku2: Pay Circuit Mug, can only be purchased with sku3: Coffee beans
sku3: Coffee beans, has sku1 or sku2 dependency/requirement.
To test, start with either the Mug or Coffee.
Don't test this with other samples in this web site. Clear your cart of items from other samples before testing.
Reason: this is the first sample that uses and requires product-sku annotation. Items from previous samples do not have SKU data.

This sample expands on the same code in this web site. A new concept in this sample is the usage of a "SKU" (product-sku annotation, which equates to merchant-item-id) to aid in identifying items. An item must have a globally unique SKU within your product listing/database.

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:

Peets Coffee - Major Dickason's Blend 1 lb.
Price: $13.95

Source/Reference

JavaScript

In this sample, JavaScript code is used inline only for clarity. This code block should be in a .js file referenced in all pages of your web site that use the Google Shopping Cart.

Please refer to source code comments for details.

<script type="text/javascript">

        /*
        ===============================================================
        IMPORTANT:
        ==========
        Although this sample uses in-line JavaScript (on this page), 
        this code block must be moved to a .js file referenced in all 
        pages that use the Google Shopping cart. 
            
        This is necessary to ensure that the shopping cart is evaluated
        prior to submission to Google. Remember that a user can click 
        on the Checkout button at any page that contains the Google
        Shopping cart.
        
        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;
            };
        }

        /*
        ===============================================================
        var inventory
        =============
        Create an "inventory" object containing items that must be 
        purchased as a "set" and therefore requires a related item 
        to be purchased along with it. 
        
        For example:
        You can't purchase an mobile device without a voice/data plan, so prior
        to checkout, you must make sure that both items exist in the cart.
        
        If it looks like a database, in fact it is. If you have a 
        particularly large product database, this sample isn't 
        appropriate. Your best bet is to use a real database and
        server side programming....   
                
        Product Legend:
        ===============
        sku1: PayCircuit T-Shirt has no dependencies
            If you are wondering why we still need to add this even if
            it has no dependency, it's because another item depends on
            it (sku3). If there was absolutely no relationship to any
            other item in your database, you don't need it.
              
        sku2: Pay Circuit Mug, can only be purchased with sku3: Coffee beans
        
        sku3: Coffee beans, has sku1 or sku2 dependency/requirement. 
            
        requireType: all 
            item requires that all requirements must be met
            
        requireType: any
            item only requires that one out of x is needed
        ===============================================================          
        */
        var inventory = {
            "sku1": {
                "name": "PayCircuit T-Shirt",
                "required": []
            },
            "sku2": { "name": "PayCircuit Mug",
                "required": ["sku3"],
                "requireType": "all"
            },
            "sku3": { "name": "Peets Coffee - Major Dickason\'s Blend 1 lb.",
                "required": ["sku2", "sku1"],
                "requireType": "any"
            }
        }

        var skus = [];
        for (var x in inventory) {
            skus.push(x);
        }

        /*
        ===============================================================
        This function will run each time the Checkout button is clicked 
        ===============================================================
        */
        function googlecartOnCheckoutClick() {
            //use to store current active items
            var itemsArray = [];

            //get cart contents (items in cart)
            var items = googlecart.getItems();

            //check active vs. removed items in cart
            for (var i = 0; i < items.length; i++) {
                //we're only interested in active items
                if (!items[i].isMarkedForRemoval()) {
                    /*
                    ====================================================
                    Load all the active skus in the cart to itemsArray.
                    This function obtains the product-sku value.
                    Therefore product-sku annotation is required.
                    =====================================================
                    */
                    itemsArray.push(items[i].getSku());
                }
            }

            /*
            ===============================================================
            All active skus in our cart are now in itemsArray.
            Time to do the real work....
            ===============================================================
            */

            var alertStr = "Please check your cart\n";
            var allcheck = true;
            var anycheck = true;

            for (var i = 0; i < skus.length; i++) {
                if (itemsArray.indexOf(skus[i]) > -1) {
                    //found item with possible dependency
                    //check for requirements
                    if (inventory[skus[i]].required.length > 0) {
                        //reqArray will contain missing requirements
                        reqArray = [];
                        //go through requirements, which we have set up as skus
                        //and check for their existence in the shopping cart                     
                        for (var x = 0; x < inventory[skus[i]].required.length; x++) {
                            if (itemsArray.indexOf(inventory[skus[i]].required[x]) == -1) {
                                reqArray.push(inventory[skus[i]].required[x]);
                            }
                        }

                        if (reqArray.length > 0 && inventory[skus[i]].requireType == "all") {
                            alertStr += "\n" + inventory[skus[i]].name + " requires:";
                            for (var y = 0; y < reqArray.length; y++) {
                                alertStr += "\n" + inventory[reqArray[y]].name;
                            }
                            allcheck = false;
                        }
                        else if (reqArray.length > 0
                                && inventory[skus[i]].requireType == "any"
                                && inventory[skus[i]].required.length == reqArray.length) {
                            alertStr += "\n" + inventory[skus[i]].name + " requires at least one of these:";
                            for (var y = 0; y < reqArray.length; y++) {
                                alertStr += "\n" + inventory[reqArray[y]].name;
                            }
                            anycheck = false;
                        }
                    }
                }
            }

            //If cart is good send to Google
            //otherwise, prevent submission to Google
            if (allcheck && anycheck) {
                return true;
            }
            else {
                alert(alertStr);
                return false;
            }
        }

        /*
        ===============================================================
        This function is unrelated to this sample.
        It is from a previous sample on Identifying Custom Product Attributes.                
        This function will run each time the Add To Cart button is clicked 
        ===============================================================
        */
        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:

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

<div class="product" style="margin-top: 30px;">
    <span class="product-title">Peets Coffee - Major Dickason's Blend 1 lb.</span>
    <br />
    Price: <span class="product-price">$13.95</span>
    <input class="product-weight" type="hidden" value="2" />
    <input class="product-sku" value="sku3" 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>