diff --git a/app/components/product-form/product-media.tsx b/app/components/product-form/product-media.tsx index 7e98f34..f15eca4 100644 --- a/app/components/product-form/product-media.tsx +++ b/app/components/product-form/product-media.tsx @@ -1,6 +1,6 @@ import { Image } from "@shopify/hydrogen"; import clsx from "clsx"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import type { MediaFragment } from "storefrontapi.generated"; import { FreeMode, Pagination, Thumbs } from "swiper/modules"; import { Swiper, type SwiperClass, SwiperSlide } from "swiper/react"; @@ -14,15 +14,34 @@ interface ProductMediaProps { } export function ProductMedia(props: ProductMediaProps) { - let { selectedVariant, showThumbnails, media: _media, numberOfThumbnails, spacing } = props; + let { + selectedVariant, + showThumbnails, + media: _media, + numberOfThumbnails, + spacing, + } = props; let media = _media.filter((med) => med.__typename === "MediaImage"); - let [thumbsSwiper, setThumbsSwiper] = useState(null); + const [thumbsSwiper, setThumbsSwiper] = useState(null); + const [swiperInstance, setSwiperInstance] = useState( + null + ); let [activeIndex, setActiveIndex] = useState(0); - console.log('🚀 ~ swiper:', thumbsSwiper); - + + useEffect(() => { + if (swiperInstance && thumbsSwiper) { + if (swiperInstance.thumbs) { + swiperInstance.thumbs.swiper = thumbsSwiper; + swiperInstance.thumbs.init(); + swiperInstance.slideTo(activeIndex); + } + } + }, [swiperInstance, thumbsSwiper, activeIndex]); + return (
{ - setThumbsSwiper(swiper); - swiper.update(); - }} + onSwiper={setThumbsSwiper} + loop={true} direction="horizontal" spaceBetween={spacing} - freeMode + freeMode={true} slidesPerView={"auto"} - threshold={2} modules={[FreeMode, Thumbs]} - className="w-full overflow-visible hidden md:block" + watchSlidesProgress={true} + className="w-full overflow-visible hidden md:block mySwiper" > {media.map((med, i) => { let image = { ...med.image, altText: med.alt || "Product image" }; return ( { - if (thumbsSwiper) { - thumbsSwiper.slideTo(i); - thumbsSwiper.update(); - } - }} className={clsx( "!h-fit !w-fit p-1 border transition-colors cursor-pointer", - activeIndex === i ? "border-black" : "border-transparent", + activeIndex === i ? "border-black" : "border-transparent" )} > diff --git a/package-lock.json b/package-lock.json index ea2d03c..1b50a97 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7225,9 +7225,9 @@ "dev": true }, "node_modules/@types/node": { - "version": "22.5.5", - "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.5.tgz", - "integrity": "sha512-Xjs4y5UPO/CLdzpgR6GirZJx36yScjh73+2NlLlkFRSoQN8B0DpfXPdZGnvVmLRLOsqDpOfTNv7D9trgGhmOIA==", + "version": "22.7.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.7.0.tgz", + "integrity": "sha512-MOdOibwBs6KW1vfqz2uKMlxq5xAfAZ98SZjO8e3XnAbFnTJtAspqhWk7hrdSAs9/Y14ZWMiy7/MxMUzAOadYEw==", "dependencies": { "undici-types": "~6.19.2" } @@ -7239,9 +7239,9 @@ "dev": true }, "node_modules/@types/react": { - "version": "18.3.8", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.8.tgz", - "integrity": "sha512-syBUrW3/XpnW4WJ41Pft+I+aPoDVbrBVQGEnbD7NijDGlVC+8gV/XKRY+7vMDlfPpbwYt0l1vd/Sj8bJGMbs9Q==", + "version": "18.3.9", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.9.tgz", + "integrity": "sha512-+BpAVyTpJkNWWSSnaLBk6ePpHLOGJKnEQNbINNovPWzvEUyAe3e+/d494QdEh71RekM/qV7lw6jzf1HGrJyAtQ==", "dev": true, "dependencies": { "@types/prop-types": "*", @@ -8108,9 +8108,9 @@ } }, "node_modules/browserslist": { - "version": "4.23.3", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.3.tgz", - "integrity": "sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==", + "version": "4.24.0", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.0.tgz", + "integrity": "sha512-Rmb62sR1Zpjql25eSanFGEhAxcFwfA1K0GuQcLoaJBAcENegrQut3hYdhXFF1obQfiDyqIW/cLM5HSJ/9k884A==", "dev": true, "funding": [ { @@ -8127,8 +8127,8 @@ } ], "dependencies": { - "caniuse-lite": "^1.0.30001646", - "electron-to-chromium": "^1.5.4", + "caniuse-lite": "^1.0.30001663", + "electron-to-chromium": "^1.5.28", "node-releases": "^2.0.18", "update-browserslist-db": "^1.1.0" }, @@ -8376,9 +8376,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001662", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001662.tgz", - "integrity": "sha512-sgMUVwLmGseH8ZIrm1d51UbrhqMCH3jvS7gF/M6byuHOnKyLOBL7W8yz5V02OHwgLGA36o/AFhWzzh4uc5aqTA==", + "version": "1.0.30001663", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001663.tgz", + "integrity": "sha512-o9C3X27GLKbLeTYZ6HBOLU1tsAcBZsLis28wrVzddShCS16RujjHp9GDHKZqrB3meE0YjhawvMFsGb/igqiPzA==", "dev": true, "funding": [ { @@ -9787,9 +9787,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.5.27", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.27.tgz", - "integrity": "sha512-o37j1vZqCoEgBuWWXLHQgTN/KDKe7zwpiY5CPeq2RvUqOyJw9xnrULzZAEVQ5p4h+zjMk7hgtOoPdnLxr7m/jw==", + "version": "1.5.28", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.28.tgz", + "integrity": "sha512-VufdJl+rzaKZoYVUijN13QcXVF5dWPZANeFTLNy+OSpHdDL5ynXTF35+60RSBbaQYB1ae723lQXHCrf4pyLsMw==", "dev": true }, "node_modules/emoji-regex": { @@ -18099,9 +18099,9 @@ } }, "node_modules/tailwindcss": { - "version": "3.4.12", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.12.tgz", - "integrity": "sha512-Htf/gHj2+soPb9UayUNci/Ja3d8pTmu9ONTfh4QY8r3MATTZOzmv6UYWF7ZwikEIC8okpfqmGqrmDehua8mF8w==", + "version": "3.4.13", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.13.tgz", + "integrity": "sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==", "dev": true, "dependencies": { "@alloc/quick-lru": "^5.2.0", @@ -19252,9 +19252,9 @@ } }, "node_modules/vite": { - "version": "5.4.7", - "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.7.tgz", - "integrity": "sha512-5l2zxqMEPVENgvzTuBpHer2awaetimj2BGkhBPdnwKbPNOlHsODU+oiazEZzLK7KhAnOrO+XGYJYn4ZlUhDtDQ==", + "version": "5.4.8", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.8.tgz", + "integrity": "sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==", "dev": true, "dependencies": { "esbuild": "^0.21.3",