rebuild the color picker using colorType

jetskis · Sep 4, 2023 · 1680c3c · 1680c3c
1 parent 383226b
commit 1680c3c
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 36 deletions.
diff --git a/app/queries/sanity.js b/app/queries/sanity.js
@@ -169,17 +169,23 @@ const productQuery = groq`
     ...,
     variants[]-> {
       ...,
-      'pattern': pattern[0] {
+      'pattern': pattern-> {
         _type,
         _key,
-        _type == 'color' => {
-          'color': hex,
-        },
-        _type == 'image' => {
-          'image': asset-> {
-            ...
+        ...,
+        'colorType': colorType[0] {
+          _type,
+          _key,
+          _type == 'color' => {
+            'color': hex,
+          },
+          _type == 'module.image' => {
+            'image': image.asset-> {
+              ...
+            }
           }
         }
+        
       }
     }
   }

diff --git a/app/routes/($locale).products.$handle.jsx b/app/routes/($locale).products.$handle.jsx
@@ -59,7 +59,6 @@ export const loader = async ({ params, context, request }) => {
   }
 
   const sanityProduct = await context.sanity.fetch(QUERY_PRODUCT(handle))
-
   const selectedVariant = product.selectedVariant ?? product?.variants?.nodes[0]
 
   return json({
@@ -174,16 +173,17 @@ export default function ProductHandle() {
                     const matchedPattern = sanityProduct.store.variants.find(variant => {
                       return variant.store.title == value
                     })
+                    console.log('matchedPattern', matchedPattern.pattern.colorType)
                     optionParams.set(name, value)
                     return (
                       /* Use the `active` state to conditionally style the active item. */
                         <Link
                           key={value}
                           preventScrollReset
                           style={{
-                            backgroundImage: matchedPattern.pattern?.image ? `url(${matchedPattern.pattern?.image?.url})` : 'none',
+                            backgroundImage: matchedPattern.pattern?.colorType?.image ? `url(${matchedPattern.pattern?.colorType?.image?.url})` : 'none',
                             backgroundSize: 'cover',
-                            backgroundColor: matchedPattern.pattern?.color,
+                            backgroundColor: matchedPattern.pattern?.colorType?.color,
                           }}
                           aria-label={`${name}: ${value}`}
                           to={`${pathname}?${optionParams.toString()}`}

diff --git a/cms/schemas/documents/productVariant.js b/cms/schemas/documents/productVariant.js
@@ -44,18 +44,9 @@ export default defineType({
     defineField({
       title: 'Pattern',
       name: 'pattern',
-      type: 'array',
+      type: 'reference',
+      to: { type: 'colorType' },
       group: 'editorial',
-      of: [{
-        type: 'color',
-        name: 'color',
-        title: 'Color'
-      }, {
-        type: 'image',
-        name: 'image',
-        title: 'Image'
-      }],
-      validation: Rule => Rule.required().max(1),
     }),
     // Shopify product variant
     defineField({

diff --git a/cms/schemas/objects/shopifyProduct.js b/cms/schemas/objects/shopifyProduct.js
@@ -31,6 +31,21 @@ export default defineField({
     },
   ],
   fields: [
+    // Variants
+    defineField({
+      fieldset: 'variants',
+      name: 'variants',
+      title: 'Variants',
+      type: 'array',
+      of: [
+        {
+          title: 'Variant',
+          type: 'reference',
+          weak: true,
+          to: [{type: 'productVariant'}],
+        },
+      ],
+    }),
     // Created at
     defineField({
       fieldset: 'status',
@@ -194,20 +209,6 @@ export default defineField({
         },
       ],
     }),
-    // Variants
-    defineField({
-      fieldset: 'variants',
-      name: 'variants',
-      title: 'Variants',
-      type: 'array',
-      of: [
-        {
-          title: 'Variant',
-          type: 'reference',
-          weak: true,
-          to: [{type: 'productVariant'}],
-        },
-      ],
-    }),
+
   ],
 })