cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Added sort filters to the UI

Browse Source
This commit is contained in:
Luis Alvarez 2020-10-13 22:43:11 -05:00
parent 6f763f6913
commit e3591302b7
1 changed files with 44 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
pages/search.tsx
View File

@ -25,6 +25,8 @@ export default function Home({
const { asPath } = router const { asPath } = router
const { q, sort } = router.query const { q, sort } = router.query
const query = filterQuery({ q, sort }) const query = filterQuery({ q, sort })
const pathname = asPath.split('?')[0]
const { category, brand } = useSearchMeta(asPath) const { category, brand } = useSearchMeta(asPath)
const activeCategory = categories.find( const activeCategory = categories.find(
(cat) => getSlug(cat.path) === category (cat) => getSlug(cat.path) === category
@ -32,6 +34,7 @@ export default function Home({
const activeBrand = brands.find( const activeBrand = brands.find(
(b) => getSlug(b.node.path) === `brands/${brand}` (b) => getSlug(b.node.path) === `brands/${brand}`
)?.node )?.node
const { data } = useSearch({ const { data } = useSearch({
search: typeof q === 'string' ? q : '', search: typeof q === 'string' ? q : '',
categoryId: activeCategory?.entityId, categoryId: activeCategory?.entityId,
@ -120,17 +123,53 @@ export default function Home({
<li className="py-1 text-default"> <li className="py-1 text-default">
<Link <Link
href={{ href={{
pathname: asPath.split('?')[0], pathname,
query: filterQuery({ q }), query: filterQuery({ q }),
}} }}
> >
<a>Relevance</a> <a>Relevance</a>
</Link> </Link>
</li> </li>
<li className="py-1 text-default">Latest arrivals</li> <li className="py-1 text-default">
<li className="py-1 text-default">Trending</li> <Link
<li className="py-1 text-default">Price: Low to high</li> href={{
<li className="py-1 text-default">Price: High to low</li> pathname,
query: filterQuery({ q, sort: 'latest-desc' }),
}}
>
<a>Latest arrivals</a>
</Link>
</li>
<li className="py-1 text-default">
<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>