forked from crowetic/commerce
Add underline
This commit is contained in:
parent
cc01b81e45
commit
63c0713151
@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
|
|||||||
import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
|
import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
|
||||||
import { useRouter } from 'next/router'
|
import { useRouter } from 'next/router'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
|
import cn from 'classnames'
|
||||||
import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
|
import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
|
||||||
import useSearch from '@lib/bigcommerce/products/use-search'
|
import useSearch from '@lib/bigcommerce/products/use-search'
|
||||||
import { Layout } from '@components/core'
|
import { Layout } from '@components/core'
|
||||||
@ -38,8 +39,13 @@ export default function Home({
|
|||||||
All Categories
|
All Categories
|
||||||
</li>
|
</li>
|
||||||
{categories.map((cat) => (
|
{categories.map((cat) => (
|
||||||
<li key={cat.path} className="py-1 text-default">
|
<li
|
||||||
<Link href={getCategoryPath(cat.path, brand)}>
|
key={cat.path}
|
||||||
|
className={cn('py-1 text-default', {
|
||||||
|
underline: getSlug(cat.path) === category,
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<Link href={getCategoryPath(getSlug(cat.path), brand)}>
|
||||||
<a>{cat.name}</a>
|
<a>{cat.name}</a>
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
@ -50,8 +56,13 @@ export default function Home({
|
|||||||
All Designers
|
All Designers
|
||||||
</li>
|
</li>
|
||||||
{brands.flatMap(({ node }) => (
|
{brands.flatMap(({ node }) => (
|
||||||
<li key={node.path} className="py-1 text-default">
|
<li
|
||||||
<Link href={getDesignerPath(node.path, category)}>
|
key={node.path}
|
||||||
|
className={cn('py-1 text-default', {
|
||||||
|
underline: getSlug(node.path) === `brands/${brand}`,
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<Link href={getDesignerPath(getSlug(node.path), category)}>
|
||||||
<a>{node.name}</a>
|
<a>{node.name}</a>
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
@ -122,14 +133,13 @@ function useSearchMeta(asPath: string) {
|
|||||||
return { category, brand }
|
return { category, brand }
|
||||||
}
|
}
|
||||||
|
|
||||||
function getCategoryPath(path: string, designer?: string) {
|
// Remove trailing and leading slash
|
||||||
return designer ? `/search/designers/${designer}${path}` : `/search${path}`
|
const getSlug = (path: string) => path.replace(/^\/|\/$/g, '')
|
||||||
}
|
|
||||||
|
|
||||||
function getDesignerPath(path: string, category?: string) {
|
const getCategoryPath = (slug: string, designer?: string) =>
|
||||||
// Remove the trailing slash and replace /brands with /designers
|
designer ? `/search/designers/${designer}/${slug}` : `/search/${slug}`
|
||||||
const designer = path.replace(/^\/brands/, '/designers').replace(/\/$/, '')
|
|
||||||
const href = `/search${designer}`
|
|
||||||
|
|
||||||
return category ? `${href}/${category}` : href
|
const getDesignerPath = (slug: string, category?: string) => {
|
||||||
|
const designer = slug.replace(/^brands/, 'designers')
|
||||||
|
return `/search/${designer}${category ? `/${category}` : ''}`
|
||||||
}
|
}
|
||||||
|
96
pages/search/designers2/[designer]/[category].tsx
Normal file
96
pages/search/designers2/[designer]/[category].tsx
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
|
||||||
|
import Link from 'next/link'
|
||||||
|
import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
|
||||||
|
import useSearch from '@lib/bigcommerce/products/use-search'
|
||||||
|
import { Layout } from '@components/core'
|
||||||
|
import { Container, Grid } from '@components/ui'
|
||||||
|
import { ProductCard } from '@components/product'
|
||||||
|
import { useRouter } from 'next/router'
|
||||||
|
|
||||||
|
export async function getStaticProps({ preview }: GetStaticPropsContext) {
|
||||||
|
const { categories, brands } = await getSiteInfo()
|
||||||
|
|
||||||
|
return {
|
||||||
|
props: { categories, brands },
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Home({
|
||||||
|
categories,
|
||||||
|
brands,
|
||||||
|
}: InferGetStaticPropsType<typeof getStaticProps>) {
|
||||||
|
const router = useRouter()
|
||||||
|
const { q } = router.query
|
||||||
|
const { data } = useSearch({
|
||||||
|
search: typeof q === 'string' ? q : '',
|
||||||
|
})
|
||||||
|
|
||||||
|
console.log('Q', router.query)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Container>
|
||||||
|
<div className="grid grid-cols-12 gap-8 mt-3 mb-20">
|
||||||
|
<div className="col-span-2">
|
||||||
|
<ul className="mb-10">
|
||||||
|
<li className="py-1 text-primary font-bold tracking-wide">
|
||||||
|
All Categories
|
||||||
|
</li>
|
||||||
|
{categories.map((cat) => (
|
||||||
|
<li key={cat.path} className="py-1 text-default">
|
||||||
|
<Link href={`/search${cat.path}`}>
|
||||||
|
<a>{cat.name}</a>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li className="py-1 text-primary font-bold tracking-wide">
|
||||||
|
All Designers
|
||||||
|
</li>
|
||||||
|
{brands.flatMap(({ node }) => (
|
||||||
|
<li key={node.path} className="py-1 text-default">
|
||||||
|
<a href="#">{node.name}</a>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div className="col-span-8">
|
||||||
|
{data ? (
|
||||||
|
<>
|
||||||
|
{q && (
|
||||||
|
<div className="mb-12">
|
||||||
|
{data.found ? (
|
||||||
|
<>Showing {data.products.length} results for</>
|
||||||
|
) : (
|
||||||
|
<>There are no products that match</>
|
||||||
|
)}{' '}
|
||||||
|
"<strong>{q}</strong>"
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<Grid
|
||||||
|
items={data.products}
|
||||||
|
layout="normal"
|
||||||
|
wrapper={ProductCard}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div>Searching...</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="col-span-2">
|
||||||
|
<ul>
|
||||||
|
<li className="py-1 text-primary font-bold tracking-wide">
|
||||||
|
Relevance
|
||||||
|
</li>
|
||||||
|
<li className="py-1 text-default">Latest arrivals</li>
|
||||||
|
<li className="py-1 text-default">Trending</li>
|
||||||
|
<li className="py-1 text-default">Price: Low to high</li>
|
||||||
|
<li className="py-1 text-default">Price: High to low</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
Home.Layout = Layout
|
Loading…
x
Reference in New Issue
Block a user