filters

app/search/layout.tsx

@@ -1,7 +1,5 @@
 import Footer from 'components/layout/footer';
 import Collections from 'components/layout/search/collections';
-import FilterList from 'components/layout/search/filter';
-import { sorting } from 'lib/constants';
 
 export default function SearchLayout({ children }: { children: React.ReactNode }) {
   return (
@@ -12,7 +10,7 @@ export default function SearchLayout({ children }: { children: React.ReactNode }
         </div>
         <div className="order-last min-h-screen w-full md:order-none">{children}</div>
         <div className="order-none flex-none md:order-last md:w-[125px]">
-          <FilterList list={sorting} title="Sort by" />
+          {/* <FilterList list={sorting} title="Sort by" /> */}
         </div>
       </div>
       <Footer />

components/carousel.tsx

@@ -3,8 +3,7 @@ import Link from 'next/link';
 import { GridTileImage } from './grid/tile';
 
 export async function Carousel() {
-  // Collections that start with `hidden-*` are hidden from the search page.
+  const products = await getCollectionProducts({});
-  const products = await getCollectionProducts({ collection: 'hidden-homepage-carousel' });
 
   if (!products?.length) return null;
 

components/grid/three-items.tsx

@@ -38,9 +38,8 @@ function ThreeItemGridItem({
 }
 
 export async function ThreeItemGrid() {
-  // Collections that start with `hidden-*` are hidden from the search page.
   const homepageItems = await getCollectionProducts({
-    collection: 'hidden-homepage-featured-items'
+    tag: 'featured'
   });
 
   if (!homepageItems[0] || !homepageItems[1] || !homepageItems[2]) return null;

lib/shopify/index.ts

@@ -1,5 +1,5 @@
 import { SHOPIFY_GRAPHQL_API_ENDPOINT, TAGS } from 'lib/constants';
-import { find, findByID } from 'lib/shopify/payload';
+import { Where, find, findByID } from 'lib/shopify/payload';
 import { Category, Media, Option, Product } from 'lib/shopify/payload-types';
 import { isShopifyError } from 'lib/type-guards';
 import { ensureStartsWith } from 'lib/utils';
@@ -271,16 +271,36 @@ const reshapeProduct = (product: Product): ExProduct => {
 
 export async function getCollectionProducts({
   collection,
+  tag,
   reverse,
   sortKey
 }: {
-  collection: string;
+  collection?: string;
+  tag?: string;
   reverse?: boolean;
   sortKey?: string;
 }): Promise<ExProduct[]> {
-  console.log(collection);
+  const filters: Where[] = [];
+  if (collection) {
+    filters.push({
+      categories: {
+        equals: collection
+      }
+    });
+  }
+  if (tag) {
+    filters.push({
+      tags: {
+        equals: collection
+      }
+    });
+  }
 
-  const products = await find<Product>('products', {});
+  const products = await find<Product>('products', {
+    where: {
+      and: filters
+    }
+  });
   return products.docs.map(reshapeProduct);
 }
 
@@ -363,7 +383,25 @@ export async function getProducts({
   reverse?: boolean;
   sortKey?: string;
 }): Promise<ExProduct[]> {
-  const products = await find<Product>('products', {});
+  let where: Where | undefined;
+  if (query) {
+    where = {
+      or: [
+        {
+          title: {
+            contains: query
+          }
+        },
+        {
+          description: {
+            contains: query
+          }
+        }
+      ]
+    };
+  }
+
+  const products = await find<Product>('products', { where });
   return products.docs.map(reshapeProduct);
 }
 

lib/shopify/payload.ts

@@ -26,7 +26,7 @@ type Operator = (typeof OPERATORS)[number];
 type WhereField = {
   [key in Operator]?: unknown;
 };
-type Where = {
+export type Where = {
   [key: string]: Where[] | WhereField;
   and?: Where[];
   or?: Where[];