Using cartjs on a custom site?

[davidstackio]

First off, cartjs looks incredibly helpful for creating ajax carts with Shopify. Keep up the great work!

I'd like to use it on my custom bootstrap site, but am not sure how to initialize it properly.

In the cartjs documentation (which is great by the way) it says under configuration to call CartJS.init() and pass a liquid cart object as JSON. As I'm not using liquid, how can I create a liquid-cart-like JSON object and pass it to cartjs?

The only other related documentation I've found so far that might help is about Adding to cart from a remote website.

[gavinballard]

Hi @dhstack! Thanks for the kind words :).

Am I right in understanding that you're trying to use Cart.js to add to a Shopify cart from a site that's not hosted on Shopify? If so, that's not really a use case Cart.js supports, but I guess you may be able to initialise Cart.js with a cart-like object. Here's what an empty cart looks like when rendered by Liquid's json filter:

{
  "token": null,
  "note": null,
  "attributes": {},
  "total_price": 0,
  "total_weight": 0,
  "item_count": 0,
  "items": [],
  "requires_shipping": false
}

Does that help? If you do get this working, let me know as it's an interesting use case that I'll add to the docs.

[davidstackio]

Yes, that is correct. Trying to use Cart.js on a site not hosted by Shopify. Still working on it, but I had a thought...

Have you considered passing a cart object to CartJS.init() optional (default value of null)?

Then simply have a basic conditional check within CartJS.init() to check if there was any object passed. If it is null (default), then cartjs automatically creates the default cart object (your code above), otherwise use what was passed through. Then your example in the docs could be:

jQuery(function() {
    CartJS.init();
});

And you wouldn't need the note about the cart object being required, just optional.

Nice and simple :)

PS Just discovered this trick: use yourShopifySite.myshopify.com/cart.json to get the cart json (the empty cart from your post above in a fresh browser session)

[davidstackio]

So it doesn't look like this is going to work. Not because of a limitation with CartJS, but because Shopify doesn't support CORS or JSONP for cross-site JavaScript requests.

The exact error I am getting on the Chrome Developer tools console is:

XMLHttpRequest cannot load https://{{myShopifyStore}}.myshopify.com/cart/add.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://{{mysite}}.com' is therefore not allowed access.

Until Shopify implements CORS or JSONP, it looks like I'm out of luck for AJAX cart requests. I'll have to use the standard POST method that the Shopify docs describe.

EDIT: Looks like Shopify does actually have JSONP support. Will likely need to modify core.coffee and/or queue.coffee for this to work, but it may only allow using GET requests (no adding to cart). But it's better than nothing. Will try adapting this code.

[gavinballard]

Ah, that CORS restriction is limiting. Thanks for digging in to this. I take your idea/point about allowing the cart to be optionally null, but I think that the 99% use case is going to be on a Shopify-hosted site and I worry that adding too many options makes things a bit confusing. There would also have to be checks added across the library for things that were/weren't supported off-site, which would complicate things a little bit.

So, please feel free to report back your findings here. If you publish them somewhere like a blog, then I'd love to link to them from within the Cart.js docs. Otherwise, I'm going to close this issue as I don't think off-Shopify site support will be a priority moving forward.

Thanks!

[davidstackio]

Yeah, at this point adding remote site support doesn't seem like it will work with CartJS (which is too bad since it looks so easy to use). Perhaps if/when Shopify adds CORS this issue can be revisited.

Until then JSONP can be used for displaying cart contents, but not updating them as JSONP supports only the GET request method. To update it would be best to use the methods Shopify describes.