feat: add to cart and cart sidebar

app/product/[...handle]/page.tsx

@@ -2,12 +2,11 @@ import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { Suspense } from 'react';
 
+import { AddToCart } from 'components/cart/add-to-cart';
 import Grid from 'components/grid';
 import Footer from 'components/layout/footer';
 import ProductGridItems from 'components/layout/product-grid-items';
-import { AddToCart } from 'components/cart/add-to-cart';
 import { Gallery } from 'components/product/gallery';
-import { VariantSelector } from 'components/product/variant-selector';
 import Prose from 'components/prose';
 import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
 import { getProduct, getProductRecommendations } from 'lib/shopware';
@@ -98,13 +97,13 @@ export default async function ProductPage({ params }: { params: { handle: string
         </div>
 
         <div className="p-6 lg:col-span-2">
-          <VariantSelector options={product.options} variants={product.variants} />
+          {/* <VariantSelector options={product.options} variants={product.variants} /> */}
 
           {product.descriptionHtml ? (
             <Prose className="mb-6 text-sm leading-tight" html={product.descriptionHtml} />
           ) : null}
 
-          <AddToCart variants={product.variants} availableForSale={product.availableForSale} />
+          <AddToCart product={product} variants={product.variants} availableForSale={true} />
         </div>
       </div>
       <Suspense>

components/cart/actions.ts

@@ -1,17 +1,21 @@
 'use server';
 
-import { addToCart, removeFromCart, updateCart } from 'lib/shopify';
+import { requestAddToCart, requestCart } from 'lib/shopware/api';
 import { cookies } from 'next/headers';
+export const fetchCart = async (cartId?: string) => {
+  await requestCart(cartId);
+};
 
 export const addItem = async (variantId: string | undefined): Promise<Error | undefined> => {
-  const cartId = cookies().get('cartId')?.value;
+  const cartId = cookies().get('sw-context-token')?.value || '';
 
-  if (!cartId || !variantId) {
+  if (!variantId) {
     return new Error('Missing cartId or variantId');
   }
   try {
-    await addToCart(cartId, [{ merchandiseId: variantId, quantity: 1 }]);
+    await requestAddToCart(variantId, cartId);
   } catch (e) {
+    console.error('eeeee', e);
     return new Error('Error adding item', { cause: e });
   }
 };
@@ -23,7 +27,7 @@ export const removeItem = async (lineId: string): Promise<Error | undefined> =>
     return new Error('Missing cartId');
   }
   try {
-    await removeFromCart(cartId, [lineId]);
+    //await removeFromCart(cartId, [lineId]);
   } catch (e) {
     return new Error('Error removing item', { cause: e });
   }
@@ -44,14 +48,15 @@ export const updateItemQuantity = async ({
     return new Error('Missing cartId');
   }
   try {
-    await updateCart(cartId, [
-      {
-        id: lineId,
-        merchandiseId: variantId,
-        quantity
-      }
-    ]);
+    // await updateCart(cartId, [
+    //   {
+    //     id: lineId,
+    //     merchandiseId: variantId,
+    //     quantity
+    //   }
+    // ]);
   } catch (e) {
     return new Error('Error updating item quantity', { cause: e });
   }
 };
+

components/cart/add-to-cart.tsx

@@ -7,13 +7,16 @@ import { useEffect, useState, useTransition } from 'react';
 
 import LoadingDots from 'components/loading-dots';
 import { ProductVariant } from 'lib/shopify/types';
+import { Product } from 'lib/shopware/types';
 
 export function AddToCart({
+  product,
   variants,
-  availableForSale
+  availableForSale,
 }: {
   variants: ProductVariant[];
   availableForSale: boolean;
+  product: Product
 }) {
   const [selectedVariantId, setSelectedVariantId] = useState(variants[0]?.id);
   const router = useRouter();
@@ -39,12 +42,12 @@ export function AddToCart({
       onClick={() => {
         if (!availableForSale) return;
         startTransition(async () => {
-          const error = await addItem(selectedVariantId);
+          const error = await addItem(product.id);
 
-          if (error) {
-            alert(error);
-            return;
-          }
+           if (error) {
+             console.error(error);
+             return;
+         }
 
           router.refresh();
         });

components/cart/index.tsx

@@ -1,11 +1,13 @@
+import { fetchCart } from 'components/cart/actions';
 import { getCart } from 'lib/shopware';
 import { cookies } from 'next/headers';
 import CartModal from './modal';
 
 export default async function Cart() {
   const cartId = cookies().get('sw-context-token')?.value;
-  let cartIdUpdated = true;
-  const cart = await getCart();
+  await fetchCart(cartId);
+  let cartIdUpdated = false;
+  const cart = await getCart(cartId);
 
   if (cartId !== cart.id) {
     cartIdUpdated = true;

components/cart/modal.tsx

@@ -21,7 +21,7 @@ type MerchandiseSearchParams = {
 };
 
 export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdUpdated: boolean }) {
-  const [, setCookie] = useCookies(['cartId']);
+  const [, setCookie] = useCookies(['sw-context-token']);
   const [isOpen, setIsOpen] = useState(false);
   const quantityRef = useRef(cart.totalQuantity);
   const openCart = () => setIsOpen(true);
@@ -29,7 +29,7 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
 
   useEffect(() => {
     if (cartIdUpdated) {
-      setCookie('cartId', cart.id, {
+      setCookie('sw-context-token', cart.id, {
         path: '/',
         sameSite: 'strict',
         secure: process.env.NODE_ENV === 'production'
@@ -39,6 +39,7 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
   }, [setCookie, cartIdUpdated, cart.id]);
 
   useEffect(() => {
+    console.warn('cart modal', cart);
     // Open cart modal when when quantity changes.
     if (cart.totalQuantity !== quantityRef.current) {
       // But only if it's not already open (quantity also changes when editing items in cart).

lib/shopware/api.ts

@@ -1,5 +1,6 @@
 import { createAPIClient, RequestReturnType } from '@shopware/api-client';
 import { operations } from '@shopware/api-client/api-types';
+import { cookies } from 'next/headers';
 import {
   ExtendedCategory,
   ExtendedCriteria,
@@ -19,11 +20,19 @@ import {
 const domainSW = `https://${process.env.SHOPWARE_STORE_DOMAIN!}/${process.env.SHOPWARE_API_TYPE!}`;
 const accessTokenSW = `${process.env.SHOPWARE_ACCESS_TOKEN}`;
 
-const apiInstance = createAPIClient<extendedOperations, extendedPaths>({
-  baseURL: domainSW,
-  accessToken: accessTokenSW,
-  apiType: 'store-api'
-});
+function getApiClient(cartId?: string) {
+  const apiInstance = createAPIClient<extendedOperations, extendedPaths>({
+    baseURL: domainSW,
+    accessToken: accessTokenSW,
+    apiType: 'store-api',
+    contextToken: cartId,
+    onContextChanged(newContextToken: string) {
+      //cookies().set('sw-context-token', newContextToken);
+    }
+  });
+
+  return apiInstance;
+}
 
 // reimport operations return types to use it in application
 export type ApiReturnType<OPERATION_NAME extends keyof operations> = RequestReturnType<
@@ -35,7 +44,7 @@ export async function requestNavigation(
   type: StoreNavigationTypeSW,
   depth: number
 ): Promise<ExtendedCategory[]> {
-  return await apiInstance.invoke(
+  return await getApiClient(cookies().get('sw-context-token')).invoke(
     'readNavigation post /navigation/{activeId}/{rootId} sw-include-seo-urls',
     {
       activeId: type,
@@ -49,7 +58,7 @@ export async function requestCategory(
   categoryId: string,
   criteria?: Partial<ProductListingCriteria>
 ): Promise<ExtendedCategory> {
-  return await apiInstance.invoke('readCategory post /category/{navigationId}?slots', {
+  return await getApiClient().invoke('readCategory post /category/{navigationId}?slots', {
     navigationId: categoryId,
     criteria
   });
@@ -58,20 +67,20 @@ export async function requestCategory(
 export async function requestCategoryList(
   criteria: Partial<ExtendedCriteria>
 ): Promise<CategoryListingResultSW> {
-  return await apiInstance.invoke('readCategoryList post /category', criteria);
+  return await getApiClient().invoke('readCategoryList post /category', criteria);
 }
 
 export async function requestProductsCollection(
   criteria: Partial<ProductListingCriteria>
 ): Promise<ExtendedProductListingResult> {
-  return await apiInstance.invoke('readProduct post /product', criteria);
+  return await getApiClient().invoke('readProduct post /product', criteria);
 }
 
 export async function requestCategoryProductsCollection(
   categoryId: string,
   criteria: Partial<ProductListingCriteria>
 ): Promise<ExtendedProductListingResult> {
-  return await apiInstance.invoke('readProductListing post /product-listing/{categoryId}', {
+  return await getApiClient().invoke('readProductListing post /product-listing/{categoryId}', {
     ...criteria,
     categoryId: categoryId
   });
@@ -80,14 +89,14 @@ export async function requestCategoryProductsCollection(
 export async function requestSearchCollectionProducts(
   criteria?: Partial<ProductListingCriteria>
 ): Promise<ExtendedProductListingResult> {
-  return await apiInstance.invoke('searchPage post /search', {
+  return await getApiClient().invoke('searchPage post /search', {
     search: encodeURIComponent(criteria?.query || ''),
     ...criteria
   });
 }
 
 export async function requestSeoUrls(routeName: RouteNames, page: number = 1, limit: number = 100) {
-  return await apiInstance.invoke('readSeoUrl post /seo-url', {
+  return await getApiClient().invoke('readSeoUrl post /seo-url', {
     page: page,
     limit: limit,
     filter: [
@@ -105,7 +114,7 @@ export async function requestSeoUrl(
   page: number = 1,
   limit: number = 1
 ): Promise<SeoURLResultSW> {
-  return await apiInstance.invoke('readSeoUrl post /seo-url', {
+  return await getApiClient().invoke('readSeoUrl post /seo-url', {
     page: page,
     limit: limit,
     filter: [
@@ -134,7 +143,7 @@ export async function requestCrossSell(
   productId: string,
   criteria?: Partial<ProductListingCriteria>
 ): Promise<ExtendedCrossSellingElementCollection> {
-  return await apiInstance.invoke(
+  return await getApiClient().invoke(
     'readProductCrossSellings post /product/{productId}/cross-selling',
     {
       productId: productId,
@@ -143,6 +152,26 @@ export async function requestCrossSell(
   );
 }
 
-export async function requestCart() {
-  return apiInstance.invoke('readCart get /checkout/cart?name', {});
+export async function requestCart(cartId?: string) {
+  return getApiClient(cartId).invoke('readCart get /checkout/cart?name', {});
+}
+
+export async function requestContext(cartId?: string) {
+  return getApiClient(cartId).invoke('readCart get /checkout/cart?name', {});
+}
+
+export async function requestAddToCart(itemId: string, cartId: string) {
+  try {
+    return getApiClient(cartId).invoke('addLineItem post /checkout/cart/line-item', {
+      items: [
+        {
+          referencedId: itemId,
+          quantity: 1,
+          type: 'product'
+        }
+      ]
+    });
+  } catch (e) {
+    console.error('e', e);
+  }
 }

lib/shopware/index.ts

@@ -217,8 +217,8 @@ export async function getProductRecommendations(productId: string): Promise<Prod
   return products ? transformProducts(products) : [];
 }
 
-export async function getCart(): Promise<Cart> {
-  const cartData = await requestCart();
+export async function getCart(cartId?: string): Promise<Cart> {
+  const cartData = await requestCart(cartId);
 
   let cart: Cart = {
     checkoutUrl: 'https://frontends-demo.vercel.app',
@@ -260,7 +260,10 @@ export async function getCart(): Promise<Cart> {
               title: lineItem.label
             },
             availableForSale: true,
-            featuredImage: (lineItem as any).cover?.url,
+            featuredImage: {
+              altText: 'Cover image of ' + lineItem.label,
+              url: (lineItem as any).cover?.url
+            },
             handle: '',
             options: [],
             variants: [],

pnpm-lock.yaml

@@ -10,7 +10,7 @@ dependencies:
     version: 1.7.15(react-dom@18.2.0)(react@18.2.0)
   '@shopware/api-client':
     specifier: 0.0.0-canary-20230706101754
-    version: 0.0.0-canary-20230706101754
+    version: link:../../frontends/packages/api-client-next
   '@vercel/og':
     specifier: ^0.5.8
     version: 0.5.8
@@ -379,12 +379,6 @@ packages:
     resolution: {integrity: sha512-V+MvGwaHH03hYhY+k6Ef/xKd6RYlc4q8WBx+2ANmipHJcKuktNcI/NgEsJgdSUF6Lw32njT6OnrRsKYCdgHjYw==}
     dev: true
 
-  /@shopware/api-client@0.0.0-canary-20230706101754:
-    resolution: {integrity: sha512-h7nCTWVu6bLbxdKT8vEJcUVKVu/RveaZ3M1PxrQAMiP6b2nQeqRh5+QlqTEFGk+Middy11MINH70Wp6GMx+Y+A==}
-    dependencies:
-      ofetch: 1.1.1
-    dev: false
-
   /@shuding/opentype.js@1.4.0-beta.0:
     resolution: {integrity: sha512-3NgmNyH3l/Hv6EvsWJbsvpcpUba6R8IREQ83nH83cyakCw7uM1arZKNfHwv1Wz6jgqrF/j4x5ELvR6PnK9nTcA==}
     engines: {node: '>= 8.0.0'}
@@ -1046,10 +1040,6 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /destr@2.0.0:
-    resolution: {integrity: sha512-FJ9RDpf3GicEBvzI3jxc2XhHzbqD8p4ANw/1kPsFBfTvP1b7Gn/Lg1vO7R9J4IVgoMbyUmFrFGZafJ1hPZpvlg==}
-    dev: false
-
   /didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
     dev: true
@@ -2383,10 +2373,6 @@ packages:
       - babel-plugin-macros
     dev: false
 
-  /node-fetch-native@1.2.0:
-    resolution: {integrity: sha512-5IAMBTl9p6PaAjYCnMv5FmqIF6GcZnawAVnzaCG0rX2aYZJ4CxEkZNtVPuTRug7fL7wyM5BQYTlAzcyMPi6oTQ==}
-    dev: false
-
   /node-releases@2.0.12:
     resolution: {integrity: sha512-QzsYKWhXTWx8h1kIvqfnC++o0pEmpRQA/aenALsL2F4pqNVr7YzcdMlDij5WBnwftRbJCNJL/O7zdKaxKPHqgQ==}
     dev: true
@@ -2486,14 +2472,6 @@ packages:
       es-abstract: 1.21.2
     dev: true
 
-  /ofetch@1.1.1:
-    resolution: {integrity: sha512-SSMoktrp9SNLi20BWfB/BnnKcL0RDigXThD/mZBeQxkIRv1xrd9183MtLdsqRYLYSqW0eTr5t8w8MqjNhvoOQQ==}
-    dependencies:
-      destr: 2.0.0
-      node-fetch-native: 1.2.0
-      ufo: 1.1.2
-    dev: false
-
   /once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
     dependencies:
@@ -3457,10 +3435,6 @@ packages:
     hasBin: true
     dev: true
 
-  /ufo@1.1.2:
-    resolution: {integrity: sha512-TrY6DsjTQQgyS3E3dBaOXf0TpPD8u9FVrVYmKVegJuFw51n/YB9XPt+U6ydzFG5ZIN7+DIjPbNmXoBj9esYhgQ==}
-    dev: false
-
   /unbox-primitive@1.0.2:
     resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
     dependencies: