Added compareAtPrice feature

components/product/product-description.tsx

@@ -5,15 +5,23 @@ import { Product } from 'lib/shopify/types';
 import { VariantSelector } from './variant-selector';
 
 export function ProductDescription({ product }: { product: Product }) {
+  const compareAtPrice = product.compareAtPriceRange.maxVariantPrice.amount;
+  const price = product.priceRange.maxVariantPrice.amount;
+
   return (
     <>
       <div className="mb-6 flex flex-col border-b pb-6 dark:border-neutral-700">
         <h1 className="mb-2 text-5xl font-medium">{product.title}</h1>
+        {parseFloat(compareAtPrice) > parseFloat(price) && (
+          <div className="mr-auto w-auto p-2 text-sm text-white line-through decoration-red-500">
+            <Price
+              amount={compareAtPrice}
+              currencyCode={product.priceRange.maxVariantPrice.currencyCode}
+            />
+          </div>
+        )}
         <div className="mr-auto w-auto rounded-full bg-blue-600 p-2 text-sm text-white">
-          <Price
+          <Price amount={price} currencyCode={product.priceRange.maxVariantPrice.currencyCode} />
-            amount={product.priceRange.maxVariantPrice.amount}
-            currencyCode={product.priceRange.maxVariantPrice.currencyCode}
-          />
         </div>
       </div>
       <VariantSelector options={product.options} variants={product.variants} />

lib/shopify/fragments/product.ts

@@ -24,6 +24,16 @@ const productFragment = /* GraphQL */ `
         currencyCode
       }
     }
+    compareAtPriceRange {
+      maxVariantPrice {
+        amount
+        currencyCode
+      }
+      minVariantPrice {
+        amount
+        currencyCode
+      }
+    }
     variants(first: 250) {
       edges {
         node {

lib/shopify/types.ts

@@ -120,6 +120,10 @@ export type ShopifyProduct = {
     maxVariantPrice: Money;
     minVariantPrice: Money;
   };
+  compareAtPriceRange: {
+    maxVariantPrice: Money;
+    minVariantPrice: Money;
+  };
   variants: Connection<ProductVariant>;
   featuredImage: Image;
   images: Connection<Image>;