sort

app/search/[collection]/page.tsx

@@ -4,7 +4,7 @@ import { notFound } from 'next/navigation';
 
 import Grid from 'components/grid';
 import ProductGridItems from 'components/layout/product-grid-items';
-import { defaultSort, sorting } from 'lib/constants';
+import { DEFAULT_SORT, SORTING } from 'lib/constants';
 
 export async function generateMetadata({
   params
@@ -30,7 +30,7 @@ export default async function CategoryPage({
   searchParams?: { [key: string]: string | string[] | undefined };
 }) {
   const { sort } = searchParams as { [key: string]: string };
-  const { sortKey, reverse } = sorting.find((item) => item.slug === sort) || defaultSort;
+  const { sortKey, reverse } = SORTING.find((item) => item.slug === sort) || DEFAULT_SORT;
   const products = await getCollectionProducts({ collection: params.collection, sortKey, reverse });
 
   return (

app/search/layout.tsx

@@ -1,5 +1,7 @@
 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 (
@@ -10,7 +12,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 />

app/search/page.tsx

@@ -1,6 +1,6 @@
 import Grid from 'components/grid';
 import ProductGridItems from 'components/layout/product-grid-items';
-import { defaultSort, sorting } from 'lib/constants';
+import { DEFAULT_SORT, SORTING } from 'lib/constants';
 import { getProducts } from 'lib/shopify';
 
 export const metadata = {
@@ -14,7 +14,7 @@ export default async function SearchPage({
   searchParams?: { [key: string]: string | string[] | undefined };
 }) {
   const { sort, q: searchValue } = searchParams as { [key: string]: string };
-  const { sortKey, reverse } = sorting.find((item) => item.slug === sort) || defaultSort;
+  const { sortKey, reverse } = SORTING.find((item) => item.slug === sort) || DEFAULT_SORT;
 
   const products = await getProducts({ sortKey, reverse, query: searchValue });
   const resultsText = products.length > 1 ? 'results' : 'result';

lib/constants.ts

@@ -1,23 +1,31 @@
 export type SortFilterItem = {
   title: string;
   slug: string | null;
-  sortKey: 'RELEVANCE' | 'BEST_SELLING' | 'CREATED_AT' | 'PRICE';
+  sortKey: string;
   reverse: boolean;
 };
 
-export const defaultSort: SortFilterItem = {
+export const DEFAULT_SORT: SortFilterItem = {
-  title: 'Relevance',
+  title: 'Latest arrivals',
-  slug: null,
+  slug: 'latest-desc',
-  sortKey: 'RELEVANCE',
+  sortKey: 'createdAt',
-  reverse: false
+  reverse: true
 };
 
-export const sorting: SortFilterItem[] = [
+export const SORTING: SortFilterItem[] = [
-  defaultSort,
+  DEFAULT_SORT,
-  { title: 'Trending', slug: 'trending-desc', sortKey: 'BEST_SELLING', reverse: false }, // asc
+  {
-  { title: 'Latest arrivals', slug: 'latest-desc', sortKey: 'CREATED_AT', reverse: true },
+    title: 'Price: Low to high',
-  { title: 'Price: Low to high', slug: 'price-asc', sortKey: 'PRICE', reverse: false }, // asc
+    slug: 'price-asc',
-  { title: 'Price: High to low', slug: 'price-desc', sortKey: 'PRICE', reverse: true }
+    sortKey: 'variants.price.amount',
+    reverse: false
+  },
+  {
+    title: 'Price: High to low',
+    slug: 'price-desc',
+    sortKey: 'variants.price.amount',
+    reverse: true
+  }
 ];
 
 export const TAGS = {

lib/shopify/index.ts

@@ -247,13 +247,19 @@ const reshapeProduct = (product: PayloadProduct): Product => {
 
 export async function getCollectionProducts({
   collection,
-  tag
+  tag,
+  sortKey,
+  reverse
 }: {
   collection?: string;
   tag?: string;
   reverse?: boolean;
   sortKey?: string;
 }): Promise<Product[]> {
+  if (sortKey && reverse) {
+    sortKey = '-' + sortKey;
+  }
+
   const filters: Where[] = [];
   if (collection) {
     filters.push({
@@ -273,7 +279,8 @@ export async function getCollectionProducts({
   const products = await payload.find<PayloadProduct>('products', {
     where: {
       and: filters
-    }
+    },
+    sort: sortKey
   });
   return products.docs.map(reshapeProduct);
 }
@@ -345,12 +352,18 @@ export async function getProductRecommendations(productId: string): Promise<Prod
 }
 
 export async function getProducts({
-  query
+  query,
+  sortKey,
+  reverse
 }: {
   query?: string;
   reverse?: boolean;
   sortKey?: string;
 }): Promise<Product[]> {
+  if (sortKey && reverse) {
+    sortKey = '-' + sortKey;
+  }
+
   let where: Where | undefined;
   if (query) {
     where = {
@@ -369,6 +382,6 @@ export async function getProducts({
     };
   }
 
-  const products = await payload.find<PayloadProduct>('products', { where });
+  const products = await payload.find<PayloadProduct>('products', { where, sort: sortKey });
   return products.docs.map(reshapeProduct);
 }