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

Merge branch 'master' of github.com:okbel/e-comm-example

Browse Source
This commit is contained in:
Belen Curcio 2020-10-26 09:27:34 -03:00
commit ebfde86598
3 changed files with 74 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
pages/index.tsx
View File

@ -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 getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
import rangeMap from '@lib/range-map'
import { getCategoryPath, getDesignerPath } from '@utils/search'
import { Layout } from '@components/core'
import { Grid, Marquee, Hero } from '@components/ui'
import { ProductCard } from '@components/product'
import Link from 'next/link'
export async function getStaticProps({
preview,
@ -132,21 +134,29 @@ export default function Home({
<div className="sticky top-32">
<ul className="mb-10">
<li className="py-1 text-base font-bold tracking-wide">
All Categories
<Link href={getCategoryPath('')}>
<a>All Categories</a>
</Link>
</li>
{categories.map((cat) => (
<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>
))}
</ul>
<ul className="">
<li className="py-1 text-base font-bold tracking-wide">
All Designers
<Link href={getDesignerPath('')}>
<a>All Designers</a>
</Link>
</li>
{brands.flatMap(({ node }) => (
<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>
))}
</ul>

80
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(
@ -76,7 +79,7 @@ export default function Search({
>
<Link
href={{
pathname: getCategoryPath(getSlug(cat.path), brand),
pathname: getCategoryPath(cat.path, brand),
query,
}}
>
@ -100,7 +103,7 @@ export default function Search({
>
<Link
href={{
pathname: getDesignerPath(getSlug(node.path), category),
pathname: getDesignerPath(node.path, category),
query,
}}
>
@ -111,33 +114,50 @@ export default function Search({
</ul>
</div>
<div className="col-span-8">
<div className="mb-12 transition ease-in duration-75">
{data ? (
<>
<span
className={cn('animated', {
fadeIn: data.found,
hidden: !data.found,
})}
>
Showing {data.products.length} results for "
<strong>{q}</strong>"
</span>
<span
className={cn('animated', {
fadeIn: !data.found,
hidden: data.found,
})}
>
There are no products that match "<strong>{q}</strong>"
</span>
</>
) : (
<>
Searching for: "<strong>{q}</strong>"
</>
)}
</div>
{(q || activeCategory || activeBrand) && (
<div className="mb-12 transition ease-in duration-75">
{data ? (
<>
<span
className={cn('animated', {
fadeIn: data.found,
hidden: !data.found,
})}
>
Showing {data.products.length} results{' '}
{q && (
<>
for "<strong>{q}</strong>"
</>
)}
</span>
<span
className={cn('animated', {
fadeIn: !data.found,
hidden: data.found,
})}
>
{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>
)}
{data ? (
<Grid layout="normal">

14
utils/search.tsx
View File

@ -1,4 +1,5 @@
import { useEffect, useState } from 'react'
import getSlug from './get-slug'
export function useSearchMeta(asPath: string) {
const [pathname, setPathname] = useState<string>('/search')
@ -34,11 +35,16 @@ export const filterQuery = (query: any) =>
return obj
}, {})
export const getCategoryPath = (slug: string, brand?: string) =>
`/search${brand ? `/designers/${brand}` : ''}${slug ? `/${slug}` : ''}`
export const getCategoryPath = (path: string, brand?: string) => {
const category = getSlug(path)
export const getDesignerPath = (slug: string, category?: string) => {
const designer = slug.replace(/^brands/, 'designers')
return `/search${brand ? `/designers/${brand}` : ''}${
category ? `/${category}` : ''
}`
}
export const getDesignerPath = (path: string, category?: string) => {
const designer = getSlug(path).replace(/^brands/, 'designers')
return `/search${designer ? `/${designer}` : ''}${
category ? `/${category}` : ''