forked from crowetic/commerce
Prefetch Search
This commit is contained in:
parent
d5868fae02
commit
aa8e8fe89d
@ -1,13 +1,14 @@
|
|||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import { FC } from 'react'
|
import { FC } from 'react'
|
||||||
import s from './Searchbar.module.css'
|
import s from './Searchbar.module.css'
|
||||||
|
import { useRouter } from 'next/router'
|
||||||
interface Props {
|
interface Props {
|
||||||
className?: string
|
className?: string
|
||||||
children?: any
|
children?: any
|
||||||
}
|
}
|
||||||
|
|
||||||
const Searchbar: FC<Props> = ({ className }) => {
|
const Searchbar: FC<Props> = ({ className }) => {
|
||||||
|
const router = useRouter()
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
@ -15,7 +16,15 @@ const Searchbar: FC<Props> = ({ className }) => {
|
|||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<input className={s.input} placeholder="Search for products..." />
|
<input
|
||||||
|
className={s.input}
|
||||||
|
placeholder="Search for products..."
|
||||||
|
onChange={(e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
router.push('/search')
|
||||||
|
console.log('changing')
|
||||||
|
}}
|
||||||
|
/>
|
||||||
<div className={s.iconContainer}>
|
<div className={s.iconContainer}>
|
||||||
<svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
|
<svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
|
||||||
<path
|
<path
|
||||||
|
@ -46,7 +46,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
|
|||||||
return (
|
return (
|
||||||
<div className={cn(s.root, className)}>
|
<div className={cn(s.root, className)}>
|
||||||
<div className="absolute">
|
<div className="absolute">
|
||||||
<h1 className="px-8 py-2 bg-violet text-white font-bold text-3xl">
|
<h1 className="px-6 py-2 bg-violet text-white font-bold text-3xl">
|
||||||
{product.name}
|
{product.name}
|
||||||
</h1>
|
</h1>
|
||||||
<div className="px-6 py-2 pb-4 bg-violet text-white font-semibold inline-block">
|
<div className="px-6 py-2 pb-4 bg-violet text-white font-semibold inline-block">
|
||||||
@ -102,7 +102,10 @@ const ProductView: FC<Props> = ({ product, className }) => {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section className="pb-12">
|
<section className="pb-12">
|
||||||
<div dangerouslySetInnerHTML={{ __html: product.description }} />
|
<div
|
||||||
|
className="break-words"
|
||||||
|
dangerouslySetInnerHTML={{ __html: product.description }}
|
||||||
|
/>
|
||||||
</section>
|
</section>
|
||||||
<section className="pb-4">
|
<section className="pb-4">
|
||||||
<Button type="button" className={s.button} onClick={addToCart}>
|
<Button type="button" className={s.button} onClick={addToCart}>
|
||||||
|
@ -4,6 +4,8 @@ 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 getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
|
import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
|
||||||
|
import { useEffect } from 'react'
|
||||||
|
import { useRouter } from 'next/router'
|
||||||
|
|
||||||
export async function getStaticProps({ preview }: GetStaticPropsContext) {
|
export async function getStaticProps({ preview }: GetStaticPropsContext) {
|
||||||
const { products } = await getAllProducts()
|
const { products } = await getAllProducts()
|
||||||
@ -19,6 +21,12 @@ export default function Home({
|
|||||||
categories,
|
categories,
|
||||||
brands,
|
brands,
|
||||||
}: InferGetStaticPropsType<typeof getStaticProps>) {
|
}: InferGetStaticPropsType<typeof getStaticProps>) {
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
router.prefetch('/search')
|
||||||
|
}, [])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mt-3">
|
<div className="mt-3">
|
||||||
<Grid items={products.slice(0, 3)} wrapper={ProductCard} />
|
<Grid items={products.slice(0, 3)} wrapper={ProductCard} />
|
||||||
@ -44,22 +52,22 @@ export default function Home({
|
|||||||
/>
|
/>
|
||||||
<div className="py-12 flex flex-row w-full">
|
<div className="py-12 flex flex-row w-full">
|
||||||
<div className="pr-3 w-48">
|
<div className="pr-3 w-48">
|
||||||
<ul className="uppercase">
|
<ul className="mb-10">
|
||||||
<li>
|
<li className="py-1 text-black font-bold tracking-wide">
|
||||||
<h2 className="font-bold">All Categories</h2>
|
All Categories
|
||||||
</li>
|
</li>
|
||||||
{categories.map((cat) => (
|
{categories.map((cat) => (
|
||||||
<li key={cat.path} className="mt-2">
|
<li key={cat.path} className="py-1 text-gray-800">
|
||||||
<a href="#">{cat.name}</a>
|
<a href="#">{cat.name}</a>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
<ul className="uppercase mt-6">
|
<ul className="">
|
||||||
<li>
|
<li className="py-1 text-black font-bold tracking-wide">
|
||||||
<h2 className="font-bold">All Designers</h2>
|
All Designers
|
||||||
</li>
|
</li>
|
||||||
{brands.flatMap(({ node }) => (
|
{brands.flatMap(({ node }) => (
|
||||||
<li key={node.path} className="mt-2">
|
<li key={node.path} className="py-1 text-gray-800">
|
||||||
<a href="#">{node.name}</a>
|
<a href="#">{node.name}</a>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user