Handoff between graphql checkout and webstore cart and back

Highlighted
Shopify Partner
3 0 0

My subdomains use graphql to have a persistant cart that works across all the subdomains.... except for my store subdomain which is a shopify webstore that uses the Ajax api for the cart.

 

I'd like for customers that find us through one of our other subdomains to be able to browse the store and not lose their cart contents. But since the webstore's AJAX api is a separate channel from the "storefront" api, the cart contents are lost.

 

Things I've tried:

1. Currently, I can base64 decode the product id to get the webstore product id (seems weird that I need to do this). It seems like I should be able to base64 decode a storefront checkoutID and then "Fetch" a cart for the AJAX api in the webstore. AND vice-versa. Behold, I can not. At least I don't see a clear way of doing it.

 

2. Use JSONP to load a cart.json into a page hosted on another subdomain. Oddly I had this working for about 8 hours in chrome. It still works in Firefox. As long as I added something to a cart either in a subdomain or on the store domain using cart/add.js and JSONP, I could get a persistent cart. For some reason as of Monday 16 Mar, Chrome always gets an empty cart even after I cart/add.js?id=XXXXX&quantity=Y

 

3. Permalinks just seems to really mess up the cart flow... that's like an entirely different cart. 

 

4. At the moment, I have a brittle hack that I want to replace immediately. It just clears the cart, and asks the graphql api to load it's cart content at the store/cart/ page. Each page of my store adds to the Ajax Cart as well as the graphql checkout. I HATE this solution. 

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
1040 139 163

Hey @ethancalvo,

 

There's no elegant solution for this one yet. It's being discussed. Post back if you end up finding a solid workaround.

0 Likes
Highlighted
Shopify Partner
3 0 0

Here is what I finally ended up doing as a workaround. I'm merely ok with this workaround. I would love a more elegant and better-supported solution from shopify to replace it.

 

1. Requires my shopify store to have the same root domain as the other domains I'm building "add-to-cart" UIs for. I use "store.xxxxx.com" for my store.

2. I use the shopify web cart as the cart. So the storefront graphql or javascript-buy -based product UIs completely neglect  the checkout functionality (which is a real shame).

3. I base64 decode the product variants ids, and then strip out "gid://shopify/ProductVariant/" in order to get the webstore variant id so I can add products to the webstore cart.

4. Why not just skip the storefront api altogether? I need the storefront API to get the custom product and variant metadata required to build my UIs but only after jumping through the odd hoops to add them to the storefront api as returnable (that's a whole other set of complaints that I won't get into here).

5. I have to use JSONP (no school like the old school) on any other domain besides my store.xxxxx.com site in order to add to cart, or get cart contents.

6. Testing locally means messing with your dev machine's hosts file so that you don't get a brand new cart cookie every time you add <script src="..../cart.js?callback=XXXXX"> to your page.

7. Whenever you want to add something to cart, you have to remove, and re-add a script tag with src=".../cart/add.js?id=XXXX&quantity=XXXX&UID=<randomly-generated-unique-id>" so the browser doesn't just deliver the cached data back to your page

 

Also...I have no idea what cart.js api is actually capable of. It doesn't look like the callback argument is documented anywhere. I found that by looking through examples.

 

If anyone is actually super interested, I'll post some example code.

0 Likes