How to show Shopify Cart Values on pages on website (outside of Shopify website)

api, json, shopify

Solution

Shopify actually provides a JSONP formatted file assuming you're coming from the same domain (to access the Shopify cookies that identify the individual user).

In other words:

Let's say a Wordpress site lives at www.example.com

And the accompanying "Shop Site" would live at shop.example.com (make sure this domain is your primary domain on the Shopify side)

To access the cart from your Wordpress site and process it with jQuery into your template or page you could call:

jQuery.ajax({

    url: "//shop.example.com/cart.json",
    dataType: "jsonp",
    success: function( data ) {
        /* Template Code here */
    },
    error: function( jxhr, status, err ) {
        console.log("Error, status = " + status + ", err = " + err);
    }

});

The JSONP formatted file allows cross-domain AJAX calls to be made via some Javascript trickery.

Problem

I'm attempting to do the following: I'm building a standard HTML/PHP website. We'll have products on the site. When someone clicks "add to cart", the user will be directed to Shopify with their product info and that product will be added to cart (no problem so far...got this accomplished). When they click back in their browser to go back to the site (thus leaving the Shopify cart), I need to be able to show the product info on the site in the header. Something like "5 products | $168.00" ... basically allow the site visitor (who is not in shopify, but rather in the HTML site we built) to see the values in their cart and then checkout or view cart whenever they want. I came across this: http://api.shopify.com/cart.html#show I'm a bit of a newb at JSON and was looking for examples of what I'm trying to do, but not seeing them. Anyone advice or someone pointing me in the right direction would be awesome.

Original source