From 4c03104f6a6507476d582cac9d4b6056b40ebfd6 Mon Sep 17 00:00:00 2001 From: Leah Wagner Date: Sun, 8 Nov 2020 14:36:23 -0800 Subject: [PATCH 1/3] 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. --- components/product/ProductCard/ProductCard.tsx | 4 ++-- pages/index.tsx | 2 ++ public/product-img-placeholder.svg | 7 +++++++ 3 files changed, 11 insertions(+), 2 deletions(-) create mode 100644 public/product-img-placeholder.svg diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index 3cd288c7c..21d56bb73 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -57,7 +57,7 @@ const ProductCard: FC = ({ layout={imgLayout} loading={imgLoading} 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'} /> @@ -80,7 +80,7 @@ const ProductCard: FC = ({
{p.name} { // Create a copy of products that we can mutate + // Filter products that do not have images const products = [...newestProducts] + .filter((p) => p.node.images.edges!.length > 0) // If the lists of featured and best selling products don't have enough // 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 diff --git a/public/product-img-placeholder.svg b/public/product-img-placeholder.svg new file mode 100644 index 000000000..fbb43bb62 --- /dev/null +++ b/public/product-img-placeholder.svg @@ -0,0 +1,7 @@ + + + + + + + From 25129c699cde2038e52d3bddd9ce03138df4fa02 Mon Sep 17 00:00:00 2001 From: Leah Wagner Date: Fri, 13 Nov 2020 16:54:44 -0800 Subject: [PATCH 2/3] Avoid repeating placeholder image reference and move to a variable --- components/product/ProductCard/ProductCard.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index 21d56bb73..dea43aec0 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -31,6 +31,7 @@ const ProductCard: FC = ({ imgLayout = 'responsive', }) => { const src = p.images.edges?.[0]?.node?.urlOriginal! + const placeholderImg = '/product-img-placeholder.svg'; const { price } = usePrice({ amount: p.prices?.price?.value, baseAmount: p.prices?.retailPrice?.value, @@ -57,7 +58,7 @@ const ProductCard: FC = ({ layout={imgLayout} loading={imgLoading} 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'} />
@@ -80,7 +81,7 @@ const ProductCard: FC = ({
{p.name} Date: Sat, 23 Jan 2021 21:48:40 -0800 Subject: [PATCH 3/3] Remove filter to avoid additional computations as per https://github.com/vercel/commerce/pull/80#discussion_r531142893. Placeholder images will display as fallback. --- pages/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/pages/index.tsx b/pages/index.tsx index 3dbb47ef7..586b8ef00 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -46,7 +46,6 @@ export async function getStaticProps({ // Create a copy of products that we can mutate // Filter products that do not have images const products = [...newestProducts] - .filter((p) => p.node.images.edges!.length > 0) // If the lists of featured and best selling products don't have enough // 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