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

Filter products from the homepage grid display when they do not have and image. Provide a fallback/placeholder image for the ProductCard for when a product does not have an image.

Browse Source
This commit is contained in:
Leah Wagner 2020-11-08 14:36:23 -08:00
parent f52c780c97
commit 4c03104f6a
3 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -57,7 +57,7 @@ const ProductCard: FC<Props> = ({
layout={imgLayout} layout={imgLayout}
loading={imgLoading} loading={imgLoading}
priority={imgPriority} priority={imgPriority}
src={p.images.edges?.[0]?.node.urlOriginal!} src={p.images.edges?.[0]?.node.urlOriginal! || '/product-img-placeholder.svg'}
alt={p.images.edges?.[0]?.node.altText || 'Product Image'} alt={p.images.edges?.[0]?.node.altText || 'Product Image'}
/> />
</div> </div>
@ -80,7 +80,7 @@ const ProductCard: FC<Props> = ({
<div className={s.imageContainer}> <div className={s.imageContainer}>
<Image <Image
quality="85" quality="85"
src={src} src={src || '/product-img-placeholder.svg'}
alt={p.name} alt={p.name}
className={s.image} className={s.image}
width={imgWidth} width={imgWidth}

2
pages/index.tsx
View File

@ -44,7 +44,9 @@ export async function getStaticProps({
// We prefer to do the computation at buildtime/servertime // We prefer to do the computation at buildtime/servertime
const { featured, bestSelling } = (() => { const { featured, bestSelling } = (() => {
// Create a copy of products that we can mutate // Create a copy of products that we can mutate
// Filter products that do not have images
const products = [...newestProducts] const products = [...newestProducts]
.filter((p) => p.node.images.edges!.length > 0)
// If the lists of featured and best selling products don't have enough // If the lists of featured and best selling products don't have enough
// products, then fill them with products from the products list, this // products, then fill them with products from the products list, this
// is useful for new commerce sites that don't have a lot of products // is useful for new commerce sites that don't have a lot of products

7
public/product-img-placeholder.svg Normal file
View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
<defs/>
<g fill="none" fill-rule="nonzero">
<path fill="#EAEAEA" d="M0 0h800v800H0z"/>
<path fill="#FFF" d="M366.333 365.833c0 5.695-1.993 10.535-5.979 14.521-3.986 3.986-8.826 5.98-14.52 5.98-5.695 0-10.535-1.994-14.522-5.98-3.986-3.986-5.979-8.826-5.979-14.52 0-5.695 1.993-10.535 5.98-14.522 3.986-3.986 8.826-5.979 14.52-5.979 5.695 0 10.535 1.993 14.521 5.98 3.986 3.986 5.98 8.826 5.98 14.52zm109.334 41v47.834H325.333v-20.5L359.5 400l17.083 17.083 54.667-54.666 44.417 44.416zm10.25-75.166H315.083c-.925 0-1.726.338-2.402 1.014-.676.676-1.014 1.477-1.014 2.402v129.834c0 .925.338 1.726 1.014 2.402.676.676 1.477 1.014 2.402 1.014h170.834c.925 0 1.726-.338 2.402-1.014.676-.676 1.014-1.477 1.014-2.402V335.083c0-.925-.338-1.726-1.014-2.402-.676-.676-1.477-1.014-2.402-1.014zM503 335.083v129.834c0 4.698-1.673 8.72-5.018 12.065-3.346 3.345-7.367 5.018-12.065 5.018H315.083c-4.698 0-8.72-1.673-12.065-5.018-3.345-3.346-5.018-7.367-5.018-12.065V335.083c0-4.698 1.673-8.72 5.018-12.065 3.346-3.345 7.367-5.018 12.065-5.018h170.834c4.698 0 8.72 1.673 12.065 5.018 3.345 3.346 5.018 7.367 5.018 12.065z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB