Fixes image alt errors

vercel · Jul 17, 2023 · 4a93528 · 4a93528
1 parent 650c9a4
commit 4a93528
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 11 deletions.
diff --git a/components/grid/tile.tsx b/components/grid/tile.tsx
@@ -36,7 +36,6 @@ export function GridTileImage({
             'transition duration-300 ease-in-out hover:scale-105': isInteractive
           })}
           {...props}
-          alt={props.title || ''}
         />
       ) : null}
       {labels ? (

diff --git a/components/product/gallery.tsx b/components/product/gallery.tsx
@@ -6,13 +6,13 @@ import Image from 'next/image';
 import { useState } from 'react';
 
 export function Gallery({ images }: { images: { src: string; altText: string }[] }) {
-  const [currentImage, setCurrentImage] = useState(0);
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
 
   function handleNavigate(direction: 'next' | 'previous') {
     if (direction === 'next') {
-      setCurrentImage(currentImage + 1 < images.length ? currentImage + 1 : 0);
+      setCurrentImageIndex(currentImageIndex + 1 < images.length ? currentImageIndex + 1 : 0);
     } else {
-      setCurrentImage(currentImage === 0 ? images.length - 1 : currentImage - 1);
+      setCurrentImageIndex(currentImageIndex === 0 ? images.length - 1 : currentImageIndex - 1);
     }
   }
 
@@ -22,13 +22,14 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
   return (
     <div className="mr-8 h-full">
       <div className="relative mb-12 h-full max-h-[550px] overflow-hidden">
-        {images[currentImage] && (
+        {images[currentImageIndex] && (
           <Image
             className="relative h-full w-full object-contain"
             height={600}
             width={600}
-            alt={images[currentImage]?.altText as string}
-            src={images[currentImage]?.src as string}
+            alt={images[currentImageIndex]?.altText as string}
+            src={images[currentImageIndex]?.src as string}
+            priority={true}
           />
         )}
 
@@ -58,16 +59,16 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
       {images.length > 1 ? (
         <div className="flex items-center justify-center gap-2 overflow-auto py-1">
           {images.map((image, index) => {
-            const isActive = index === currentImage;
+            const isActive = index === currentImageIndex;
             return (
               <button
                 aria-label="Enlarge product image"
                 key={image.src}
                 className="h-auto w-20"
-                onClick={() => setCurrentImage(index)}
+                onClick={() => setCurrentImageIndex(index)}
               >
                 <GridTileImage
-                  alt={image?.altText}
+                  alt={image.altText}
                   src={image.src}
                   width={600}
                   height={600}

diff --git a/lib/shopify/index.ts b/lib/shopify/index.ts
@@ -23,6 +23,7 @@ import {
   Cart,
   Collection,
   Connection,
+  Image,
   Menu,
   Page,
   Product,
@@ -151,6 +152,18 @@ const reshapeCollections = (collections: ShopifyCollection[]) => {
   return reshapedCollections;
 };
 
+const reshapeImages = (images: Connection<Image>, productTitle: string) => {
+  const flattened = removeEdgesAndNodes(images);
+
+  return flattened.map((image) => {
+    const filename = image.url.match(/.*\/(.*)\..*/)[1];
+    return {
+      ...image,
+      altText: image.altText || `${productTitle} - ${filename}`
+    };
+  });
+};
+
 const reshapeProduct = (product: ShopifyProduct, filterHiddenProducts: boolean = true) => {
   if (!product || (filterHiddenProducts && product.tags.includes(HIDDEN_PRODUCT_TAG))) {
     return undefined;
@@ -160,7 +173,7 @@ const reshapeProduct = (product: ShopifyProduct, filterHiddenProducts: boolean =
 
   return {
     ...rest,
-    images: removeEdgesAndNodes(images),
+    images: reshapeImages(images, product.title),
     variants: removeEdgesAndNodes(variants)
   };
 };