Add image placeholder support for single products

Author: w3bdesign

components/Product/IndexProducts.component.jsx

@@ -46,7 +46,7 @@ const IndexProducts = ({ products }) => {
                           id="product-image"
                           className="transition duration-500 ease-in-out transform cursor-pointer hover:grow hover:shadow-lg hover:scale-105"
                           alt={name}
-                          src={WOO_CONFIG.PLACEHOLDER_IMAGE_URL}
+                          src={WOO_CONFIG.PLACEHOLDER_SMALL_IMAGE_URL}
                         />
                       )}
                     </a>

components/Product/SingleProduct.component.jsx

@@ -3,6 +3,8 @@ import { useState, useEffect } from 'react';
 import AddToCartButton from 'components/Cart/AddToCartButton.component';
 import LoadingSpinner from 'components/LoadingSpinner/LoadingSpinner.component';
 
+import { WOO_CONFIG } from 'utils/config/nextConfig';
+
 /**
  * Shows a single product with an Add To Cart button.
  * Uses GraphQL for product data
@@ -41,12 +43,22 @@ const SingleProduct = ({ product }) => {
       ) : (
         <div className="container flex flex-wrap items-center pt-4 pb-12 mx-auto ">
           <div className="grid grid-cols-1 gap-4 mt-16 lg:grid-cols-2 xl:grid-cols-2 md:grid-cols-2 sm:grid-cols-2">
-            <img
-              id="product-image"
-              className="h-auto p-8 transition duration-500 ease-in-out transform xl:p-2 md:p-2 lg:p-2 hover:grow hover:shadow-lg hover:scale-105"
-              alt={name}
-              src={image.sourceUrl}
-            />
+            {image ? (
+              <img
+                id="product-image"
+                className="h-auto p-8 transition duration-500 ease-in-out transform xl:p-2 md:p-2 lg:p-2 hover:grow hover:shadow-lg hover:scale-105"
+                alt={name}
+                src={image.sourceUrl}
+              />
+            ) : (
+              <img
+                id="product-image"
+                className="h-auto p-8 transition duration-500 ease-in-out transform xl:p-2 md:p-2 lg:p-2 hover:grow hover:shadow-lg hover:scale-105"
+                alt={name}
+                src={WOO_CONFIG.PLACEHOLDER_LARGE_IMAGE_URL}
+              />
+            )}
+
             <div className="ml-8">
               <p className="text-3xl font-bold text-left">{name}</p>
               <br />

utils/config/nextConfig.js

@@ -19,8 +19,8 @@ export const WOO_CONFIG = {
   ALGOLIA_APP_ID: '7L9M5Y0B1K',
   ALGOLIA_PUBLIC_API_KEY: '925cc92373120f1bf477bb8ce0e71649',
   ALGOLIA_INDEX_NAME: 'dfweb',
-  PLACEHOLDER_IMAGE_URL: "https://via.placeholder.com/272",
+  PLACEHOLDER_SMALL_IMAGE_URL: 'https://via.placeholder.com/272',
+  PLACEHOLDER_LARGE_IMAGE_URL: 'https://via.placeholder.com/616',
 };
 
-
 export default WOO_CONFIG;