crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-23 04:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'agnostic' of github.com:vercel/commerce into agnostic

Browse Source
This commit is contained in:
okbel
2021-02-04 11:05:06 -03:00
parent b037cc0596 c06d9dae3a
commit 6cacfec8c7
28 changed files with 270 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
components/product/ProductCard/ProductCard.tsx
View File

@@ -12,76 +12,74 @@ interface Props {
imgProps?: Omit<ImageProps, 'src'>
}
const placeholderImg = '/product-img-placeholder.svg'
const ProductCard: FC<Props> = ({
className,
product,
variant,
imgProps,
...props
}) => {
return (
<Link href={`/product/${product.slug}`} {...props}>
<a
className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
>
{variant === 'slim' ? (
<div className="relative overflow-hidden box-border">
<div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
<span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
{product.name}
}) => (
<Link href={`/product/${product.slug}`} {...props}>
<a className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}>
{variant === 'slim' ? (
<div className="relative overflow-hidden box-border">
<div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
<span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
{product.name}
</span>
</div>
{product?.images && (
<Image
quality="85"
src={product.images[0].url || placeholderImg}
alt={product.name || 'Product Image'}
height={320}
width={320}
layout="fixed"
{...imgProps}
/>
)}
</div>
) : (
<>
<div className={s.squareBg} />
<div className="flex flex-row justify-between box-border w-full z-20 absolute">
<div className="absolute top-0 left-0 pr-16 max-w-full">
<h3 className={s.productTitle}>
<span>{product.name}</span>
</h3>
<span className={s.productPrice}>
{product.price.value}
&nbsp;
{product.price.currencyCode}
</span>
</div>
{product?.images && (
<Image
quality="85"
alt={product.name}
src={product.images[0].url!}
height={320}
width={320}
layout="fixed"
{...imgProps}
/>
)}
</div>
) : (
<>
<div className={s.squareBg} />
<div className="flex flex-row justify-between box-border w-full z-20 absolute">
<div className="absolute top-0 left-0 pr-16 max-w-full">
<h3 className={s.productTitle}>
<span>{product.name}</span>
</h3>
<span className={s.productPrice}>
{product.price.value}
&nbsp;
{product.price.currencyCode}
</span>
</div>
{/* <WishlistButton
{/* <WishlistButton
className={s.wishlistButton}
productId={product.id}
variant={product.variants[0]}
/> */}
</div>
<div className={s.imageContainer}>
{product?.images && (
<Image
alt={product.name}
className={s.productImage}
src={product.images[0].url}
height={540}
width={540}
quality="85"
layout="responsive"
{...imgProps}
/>
)}
</div>
</>
)}
</a>
</Link>
)
}
</div>
<div className={s.imageContainer}>
{product?.images && (
<Image
alt={product.name || 'Product Image'}
className={s.productImage}
src={product.images[0].url || placeholderImg}
height={540}
width={540}
quality="85"
layout="responsive"
{...imgProps}
/>
)}
</div>
</>
)}
</a>
</Link>
)
export default ProductCard

6
components/product/ProductView/ProductView.tsx
View File

@@ -40,10 +40,8 @@ const ProductView: FC<Props> = ({ product }) => {
setLoading(true)
try {
await addItem({
productId: Number(product.id),
variantId: variant
? Number(variant.id)
: Number(product.variants[0].id),
productId: product.id,
variantId: variant ? variant.id : product.variants[0].id,
})
openSidebar()
setLoading(false)