cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Add link for slim version of product card

Browse Source
This commit is contained in:
Martin Bavio 2020-10-27 00:31:44 -03:00
parent 2c1f366f59
commit b23896998c
1 changed files with 44 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,56 +31,56 @@ const ProductCard: FC<Props> = ({
currencyCode: p.prices?.price?.currencyCode!, currencyCode: p.prices?.price?.currencyCode!,
}) })
if (variant === 'slim') {
return (
<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">
{p.name}
</span>
</div>
<EnhancedImage
src={p.images.edges?.[0]?.node.urlOriginal!}
alt={p.name}
width={imgWidth}
height={imgHeight}
priority={priority}
quality="90"
/>
</div>
)
}
return ( return (
<Link href={`/product${p.path}`}> <Link href={`/product${p.path}`}>
<a <a
className={cn(s.root, { [s.simple]: variant === 'simple' }, className)} className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
> >
<div className={s.squareBg} /> {variant === 'slim' ? (
<div className="flex flex-row justify-between box-border w-full z-20 absolute"> <div className="relative overflow-hidden box-border">
<div className="absolute top-0 left-0 pr-16 max-w-full"> <div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
<h3 className={s.productTitle}> <span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
<span>{p.name}</span> {p.name}
</h3> </span>
<span className={s.productPrice}>{price}</span> </div>
<EnhancedImage
src={p.images.edges?.[0]?.node.urlOriginal!}
alt={p.name}
width={imgWidth}
height={imgHeight}
priority={priority}
quality="90"
/>
</div> </div>
<WishlistButton ) : (
className={s.wishlistButton} <>
productId={p.entityId} <div className={s.squareBg} />
variant={p.variants.edges?.[0]!} <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">
</div> <h3 className={s.productTitle}>
<div className={s.imageContainer}> <span>{p.name}</span>
<EnhancedImage </h3>
alt={p.name} <span className={s.productPrice}>{price}</span>
className={cn('w-full object-cover', s['product-image'])} </div>
src={src} <WishlistButton
width={imgWidth} className={s.wishlistButton}
height={imgHeight} productId={p.entityId}
priority={priority} variant={p.variants.edges?.[0]!}
quality="90" />
/> </div>
</div> <div className={s.imageContainer}>
<EnhancedImage
alt={p.name}
className={cn('w-full object-cover', s['product-image'])}
src={src}
width={imgWidth}
height={imgHeight}
priority={priority}
quality="90"
/>
</div>
</>
)}
</a> </a>
</Link> </Link>
) )