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,8 +102,9 @@ const ProductView: FC<Props> = ({ product, className }) => {
         </div>
 
         <div className="flex-1 flex flex-col pt-24">
+          <section>
             {options?.map((opt: any) => (
-            <section className="pb-4">
+              <div className="pb-4">
                 <h2 className="uppercase font-medium">{opt.displayName}</h2>
                 <div className="flex flex-row py-4">
                   {opt.values.map((v: any) => {
@@ -126,9 +127,11 @@ const ProductView: FC<Props> = ({ product, className }) => {
                     )
                   })}
                 </div>
+              </div>
+            ))}
             <div className="pb-12">
               <div
-                  className="break-words"
+                className="pb-14 break-words"
                 dangerouslySetInnerHTML={{ __html: product.description }}
               />
               <Button
@@ -141,7 +144,6 @@ const ProductView: FC<Props> = ({ product, className }) => {
               </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' } & {
+            { __typename?: 'ProductOptionEdge' } & {
-              node: { __typename?: 'ProductOption' } & Pick<
+              node:
-                ProductOption,
+                | ({ __typename?: 'CheckboxOption' } & Pick<
-                'entityId' | 'displayName' | 'isRequired'
+                    CheckboxOption,
-              > & {
+                    'entityId' | 'displayName'
-                  values: { __typename?: 'OptionValueConnection' } & {
+                  >)
-                    edges?: Maybe<
+                | ({ __typename?: 'DateFieldOption' } & Pick<
-                      Array<
+                    DateFieldOption,
-                        Maybe<
+                    'entityId' | 'displayName'
-                          { __typename?: 'OptionValueEdge' } & {
+                  >)
-                            node: { __typename?: 'ProductOptionValue' } & Pick<
+                | ({ __typename?: 'FileUploadFieldOption' } & Pick<
-                              ProductOptionValue,
+                    FileUploadFieldOption,
-                              'entityId' | 'label'
+                    '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)}
+          {data ? (
-            layout="normal"
+            <Grid layout="normal">
-            wrapper={
+              {data.products.map((p: any) => (
-              data
-                ? (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>