Adding Correct Sizes and Colors

components/product/ProductView/ProductView.tsx

@@ -22,7 +22,7 @@ interface Choices {
 
 const ProductView: FC<Props> = ({ product, className }) => {
   const options = getProductOptions(product)
-  console.log(options)
+  // console.log(options)
 
   const addItem = useAddItem()
   const { openSidebar } = useUI()
@@ -102,46 +102,48 @@ const ProductView: FC<Props> = ({ product, className }) => {
         </div>
 
         <div className="flex-1 flex flex-col pt-24">
-          {options?.map((opt: any) => (
-            <section className="pb-4">
-              <h2 className="uppercase font-medium">{opt.displayName}</h2>
-              <div className="flex flex-row py-4">
-                {opt.values.map((v: any) => {
-                  return (
-                    <Swatch
-                      key={v.entityId}
-                      active={v.label === activeColor}
-                      variant={opt.displayName}
-                      color={v.hexColors ? v.hexColors[0] : ''}
-                      label={v.label}
-                      onClick={() =>
-                        setChoices((choices) => {
-                          return {
-                            ...choices,
-                            [opt.displayName]: v.label,
-                          }
-                        })
-                      }
-                    />
-                  )
-                })}
+          <section>
+            {options?.map((opt: any) => (
+              <div className="pb-4">
+                <h2 className="uppercase font-medium">{opt.displayName}</h2>
+                <div className="flex flex-row py-4">
+                  {opt.values.map((v: any) => {
+                    return (
+                      <Swatch
+                        key={v.entityId}
+                        active={v.label === activeColor}
+                        variant={opt.displayName}
+                        color={v.hexColors ? v.hexColors[0] : ''}
+                        label={v.label}
+                        onClick={() =>
+                          setChoices((choices) => {
+                            return {
+                              ...choices,
+                              [opt.displayName]: v.label,
+                            }
+                          })
+                        }
+                      />
+                    )
+                  })}
+                </div>
               </div>
-              <div className="pb-12">
-                <div
-                  className="break-words"
-                  dangerouslySetInnerHTML={{ __html: product.description }}
-                />
-                <Button
-                  type="button"
-                  className={s.button}
-                  onClick={addToCart}
-                  loading={loading}
-                >
-                  Add to Cart
-                </Button>
-              </div>
-            </section>
-          ))}
+            ))}
+            <div className="pb-12">
+              <div
+                className="pb-14 break-words"
+                dangerouslySetInnerHTML={{ __html: product.description }}
+              />
+              <Button
+                type="button"
+                className={s.button}
+                onClick={addToCart}
+                loading={loading}
+              >
+                Add to Cart
+              </Button>
+            </div>
+          </section>
         </div>
       </div>
     </Container>

components/product/Swatch/Swatch.tsx

@@ -24,7 +24,7 @@ const Swatch: FC<Props & ButtonProps> = ({
 }) => {
   variant = variant?.toLowerCase()
   label = label?.toLowerCase()
-  console.log(variant)
+  // console.log(variant)
   const rootClassName = cn(
     s.root,
     {

components/product/helpers.ts

@@ -1,7 +1,7 @@
 import type { Product } from '@lib/bigcommerce/api/operations/get-product'
 
 export function getProductOptions(product: Product) {
-  console.log(product)
+  // console.log(product)
   const options = product.productOptions.edges?.map(({ node }: any) => ({
     displayName: node.displayName.toLowerCase(),
     values: node.values.edges?.map(({ node }: any) => node),

lib/bigcommerce/schema.d.ts

@@ -1670,6 +1670,40 @@ export type ResponsiveImageFragment = { __typename?: 'Image' } & Pick<
     urlXL: Image['url']
   }
 
+export type SwatchOptionFragment = { __typename?: 'SwatchOptionValue' } & Pick<
+  SwatchOptionValue,
+  'isDefault' | 'hexColors'
+>
+
+export type MultipleChoiceOptionFragment = {
+  __typename?: 'MultipleChoiceOption'
+} & Pick<MultipleChoiceOption, 'entityId'> & {
+    values: { __typename?: 'ProductOptionValueConnection' } & {
+      edges?: Maybe<
+        Array<
+          Maybe<
+            { __typename?: 'ProductOptionValueEdge' } & {
+              node:
+                | ({ __typename?: 'MultipleChoiceOptionValue' } & Pick<
+                    MultipleChoiceOptionValue,
+                    'label'
+                  >)
+                | ({ __typename?: 'ProductPickListOptionValue' } & Pick<
+                    ProductPickListOptionValue,
+                    'label'
+                  >)
+                | ({ __typename?: 'SwatchOptionValue' } & Pick<
+                    SwatchOptionValue,
+                    'label'
+                  > &
+                    SwatchOptionFragment)
+            }
+          >
+        >
+      >
+    }
+  }
+
 export type ProductInfoFragment = { __typename?: 'Product' } & Pick<
   Product,
   'entityId' | 'name' | 'path' | 'description'
@@ -1709,30 +1743,41 @@ export type ProductInfoFragment = { __typename?: 'Product' } & Pick<
         >
       >
     }
-    options: { __typename?: 'OptionConnection' } & {
+    productOptions: { __typename?: 'ProductOptionConnection' } & {
       edges?: Maybe<
         Array<
           Maybe<
-            { __typename?: 'OptionEdge' } & {
-              node: { __typename?: 'ProductOption' } & Pick<
-                ProductOption,
-                'entityId' | 'displayName' | 'isRequired'
-              > & {
-                  values: { __typename?: 'OptionValueConnection' } & {
-                    edges?: Maybe<
-                      Array<
-                        Maybe<
-                          { __typename?: 'OptionValueEdge' } & {
-                            node: { __typename?: 'ProductOptionValue' } & Pick<
-                              ProductOptionValue,
-                              'entityId' | 'label'
-                            >
-                          }
-                        >
-                      >
-                    >
-                  }
-                }
+            { __typename?: 'ProductOptionEdge' } & {
+              node:
+                | ({ __typename?: 'CheckboxOption' } & Pick<
+                    CheckboxOption,
+                    'entityId' | 'displayName'
+                  >)
+                | ({ __typename?: 'DateFieldOption' } & Pick<
+                    DateFieldOption,
+                    'entityId' | 'displayName'
+                  >)
+                | ({ __typename?: 'FileUploadFieldOption' } & Pick<
+                    FileUploadFieldOption,
+                    'entityId' | 'displayName'
+                  >)
+                | ({ __typename?: 'MultiLineTextFieldOption' } & Pick<
+                    MultiLineTextFieldOption,
+                    'entityId' | 'displayName'
+                  >)
+                | ({ __typename?: 'MultipleChoiceOption' } & Pick<
+                    MultipleChoiceOption,
+                    'entityId' | 'displayName'
+                  > &
+                    MultipleChoiceOptionFragment)
+                | ({ __typename?: 'NumberFieldOption' } & Pick<
+                    NumberFieldOption,
+                    'entityId' | 'displayName'
+                  >)
+                | ({ __typename?: 'TextFieldOption' } & Pick<
+                    TextFieldOption,
+                    'entityId' | 'displayName'
+                  >)
             }
           >
         >

pages/search.tsx

@@ -1,21 +1,21 @@
-import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
-import { useRouter } from 'next/router'
-import Link from 'next/link'
 import cn from 'classnames'
+import Link from 'next/link'
+import { range } from 'lodash'
+import { useRouter } from 'next/router'
+import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
+import { Layout } from '@components/core'
+import { ProductCard } from '@components/product'
+import { Container, Grid, Skeleton } from '@components/ui'
+import getSlug from '@utils/get-slug'
+import useSearch from '@lib/bigcommerce/products/use-search'
 import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
 import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
-import useSearch from '@lib/bigcommerce/products/use-search'
-import { Layout } from '@components/core'
-import { Container, Grid, Skeleton } from '@components/ui'
-import { ProductCard } from '@components/product'
-import getSlug from '@utils/get-slug'
 import {
   filterQuery,
   getCategoryPath,
   getDesignerPath,
   useSearchMeta,
 } from '@utils/search'
-import { range } from 'lodash'
 
 export async function getStaticProps({ preview }: GetStaticPropsContext) {
   const { pages } = await getAllPages()
@@ -138,25 +138,26 @@ export default function Search({
               </>
             )}
           </div>
-          <Grid
-            items={data ? data.products : range(12)}
-            layout="normal"
-            wrapper={
-              data
-                ? (p: any) => (
-                    <ProductCard
-                      className="animate__animated animate__fadeIn"
-                      {...p}
-                    />
-                  )
-                : () => (
-                    <Skeleton
-                      className="w-full animate__animated animate__fadeIn"
-                      height={325}
-                    />
-                  )
-            }
-          />
+
+          {data ? (
+            <Grid layout="normal">
+              {data.products.map((p: any) => (
+                <ProductCard
+                  className="animate__animated animate__fadeIn"
+                  {...p}
+                />
+              ))}
+            </Grid>
+          ) : (
+            <Grid>
+              {range(12).map(() => (
+                <Skeleton
+                  className="w-full animate__animated animate__fadeIn"
+                  height={325}
+                />
+              ))}
+            </Grid>
+          )}
         </div>
         <div className="col-span-2">
           <ul>