Add placeholder image for when product has no image

Author: w3bdesign

components/Product/IndexProducts.component.jsx

@@ -1,6 +1,8 @@
 import Link from 'next/link';
 import { v4 as uuidv4 } from 'uuid';
 
+import { WOO_CONFIG } from 'utils/config/nextConfig';
+
 /**
  * Displays all of the products as long as length is defined.
  * Does a map() over the props array and utilizes uuidv4 for unique key values.
@@ -32,19 +34,36 @@ const IndexProducts = ({ products }) => {
                     as={`/produkt/${slug}?productId=${productId}`}
                   >
                     <a>
-                      {image && (
+                      {image ? (
                         <img
                           id="product-image"
                           className="transition duration-500 ease-in-out transform cursor-pointer hover:grow hover:shadow-lg hover:scale-105"
                           alt={name}
                           src={image.sourceUrl}
                         />
+                      ) : (
+                        <img
+                          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}
+                        />
                       )}
                     </a>
                   </Link>
-                  <div className="flex justify-center pt-3">
-                    <p className="font-bold text-center">{name}</p>
-                  </div>
+                  <Link
+                    href="/produkt/[post]"
+                    as={`/produkt/${slug}?productId=${productId}`}
+                  >
+                    <a>
+                      <div className="flex justify-center pt-3">
+                        <p className="font-bold text-center cursor-pointer">
+                          {name}
+                        </p>
+                      </div>
+                    </a>
+                  </Link>
+
                   {/* Display sale price when on sale */}
                   {onSale && (
                     <>

utils/config/nextConfig.js

@@ -8,6 +8,7 @@ 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",
 };
 */
 
@@ -18,6 +19,7 @@ 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",
 };
 
 

utils/const/GQL_QUERIES.js

@@ -34,19 +34,19 @@ export const GET_SINGLE_PRODUCT = gql`
           }
         }
         variations {
-        nodes {
-          id
-          variationId
-          name
-          stockStatus          
-          stockQuantity
-          purchasable
-          onSale
-          salePrice
-          regularPrice          
+          nodes {
+            id
+            variationId
+            name
+            stockStatus
+            stockQuantity
+            purchasable
+            onSale
+            salePrice
+            regularPrice
+          }
         }
       }
-      }
       ... on ExternalProduct {
         price
         id
@@ -98,11 +98,11 @@ export const FETCH_FIRST_PRODUCTS_FROM_HOODIES_QUERY = `
  `;
 
 /**
- * Fetch all Woocommerce products from GraphQL
+ * Fetch first 24 Woocommerce products from GraphQL
  */
 export const FETCH_ALL_PRODUCTS_QUERY = gql`
   query MyQuery {
-    products(first: 8) {
+    products(first: 24) {
       nodes {
         productId
         name
@@ -127,11 +127,11 @@ export const FETCH_ALL_PRODUCTS_QUERY = gql`
 `;
 
 /**
- * Fetch all categories from GraphQL
+ * Fetch first 20 categories from GraphQL
  */
 export const FETCH_ALL_CATEGORIES_QUERY = gql`
   query Categories {
-    productCategories(first: 10) {
+    productCategories(first: 20) {
       nodes {
         id
         name