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 router = useRouter()
const { asPath } = router const { asPath } = router
const { q, sort } = router.query 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 { pathname, category, brand } = useSearchMeta(asPath)
const activeCategory = categories.find( const activeCategory = categories.find(
@ -111,7 +114,7 @@ export default function Search({
</ul> </ul>
</div> </div>
<div className="col-span-8"> <div className="col-span-8">
{q && ( {(q || activeCategory || activeBrand) && (
<div className="mb-12 transition ease-in duration-75"> <div className="mb-12 transition ease-in duration-75">
{data ? ( {data ? (
<> <>
@ -121,8 +124,12 @@ export default function Search({
hidden: !data.found, hidden: !data.found,
})} })}
> >
Showing {data.products.length} results for " Showing {data.products.length} results{' '}
<strong>{q}</strong>" {q && (
<>
for "<strong>{q}</strong>"
</>
)}
</span> </span>
<span <span
className={cn('animated', { className={cn('animated', {
@ -130,13 +137,24 @@ export default function Search({
hidden: data.found, 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> </span>
</> </>
) : ( ) : q ? (
<> <>
Searching for: "<strong>{q}</strong>" Searching for: "<strong>{q}</strong>"
</> </>
) : (
<>Searching...</>
)} )}
</div> </div>
)} )}