From 08a6b2efcfde665cea35cbcde38f2bd127ca8045 Mon Sep 17 00:00:00 2001
From: Leah Wagner <leah@leahwagner.ca>
Date: Thu, 28 Jan 2021 09:09:28 -0800
Subject: [PATCH] Issue/79 fallback image (#179)

* 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.

* Avoid repeating placeholder image reference and move to a variable

* Remove filter to avoid additional computations as per https://github.com/vercel/commerce/pull/80#discussion_r531142893. Placeholder images will display as fallback.

* 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.

* Avoid repeating placeholder image reference and move to a variable

* Remove filter to avoid additional computations as per https://github.com/vercel/commerce/pull/80#discussion_r531142893. Placeholder images will display as fallback.

* Remove comment about filter. Code removed so no longer needed.

Co-authored-by: B <curciobelen@gmail.com>
---
 components/product/ProductCard/ProductCard.tsx | 5 +++--
 pages/index.tsx                                | 1 +
 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 85e69b3f2..a63aacc6e 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -32,6 +32,7 @@ const ProductCard: FC<Props> = ({
   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,
@@ -58,7 +59,7 @@ const ProductCard: FC<Props> = ({
               layout={imgLayout}
               loading={imgLoading}
               priority={imgPriority}
-              src={p.images.edges?.[0]?.node.urlOriginal!}
+              src={p.images.edges?.[0]?.node.urlOriginal! || placeholderImg}
               alt={p.images.edges?.[0]?.node.altText || 'Product Image'}
             />
           </div>
@@ -81,7 +82,7 @@ const ProductCard: FC<Props> = ({
             <div className={s.imageContainer}>
               <Image
                 quality="85"
-                src={src}
+                src={src || placeholderImg}
                 alt={p.name}
                 className={s.productImage}
                 width={imgWidth}
diff --git a/pages/index.tsx b/pages/index.tsx
index ef1c0a96e..d1c20a744 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -44,6 +44,7 @@ export async function getStaticProps({
   // We prefer to do the computation at buildtime/servertime
   const { featured, bestSelling } = (() => {
     // Create a copy of products that we can mutate
+    // Filter products that do not have images
     const products = [...newestProducts]
     // If the lists of featured and best selling products don't have enough
     // products, then fill them with products from the products list, this
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 @@
+<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>