add variant selector to the product grid and card

jetskis · Sep 12, 2023 · 235125c · 235125c
1 parent aae70cf
commit 235125c
Show file tree

Hide file tree

Showing 4 changed files with 412 additions and 31 deletions.
diff --git a/app/components/sharable/productGrid.jsx b/app/components/sharable/productGrid.jsx
@@ -1,6 +1,9 @@
 // import BlockContent from '@sanity/block-content-to-react'
 // import Serializer from '~/serializers/richText'
 
+import { useState } from 'react'
+import cx from 'classnames'
+
 import {
   ProductForm
 } from '~/components/product/ProductForm'
@@ -9,26 +12,43 @@ const ProductCard = ({
   product,
   shopify
 }) => {
-  const firstVariant = shopify?.variants?.nodes[0]
-  console.log('first variant', firstVariant)
+  const [activeVariant, setActiveVariant] = useState(shopify?.variants?.nodes[0])
+  console.log('first variant', product.store.variants[0], activeVariant)
   return (
     <div className='col-span-1'>
       <div className='aspect-square bg-primary-green/60' />
       <h3 className='text-mono-48 my-2'>{product?.store.title}</h3>
       TEST
       <div className='my-2'>
-        {/* <div className='flex my-4'>
-          <span className='h-10 w-10 rounded-full block mr-2 bg-primary-green' />
-          <span className='h-10 w-10 rounded-full block mr-2 bg-primary-green' />
-          <span className='h-10 w-10 rounded-full block mr-2 bg-primary-green' />
-        </div> */}
+        <div className='flex my-4'>
+          {product?.store?.variants?.map((variant, i) => {
+            return (
+              <button
+                key={variant.store.id}
+                style={{
+                  backgroundImage: variant.pattern?.colorType?.image ? `url(${variant.pattern?.colorType?.image?.url})` : 'none',
+                  backgroundSize: 'cover',
+                  backgroundColor: variant.pattern?.colorType?.color,
+                }}
+                onClick={() => setActiveVariant(shopify.variants.nodes[i])}
+                aria-label={`${variant.pattern.colorName}`}
+                className={cx('block w-10 h-10 mr-2 rounded-full border-black', {
+                  'opacity-100': activeVariant.id === variant.store.gid,
+                  'opacity-50': activeVariant.id !== variant.store.gid,
+                })}
+              >
+                <span className='absolute opacity-0'>{variant.pattern.colorName}</span>
+              </button>
+            )
+          })}
+        </div>
         <div>
 
           <ProductForm 
             product={product} 
-            selectedVariant={firstVariant} 
+            selectedVariant={activeVariant} 
             // productAnalytics={analytics} 
-            variantId={firstVariant?.id} />
+            variantId={activeVariant?.id} />
           {/* <button className='button primary small'>Add to Cart</button> */}
         </div>
       </div>

diff --git a/app/queries/sanity.js b/app/queries/sanity.js
@@ -29,6 +29,26 @@ const richText = groq`
   }
 `
 
+const pattern = groq`
+  {
+    _type,
+    _key,
+    ...,
+    'colorType': colorType[0] {
+      _type,
+      _key,
+      _type == 'color' => {
+        'color': hex,
+      },
+      _type == 'module.image' => {
+        'image': image.asset-> {
+          ...
+        }
+      }
+    }
+  }
+`
+
 export const QUERY_THEME = groq`
   *[_type == 'settings'][0] {
     footer {
@@ -125,7 +145,13 @@ const MODULE_PRODUCT_GRID = groq`
       _key,
       _type,
       'product': product-> {
-        store,
+        store {
+          ...,
+          variants[]-> {
+            ...,
+            'pattern': pattern-> ${pattern}
+          }
+        },
       },
       'productVariant': productVariant-> {
         store,
@@ -215,24 +241,7 @@ const productQuery = groq`
         url,
         _id,
       },
-      'pattern': pattern-> {
-        _type,
-        _key,
-        ...,
-        'colorType': colorType[0] {
-          _type,
-          _key,
-          _type == 'color' => {
-            'color': hex,
-          },
-          _type == 'module.image' => {
-            'image': image.asset-> {
-              ...
-            }
-          }
-        }
-        
-      }
+      'pattern': pattern-> ${pattern}
     }
   }
 `

diff --git a/app/styles/components/buttons.css b/app/styles/components/buttons.css
@@ -405,7 +405,8 @@
     position: relative;
     top: 2px;
 }
-  @media (color-index: 48) {
+
+@media (color-index: 48) {
     .dark\:prose-invert {
         --tw-prose-body: var(--tw-prose-invert-body);
         --tw-prose-headings: var(--tw-prose-invert-headings);
@@ -425,7 +426,8 @@
         --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
     }
 }
-  @media (color: 48842621) {
+
+@media (color: 48842621) {
     .dark\:prose-invert {
         --tw-prose-body: var(--tw-prose-invert-body);
         --tw-prose-headings: var(--tw-prose-invert-headings);
@@ -445,7 +447,8 @@
         --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
     }
 }
-  @media (prefers-color-scheme: dark) {
+
+@media (prefers-color-scheme: dark) {
     .dark\:prose-invert {
         --tw-prose-body: var(--tw-prose-invert-body);
         --tw-prose-headings: var(--tw-prose-invert-headings);