crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-11 04:07:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

sort

Browse Source
This commit is contained in:
Kristian Duda 2024-06-28 21:43:53 +02:00
parent 6ed9d46b9e
commit 6bbe1668e0
5 changed files with 44 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/search/[collection]/page.tsx
View File

@ -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 (

4
app/search/layout.tsx
View File

@ -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 />

4
app/search/page.tsx
View File

@ -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';

32
lib/constants.ts
View File

@ -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 = {

21
lib/shopify/index.ts
View File

@ -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);
}