sanity connect, extend the product in sanity, render the product in t…

…he frontend
jetskis · Aug 28, 2023 · 1319e9f · 1319e9f
1 parent 056f445
commit 1319e9f
Show file tree

Hide file tree

Showing 8 changed files with 5,690 additions and 5,613 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/app/components/ProductComponentList.jsx b/app/components/ProductComponentList.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { ValueProps } from '~/components/sharable/valueProps'
+import { Faqs } from '~/components/sharable/faqs'
+
+const COMPONENTS = {
+	'module.valueProps': ValueProps,
+	'module.faqs': Faqs,
+};
+
+const ProductComponentList = ({components = [], componentProps = {}}) => {
+	const componentRows = components?.map((component, index) => {
+		const Component = COMPONENTS[component._type];
+
+		if (!Component)
+			return (
+				<div key={component._key} className="p-8">
+					<div className='p-2 border border-solid bg-magenta'>
+						missing - {component._type}
+					</div>
+				</div>
+			);
+
+		return (
+			<Component
+				index={index}
+				key={component._key}
+				{...component}
+				{...componentProps}
+			/>
+		);
+	});
+
+	return <>{componentRows}</>
+};
+
+export default ProductComponentList;
diff --git a/app/queries/sanity.js b/app/queries/sanity.js
@@ -122,6 +122,13 @@ const MODULES = groq`
   ${MODULE_STANDARD_TEXT},
   ${MODULE_HERO}
 `
+const PRODUCT_MODULES = groq`
+  _type,
+  _key,
+  ${MODULE_STANDARD_TEXT},
+  ${MODULE_VALUE_PROPS},
+  ${MODULE_FAQS}
+`
 
 const PAGE_MODULES = groq`
   _type,
@@ -152,8 +159,11 @@ const productQuery = groq`
   'slug': store.slug.current,
   title,
   images,
