forked from crowetic/commerce
Product View
This commit is contained in:
parent
2d347d487b
commit
d5868fae02
@ -79,5 +79,5 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.wishlistButton {
|
.wishlistButton {
|
||||||
@apply w-10 h-10 flex items-center justify-center bg-white text-black font-semibold inline-block text-sm leading-6 cursor-pointer;
|
@apply w-10 h-10 flex items-center justify-center bg-white text-black font-semibold inline-block text-xs leading-6 cursor-pointer;
|
||||||
}
|
}
|
||||||
|
@ -8,18 +8,9 @@ import type { Product } from '@lib/bigcommerce/api/operations/get-product'
|
|||||||
import useAddItem from '@lib/bigcommerce/cart/use-add-item'
|
import useAddItem from '@lib/bigcommerce/cart/use-add-item'
|
||||||
import { useUI } from '@components/ui/context'
|
import { useUI } from '@components/ui/context'
|
||||||
|
|
||||||
interface ProductData {
|
|
||||||
name: string
|
|
||||||
images: any
|
|
||||||
prices: any
|
|
||||||
description: string
|
|
||||||
colors?: any[]
|
|
||||||
sizes?: any[]
|
|
||||||
}
|
|
||||||
interface Props {
|
interface Props {
|
||||||
className?: string
|
className?: string
|
||||||
children?: any
|
children?: any
|
||||||
productData: ProductData
|
|
||||||
product: Product
|
product: Product
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -31,7 +22,7 @@ interface Choices {
|
|||||||
const COLORS: Colors[] = ['pink', 'black', 'white']
|
const COLORS: Colors[] = ['pink', 'black', 'white']
|
||||||
const SIZES = ['s', 'm', 'l', 'xl', 'xxl']
|
const SIZES = ['s', 'm', 'l', 'xl', 'xxl']
|
||||||
|
|
||||||
const ProductView: FC<Props> = ({ product, productData, className }) => {
|
const ProductView: FC<Props> = ({ product, className }) => {
|
||||||
const addItem = useAddItem()
|
const addItem = useAddItem()
|
||||||
const { openSidebar } = useUI()
|
const { openSidebar } = useUI()
|
||||||
const [choices, setChoices] = useState<Choices>({
|
const [choices, setChoices] = useState<Choices>({
|
||||||
@ -50,19 +41,28 @@ const ProductView: FC<Props> = ({ product, productData, className }) => {
|
|||||||
|
|
||||||
const activeSize = choices.size
|
const activeSize = choices.size
|
||||||
const activeColor = choices.color
|
const activeColor = choices.color
|
||||||
|
console.log(product, product.images.edges)
|
||||||
|
|
||||||
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-8 py-2 bg-violet text-white font-bold text-3xl">
|
||||||
{productData.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">
|
||||||
{productData.prices}
|
{product.prices.price.value}
|
||||||
|
{` `}
|
||||||
|
{product.prices.price.currencyCode}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1 h-48 p-24">
|
<div className="flex-1 h-48 p-24 relative min-h-screen overflow-hidden">
|
||||||
<div className="bg-violet h-48"></div>
|
<div className="absolute z-10 inset-0 flex items-center justify-center">
|
||||||
|
<img
|
||||||
|
className="w-full object-cover"
|
||||||
|
src={product.images.edges[0].node.urlSmall}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className=" absolute inset-24 z-0 bg-violet"></div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1 flex flex-col">
|
<div className="flex-1 flex flex-col">
|
||||||
<section className="pb-4">
|
<section className="pb-4">
|
||||||
@ -102,7 +102,7 @@ const ProductView: FC<Props> = ({ product, productData, className }) => {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section className="pb-12">
|
<section className="pb-12">
|
||||||
<p>{productData.description}</p>
|
<div 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}>
|
||||||
|
@ -20,7 +20,7 @@ export default function Home({
|
|||||||
brands,
|
brands,
|
||||||
}: InferGetStaticPropsType<typeof getStaticProps>) {
|
}: InferGetStaticPropsType<typeof getStaticProps>) {
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="mt-3">
|
||||||
<Grid items={products.slice(0, 3)} wrapper={ProductCard} />
|
<Grid items={products.slice(0, 3)} wrapper={ProductCard} />
|
||||||
<Marquee
|
<Marquee
|
||||||
items={products.slice(0, 3)}
|
items={products.slice(0, 3)}
|
||||||
@ -77,7 +77,7 @@ export default function Home({
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -14,25 +14,9 @@ export async function getStaticProps({
|
|||||||
throw new Error(`Product with slug '${params!.slug}' not found`)
|
throw new Error(`Product with slug '${params!.slug}' not found`)
|
||||||
}
|
}
|
||||||
|
|
||||||
const productData = {
|
|
||||||
name: 'T-Shirt',
|
|
||||||
description: `
|
|
||||||
Nothing undercover about this tee. Nope. This is the official Bad
|
|
||||||
Boys tee. Printed in white or black ink on Black, Brown, or Oatmeal.
|
|
||||||
Like everything in this collection, it is extremely limited edition
|
|
||||||
and available for 10 days only. This is a limited edition production
|
|
||||||
run. Printing starts when the drop ends. Reminder: Bad Boys For
|
|
||||||
Life. Shipping may take 10+ days due to COVID-19.
|
|
||||||
`,
|
|
||||||
images: null,
|
|
||||||
prices: '$50',
|
|
||||||
colors: ['black', 'white', 'pink'],
|
|
||||||
sizes: ['s', 'm', 'l', 'xl', 'xxl'],
|
|
||||||
}
|
|
||||||
return {
|
return {
|
||||||
props: {
|
props: {
|
||||||
product,
|
product,
|
||||||
productData,
|
|
||||||
},
|
},
|
||||||
revalidate: 200,
|
revalidate: 200,
|
||||||
}
|
}
|
||||||
@ -49,14 +33,13 @@ export async function getStaticPaths() {
|
|||||||
|
|
||||||
export default function Slug({
|
export default function Slug({
|
||||||
product,
|
product,
|
||||||
productData,
|
|
||||||
}: InferGetStaticPropsType<typeof getStaticProps>) {
|
}: InferGetStaticPropsType<typeof getStaticProps>) {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
return router.isFallback ? (
|
return router.isFallback ? (
|
||||||
<h1>Loading...</h1>
|
<h1>Loading...</h1> // TODO (BC) Add Skeleton Views
|
||||||
) : (
|
) : (
|
||||||
<ProductView product={product} productData={productData} />
|
<ProductView product={product} />
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user