From 193c50a87f35ab93df65d7d1c609ed59ab3f0da7 Mon Sep 17 00:00:00 2001 From: dangthang1903 Date: Mon, 23 Sep 2024 09:23:24 +0700 Subject: [PATCH 1/4] remove fragment not use --- app/lib/fragments.ts | 102 ------------------------------------------- 1 file changed, 102 deletions(-) delete mode 100644 app/lib/fragments.ts diff --git a/app/lib/fragments.ts b/app/lib/fragments.ts deleted file mode 100644 index 314f2eb..0000000 --- a/app/lib/fragments.ts +++ /dev/null @@ -1,102 +0,0 @@ -// NOTE: https://shopify.dev/docs/api/storefront/latest/queries/cart -export const CART_QUERY_FRAGMENT = `#graphql - fragment Money on MoneyV2 { - currencyCode - amount - } - fragment CartLine on CartLine { - id - quantity - attributes { - key - value - } - cost { - totalAmount { - ...Money - } - amountPerQuantity { - ...Money - } - compareAtAmountPerQuantity { - ...Money - } - } - merchandise { - ... on ProductVariant { - id - availableForSale - compareAtPrice { - ...Money - } - price { - ...Money - } - requiresShipping - title - image { - id - url - altText - width - height - - } - product { - handle - title - id - } - selectedOptions { - name - value - } - } - } - } - fragment CartApiQuery on Cart { - id - checkoutUrl - totalQuantity - buyerIdentity { - countryCode - customer { - id - email - firstName - lastName - displayName - } - email - phone - } - lines(first: $numCartLines) { - nodes { - ...CartLine - } - } - cost { - subtotalAmount { - ...Money - } - totalAmount { - ...Money - } - totalDutyAmount { - ...Money - } - totalTaxAmount { - ...Money - } - } - note - attributes { - key - value - } - discountCodes { - code - applicable - } - } -` as const; From 249cd840b4c1fb4a288074159600ad106559de8c Mon Sep 17 00:00:00 2001 From: dangthang1903 Date: Tue, 24 Sep 2024 15:19:28 +0700 Subject: [PATCH 2/4] fix bug product media --- app/components/product-form/product-media.tsx | 56 +++++++++++-------- 1 file changed, 33 insertions(+), 23 deletions(-) diff --git a/app/components/product-form/product-media.tsx b/app/components/product-form/product-media.tsx index 7e98f34..18b2735 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,32 @@ interface ProductMediaProps { } export function ProductMedia(props: ProductMediaProps) { - let { selectedVariant, showThumbnails, media: _media, numberOfThumbnails, spacing } = props; - let media = _media.filter((med) => med.__typename === "MediaImage"); - let [thumbsSwiper, setThumbsSwiper] = useState(null); + let { + selectedVariant, + showThumbnails, + media: _media, + numberOfThumbnails, + spacing, + } = props; + const [thumbsSwiper, setThumbsSwiper] = useState(null); + const [swiperInstance, setSwiperInstance] = useState( + null + ); let [activeIndex, setActiveIndex] = useState(0); - console.log('🚀 ~ swiper:', thumbsSwiper); - + let media = _media.filter((med) => med.__typename === "MediaImage"); + + useEffect(() => { + if (swiperInstance && thumbsSwiper) { + 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" )} > From 0f1ea3d0fe3c264c9fea2cf3d67e1893ca3dbd42 Mon Sep 17 00:00:00 2001 From: dangthang1903 Date: Wed, 25 Sep 2024 08:52:03 +0700 Subject: [PATCH 3/4] refactor: fix bug instance underfined --- app/components/product-form/product-media.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/app/components/product-form/product-media.tsx b/app/components/product-form/product-media.tsx index 18b2735..f15eca4 100644 --- a/app/components/product-form/product-media.tsx +++ b/app/components/product-form/product-media.tsx @@ -21,18 +21,20 @@ export function ProductMedia(props: ProductMediaProps) { numberOfThumbnails, spacing, } = props; + let media = _media.filter((med) => med.__typename === "MediaImage"); const [thumbsSwiper, setThumbsSwiper] = useState(null); const [swiperInstance, setSwiperInstance] = useState( null ); let [activeIndex, setActiveIndex] = useState(0); - let media = _media.filter((med) => med.__typename === "MediaImage"); useEffect(() => { if (swiperInstance && thumbsSwiper) { - swiperInstance.thumbs.swiper = thumbsSwiper; - swiperInstance.thumbs.init(); - swiperInstance.slideTo(activeIndex); + if (swiperInstance.thumbs) { + swiperInstance.thumbs.swiper = thumbsSwiper; + swiperInstance.thumbs.init(); + swiperInstance.slideTo(activeIndex); + } } }, [swiperInstance, thumbsSwiper, activeIndex]); From ca9d45dd0f83e62805204e4ae4bb7723b8d70cc7 Mon Sep 17 00:00:00 2001 From: dangthang1903 Date: Wed, 25 Sep 2024 14:20:09 +0700 Subject: [PATCH 4/4] update dev --- package-lock.json | 46 +++++++++++++++++++++++----------------------- 1 file changed, 23 insertions(+), 23 deletions(-) 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",