Solved

How to clear localstorage/cookie upon completed checkout - Shopify Storefront

ollebergkvist
Shopify Partner
6 0 0

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?

Accepted Solution (1)
Junaid-Ahmed
Shopify Partner
79 17 16

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

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.

View solution in original post

Replies 4 (4)

Junaid-Ahmed
Shopify Partner
79 17 16

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.

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
ollebergkvist
Shopify Partner
6 0 0

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.

Junaid-Ahmed
Shopify Partner
79 17 16

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

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
ollebergkvist
Shopify Partner
6 0 0

Ah, I had missed the retrieve a cart by id query... I thought it was only possible to create not retrieve.

Thank you!