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

Merge branch 'master' into storefront-data-hooks-imports

Browse Source
This commit is contained in:
B
2020-10-27 01:27:18 -03:00
committed by GitHub
parent 86ee3cce21 cadfa6070b
commit f23a2381fd
20 changed files with 221 additions and 108 deletions
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!,
})
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 (
<Link href={`/product${p.path}`}>
<a
className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
>
<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>{p.name}</span>
</h3>
<span className={s.productPrice}>{price}</span>
{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">
{p.name}
</span>
</div>
<EnhancedImage
src={p.images.edges?.[0]?.node.urlOriginal!}
alt={p.name}
width={imgWidth}
height={imgHeight}
priority={priority}
quality="90"
/>
</div>
<WishlistButton
className={s.wishlistButton}
productId={p.entityId}
variant={p.variants.edges?.[0]!}
/>
</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>
) : (
<>
<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>{p.name}</span>
</h3>
<span className={s.productPrice}>{price}</span>
</div>
<WishlistButton
className={s.wishlistButton}
productId={p.entityId}
variant={p.variants.edges?.[0]!}
/>
</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>
</Link>
)

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

@@ -13,6 +13,7 @@ import { HTMLContent } from '@components/core'
import useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'
import type { ProductNode } from '@bigcommerce/storefront-data-hooks/api/operations/get-product'
import { getProductOptions } from '../helpers'
import WishlistButton from '@components/wishlist/WishlistButton'
interface Props {
className?: string
@@ -143,9 +144,11 @@ const ProductView: FC<Props> = ({ product, className }) => {
</div>
{/* TODO make it work */}
<div className={s.wishlistButton}>
<Heart />
</div>
<WishlistButton
className={s.wishlistButton}
productId={product.entityId}
variant={product.variants.edges?.[0]!}
/>
</div>
</Container>
)