crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-06-18 05:01:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Avoid repeating placeholder image reference and move to a variable

Browse Source
This commit is contained in:
Leah Wagner 2020-11-13 16:54:44 -08:00
parent 4c03104f6a
commit 25129c699c
1 changed files with 3 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,6 +31,7 @@ const ProductCard: FC<Props> = ({
imgLayout = 'responsive', imgLayout = 'responsive',
}) => { }) => {
const src = p.images.edges?.[0]?.node?.urlOriginal! const src = p.images.edges?.[0]?.node?.urlOriginal!
const placeholderImg = '/product-img-placeholder.svg';
const { price } = usePrice({ const { price } = usePrice({
amount: p.prices?.price?.value, amount: p.prices?.price?.value,
baseAmount: p.prices?.retailPrice?.value, baseAmount: p.prices?.retailPrice?.value,
@ -57,7 +58,7 @@ const ProductCard: FC<Props> = ({
layout={imgLayout} layout={imgLayout}
loading={imgLoading} loading={imgLoading}
priority={imgPriority} priority={imgPriority}
src={p.images.edges?.[0]?.node.urlOriginal! || '/product-img-placeholder.svg'} src={p.images.edges?.[0]?.node.urlOriginal! || placeholderImg}
alt={p.images.edges?.[0]?.node.altText || 'Product Image'} alt={p.images.edges?.[0]?.node.altText || 'Product Image'}
/> />
</div> </div>
@ -80,7 +81,7 @@ const ProductCard: FC<Props> = ({
<div className={s.imageContainer}> <div className={s.imageContainer}>
<Image <Image
quality="85" quality="85"
src={src || '/product-img-placeholder.svg'} src={src || placeholderImg}
alt={p.name} alt={p.name}
className={s.image} className={s.image}
width={imgWidth} width={imgWidth}