Dedicated to the Hydrogen framework, headless commerce, and building custom storefronts using the Storefront API.
I've built a headless e-commerce store with Next.js using the Shopify Storefront API.
When the user presses the checkout button in the cart there's a redirect happening, and the remaining flow now happens on my-store-name.myshopify.com.
This is problematic, as I'm storing the cart items in localstorage (standard UX). Once the user completes the checkout flow and then returns to the custom Frontend, the items that they just purchased will appear in the cart as localstorage has not been unset.
I'm not sure how I can unset the localstorage in this case? As the last page in the flow (Thank you for buying!), where I ideally should unset the localstorage, lives in the checkout flow, which lives on another domain.
I can't see that there's any get checkout query available via the Shopify API to see if a checkout with a given id has been completed either that I could use to clear the cookie from the custom frontend...
Any ideas on how to solve this issue?
Solved! Go to the solution
This is an accepted solution.
You don't need to store the cart data in localStorage, you just need to store the cart key in localStorage which you can use to fetch and interact with the cart while the cart is stored on the server.
For further information and API usage, please look at https://shopify.dev/custom-storefronts/cart/manage
Hi,
Instead of managing the cart in localStorage, you could opt-in for cart management using the Storefront API. Further details at https://shopify.dev/custom-storefronts/cart/manage.
That said, you could write custom JavaScript that deletes the localStorage/cookie from the storefront domain. Put this JS snippet in the additional scripts of the checkout settings.
Hi,
Thanks for replying.
That's how I'm managing it, but you still need to store a cookie or localstorage on the client side.
So that when they revisit the page their cart is saved in case they return to the store at a later stage. How else will you persist the data?
You can't delete a cookie/localstorage from another domain...
Custom frontend lives on one domain.
Shopify checkout lives on another.
This is an accepted solution.
You don't need to store the cart data in localStorage, you just need to store the cart key in localStorage which you can use to fetch and interact with the cart while the cart is stored on the server.
For further information and API usage, please look at https://shopify.dev/custom-storefronts/cart/manage
Ah, I had missed the retrieve a cart by id query... I thought it was only possible to create not retrieve.
Thank you!