diff --git a/app/search/[collection]/page.tsx b/app/search/[collection]/page.tsx
index e25542bfc..f3a7a0222 100644
--- a/app/search/[collection]/page.tsx
+++ b/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 (
diff --git a/app/search/layout.tsx b/app/search/layout.tsx
index 39bb38220..e9823a582 100644
--- a/app/search/layout.tsx
+++ b/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 }
{children}
- {/* */}
+
diff --git a/app/search/page.tsx b/app/search/page.tsx
index 60f11b189..eb839b1f6 100644
--- a/app/search/page.tsx
+++ b/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';
diff --git a/lib/constants.ts b/lib/constants.ts
index 59fc3f5bf..c1bd82038 100644
--- a/lib/constants.ts
+++ b/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 = {
- title: 'Relevance',
- slug: null,
- sortKey: 'RELEVANCE',
- reverse: false
+export const DEFAULT_SORT: SortFilterItem = {
+ title: 'Latest arrivals',
+ slug: 'latest-desc',
+ sortKey: 'createdAt',
+ reverse: true
};
-export const sorting: SortFilterItem[] = [
- defaultSort,
- { 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', slug: 'price-asc', sortKey: 'PRICE', reverse: false }, // asc
- { title: 'Price: High to low', slug: 'price-desc', sortKey: 'PRICE', reverse: true }
+export const SORTING: SortFilterItem[] = [
+ DEFAULT_SORT,
+ {
+ title: 'Price: Low to high',
+ slug: 'price-asc',
+ sortKey: 'variants.price.amount',
+ reverse: false
+ },
+ {
+ title: 'Price: High to low',
+ slug: 'price-desc',
+ sortKey: 'variants.price.amount',
+ reverse: true
+ }
];
export const TAGS = {
diff --git a/lib/shopify/index.ts b/lib/shopify/index.ts
index 086d1b35a..6b1632fe6 100644
--- a/lib/shopify/index.ts
+++ b/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 {
+ 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('products', {
where: {
and: filters
- }
+ },
+ sort: sortKey
});
return products.docs.map(reshapeProduct);
}
@@ -345,12 +352,18 @@ export async function getProductRecommendations(productId: string): Promise {
+ 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('products', { where });
+ const products = await payload.find('products', { where, sort: sortKey });
return products.docs.map(reshapeProduct);
}