crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-23 04:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement metafields

Browse Source
This commit is contained in:
cond0r
2022-11-28 08:49:27 +02:00
parent 90aa798891
commit 6699f2fed4
11 changed files with 394 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
site/components/product/ProductSidebar/ProductSidebar.tsx
View File

@@ -62,10 +62,16 @@ const ProductSidebar: FC<ProductSidebarProps> = ({ product, className }) => {
className="pb-4 break-words w-full max-w-xl"
html={product.descriptionHtml || product.description}
/>
<div className="flex flex-row justify-between items-center">
<Rating value={4} />
<div className="text-accent-6 pr-1 font-medium text-sm">36 reviews</div>
</div>
{product.metafields?.reviews?.rating && (
<div className="flex flex-row justify-between items-center">
<Rating value={product.metafields.reviews.rating.value} />
<div className="text-accent-6 pr-1 font-medium text-sm">
{product.metafields.reviews.count?.value || 2} reviews
</div>
</div>
)}
<div>
{error && <ErrorMessage error={error} className="my-5" />}
{process.env.COMMERCE_CART_ENABLED && (
@@ -84,15 +90,28 @@ const ProductSidebar: FC<ProductSidebarProps> = ({ product, className }) => {
)}
</div>
<div className="mt-6">
<Collapse title="Care">
This is a limited edition production run. Printing starts when the
drop ends.
</Collapse>
<Collapse title="Details">
This is a limited edition production run. Printing starts when the
drop ends. Reminder: Bad Boys For Life. Shipping may take 10+ days due
to COVID-19.
</Collapse>
{product.metafields?.descriptors?.care_guide && (
<Collapse title="Care">
<Text
className="leading-0"
html={product.metafields.descriptors.care_guide.html}
/>
</Collapse>
)}
{product.metafields?.my_fields && (
<Collapse title="Details">
{Object.entries(product.metafields.my_fields).map(([_, field]) => (
<div
key={field.key}
className="flex gap-2 border-b py-3 border-accent-2 border-dashed last:border-b-0"
>
<strong className="leading-7">{field.name}:</strong>
<Text html={field.html || field.value} className="!mx-0" />
</div>
))}
</Collapse>
)}
</div>
</div>
)