4
0
forked from crowetic/commerce

Add links to the categories & brands in the landing

This commit is contained in:
Luis Alvarez 2020-10-25 21:43:13 -05:00
parent 50c50b6d53
commit d70132734b
3 changed files with 26 additions and 10 deletions

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 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>

View File

@ -76,7 +76,7 @@ export default function Search({
> >
<Link <Link
href={{ href={{
pathname: getCategoryPath(getSlug(cat.path), brand), pathname: getCategoryPath(cat.path, brand),
query, query,
}} }}
> >
@ -100,7 +100,7 @@ export default function Search({
> >
<Link <Link
href={{ href={{
pathname: getDesignerPath(getSlug(node.path), category), pathname: getDesignerPath(node.path, category),
query, query,
}} }}
> >

View File

@ -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}` : ''