4
0
forked from crowetic/commerce

Product View

This commit is contained in:
Belen Curcio 2020-10-12 10:46:17 -03:00
parent 2d347d487b
commit d5868fae02
4 changed files with 20 additions and 37 deletions

View File

@ -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;
} }

View File

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

View File

@ -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>
) )
} }

View File

@ -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} />
) )
} }