forked from crowetic/commerce
UX improvements for the search page
This commit is contained in:
parent
5706e7afa2
commit
7c677afd17
@ -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>
|
||||||
)}
|
)}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user