forked from crowetic/commerce
Merge branch 'master' of github.com:okbel/e-comm-example
This commit is contained in:
commit
ebfde86598
@ -5,9 +5,11 @@ import getAllProducts from '@lib/bigcommerce/api/operations/get-all-products'
|
|||||||
import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
|
import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
|
||||||
import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
|
import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
|
||||||
import rangeMap from '@lib/range-map'
|
import rangeMap from '@lib/range-map'
|
||||||
|
import { getCategoryPath, getDesignerPath } from '@utils/search'
|
||||||
import { Layout } from '@components/core'
|
import { Layout } from '@components/core'
|
||||||
import { Grid, Marquee, Hero } from '@components/ui'
|
import { Grid, Marquee, Hero } from '@components/ui'
|
||||||
import { ProductCard } from '@components/product'
|
import { ProductCard } from '@components/product'
|
||||||
|
import Link from 'next/link'
|
||||||
|
|
||||||
export async function getStaticProps({
|
export async function getStaticProps({
|
||||||
preview,
|
preview,
|
||||||
@ -132,21 +134,29 @@ export default function Home({
|
|||||||
<div className="sticky top-32">
|
<div className="sticky top-32">
|
||||||
<ul className="mb-10">
|
<ul className="mb-10">
|
||||||
<li className="py-1 text-base font-bold tracking-wide">
|
<li className="py-1 text-base font-bold tracking-wide">
|
||||||
All Categories
|
<Link href={getCategoryPath('')}>
|
||||||
|
<a>All Categories</a>
|
||||||
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
{categories.map((cat) => (
|
{categories.map((cat) => (
|
||||||
<li key={cat.path} className="py-1 text-accents-8">
|
<li key={cat.path} className="py-1 text-accents-8">
|
||||||
<a href="#">{cat.name}</a>
|
<Link href={getCategoryPath(cat.path)}>
|
||||||
|
<a>{cat.name}</a>
|
||||||
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
<ul className="">
|
<ul className="">
|
||||||
<li className="py-1 text-base font-bold tracking-wide">
|
<li className="py-1 text-base font-bold tracking-wide">
|
||||||
All Designers
|
<Link href={getDesignerPath('')}>
|
||||||
|
<a>All Designers</a>
|
||||||
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
{brands.flatMap(({ node }) => (
|
{brands.flatMap(({ node }) => (
|
||||||
<li key={node.path} className="py-1 text-accents-8">
|
<li key={node.path} className="py-1 text-accents-8">
|
||||||
<a href="#">{node.name}</a>
|
<Link href={getDesignerPath(node.path)}>
|
||||||
|
<a>{node.name}</a>
|
||||||
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -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(
|
||||||
@ -76,7 +79,7 @@ export default function Search({
|
|||||||
>
|
>
|
||||||
<Link
|
<Link
|
||||||
href={{
|
href={{
|
||||||
pathname: getCategoryPath(getSlug(cat.path), brand),
|
pathname: getCategoryPath(cat.path, brand),
|
||||||
query,
|
query,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
@ -100,7 +103,7 @@ export default function Search({
|
|||||||
>
|
>
|
||||||
<Link
|
<Link
|
||||||
href={{
|
href={{
|
||||||
pathname: getDesignerPath(getSlug(node.path), category),
|
pathname: getDesignerPath(node.path, category),
|
||||||
query,
|
query,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
@ -111,33 +114,50 @@ export default function Search({
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-span-8">
|
<div className="col-span-8">
|
||||||
<div className="mb-12 transition ease-in duration-75">
|
{(q || activeCategory || activeBrand) && (
|
||||||
{data ? (
|
<div className="mb-12 transition ease-in duration-75">
|
||||||
<>
|
{data ? (
|
||||||
<span
|
<>
|
||||||
className={cn('animated', {
|
<span
|
||||||
fadeIn: data.found,
|
className={cn('animated', {
|
||||||
hidden: !data.found,
|
fadeIn: data.found,
|
||||||
})}
|
hidden: !data.found,
|
||||||
>
|
})}
|
||||||
Showing {data.products.length} results for "
|
>
|
||||||
<strong>{q}</strong>"
|
Showing {data.products.length} results{' '}
|
||||||
</span>
|
{q && (
|
||||||
<span
|
<>
|
||||||
className={cn('animated', {
|
for "<strong>{q}</strong>"
|
||||||
fadeIn: !data.found,
|
</>
|
||||||
hidden: data.found,
|
)}
|
||||||
})}
|
</span>
|
||||||
>
|
<span
|
||||||
There are no products that match "<strong>{q}</strong>"
|
className={cn('animated', {
|
||||||
</span>
|
fadeIn: !data.found,
|
||||||
</>
|
hidden: data.found,
|
||||||
) : (
|
})}
|
||||||
<>
|
>
|
||||||
Searching for: "<strong>{q}</strong>"
|
{q ? (
|
||||||
</>
|
<>
|
||||||
)}
|
There are no products that match "<strong>{q}</strong>"
|
||||||
</div>
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
There are no products that match the selected category &
|
||||||
|
designer
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</>
|
||||||
|
) : q ? (
|
||||||
|
<>
|
||||||
|
Searching for: "<strong>{q}</strong>"
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>Searching...</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{data ? (
|
{data ? (
|
||||||
<Grid layout="normal">
|
<Grid layout="normal">
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
|
import getSlug from './get-slug'
|
||||||
|
|
||||||
export function useSearchMeta(asPath: string) {
|
export function useSearchMeta(asPath: string) {
|
||||||
const [pathname, setPathname] = useState<string>('/search')
|
const [pathname, setPathname] = useState<string>('/search')
|
||||||
@ -34,11 +35,16 @@ export const filterQuery = (query: any) =>
|
|||||||
return obj
|
return obj
|
||||||
}, {})
|
}, {})
|
||||||
|
|
||||||
export const getCategoryPath = (slug: string, brand?: string) =>
|
export const getCategoryPath = (path: string, brand?: string) => {
|
||||||
`/search${brand ? `/designers/${brand}` : ''}${slug ? `/${slug}` : ''}`
|
const category = getSlug(path)
|
||||||
|
|
||||||
export const getDesignerPath = (slug: string, category?: string) => {
|
return `/search${brand ? `/designers/${brand}` : ''}${
|
||||||
const designer = slug.replace(/^brands/, 'designers')
|
category ? `/${category}` : ''
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getDesignerPath = (path: string, category?: string) => {
|
||||||
|
const designer = getSlug(path).replace(/^brands/, 'designers')
|
||||||
|
|
||||||
return `/search${designer ? `/${designer}` : ''}${
|
return `/search${designer ? `/${designer}` : ''}${
|
||||||
category ? `/${category}` : ''
|
category ? `/${category}` : ''
|
||||||
|
Loading…
x
Reference in New Issue
Block a user