Implement metafields

site/components/product/ProductSidebar/ProductSidebar.tsx

@@ -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>
   )

site/pages/product/[slug].tsx

@@ -3,11 +3,23 @@ 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: 'descriptors', key: 'care_guide' },
+  { namespace: 'my_fields', key: 'weight' },
+  { namespace: 'my_fields', key: 'width' },
+  { namespace: 'my_fields', key: 'length' },
+  { namespace: 'my_fields', key: 'manufacturer_url' },
+]
+
 export async function getStaticProps({
   params,
   locale,
@@ -18,7 +30,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,
   })

site/tsconfig.json

@@ -23,8 +23,8 @@
       "@components/*": ["components/*"],
       "@commerce": ["../packages/commerce/src"],
       "@commerce/*": ["../packages/commerce/src/*"],
-      "@framework": ["../packages/local/src"],
-      "@framework/*": ["../packages/local/src/*"]
+      "@framework": ["../packages/shopify/src"],
+      "@framework/*": ["../packages/shopify/src/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],