forked from crowetic/commerce
Added selected state to sort options
This commit is contained in:
parent
8905089fd7
commit
df24786d18
@ -9,6 +9,7 @@ const SORT: { [key: string]: string | undefined } = {
|
|||||||
trending: 'total_sold',
|
trending: 'total_sold',
|
||||||
price: 'price',
|
price: 'price',
|
||||||
}
|
}
|
||||||
|
const LIMIT = 12
|
||||||
|
|
||||||
// Return current cart info
|
// Return current cart info
|
||||||
const getProducts: ProductsHandlers['getProducts'] = async ({
|
const getProducts: ProductsHandlers['getProducts'] = async ({
|
||||||
@ -19,8 +20,8 @@ const getProducts: ProductsHandlers['getProducts'] = async ({
|
|||||||
// Use a dummy base as we only care about the relative path
|
// Use a dummy base as we only care about the relative path
|
||||||
const url = new URL('/v3/catalog/products', 'http://a')
|
const url = new URL('/v3/catalog/products', 'http://a')
|
||||||
|
|
||||||
// The limit should math the number of products returned by `getAllProducts`
|
url.searchParams.set('is_visible', 'true')
|
||||||
url.searchParams.set('limit', '10')
|
url.searchParams.set('limit', String(LIMIT))
|
||||||
|
|
||||||
if (search) url.searchParams.set('keyword', search)
|
if (search) url.searchParams.set('keyword', search)
|
||||||
|
|
||||||
@ -41,7 +42,7 @@ const getProducts: ProductsHandlers['getProducts'] = async ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
// We only want the id of each product
|
// We only want the id of each product
|
||||||
url.searchParams.set('include_fields', 'id,price')
|
url.searchParams.set('include_fields', 'id')
|
||||||
|
|
||||||
const { data } = await config.storeApiFetch<{ data: { id: number }[] }>(
|
const { data } = await config.storeApiFetch<{ data: { id: number }[] }>(
|
||||||
url.pathname + url.search
|
url.pathname + url.search
|
||||||
@ -49,7 +50,9 @@ const getProducts: ProductsHandlers['getProducts'] = async ({
|
|||||||
const entityIds = data.map((p) => p.id)
|
const entityIds = data.map((p) => p.id)
|
||||||
const found = entityIds.length > 0
|
const found = entityIds.length > 0
|
||||||
// We want the GraphQL version of each product
|
// We want the GraphQL version of each product
|
||||||
const graphqlData = await getAllProducts({ variables: { entityIds } })
|
const graphqlData = await getAllProducts({
|
||||||
|
variables: { first: LIMIT, entityIds },
|
||||||
|
})
|
||||||
// Put the products in an object that we can use to get them by id
|
// Put the products in an object that we can use to get them by id
|
||||||
const productsById = graphqlData.products.reduce<{ [k: number]: Product }>(
|
const productsById = graphqlData.products.reduce<{ [k: number]: Product }>(
|
||||||
(prods, p) => {
|
(prods, p) => {
|
||||||
|
@ -23,6 +23,13 @@ export async function getStaticProps({ preview }: GetStaticPropsContext) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const SORT = Object.entries({
|
||||||
|
'latest-desc': 'Latest arrivals',
|
||||||
|
'trending-desc': 'Trending',
|
||||||
|
'price-asc': 'Price: Low to high',
|
||||||
|
'price-desc': 'Price: High to low',
|
||||||
|
})
|
||||||
|
|
||||||
export default function Search({
|
export default function Search({
|
||||||
categories,
|
categories,
|
||||||
brands,
|
brands,
|
||||||
@ -127,56 +134,27 @@ export default function Search({
|
|||||||
<div className="col-span-2">
|
<div className="col-span-2">
|
||||||
<ul>
|
<ul>
|
||||||
<li className="py-1 text-primary font-bold tracking-wide">Sort</li>
|
<li className="py-1 text-primary font-bold tracking-wide">Sort</li>
|
||||||
<li className="py-1 text-default">
|
<li
|
||||||
<Link
|
className={cn('py-1 text-default', {
|
||||||
href={{
|
underline: !sort,
|
||||||
pathname,
|
})}
|
||||||
query: filterQuery({ q }),
|
>
|
||||||
}}
|
<Link href={{ pathname, query: filterQuery({ q }) }}>
|
||||||
>
|
|
||||||
<a>Relevance</a>
|
<a>Relevance</a>
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li className="py-1 text-default">
|
{SORT.map(([key, text]) => (
|
||||||
<Link
|
<li
|
||||||
href={{
|
key={key}
|
||||||
pathname,
|
className={cn('py-1 text-default', {
|
||||||
query: filterQuery({ q, sort: 'latest-desc' }),
|
underline: sort === key,
|
||||||
}}
|
})}
|
||||||
>
|
>
|
||||||
<a>Latest arrivals</a>
|
<Link href={{ pathname, query: filterQuery({ q, sort: key }) }}>
|
||||||
</Link>
|
<a>{text}</a>
|
||||||
</li>
|
</Link>
|
||||||
<li className="py-1 text-default">
|
</li>
|
||||||
<Link
|
))}
|
||||||
href={{
|
|
||||||
pathname,
|
|
||||||
query: filterQuery({ q, sort: 'trending-desc' }),
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<a>Trending</a>
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li className="py-1 text-default">
|
|
||||||
<Link
|
|
||||||
href={{
|
|
||||||
pathname,
|
|
||||||
query: filterQuery({ q, sort: 'price-asc' }),
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<a>Price: Low to high</a>
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li className="py-1 text-default">
|
|
||||||
<Link
|
|
||||||
href={{
|
|
||||||
pathname,
|
|
||||||
query: filterQuery({ q, sort: 'price-desc' }),
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<a>Price: High to low</a>
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user