add the price and some more cleanup

jetskis · Sep 12, 2023 · b06b87f · b06b87f
1 parent 4e1a3e9
commit b06b87f
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 10 deletions.
diff --git a/app/components/product/ProductForm.jsx b/app/components/product/ProductForm.jsx
@@ -6,6 +6,7 @@ import useStore from '~/state/useStore'
 export function ProductForm({
   variantId,
   product,
+  qtySelector = true,
   selectedVariant,
   productAnalytics
 }) {
@@ -38,11 +39,13 @@ export function ProductForm({
         value={selectedLocale?.country ?? 'US'}
       />
       <input type="hidden" name="lines" value={JSON.stringify(lines)} />
-      <div className='flex justify-center border-2 rounded-[8px] w-1/2 items-center h-[60px]'>
-        <button type='button' onClick={() => quantity > 1 && setQuantity(quantity-1)} className='site-theme p-2 px-4'>-</button>
-        <input onChange={(e) => setQuantity(e.currentTarget.value)} defaultValue={quantity} min={1} max={100}  type='number' className='w-[80px] appearance-none text-mono-20 bg-transparent m-0 text-center border-none  h-[50px]' />
-        <button type='button' onClick={() => setQuantity(quantity+1)} className='site-theme p-2 px-4'>+</button>
-      </div>
+      {qtySelector && (
+        <div className='flex justify-center border-2 rounded-[8px] w-1/2 items-center h-[60px]'>
+          <button type='button' onClick={() => quantity > 1 && setQuantity(quantity-1)} className='site-theme p-2 px-4'>-</button>
+          <input onChange={(e) => setQuantity(e.currentTarget.value)} defaultValue={quantity} min={1} max={100}  type='number' className='w-[80px] appearance-none text-mono-20 bg-transparent m-0 text-center border-none  h-[50px]' />
+          <button type='button' onClick={() => setQuantity(quantity+1)} className='site-theme p-2 px-4'>+</button>
+        </div>
+      )}
       <button className="w-1/2 hover:bg-almost-black hover:text-white transition-colors duration-300 bg-primary-green text-black uppercase h-[60px] theme-add-button text-mono-20  px-6 text-center font-mono">
         <span className=''>add to bag</span>
       </button>

diff --git a/app/components/sharable/productGrid.jsx b/app/components/sharable/productGrid.jsx
@@ -16,13 +16,22 @@ const ProductCard = ({
   const shopifyDefaultVariant = shopify.variants.nodes.find(item => {
     return item.id === defaultVariant.store.gid
   })
-  const [activeVariant, setActiveVariant] = useState(shopifyDefaultVariant ? shopifyDefaultVariant : shopify?.variants?.nodes[0])
+  const [activeVariant, setActiveVariant] = useState(shopifyDefaultVariant ? {
+    sanity: defaultVariant,
+    ...shopifyDefaultVariant
+   } : {
+    sanity: product.store.variants[0],
+    ...shopify?.variants?.nodes[0]
+   })
   console.log('active variant', 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='aspect-square bg-primary-green/60'>
+        {activeVariant?.sanity?.mainImage?.asset?.url && (
+          <img src={activeVariant?.sanity?.mainImage?.asset?.url} alt={activeVariant.sanity.title} />
+        )}
+      </div>
+      <h3 className='text-mono-48 my-2'>{product?.store.title} ${activeVariant.sanity.store.price}</h3>
       <div className='my-2'>
         <div className='flex my-4'>
           {product?.store?.variants?.map((variant, i) => {
@@ -38,7 +47,10 @@ const ProductCard = ({
                   const shopifyVariant = shopify.variants.nodes.find(item => {
                     return item.id === variant.store.gid
                   })
-                  setActiveVariant(shopifyVariant)
+                  setActiveVariant({
+                    sanity: variant,
+                    ...shopifyVariant
+                  })
                 }}
                 aria-label={`${variant.pattern.colorName}`}
                 className={cx('block w-10 h-10 mr-2 rounded-full border-black', {
@@ -57,6 +69,7 @@ const ProductCard = ({
             product={product} 
             selectedVariant={activeVariant} 
             // productAnalytics={analytics} 
+            qtySelector={false}
             variantId={activeVariant?.id} />
           {/* <button className='button primary small'>Add to Cart</button> */}
         </div>

diff --git a/app/queries/sanity.js b/app/queries/sanity.js
@@ -149,11 +149,22 @@ const MODULE_PRODUCT_GRID = groq`
           ...,
           variants[]-> {
             ...,
+            mainImage {
+              asset-> {
+                ...
+              }
+            },
             'pattern': pattern-> ${pattern}
           }
         },
       },
       'productVariant': productVariant-> {
+        ...,
+        mainImage {
+          asset-> {
+            ...
+          }
+        },
         store,
       }
     }