4
0
forked from crowetic/commerce

Added selected state to sort options

This commit is contained in:
Luis Alvarez 2020-10-14 13:50:56 -05:00
parent 8905089fd7
commit df24786d18
2 changed files with 31 additions and 50 deletions

View File

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

View File

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