switch images

app/product/[handle]/page.tsx

@@ -8,7 +8,6 @@ import { ProductProvider } from 'components/product/product-context';
 import { ProductDescription } from 'components/product/product-description';
 import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
 import { getProduct, getProductRecommendations } from 'lib/fourthwall';
-import { Image } from 'lib/shopify/types';
 import Link from 'next/link';
 import { Suspense } from 'react';
 
@@ -51,7 +50,6 @@ export async function generateMetadata({
 }
 
 export default async function ProductPage({ params, searchParams }: { params: { handle: string }, searchParams: { currency?: string } }) {
-  const currency = searchParams.currency || 'USD';
   const product = await getProduct({
     handle: params.handle,
     currency: searchParams.currency || 'USD'
@@ -93,10 +91,7 @@ export default async function ProductPage({ params, searchParams }: { params: {
               }
             >
               <Gallery
-                images={product.images.slice(0, 5).map((image: Image) => ({
-                  src: image.url,
-                  altText: image.altText
-                }))}
+                product={product}
               />
             </Suspense>
           </div>

components/product/gallery.tsx

@@ -3,13 +3,20 @@
 import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
 import { GridTileImage } from 'components/grid/tile';
 import { useProduct, useUpdateURL } from 'components/product/product-context';
+import { Product } from 'lib/shopify/types';
 import Image from 'next/image';
 
-export function Gallery({ images }: { images: { src: string; altText: string }[] }) {
+export function Gallery({ product }: { product: Product }) {
   const { state, updateImage } = useProduct();
   const updateURL = useUpdateURL();
   const imageIndex = state.image ? parseInt(state.image) : 0;
 
+  const selectedVariant = product.variants.find((variant) => {
+    return variant.selectedOptions.find((option) => option.name === 'Color' && option.value === state['color']);
+  });
+
+  const images = selectedVariant?.images || product.images.slice(0, 5);
+
   const nextImageIndex = imageIndex + 1 < images.length ? imageIndex + 1 : 0;
   const previousImageIndex = imageIndex === 0 ? images.length - 1 : imageIndex - 1;
 
@@ -25,7 +32,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
             fill
             sizes="(min-width: 1024px) 66vw, 100vw"
             alt={images[imageIndex]?.altText as string}
-            src={images[imageIndex]?.src as string}
+            src={images[imageIndex]?.url as string}
             priority={true}
           />
         )}
@@ -65,7 +72,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
             const isActive = index === imageIndex;
 
             return (
-              <li key={image.src} className="h-20 w-20">
+              <li key={image.url} className="h-20 w-20">
                 <button
                   formAction={() => {
                     const newState = updateImage(index.toString());
@@ -76,7 +83,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
                 >
                   <GridTileImage
                     alt={image.altText}
-                    src={image.src}
+                    src={image.url}
                     width={80}
                     height={80}
                     active={isActive}

lib/fourthwall/reshape.ts

@@ -107,6 +107,7 @@ const reshapeVariants = (variants: FourthwallProductVariant[]): ProductVariant[]
     id: v.id,
     title: v.name,
     availableForSale: true,
+    images: reshapeImages(v.images, v.name),
     selectedOptions: [{
       name: 'Size',
       value: v.attributes.size.name

lib/shopify/types.ts

@@ -88,6 +88,7 @@ export type ProductVariant = {
     value: string;
   }[];
   price: Money;
+  images: Image[];
 };
 
 export type SEO = {