Cómo integrar el checkout de Shopify a un proyecto en Next.js

Antes de empezar lo mejor que pueden hacer es eliminar el localstorage de su navegador type CartItem = { title: string; price: number; quantity: number; id: string; image: string; merchandiseId: string;}; luego deben implementar algunas cosas en su typescript y enviar parametros para que funcione ```js //types.d.ts type CartItem = { title: string; price: number; quantity: number; id: string; image: string; merchandiseId: string; }; //ProductViewItemsOrder.tsx const { title, id, price, quantity, image, gql_id } = product; addToCart({ title, id, price, quantity, image, merchandiseId: gql_id, }); ```

lo mejor que se puede hacer es eliminar el localstorage y luego integrar los siguiente//types.d.ts type CartItem = { title: string; price: number; quantity: number; id: string; image: string; merchandiseId: string; }; //ProductViewItemsOrder.tsx const { title, id, price, quantity, image, gql\_id } = product; addToCart({ title, id, price, quantity, image, merchandiseId: gql\_id, }); ```js //types.d.ts type CartItem = { title: string; price: number; quantity: number; id: string; image: string; merchandiseId: string; }; //ProductViewItemsOrder.tsx const { title, id, price, quantity, image, gql_id } = product; addToCart({ title, id, price, quantity, image, merchandiseId: gql_id, }); ```

Por que usar `window.location.href` en vez de `router.reload`.?```js ```

Chicos les comento como solucione el error, estuve investigando varios foros y la documentacion y al final me di cuenta  Cuando le enviamos el merchandiseId del product me botaba ese error, lo que hice fue utilizar el merchandiseId de la variante del producto de esta forma el codigo funciona normal :D 

a mi no me esta funcionando el button de buy y me esta dando el siugiente error:  Error: Variable $input of type CartInput was provided invalid value for lines.0.merchandiseId (Expected value to not be null): {"response":{"errors":\[{"message":"Variable $input of type CartInput was provided invalid value for lines.0.merchandiseId (Expected value to not be null)","locations":\[{"line":2,"column":21}],"extensions":{"value":{"buyerIdentity":{"customerAccessToken":"02937e824843ecebb32012e95be67127","email":"[email protected]"},"lines":\[{"quantity":3}]},"problems":\[{"path":\["lines",0,"merchandiseId"],"explanation":"Expected value to not be null"}]}}],"status":200,"headers":{}},"request":{"query":"\nmutation cartCreate($input: CartInput) {\n cartCreate(input: $input) {\n cart {\n checkoutUrl\n }\n userErrors {\n code\n field\n message\n }\n }\n}\n\n","variables":{"input":{"buyerIdentity":{"customerAccessToken":"02937e824843ecebb32012e95be67127","email":"[email protected]"},"lines":\[{"quantity":3}]}}}} at makeRequest (webpack-internal:///(action-browser)/./node\_modules/graphql-request/build/esm/index.js:288:15) at process.processTicksAndRejections (node:internal/process/task\_queues:95:5) at async handleCreateCart (webpack-internal:///(action-browser)/./src/actions/index.ts:71:28) at async C:\Users\ivan camilo\Documents\personal\programacion\platzi\next-js\store-nextjs\node\_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:406 at async t0 (C:\Users\ivan camilo\Documents\personal\programacion\platzi\next-js\store-nextjs\node\_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:38:5773) at async rh (C:\Users\ivan camilo\Documents\personal\programacion\platzi\next-js\store-nextjs\node\_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:23636) at async doRender (C:\Users\ivan camilo\Documents\personal\programacion\platzi\next-js\store-nextjs\node\_modules\next\dist\server\base-server.js:1391:30) at async cacheEntry.responseCache.get.routeKind (C:\Users\ivan camilo\Documents\personal\programacion\platzi\next-js\store-nextjs\node\_modules\next\dist\server\base-server.js:1552:28) at async DevServer.renderToResponseWithComponentsImpl (C:\Users\ivan camilo\Documents\personal\programacion\platzi\next-js\store-nextjs\node\_modules\next\dist\server\base-server.js:1460:28) at async DevServer.renderPageComponent (C:\Users\ivan camilo\Documents\personal\programacion\platzi\next-js\store-nextjs\node\_modules\next\dist\server\base-server.js:1843:24) at async DevServer.renderToResponseImpl (C:\Users\ivan camilo\Documents\personal\programacion\platzi\next-js\store-nextjs\node\_modules\next\dist\server\base-server.js:1881:32) at async DevServer.pipeImpl (C:\Users\ivan camilo\Documents\personal\programacion\platzi\next-js\store-nextjs\node\_modules\next\dist\server\base-server.js:909:25) at async NextNodeServer.handleCatchallRenderRequest (C:\Users\ivan camilo\Documents\personal\programacion\platzi\next-js\store-nextjs\node\_modules\next\dist\server\next-server.js:266:17) at async DevServer.handleRequestImpl (C:\Users\ivan camilo\Documents\personal\programacion\platzi\next-js\store-nextjs\node\_modules\next\dist\server\base-server.js:805:17)

Se presenta el error de hidratacion porque en el servidor el carrito se queda vacio, pero en el cliente se actualiza los cambios, no es cierto? Y esto se debe al manejo del localstorage que no tiene accesso el servidor? No entendi bien esa parte, pero al hacer logs, el carrito en el servidor esta vacio por mas que tenga productos, solo aparece en el cliente.

Hola... tenia un problema al crear el checkout, pues estaba usando la API del 2024-07, debes asegurarse de usar la API Storefront del 2023-10 esta en el archivo .env

Hola, después de revisar bien la documentación de next JS encontré ala solicitud a mi problema de redirección. En resumen la idea es que si estamos usando un server action, no deberíamos hacer redirecciones dentro de un try catch. El problema es que cuando redireccionamos al parecer toma esto como un objeto de error:  Lo mejor en estos casos es limitar el scope de uso del try catch a chunks de código más pequeños y organizados. Les dejo el foro por si lo quieren leer: <https://github.com/vercel/next.js/issues/58263>

Tengo un problema y es que solo me deja agregar al carrito una sola vez

Me estaba dando problema esa manera de importar en el dynamic, lo solucioné con esto: `const NoSSRShoppingCart = dynamic(  () =>    import('@/components/shared/ShoppingCart').then(mod => mod.ShoppingCart),  {    ssr: false,  });`

me percate de un error en el codigo. Estamos tomando el quantity del producto y deberia ser el quantity del input addToCart({ title, id, price, quantity: counter, image, merchandiseId: gql\_id, }); asi lo solucionamos en ProductViewItemsOrder.tsx ```js addToCart({ title, id, price, quantity: counter, image, merchandiseId: gql_id, }); ```