+  body[] {
+    ${richText}
+  },
   modules[] {
-    ${MODULES}
+    ${PRODUCT_MODULES}
   }
 `
 

diff --git a/app/routes/($locale).products.$handle.jsx b/app/routes/($locale).products.$handle.jsx
@@ -3,9 +3,16 @@ import { useLoaderData, Link, useLocation, useNavigation, useSearchParams, useMa
 import { json } from 'react-router'
 import {useKeenSlider} from 'keen-slider/react'
 
+import BlockContent from '@sanity/block-content-to-react'
+import Serializer from '~/serializers/richText'
+
 import { Menu } from '@headlessui/react'
 import 'keen-slider/keen-slider.min.css'
 
+import ProductComponentList from '~/components/ProductComponentList'
+
+import { QUERY_PRODUCT } from '~/queries/sanity'
+
 import {
   SHOPIFY_PRODUCT_QUERY
 } from '~/queries/product'
@@ -46,15 +53,20 @@ export const loader = async ({ params, context, request }) => {
       selectedOptions
     }
   })
+
   if (!product?.id) {
     throw new Response(null, { status: 404 })
   }
 
+  const sanityProduct = await context.sanity.fetch(QUERY_PRODUCT(handle))
+  console.log('sanityProduct', sanityProduct)
+
   const selectedVariant = product.selectedVariant ?? product?.variants?.nodes[0]
 
   return json({
     handle,
     product,
+    sanityProduct,
     selectedVariant,
     analytics: {
       pageType: 'product'
@@ -72,7 +84,7 @@ function PrintJson({data}) {
 }
 
 export default function ProductHandle() {
-  const { handle, product, selectedVariant, analytics } = useLoaderData()
+  const { handle, product, sanityProduct, selectedVariant, analytics } = useLoaderData()
   const { pathname, search }  = useLocation()
   const [ currentSearchParams ]  = useSearchParams()
   const navigation = useNavigation()
@@ -141,7 +153,9 @@ export default function ProductHandle() {
               className="text-xl font-600 text-32"
             />
             <div className='my-4'>
-              <p className='text-mono-18'>Equipped with smooth-rolling wheels and a retractable telescopic handle, the bag effortlessly glides along various surfaces, providing easy maneuverability through crowded airports, busy streets, or rugged terrain. The handle can be adjusted to different heights, allowing you to find the most comfortable position for pulling the bag.</p>
+              {sanityProduct.body && (
+                <BlockContent blocks={sanityProduct.body} serializers={Serializer} />
+              )}
             </div>
             <div className='my-8'>
               <h4 className='text-mono-14 mb-4'>Sizes:</h4>
@@ -182,23 +196,7 @@ export default function ProductHandle() {
 
 
       </div>
-      {/* VALUE PROPS */}
-      <section className='p-4 text-center 800:py-20'>
-        <div className='grid grid-cols-3 gap-4 max-w-[900px] mx-auto'>
-          <div className='col-span-1'>
-            <h4 className='text-mono-22 mb-5'>Free Shipping</h4>
-            <p>All orders of $89 or more qualify for free shipping. No promotional code needed.</p>
-          </div>
-          <div className='col-span-1'>
-            <h4 className='text-mono-22 mb-5'>Lifetime Guarantee</h4>
-            <p>Free replacement for any quality issues you experience with our bags.</p>
-          </div>
-          <div className='col-span-1'>
-            <h4 className='text-mono-22 mb-5'>Free Returns </h4>
-            <p>If you don’t love your order, return it within 30 days & shipping is on us.</p>
-          </div>
-        </div>
-      </section>
+      {sanityProduct.modules && (<ProductComponentList components={sanityProduct.modules} />)}
       {/* BENEFITS */}
       <section className='p-4 800:px-8 800:py-20 bg-primary-green/10'>
         <div className='max-w-[90%] mx-auto'>

diff --git a/app/styles/app.css b/app/styles/app.css
@@ -1181,6 +1181,9 @@ select {
 .-mb-px {
   margin-bottom: -1px;
 }
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -1214,9 +1217,6 @@ select {
 .mt-\[100px\] {
   margin-top: 100px;
 }
-.mb-3 {
-  margin-bottom: 0.75rem;
-}
 .block {
   display: block;
 }
@@ -1733,9 +1733,6 @@ select {
 .text-22 {
   font-size: 22px;
 }
-.text-24 {
-  font-size: 24px;
-}
 .text-32 {
   font-size: 32px;
 }
@@ -1807,12 +1804,6 @@ select {
 .leading-16 {
   line-height: 16px;
 }
-.leading-21 {
-  line-height: 21px;
-}
-.leading-29 {
-  line-height: 29px;
-}
 .leading-\[100\%\] {
   line-height: 100%;
 }

diff --git a/cms/schemas/documents/product.js b/cms/schemas/documents/product.js
@@ -10,6 +10,7 @@ const GROUPS = [
   {
     name: 'editorial',
     title: 'Editorial',
+    default: true,
   },
   {
     name: 'shopifySync',
@@ -49,13 +50,26 @@ export default defineType({
       type: 'proxyString',
       options: {field: 'store.title'},
     }),
+
     // Slug (proxy)
     defineField({
       name: 'slugProxy',
       title: 'Slug',
       type: 'proxyString',
       options: {field: 'store.slug.current'},
     }),
+    defineField({
+      name: 'body',
+      title: 'Body',
+      type: 'richText',
+      group: 'editorial',
+    }),
+    defineField({
+      name: 'modules',
+      title: 'Modules',
+      type: 'productComponentList',
+      group: 'editorial',
+    }),
     defineField({
       name: 'store',
       title: 'Shopify',

diff --git a/cms/schemas/modules/productComponentList.js b/cms/schemas/modules/productComponentList.js
@@ -9,6 +9,9 @@ export default {
 	icon: Icon,
 	type: 'array',
 	of: [
-		{ type: 'module.image' }
+		{ type: 'module.valueProps' },
+		{ type: 'module.faqs' },
+		{ type: 'module.image' },
+		{ type: 'module.standardText' },
 	],
 };