Merge pull request #39 from buildheadless/sections

feat:(theme) Add desktopColumns and max products options
buildheadless · Dec 3, 2023 · f644ae0 · f644ae0
2 parents f00b300 + 49fb66a
commit f644ae0
Show file tree

Hide file tree

Showing 10 changed files with 113 additions and 16 deletions.
diff --git a/templates/hydrogen-theme/app/components/CollectionCard.tsx b/templates/hydrogen-theme/app/components/CollectionCard.tsx
@@ -1,18 +1,31 @@
 import {Link} from '@remix-run/react';
 import {Image} from '@shopify/hydrogen';
+import {cx} from 'class-variance-authority';
+
 import type {CollectionsQuery} from 'storefrontapi.generated';
 
 export function CollectionCard(props: {
   collection: CollectionsQuery['collections']['nodes'][0];
   className?: string;
+  columns?: number | null;
 }) {
   const {collection} = props;
+  const sizes = cx([
+    '(min-width: 1024px)',
+    props.columns ? `${100 / props.columns}vw,` : '33vw,',
+    '100vw',
+  ]);
 
   return (
     <div className="overflow-hidden rounded-lg border">
       <Link prefetch="viewport" to={`/collections/${collection.handle}`}>
         {collection.image && (
-          <Image aspectRatio="16/9" sizes="33vw" data={collection.image} />
+          <Image
+            aspectRatio="16/9"
+            className="h-auto w-full object-cover"
+            sizes={sizes}
+            data={collection.image}
+          />
         )}
         <div className="p-3">
           <div className="text-lg">{collection.title}</div>

diff --git a/templates/hydrogen-theme/app/components/CollectionListGrid.tsx b/templates/hydrogen-theme/app/components/CollectionListGrid.tsx
@@ -1,17 +1,30 @@
-import type {CollectionsQuery} from 'storefrontapi.generated';
+import type {CSSProperties} from 'react';
 import {flattenConnection} from '@shopify/hydrogen';
+import {cx} from 'class-variance-authority';
+
+import type {CollectionsQuery} from 'storefrontapi.generated';
 import {CollectionCard} from './CollectionCard';
 
 export function CollectionListGrid(props: {
   collections?: CollectionsQuery['collections'];
+  columns?: number | null;
 }) {
   const collections = flattenConnection(props.collections);
+  const columnsVar = {
+    '--columns': props.columns ?? 3,
+  } as CSSProperties;
 
   return collections?.length > 0 ? (
-    <ul className="grid grid-cols-3 gap-10">
+    <ul
+      style={columnsVar}
+      className={cx([
+        'grid gap-6',
+        'lg:grid-cols-[repeat(var(--columns),_minmax(0,_1fr))]',
+      ])}
+    >
       {collections.map((collection) => (
         <li key={collection.id}>
-          <CollectionCard collection={collection} />
+          <CollectionCard columns={props.columns} collection={collection} />
         </li>
       ))}
     </ul>

diff --git a/templates/hydrogen-theme/app/components/ProductCard.tsx b/templates/hydrogen-theme/app/components/ProductCard.tsx
@@ -1,20 +1,32 @@
 import {Link} from '@remix-run/react';
 import {flattenConnection, Image, Money} from '@shopify/hydrogen';
+import {cx} from 'class-variance-authority';
 
 import type {ProductCardFragment} from 'storefrontapi.generated';
 
 export function ProductCard(props: {
   product: ProductCardFragment;
   className?: string;
+  columns?: number | null;
 }) {
-  const {product} = props;
+  const {product, columns} = props;
   const firstVariant = flattenConnection(product.variants)[0];
+  const sizes = cx([
+    '(min-width: 1024px)',
+    columns ? `${100 / columns}vw,` : '33vw,',
+    '100vw',
+  ]);
 
   return (
     <div className="overflow-hidden rounded-lg border">
       <Link prefetch="viewport" to={`/products/${product.handle}`}>
         {firstVariant.image && (
-          <Image aspectRatio="16/9" sizes="33vw" data={firstVariant.image} />
+          <Image
+            className="h-auto w-full object-cover"
+            aspectRatio="16/9"
+            sizes={sizes}
+            data={firstVariant.image}
+          />
         )}
         <div className="p-3">
           <div className="text-lg">{product.title}</div>

diff --git a/templates/hydrogen-theme/app/components/ProductCardGrid.tsx b/templates/hydrogen-theme/app/components/ProductCardGrid.tsx
@@ -1,14 +1,29 @@
+import type {CSSProperties} from 'react';
+import {cx} from 'class-variance-authority';
+
 import type {ProductCardFragment} from 'storefrontapi.generated';
 import {ProductCard} from './ProductCard';
 
-export function ProductCardGrid(props: {products: ProductCardFragment[]}) {
+export function ProductCardGrid(props: {
+  products: ProductCardFragment[];
+  columns?: number | null;
+}) {
   const {products} = props;
+  const columnsVar = {
+    '--columns': props.columns ?? 3,
+  } as CSSProperties;
 
   return products.length > 0 ? (
-    <ul className="grid grid-cols-3 gap-10">
+    <ul
+      style={columnsVar}
+      className={cx([
+        'grid gap-6',
+        'lg:grid-cols-[repeat(var(--columns),_minmax(0,_1fr))]',
+      ])}
+    >
       {products.map((product) => (
         <li key={product.id}>
-          <ProductCard product={product} />
+          <ProductCard columns={props.columns} product={product} />
         </li>
       ))}
     </ul>

diff --git a/templates/hydrogen-theme/app/components/sections/CollectionListSection.tsx b/templates/hydrogen-theme/app/components/sections/CollectionListSection.tsx
@@ -1,10 +1,10 @@
 import type {TypeFromSelection} from 'groqd';
+import {Suspense} from 'react';
+import {Await, useLoaderData} from '@remix-run/react';
 
 import type {COLLECTION_LIST_SECTION_FRAGMENT} from '~/qroq/sections';
 import type {loader as indexLoader} from '../../routes/_index';
 import type {SectionDefaultProps} from '~/lib/type';
-import {Await, useLoaderData} from '@remix-run/react';
-import {Suspense} from 'react';
 import {CollectionListGrid} from '../CollectionListGrid';
 
 type CollectionListSectionProps = TypeFromSelection<
@@ -34,7 +34,10 @@ export function CollectionListSection(
 
           return (
             <div className="container">
-              <CollectionListGrid collections={collections} />
+              <CollectionListGrid
+                columns={props.data.desktopColumns}
+                collections={collections}
+              />
             </div>
           );
         }}

diff --git a/templates/hydrogen-theme/app/components/sections/FeaturedCollectionSection.tsx b/templates/hydrogen-theme/app/components/sections/FeaturedCollectionSection.tsx
@@ -1,12 +1,12 @@
 import type {TypeFromSelection} from 'groqd';
 import {Suspense} from 'react';
 import {Await, useLoaderData} from '@remix-run/react';
+import {flattenConnection} from '@shopify/hydrogen';
 
 import type {FEATURED_COLLECTION_SECTION_FRAGMENT} from '~/qroq/sections';
 import type {loader as indexLoader} from '../../routes/_index';
 import type {SectionDefaultProps} from '~/lib/type';
 import {ProductCardGrid} from '../ProductCardGrid';
-import {flattenConnection} from '@shopify/hydrogen';
 
 type FeaturedCollectionSectionProps = TypeFromSelection<
   typeof FEATURED_COLLECTION_SECTION_FRAGMENT
@@ -38,7 +38,10 @@ export function FeaturedCollectionSection(
             <div className="container">
               <h2>{collection.title}</h2>
               <div>
-                <ProductCardGrid products={products} />
+                <ProductCardGrid
+                  columns={props.data.desktopColumns}
+                  products={products}
+                />
               </div>
             </div>
           ) : null;

diff --git a/templates/hydrogen-theme/app/lib/resolveShopifyPromises.ts b/templates/hydrogen-theme/app/lib/resolveShopifyPromises.ts
@@ -1,5 +1,6 @@
-import {parseGid, type Storefront} from '@shopify/hydrogen';
+import type {Storefront} from '@shopify/hydrogen';
 import type {InferType} from 'groqd';
+import {parseGid} from '@shopify/hydrogen';
 
 import type {
   CollectionsQuery,
@@ -45,6 +46,7 @@ function resolveFeaturedCollectionPromise({
   document.data?.sections?.forEach((section) => {
     if (section._type === 'featuredCollectionSection') {
       const gid = section.collection?.store.gid;
+      const first = section.maxProducts || 3;
 
       if (!gid) {
         return undefined;
@@ -53,7 +55,7 @@ function resolveFeaturedCollectionPromise({
       const promise = storefront.query(FEATURED_COLLECTION_QUERY, {
         variables: {
           id: gid,
-          first: 4,
+          first,
           country: storefront.i18n.country,
           language: storefront.i18n.language,
         },

diff --git a/templates/hydrogen-theme/app/qroq/sections.ts b/templates/hydrogen-theme/app/qroq/sections.ts
@@ -74,6 +74,8 @@ export const FEATURED_COLLECTION_SECTION_FRAGMENT = {
       }),
     })
     .nullable(),
+  maxProducts: q.number().nullable(),
+  desktopColumns: q.number().nullable(),
   settings: SECTION_SETTINGS_FRAGMENT,
 } satisfies Selection;
 
@@ -93,6 +95,7 @@ export const COLLECTION_LIST_SECTION_FRAGMENT = {
       }),
     })
     .nullable(),
+  desktopColumns: q.number().nullable(),
   settings: SECTION_SETTINGS_FRAGMENT,
 } satisfies Selection;
 

diff --git a/templates/hydrogen-theme/studio/schemas/objects/sections/collectionListSection.tsx b/templates/hydrogen-theme/studio/schemas/objects/sections/collectionListSection.tsx
@@ -24,6 +24,16 @@ export default defineField({
           return checkForDuplicates(array);
         }),
     }),
+    defineField({
+      name: 'desktopColumns',
+      title: 'Number of columns on desktop',
+      type: 'rangeSlider',
+      options: {
+        min: 1,
+        max: 5,
+      },
+      validation: (Rule: any) => Rule.required().min(1).max(5),
+    }),
     defineField({
       type: 'sectionSettings',
       name: 'settings',

diff --git a/templates/hydrogen-theme/studio/schemas/objects/sections/featuredCollection.tsx b/templates/hydrogen-theme/studio/schemas/objects/sections/featuredCollection.tsx
@@ -10,11 +10,34 @@ export default defineField({
       type: 'reference',
       to: [{type: 'collection'}],
     }),
+    defineField({
+      name: 'maxProducts',
+      title: 'Maximum products to show',
+      type: 'rangeSlider',
+      options: {
+        min: 1,
+        max: 25,
+      },
+      validation: (Rule: any) => Rule.required().min(1).max(25),
+    }),
+    defineField({
+      name: 'desktopColumns',
+      title: 'Number of columns on desktop',
+      type: 'rangeSlider',
+      options: {
+        min: 1,
+        max: 5,
+      },
+      validation: (Rule: any) => Rule.required().min(1).max(5),
+    }),
     defineField({
       type: 'sectionSettings',
       name: 'settings',
     }),
   ],
+  initialValue: {
+    maxProducts: 6,
+  },
   preview: {
     select: {
       collection: 'collection.store',