Merge branch 'custom-fields' of github.com:vercel/commerce into main

site/components/product/ProductCustomFields/ProductCustomFields.tsx

@@ -0,0 +1,23 @@
+import type { CustomField } from '@commerce/types/common'
+
+interface Props {
+  customFields: CustomField[]
+}
+
+const ProductCustomFields: React.FC<Props> = ({ customFields }) => {
+  return (
+    <>
+      {customFields.map((field) => (
+        <div
+          key={field.id}
+          className="flex gap-2 border-b py-3 border-accent-2 border-dashed last:border-b-0"
+        >
+          <strong className="leading-7">{field.name}:</strong>
+          <span>{field.value}</span>
+        </div>
+      ))}
+    </>
+  )
+}
+
+export default ProductCustomFields

site/components/product/ProductCustomFields/index.ts

@@ -0,0 +1 @@
+export { default as ProductCustomFields } from './ProductCustomFields'

site/components/product/ProductMetafields/ProductMetafields.tsx

@@ -0,0 +1,29 @@
+import type { FC } from 'react'
+import type { Metafields } from '@commerce/types/common'
+import Text from '@components/ui/Text'
+
+interface Props {
+  metafields: Metafields
+  /**
+   *  The namespace of the metafields to display.
+   */
+  namespace: string
+}
+
+const ProductMetafields: FC<Props> = ({ metafields, namespace }) => {
+  return (
+    <>
+      {Object.values(metafields[namespace] ?? {}).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.valueHtml || field.value} className="!mx-0" />
+        </div>
+      ))}
+    </>
+  )
+}
+
+export default ProductMetafields

site/components/product/ProductMetafields/index.ts

@@ -0,0 +1 @@
+export { default as ProductMetafields } from './ProductMetafields'

site/components/product/ProductSidebar/ProductSidebar.tsx

@@ -10,6 +10,8 @@ import {
   SelectedOptions,
 } from '../helpers'
 import ErrorMessage from '@components/ui/ErrorMessage'
+import { ProductCustomFields } from '../ProductCustomFields'
+import { ProductMetafields } from '../ProductMetafields'
 
 interface ProductSidebarProps {
   product: Product
@@ -62,10 +64,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 ?? 0} reviews
+          </div>
+        </div>
+      )}
+
       <div>
         {error && <ErrorMessage error={error} className="my-5" />}
         {process.env.COMMERCE_CART_ENABLED && (
@@ -88,11 +96,27 @@ const ProductSidebar: FC<ProductSidebarProps> = ({ product, className }) => {
           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.customFields && product.customFields?.length > 0 && (
+          <Collapse title="Specifications">
+            <ProductCustomFields customFields={product.customFields} />
+          </Collapse>
+        )}
+
+        {product.metafields?.my_fields && (
+          <Collapse title="Specifications">
+            <ProductMetafields
+              metafields={product.metafields}
+              namespace="my_fields"
+            />
+          </Collapse>
+        )}
       </div>
     </div>
   )

site/pages/product/[slug].tsx

@@ -3,11 +3,22 @@ import type {
   GetStaticPropsContext,
   InferGetStaticPropsType,
 } from 'next'
-import { useRouter } from 'next/router'
+
 import commerce from '@lib/api/commerce'
+
+import { useRouter } from 'next/router'
 import { Layout } from '@components/common'
 import { ProductView } from '@components/product'
 
+// Used by the Shopify Example
+const withMetafields = [
+  { namespace: 'reviews', key: 'rating' },
+  { namespace: 'reviews', key: 'count' },
+  { namespace: 'my_fields', key: 'width' },
+  { namespace: 'my_fields', key: 'weight' },
+  { namespace: 'my_fields', key: 'length' },
+]
+
 export async function getStaticProps({
   params,
   locale,
@@ -18,7 +29,10 @@ export async function getStaticProps({
   const pagesPromise = commerce.getAllPages({ config, preview })
   const siteInfoPromise = commerce.getSiteInfo({ config, preview })
   const productPromise = commerce.getProduct({
-    variables: { slug: params!.slug },
+    variables: {
+      slug: params!.slug,
+      withMetafields,
+    },
     config,
     preview,
   })