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 arzafran/responsive-bottom-grid

Browse Source
This commit is contained in:
Franco Arza
2020-10-26 19:22:02 -03:00
parent 58385dc491 928bd5ac00
commit 0c9271861f
34 changed files with 374 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -83,6 +83,7 @@
.simple {
& .squareBg {
@apply bg-accents-0 !important;
background-image: url("data:image/svg+xml,%3Csvg width='48' height='46' viewBox='0 0 48 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline opacity='0.05' x1='9.41421' y1='8' x2='21' y2='19.5858' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.05' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(-0.707107 0.707107 0.707107 0.707107 40 8)' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.05' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(0.707107 -0.707107 -0.707107 -0.707107 8 38)' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.05' x1='38.5858' y1='38' x2='27' y2='26.4142' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
& .productTitle {

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

@@ -1,19 +1,18 @@
import React, { FC, ReactNode, Component } from 'react'
import type { FC } from 'react'
import cn from 'classnames'
import Link from 'next/link'
import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
import usePrice from '@lib/bigcommerce/use-price'
import { Heart } from '@components/icons'
import { EnhancedImage } from '@components/core'
import s from './ProductCard.module.css'
import WishlistButton from '@components/wishlist/WishlistButton'
interface Props {
className?: string
children?: ReactNode[] | Component[] | any[]
product: ProductNode
variant?: 'slim' | 'simple'
imgWidth: number
imgHeight: number
imgWidth: number | string
imgHeight: number | string
priority?: boolean
}
@@ -25,7 +24,7 @@ const ProductCard: FC<Props> = ({
imgHeight,
priority,
}) => {
const src = p.images.edges?.[0]?.node.urlOriginal!
const src = p.images.edges?.[0]?.node?.urlOriginal!
const { price } = usePrice({
amount: p.prices?.price?.value,
baseAmount: p.prices?.retailPrice?.value,
@@ -65,9 +64,11 @@ const ProductCard: FC<Props> = ({
</h3>
<span className={s.productPrice}>{price}</span>
</div>
<div className={s.wishlistButton}>
<Heart />
</div>
<WishlistButton
className={s.wishlistButton}
productId={p.entityId}
variant={p.variants.edges?.[0]!}
/>
</div>
<div className={cn(s.imageContainer)}>
<EnhancedImage