Merge pull request #70 from buildheadless/cart

Update cart and fix related products
buildheadless · Jan 8, 2024 · 6af756f · 6af756f
2 parents d398dcc + cb5068e
commit 6af756f
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 9 deletions.
diff --git a/templates/hydrogen-theme/app/components/cart/Cart.tsx b/templates/hydrogen-theme/app/components/cart/Cart.tsx
@@ -19,7 +19,7 @@ export function Cart({
   return (
     <>
       <CartEmpty hidden={!empty} layout={layout} onClose={onClose} />
-      <CartDetails cart={cart} layout={layout} />
+      <CartDetails cart={cart} layout={layout} onClose={onClose} />
     </>
   );
 }
diff --git a/templates/hydrogen-theme/app/components/cart/CartDetails.tsx b/templates/hydrogen-theme/app/components/cart/CartDetails.tsx
@@ -14,17 +14,19 @@ import {CartLines} from './CartLines';
 export function CartDetails({
   cart,
   layout,
+  onClose,
 }: {
   cart?: CartType | null;
   layout: CartLayouts;
+  onClose?: () => void;
 }) {
   // @todo: get optimistic cart cost
   const cartHasItems = !!cart && cart.totalQuantity > 0;
 
   return (
     <CartDetailsLayout layout={layout}>
       <div className={cx([layout === 'drawer' && 'flex-1 overflow-y-scroll'])}>
-        <CartLines layout={layout} lines={cart?.lines} />
+        <CartLines layout={layout} lines={cart?.lines} onClose={onClose} />
       </div>
       {cartHasItems && (
         <CartSummary cost={cart.cost} layout={layout}>

diff --git a/templates/hydrogen-theme/app/components/cart/CartLineItem.tsx b/templates/hydrogen-theme/app/components/cart/CartLineItem.tsx
@@ -24,7 +24,13 @@ type OptimisticData = {
   quantity?: number;
 };
 
-export function CartLineItem({line}: {line: CartLine}) {
+export function CartLineItem({
+  line,
+  onClose,
+}: {
+  line: CartLine;
+  onClose?: () => void;
+}) {
   const optimisticData = useOptimisticData<OptimisticData>(line?.id);
   const {id, merchandise, quantity} = line;
   const variantId = parseGid(merchandise?.id)?.id;
@@ -62,7 +68,9 @@ export function CartLineItem({line}: {line: CartLine}) {
         <div className="grid gap-2">
           <h3 className="text-2xl">
             {merchandise?.product?.handle ? (
-              <Link to={productPath}>{merchandise?.product?.title || ''}</Link>
+              <Link onClick={onClose} to={productPath}>
+                {merchandise?.product?.title || ''}
+              </Link>
             ) : (
               <p>{merchandise?.product?.title || ''}</p>
             )}

diff --git a/templates/hydrogen-theme/app/components/cart/CartLines.tsx b/templates/hydrogen-theme/app/components/cart/CartLines.tsx
@@ -13,9 +13,11 @@ import {CartLineItem} from './CartLineItem';
 export function CartLines({
   layout = 'drawer',
   lines: cartLines,
+  onClose,
 }: {
   layout: CartLayouts;
   lines: CartType['lines'] | undefined;
+  onClose?: () => void;
 }) {
   const currentLines = cartLines ? flattenConnection(cartLines) : [];
 
@@ -29,7 +31,11 @@ export function CartLines({
     <section aria-labelledby="cart-contents" className={className}>
       <ul className="grid gap-6 md:gap-10">
         {currentLines.map((line) => (
-          <CartLineItem key={line.id} line={line as CartLine} />
+          <CartLineItem
+            key={line.id}
+            line={line as CartLine}
+            onClose={onClose}
+          />
         ))}
       </ul>
     </section>

diff --git a/templates/hydrogen-theme/app/components/product/RelatedProducts.tsx b/templates/hydrogen-theme/app/components/product/RelatedProducts.tsx
@@ -2,9 +2,11 @@ import type {ProductRecommendationsQuery} from 'storefrontapi.generated';
 
 import {ProductCardGrid} from './ProductCardGrid';
 
-export function RelatedProducts(props: {data: ProductRecommendationsQuery}) {
+export function RelatedProducts(props: {
+  data: ProductRecommendationsQuery | null;
+}) {
   const {data} = props;
-  const products = getRecommendedProducts(data);
+  const products = data ? getRecommendedProducts(data) : [];
 
   return <ProductCardGrid products={products} />;
 }

diff --git a/templates/hydrogen-theme/app/lib/resolveShopifyPromises.ts b/templates/hydrogen-theme/app/lib/resolveShopifyPromises.ts
@@ -186,7 +186,7 @@ async function resolveRelatedProductsPromise({
   let promise;
 
   if (document.data?._type !== 'product') {
-    return undefined;
+    return null;
   }
 
   const productId = document.data?.store.gid;
@@ -204,5 +204,5 @@ async function resolveRelatedProductsPromise({
     }
   }
 
-  return promise;
+  return promise || null;
 }