updates working on product variant selector + patterns and colors

jetskis · Sep 4, 2023 · 383226b · 383226b
1 parent 1319e9f
commit 383226b
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 4 deletions.
diff --git a/app/queries/sanity.js b/app/queries/sanity.js
@@ -164,6 +164,24 @@ const productQuery = groq`
   },
   modules[] {
     ${PRODUCT_MODULES}
+  },
+  store {
+    ...,
+    variants[]-> {
+      ...,
+      'pattern': pattern[0] {
+        _type,
+        _key,
+        _type == 'color' => {
+          'color': hex,
+        },
+        _type == '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))
-  console.log('sanityProduct', sanityProduct)
 
   const selectedVariant = product.selectedVariant ?? product?.variants?.nodes[0]
 
@@ -165,22 +164,31 @@ export default function ProductHandle() {
               </div>
             </div>
             <div className='w-full font-600 my-6 uppercase text-mono-20'>
+              <h4 className='text-mono-14 mb-4'>Colors: <span className='font-600'>{selectedVariant.title}</span></h4>
               <div className='flex gap-4' onChange={(e) => alert(e.currentTarget.value)}>    
                 {product.options.map(({ name, values }) => {
                   const currentOptionValue = searchParams.get(name)
                   return values.map((value) => {
                     const optionParams = new URLSearchParams(search);
                     const isSelected = currentOptionValue === value
+                    const matchedPattern = sanityProduct.store.variants.find(variant => {
+                      return variant.store.title == value
+                    })
                     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',
+                            backgroundSize: 'cover',
+                            backgroundColor: matchedPattern.pattern?.color,
+                          }}
                           aria-label={`${name}: ${value}`}
                           to={`${pathname}?${optionParams.toString()}`}
                           className={`block w-10 h-10 rounded-full border-black ${
-                            isSelected ? 'bg-black' : 'bg-primary-green'
+                            isSelected ? 'opacity-100 scale-[1.1]' : 'opacity-25'
                           }`}
                         >
                           <span className='absolute opacity-0'>{value}</span>

diff --git a/app/styles/app.css b/app/styles/app.css
@@ -1382,6 +1382,16 @@ select {
   --tw-rotate: 90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.scale-\[1\.4\] {
+  --tw-scale-x: 1.4;
+  --tw-scale-y: 1.4;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.scale-\[1\.1\] {
+  --tw-scale-x: 1.1;
+  --tw-scale-y: 1.1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -1842,6 +1852,9 @@ select {
 .opacity-60 {
   opacity: 0.6;
 }
+.opacity-25 {
+  opacity: 0.25;
+}
 .outline {
   outline-style: solid;
 }

diff --git a/cms/components/shopify/ShopifyVideo.jsx b/cms/components/shopify/ShopifyVideo.jsx
@@ -21,7 +21,6 @@ export const ShopifyVideo = (props) => {
       .then(res => res.json())
       .then(json => {
         if (!json.error) {
-          console.log('json??', json)
           onChange([
             set(json.data.url, ['url']),
           //   set(json.data.image.height, ['height']),

diff --git a/cms/schemas/documents/product.js b/cms/schemas/documents/product.js
@@ -70,6 +70,7 @@ export default defineType({
       type: 'productComponentList',
       group: 'editorial',
     }),
+
     defineField({
       name: 'store',
       title: 'Shopify',

diff --git a/cms/schemas/documents/productVariant.js b/cms/schemas/documents/productVariant.js
@@ -10,6 +10,10 @@ export default defineType({
   type: 'document',
   icon: CopyIcon,
   groups: [
+    {
+      name: 'editorial',
+      title: 'Editorial',
+    },
     {
       name: 'shopifySync',
       title: 'Shopify sync',
@@ -37,6 +41,22 @@ export default defineType({
       type: 'proxyString',
       options: {field: 'store.title'},
     }),
+    defineField({
+      title: 'Pattern',
+      name: 'pattern',
+      type: 'array',
+      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({
       name: 'store',

diff --git a/cms/schemas/objects/shopifyProductVariant.js b/cms/schemas/objects/shopifyProductVariant.js
@@ -97,7 +97,7 @@ export default defineField({
     defineField({
       name: 'price',
       title: 'Price',
-      type: 'string',
+      type: 'number',
     }),
     // Compare at price
     defineField({