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

UX improvements for the search page

Browse Source
This commit is contained in:
Luis Alvarez 2020-10-25 22:33:32 -05:00
parent 5706e7afa2
commit 7c677afd17
1 changed files with 24 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
pages/search.tsx
View File

@ -40,7 +40,10 @@ export default function Search({
const router = useRouter()
const { asPath } = router
const { q, sort } = router.query
const query = filterQuery({ q, sort })
// `q` can be included but because categories and designers can't be searched
// in the same way of products, it's better to ignore the search input if one
// of those is selected
const query = filterQuery({ sort })
const { pathname, category, brand } = useSearchMeta(asPath)
const activeCategory = categories.find(
@ -111,7 +114,7 @@ export default function Search({
</ul>
</div>
<div className="col-span-8">
{q && (
{(q || activeCategory || activeBrand) && (
<div className="mb-12 transition ease-in duration-75">
{data ? (
<>
@ -121,8 +124,12 @@ export default function Search({
hidden: !data.found,
})}
>
Showing {data.products.length} results for "
<strong>{q}</strong>"
Showing {data.products.length} results{' '}
{q && (
<>
for "<strong>{q}</strong>"
</>
)}
</span>
<span
className={cn('animated', {
@ -130,13 +137,24 @@ export default function Search({
hidden: data.found,
})}
>
There are no products that match "<strong>{q}</strong>"
{q ? (
<>
There are no products that match "<strong>{q}</strong>"
</>
) : (
<>
There are no products that match the selected category &
designer
</>
)}
</span>
</>
) : (
) : q ? (
<>
Searching for: "<strong>{q}</strong>"
</>
) : (
<>Searching...</>
)}
</div>
)}