Using Google Shopping Cart: Carrier Calculated And Flat Rate Shipping Plus Custom Calculations

Using Google Shopping Cart: Carrier Calculated And Flat Rate Shipping With Custom Calculations

This working sample combines carrier calculated shipping with variable percentage and fixed price additional charges; and a flate rate shipping option based on custom calcuations using JavaScript. The number of items ordered controls the cost of the flat rate shipping option.

Source code and reference provided below.

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

PayCircuit Coffee Mug
Price: $5.99
Text to print on 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:

Counts the number items in the order and determines a flat rate for shipping as an additional option to two (2) carrier-calculated shipping options.
Shipping rules:

$4.95 up to 2 items
$7.00 for 3 to 6 items in order
$10.25 for 7 to 12 items in order
$13.95 if order has more than 12 items

<script type="text/javascript">

        function googlecartOnCheckoutClick() {
            var itemcount = 0;

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

            //go through each line item in cart
            for (var i = 0; i < items.length; i++) {

                //check if the item is active vs. removed
                //we only care about active items
                if (!items[i].isMarkedForRemoval()) {

                    //count total no. of items in cart                    
                    itemcount += items[i].getQuantity();
                }
            }

            //get the shipping element, identified by id
            var ship = document.getElementById("custom-rate-shipping");

            //set flat rate shipping cost based on number of items in cart             
            switch (true) {
                case (itemcount <= 2):
                    ship.value = 4.95;
                    break;
                case (itemcount >= 3 && itemcount <= 6):
                    ship.value = 7;
                    break;
                case (itemcount >= 7 && itemcount <= 12):
                    ship.value = 10.25;
                    break;
                case (itemcount > 12):
                    ship.value = 13.95;
                    break;
                default:
                    ship.value = 4.95;
            }

            /*
            ======================================================
            To test without submitting cart to Google:
            Uncomment the line below and set "return false"
            
            alert("no of items in order = " + itemcount + "\nshipping charged will be " + ship.value);
            ======================================================
            */
            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

<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>
    <br />
    Your notes:
    <input class="product-attr-something" type="text" />
    <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">
    <span class="product-title">PayCircuit Coffee Mug</span>
    <br />
    Price: <span class="product-price">$5.99</span>
    <br />
    Text to print on mug:
    <input class="product-attr-something" type="text" />
    <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="USPS" />
    <input type="hidden" name="ccs_shipping_type_1" value="Priority Mail" />
    <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 id="custom-rate-shipping" type="hidden" name="ship_method_price_1" value="999" />
    <input type="hidden" name="ship_method_name_1" value="Flat Rate" />
    <input type="hidden" name="ship_method_currency_1" value="USD" />
    
    <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" />
    
    <!-- 3.2% additional charge to to USPS Priority Mail  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="3.2" />
        
    <!-- $2 additional fixed 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-fixed-charge" 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>