diff --git a/components/product/product-description.tsx b/components/product/product-description.tsx index a81a6b02c..9d2ab066f 100644 --- a/components/product/product-description.tsx +++ b/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 ( <>

{product.title}

+ {parseFloat(compareAtPrice) > parseFloat(price) && ( +
+ +
+ )}
- +
diff --git a/lib/shopify/fragments/product.ts b/lib/shopify/fragments/product.ts index be14dedca..bd67810dc 100644 --- a/lib/shopify/fragments/product.ts +++ b/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 { diff --git a/lib/shopify/types.ts b/lib/shopify/types.ts index 23dc02d46..8a7a89891 100644 --- a/lib/shopify/types.ts +++ b/lib/shopify/types.ts @@ -120,6 +120,10 @@ export type ShopifyProduct = { maxVariantPrice: Money; minVariantPrice: Money; }; + compareAtPriceRange: { + maxVariantPrice: Money; + minVariantPrice: Money; + }; variants: Connection; featuredImage: Image; images: Connection;