Comments (5)
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.
from cartjs.
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)
from cartjs.
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.
from cartjs.
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!
from cartjs.
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.
from cartjs.
Related Issues (20)
- New site for "Built With" Page: http://shop.thenewcompany.com/
- cart.requestComplete Vanilla js? HOT 2
- 'selling_plan_allocation' key is showing up twice in CartJS Line item properties.
- Feature: Option to output price without currency symbol
- New site for "Built With" Page: http://nunoo.eu
- cart.requestComplete not firing? HOT 1
- How can I add Error message when exceeding the product quantity in Mini cart? HOT 1
- "Required parameter missing or invalid: items" Error when adding to cart
- Callbacks functiona not wroking when I set selling_price option
- Liquid code in rivets.js
- New site for "Built With" Page: https://atlasteaclub.com/
- UpdateItem with quantity undefined does not leave quantity as-is
- Changes to cart.items results in unwanted class/functionality duplication
- New site for Waist Beads "Built With" Page: https://www.wisonline.com.ng/beads
- New site for "Built With" Page: http://web.com HOT 1
- After coming back from checkout, json has the old data HOT 2
- Hh HOT 1
- New site for "Built With" Page: http://file:///C:/Users/acer/Desktop/Cosmetics/index.html HOT 1
- Can we use it with core php project or its only for Shopify HOT 1
- Current status
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cartjs.