forked from crowetic/commerce
Merge pull request #91 from ricardolmsilva/product-filters-mobile
put filters inside a dropdown in mobile devices
This commit is contained in:
B
GitHub
commit
f5ee316ff9
380
pages/search.tsx
380
pages/search.tsx
@ -1,6 +1,7 @@
|
||||
import cn from 'classnames'
|
||||
import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
|
||||
import Link from 'next/link'
|
||||
import { useState } from 'react'
|
||||
import { useRouter } from 'next/router'
|
||||
import { getConfig } from '@bigcommerce/storefront-data-hooks/api'
|
||||
import getAllPages from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
|
||||
@ -43,6 +44,9 @@ export default function Search({
|
||||
categories,
|
||||
brands,
|
||||
}: InferGetStaticPropsType<typeof getStaticProps>) {
|
||||
const [activeFilter, setActiveFilter] = useState('')
|
||||
const [toggleFilter, setToggleFilter] = useState(false)
|
||||
|
||||
const router = useRouter()
|
||||
const { asPath } = router
|
||||
const { q, sort } = router.query
|
||||
@ -66,60 +70,222 @@ export default function Search({
|
||||
sort: typeof sort === 'string' ? sort : '',
|
||||
})
|
||||
|
||||
const handleClick = (event: any, filter: string) => {
|
||||
if (filter !== activeFilter) {
|
||||
setToggleFilter(true)
|
||||
} else {
|
||||
setToggleFilter(!toggleFilter)
|
||||
}
|
||||
|
||||
setActiveFilter(filter)
|
||||
}
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<div className="grid grid-cols-12 gap-4 mt-3 mb-20">
|
||||
<div className="col-span-2">
|
||||
<ul className="mb-10">
|
||||
<li className="py-1 text-base font-bold tracking-wide">
|
||||
<Link href={{ pathname: getCategoryPath('', brand), query }}>
|
||||
<a>All Categories</a>
|
||||
</Link>
|
||||
</li>
|
||||
{categories.map((cat) => (
|
||||
<li
|
||||
key={cat.path}
|
||||
className={cn('py-1 text-accents-8', {
|
||||
underline: activeCategory?.entityId === cat.entityId,
|
||||
})}
|
||||
>
|
||||
<Link
|
||||
href={{
|
||||
pathname: getCategoryPath(cat.path, brand),
|
||||
query,
|
||||
}}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mt-3 mb-20">
|
||||
<div className="col-span-8 lg:col-span-2 order-1 lg:order-none">
|
||||
{/* Categories */}
|
||||
<div className="relative inline-block w-full">
|
||||
<div className="lg:hidden">
|
||||
<span className="rounded-md shadow-sm">
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => handleClick(e, 'categories')}
|
||||
className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
|
||||
id="options-menu"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="true"
|
||||
>
|
||||
<a>{cat.name}</a>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<ul>
|
||||
<li className="py-1 text-base font-bold tracking-wide">
|
||||
<Link href={{ pathname: getDesignerPath('', category), query }}>
|
||||
<a>All Designers</a>
|
||||
</Link>
|
||||
</li>
|
||||
{brands.flatMap(({ node }) => (
|
||||
<li
|
||||
key={node.path}
|
||||
className={cn('py-1 text-accents-8', {
|
||||
underline: activeBrand?.entityId === node.entityId,
|
||||
})}
|
||||
>
|
||||
<Link
|
||||
href={{
|
||||
pathname: getDesignerPath(node.path, category),
|
||||
query,
|
||||
}}
|
||||
{activeCategory?.name
|
||||
? `Category: ${activeCategory?.name}`
|
||||
: 'All Categories'}
|
||||
<svg
|
||||
className="-mr-1 ml-2 h-5 w-5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={`origin-top-left absolute lg:relative left-0 mt-2 w-full rounded-md shadow-lg lg:shadow-none z-10 mb-10 lg:block ${
|
||||
activeFilter !== 'categories' || toggleFilter !== true
|
||||
? 'hidden'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
<div className="rounded-sm bg-white shadow-xs lg:bg-none lg:shadow-none">
|
||||
<div
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="options-menu"
|
||||
>
|
||||
<a>{node.name}</a>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<ul>
|
||||
<li
|
||||
className={cn(
|
||||
'block text-sm leading-5 text-gray-700 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
|
||||
{
|
||||
underline: !activeCategory?.name,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<Link
|
||||
href={{ pathname: getCategoryPath('', brand), query }}
|
||||
>
|
||||
<a
|
||||
onClick={(e) => handleClick(e, 'categories')}
|
||||
className={
|
||||
'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
|
||||
}
|
||||
>
|
||||
All Categories
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
{categories.map((cat) => (
|
||||
<li
|
||||
key={cat.path}
|
||||
className={cn(
|
||||
'block text-sm leading-5 text-gray-700 hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
|
||||
{
|
||||
underline:
|
||||
activeCategory?.entityId === cat.entityId,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<Link
|
||||
href={{
|
||||
pathname: getCategoryPath(cat.path, brand),
|
||||
query,
|
||||
}}
|
||||
>
|
||||
<a
|
||||
onClick={(e) => handleClick(e, 'categories')}
|
||||
className={
|
||||
'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
|
||||
}
|
||||
>
|
||||
{cat.name}
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Designs */}
|
||||
<div className="relative inline-block w-full">
|
||||
<div className="lg:hidden mt-3">
|
||||
<span className="rounded-md shadow-sm">
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => handleClick(e, 'brands')}
|
||||
className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
|
||||
id="options-menu"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="true"
|
||||
>
|
||||
{activeBrand?.name
|
||||
? `Design: ${activeBrand?.name}`
|
||||
: 'All Designs'}
|
||||
<svg
|
||||
className="-mr-1 ml-2 h-5 w-5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={`origin-top-left absolute lg:relative left-0 mt-2 w-full rounded-md shadow-lg lg:shadow-none z-10 mb-10 lg:block ${
|
||||
activeFilter !== 'brands' || toggleFilter !== true
|
||||
? 'hidden'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
<div className="rounded-sm bg-white shadow-xs lg:bg-none lg:shadow-none">
|
||||
<div
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="options-menu"
|
||||
>
|
||||
<ul>
|
||||
<li
|
||||
className={cn(
|
||||
'block text-sm leading-5 text-gray-700 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
|
||||
{
|
||||
underline: !activeBrand?.name,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<Link
|
||||
href={{
|
||||
pathname: getDesignerPath('', category),
|
||||
query,
|
||||
}}
|
||||
>
|
||||
<a
|
||||
onClick={(e) => handleClick(e, 'brands')}
|
||||
className={
|
||||
'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
|
||||
}
|
||||
>
|
||||
All Designers
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
{brands.flatMap(({ node }) => (
|
||||
<li
|
||||
key={node.path}
|
||||
className={cn(
|
||||
'block text-sm leading-5 text-gray-700 hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
|
||||
{
|
||||
underline: activeBrand?.entityId === node.entityId,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<Link
|
||||
href={{
|
||||
pathname: getDesignerPath(node.path, category),
|
||||
query,
|
||||
}}
|
||||
>
|
||||
<a
|
||||
onClick={(e) => handleClick(e, 'brands')}
|
||||
className={
|
||||
'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
|
||||
}
|
||||
>
|
||||
{node.name}
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-8">
|
||||
{/* Products */}
|
||||
<div className="col-span-8 order-3 lg:order-none">
|
||||
{(q || activeCategory || activeBrand) && (
|
||||
<div className="mb-12 transition ease-in duration-75">
|
||||
{data ? (
|
||||
@ -190,31 +356,99 @@ export default function Search({
|
||||
</Grid>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<ul>
|
||||
<li className="py-1 text-base font-bold tracking-wide">Sort</li>
|
||||
<li
|
||||
className={cn('py-1 text-accents-8', {
|
||||
underline: !sort,
|
||||
})}
|
||||
|
||||
{/* Sort */}
|
||||
<div className="col-span-8 lg:col-span-2 order-2 lg:order-none">
|
||||
<div className="relative inline-block w-full">
|
||||
<div className="lg:hidden">
|
||||
<span className="rounded-md shadow-sm">
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => handleClick(e, 'sort')}
|
||||
className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
|
||||
id="options-menu"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="true"
|
||||
>
|
||||
{sort ? `Sort: ${sort}` : 'Relevance'}
|
||||
<svg
|
||||
className="-mr-1 ml-2 h-5 w-5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={`origin-top-left absolute lg:relative left-0 mt-2 w-full rounded-md shadow-lg lg:shadow-none z-10 mb-10 lg:block ${
|
||||
activeFilter !== 'sort' || toggleFilter !== true ? 'hidden' : ''
|
||||
}`}
|
||||
>
|
||||
<Link href={{ pathname, query: filterQuery({ q }) }}>
|
||||
<a>Relevance</a>
|
||||
</Link>
|
||||
</li>
|
||||
{SORT.map(([key, text]) => (
|
||||
<li
|
||||
key={key}
|
||||
className={cn('py-1 text-accents-8', {
|
||||
underline: sort === key,
|
||||
})}
|
||||
>
|
||||
<Link href={{ pathname, query: filterQuery({ q, sort: key }) }}>
|
||||
<a>{text}</a>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="rounded-sm bg-white shadow-xs lg:bg-none lg:shadow-none">
|
||||
<div
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="options-menu"
|
||||
>
|
||||
<ul>
|
||||
<li
|
||||
className={cn(
|
||||
'block text-sm leading-5 text-gray-700 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
|
||||
{
|
||||
underline: !sort,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<Link href={{ pathname, query: filterQuery({ q }) }}>
|
||||
<a
|
||||
onClick={(e) => handleClick(e, 'sort')}
|
||||
className={
|
||||
'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
|
||||
}
|
||||
>
|
||||
Relevance
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
{SORT.map(([key, text]) => (
|
||||
<li
|
||||
key={key}
|
||||
className={cn(
|
||||
'block text-sm leading-5 text-gray-700 hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
|
||||
{
|
||||
underline: sort === key,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<Link
|
||||
href={{
|
||||
pathname,
|
||||
query: filterQuery({ q, sort: key }),
|
||||
}}
|
||||
>
|
||||
<a
|
||||
onClick={(e) => handleClick(e, 'sort')}
|
||||
className={
|
||||
'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
|
||||
}
|
||||
>
|
||||
{text}
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user