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

Changes

Browse Source
This commit is contained in:
Bel Curcio
2021-06-01 15:25:23 -03:00
parent 51229a0562
commit 627237ec06
6 changed files with 89 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/product/ProductCard/ProductCard.module.css
View File

@@ -41,8 +41,8 @@
}
}
.wishlistButton {
@apply top-3 right-3 z-50 absolute bg-accent-9 text-accent-0;
.root .wishlistButton {
@apply top-0 right-0 z-30 absolute;
}
.productTitle > span,

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

@@ -9,9 +9,8 @@ import WishlistButton from '@components/wishlist/WishlistButton'
interface Props {
className?: string
product: Product
variant?: 'slim' | 'simple'
variant?: 'default' | 'slim' | 'simple'
imgProps?: Omit<ImageProps, 'src'>
noNameTag?: boolean
}
const placeholderImg = '/product-img-placeholder.svg'
@@ -19,35 +18,42 @@ const placeholderImg = '/product-img-placeholder.svg'
const ProductCard: FC<Props> = ({
className,
product,
variant,
variant = 'default',
imgProps,
noNameTag = false,
...props
}) => (
<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 ">
{!noNameTag && (
<a
className={cn(
s.root,
{ [s.slim]: variant === 'slim', [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>
) : (
{product?.images && (
<Image
quality="85"
src={product.images[0].url || placeholderImg}
alt={product.name || 'Product Image'}
height={320}
width={320}
layout="fixed"
{...imgProps}
/>
)}
</div>
</>
)}
{variant === 'simple' && (
<>
{process.env.COMMERCE_WISHLIST_ENABLED && (
<WishlistButton
@@ -57,19 +63,55 @@ const ProductCard: FC<Props> = ({
/>
)}
<div className="flex flex-row justify-between box-border w-full z-20 absolute ">
{!noNameTag && (
<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>
<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>
</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>
</>
)}
{variant === 'default' && (
<>
{process.env.COMMERCE_WISHLIST_ENABLED && (
<WishlistButton
className={s.wishlistButton}
productId={product.id}
variant={product.variants[0] as any}
/>
)}
<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>
</div>
<div className={s.imageContainer}>
{product?.images && (
<Image