crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-13 21:27:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added compareAtPrice feature

Browse Source
This commit is contained in:
Ron Dopaz 2023-12-02 00:58:37 +02:00
parent e3dee2c904
commit 5c3a508826
3 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/product/product-description.tsx
View File

@ -5,16 +5,24 @@ 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>
<div className="mr-auto w-auto rounded-full bg-blue-600 p-2 text-sm text-white">
{parseFloat(compareAtPrice) > parseFloat(price) && (
<div className="mr-auto w-auto p-2 text-sm text-white line-through decoration-red-500">
<Price
amount={product.priceRange.maxVariantPrice.amount}
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 amount={price} currencyCode={product.priceRange.maxVariantPrice.currencyCode} />
</div>
</div>
<VariantSelector options={product.options} variants={product.variants} />

10
lib/shopify/fragments/product.ts
View File

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

4
lib/shopify/types.ts
View File

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