So I’m using React with Next.js and Shopify’s JS SDK/GraphQL. From my understanding all I have to do is create a checkout using Shopify’s API which will give me an ID and I use that ID with the API to add objects to my checkout cart.
However, how do I go about storing that ID?
I also want to have a side cart like in the photo so I tried using Redux to change the cart’s state without refreshing the page, but I’m kind of confused as to how Redux works with server side rendering. Does implementing Redux while I’m using Next.js create a store for the server and every time someone adds something to their cart it will reflect in other people’s carts next time the load a new page?
For the side cart I have 2 solutions:
Use Redux if it still works client side with SSR and if it’s efficient
I pass a reference to my cart down to all children and every time I add an item to the cart I send a fetch request and when that request resolves I call something like ref.addToCart(product) and same thing for when I want to remove from cart ref.removeFromCart(id). However passing down a reference to every child seems sloppy.
What’s the best solution?
Edit: We’re also using Express.js with sessions because we have an age gate and we don’t want our users to need to fill out the age gate with every page you visit.