From 753be9690f95c288aec2ab92269529131626254d Mon Sep 17 00:00:00 2001 From: Miqdad Date: Fri, 22 Aug 2025 15:30:08 +0700 Subject: Image slider when mobile --- .../product-detail/components/ProductDetail.tsx | 177 ++++++++++++++++----- 1 file changed, 134 insertions(+), 43 deletions(-) (limited to 'src-migrate/modules/product-detail/components/ProductDetail.tsx') diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx index 192e1dc3..a6b4e6de 100644 --- a/src-migrate/modules/product-detail/components/ProductDetail.tsx +++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx @@ -2,7 +2,7 @@ import style from '../styles/product-detail.module.css'; import Link from 'next/link'; import { useRouter } from 'next/router'; -import { useEffect, useState } from 'react'; +import { useEffect, useRef, useState, UIEvent } from 'react'; import { Button } from '@chakra-ui/react'; import { MessageCircleIcon, Share2Icon } from 'lucide-react'; @@ -35,6 +35,7 @@ const ProductDetail = ({ product }: Props) => { const { isDesktop, isMobile } = useDevice(); const router = useRouter(); const auth = getAuth(); + const { setAskAdminUrl, askAdminUrl, @@ -71,70 +72,168 @@ const ProductDetail = ({ product }: Props) => { product?.variants?.find((variant) => variant.is_in_bu) || product?.variants?.[0]; setSelectedVariant(selectedVariant); - // setSelectedVariant(product?.variants[0]) - }, []); + }, []); // eslint-disable-line react-hooks/exhaustive-deps // Gabungkan semua gambar produk (utama + tambahan) - const allImages = product.image_carousel ? [...product.image_carousel] : []; - - if (product.image) { - allImages.unshift(product.image); // Tambahkan gambar utama di awal array - } - console.log(product); + // Gabungkan semua gambar produk (utama + tambahan) + const allImages = (() => { + const arr: string[] = []; + if (product?.image) arr.push(product.image); // selalu masukkan utama, baik mobile maupun desktop + if ( + Array.isArray(product?.image_carousel) && + product.image_carousel.length + ) { + // hindari duplikat jika image utama juga ada di carousel + const set = new Set(arr); + for (const img of product.image_carousel) { + if (!set.has(img)) { + arr.push(img); + set.add(img); + } + } + } + return arr; + })(); const [mainImage, setMainImage] = useState(allImages[0] || ''); + useEffect(() => { + // update mainImage jika sumber gambar berubah dan mainImage tidak ada di daftar + if (!allImages.includes(mainImage)) { + setMainImage(allImages[0] || ''); + } + }, [allImages]); // eslint-disable-line react-hooks/exhaustive-deps + + // ===== Slider mobile (tanpa dependency) ===== + const sliderRef = useRef(null); + const [currentIdx, setCurrentIdx] = useState(0); + + const handleMobileScroll = (e: UIEvent) => { + const el = e.currentTarget; + if (!el) return; + const idx = Math.round(el.scrollLeft / el.clientWidth); + if (idx !== currentIdx) { + setCurrentIdx(idx); + setMainImage(allImages[idx] || ''); + } + }; + + const scrollToIndex = (i: number) => { + const el = sliderRef.current; + if (!el) return; + el.scrollTo({ left: i * el.clientWidth, behavior: 'smooth' }); + setCurrentIdx(i); + setMainImage(allImages[i] || ''); + }; + // ============================================ + return ( <>
+
+ {/* ===== Kolom kiri: gambar ===== */}
- - - {/* Carousel horizontal */} - {allImages.length > 0 && ( -
-
- {allImages.map((img, index) => ( -
setMainImage(img)} - > + {/* === MOBILE: Slider swipeable, tanpa thumbnail carousel === */} + {isMobile ? ( +
+
+ {allImages.length > 0 ? ( + allImages.map((img, i) => ( {`Thumbnail { (e.target as HTMLImageElement).src = '/path/to/fallback-image.jpg'; }} /> -
- ))} + )) + ) : ( + Gambar produk + )}
+ + {/* Dots indicator */} + {allImages.length > 1 && ( +
+ {allImages.map((_, i) => ( +
+ )}
+ ) : ( + <> + {/* === DESKTOP: Tetap seperti sebelumnya === */} + + + {/* Carousel horizontal (thumbnail) – hanya desktop */} + {allImages.length > 0 && ( +
+
+ {allImages.map((img, index) => ( +
setMainImage(img)} + > + {`Thumbnail { + (e.target as HTMLImageElement).src = + '/path/to/fallback-image.jpg'; + }} + /> +
+ ))} +
+
+ )} + )}
+ {/* <<=== TUTUP kolom kiri */} + {/* ===== Kolom kanan: info ===== */}
-

{product.name}

-
- -
@@ -154,14 +253,6 @@ const ProductDetail = ({ product }: Props) => { /> )} - {/*
-

- Variant ({product.variant_total}) -

-
- -
*/} -
@@ -246,4 +337,4 @@ const ProductDetail = ({ product }: Props) => { ); }; -export default ProductDetail; +export default ProductDetail; \ No newline at end of file -- cgit v1.2.3 From a1b0e672387747085c85c6c446cea49f09af7719 Mon Sep 17 00:00:00 2001 From: Miqdad Date: Sat, 23 Aug 2025 08:49:46 +0700 Subject: Move stock position mobile --- src-migrate/modules/product-detail/components/ProductDetail.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'src-migrate/modules/product-detail/components/ProductDetail.tsx') diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx index a6b4e6de..e6b77fb9 100644 --- a/src-migrate/modules/product-detail/components/ProductDetail.tsx +++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx @@ -72,9 +72,8 @@ const ProductDetail = ({ product }: Props) => { product?.variants?.find((variant) => variant.is_in_bu) || product?.variants?.[0]; setSelectedVariant(selectedVariant); - }, []); // eslint-disable-line react-hooks/exhaustive-deps + }, []); - // Gabungkan semua gambar produk (utama + tambahan) // Gabungkan semua gambar produk (utama + tambahan) const allImages = (() => { const arr: string[] = []; @@ -147,8 +146,8 @@ const ProductDetail = ({ product }: Props) => { className='flex overflow-x-auto snap-x snap-mandatory scroll-smooth no-scrollbar' style={{ scrollBehavior: 'smooth', - msOverflowStyle: 'none', // IE/Edge lama - scrollbarWidth: 'none', // Firefox + msOverflowStyle: 'none', + scrollbarWidth: 'none', }} > {allImages.length > 0 ? ( -- cgit v1.2.3 From bcf7be5a0c1d9635383605afc0600386b0b356ea Mon Sep 17 00:00:00 2001 From: Miqdad Date: Tue, 26 Aug 2025 11:41:54 +0700 Subject: Push --- .../product-detail/components/ProductDetail.tsx | 347 +++++++++++---------- 1 file changed, 178 insertions(+), 169 deletions(-) (limited to 'src-migrate/modules/product-detail/components/ProductDetail.tsx') diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx index e6b77fb9..8ecdb2fc 100644 --- a/src-migrate/modules/product-detail/components/ProductDetail.tsx +++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx @@ -126,214 +126,223 @@ const ProductDetail = ({ product }: Props) => { }; // ============================================ - return ( - <> -
-
- -
+return ( + <> +
+
+ +
-
-
- {/* ===== Kolom kiri: gambar ===== */} -
- {/* === MOBILE: Slider swipeable, tanpa thumbnail carousel === */} - {isMobile ? ( -
-
- {allImages.length > 0 ? ( - allImages.map((img, i) => ( +
+
+ {/* ===== Kolom kiri: gambar ===== */} +
+ {/* === MOBILE: Slider swipeable, tanpa thumbnail carousel === */} + {isMobile ? ( +
+
+ {allImages.length > 0 ? ( + allImages.map((img, i) => ( + // slide tetap selebar viewport untuk snap mulus +
+ {/* gambar diperkecil */} {`Gambar { (e.target as HTMLImageElement).src = '/path/to/fallback-image.jpg'; }} /> - )) - ) : ( +
+ )) + ) : ( +
Gambar produk - )} -
- - {/* Dots indicator */} - {allImages.length > 1 && ( -
- {allImages.map((_, i) => ( -
)}
- ) : ( - <> - {/* === DESKTOP: Tetap seperti sebelumnya === */} - - - {/* Carousel horizontal (thumbnail) – hanya desktop */} - {allImages.length > 0 && ( -
-
- {allImages.map((img, index) => ( -
setMainImage(img)} - > - {`Thumbnail { - (e.target as HTMLImageElement).src = - '/path/to/fallback-image.jpg'; - }} - /> -
- ))} -
-
- )} - - )} -
- {/* <<=== TUTUP kolom kiri */} - - {/* ===== Kolom kanan: info ===== */} -
-
-

{product.name}

-
- -
-
-
-
- {isMobile && ( -
- + {/* Dots indicator */} + {allImages.length > 1 && ( +
+ {allImages.map((_, i) => ( +
+ )}
+ ) : ( + <> + {/* === DESKTOP: Tetap seperti sebelumnya === */} + + + {/* Carousel horizontal (thumbnail) – hanya desktop */} + {allImages.length > 0 && ( +
+
+ {allImages.map((img, index) => ( +
setMainImage(img)} + > + {`Thumbnail { + (e.target as HTMLImageElement).src = + '/path/to/fallback-image.jpg'; + }} + /> +
+ ))} +
+
+ )} + )} +
+ {/* <<=== TUTUP kolom kiri */} + + {/* ===== Kolom kanan: info ===== */} +
+
+

{product.name}

+
+ +
+
+
-
- {!!activeVariantId && !isApproval && ( - - )} +
+ {isMobile && ( +
+ +
+ )} -
+
+ {!!activeVariantId && !isApproval && ( + + )} -
-

Informasi Produk

-
-
-

' - ? 'Belum ada deskripsi' - : product.description, - }} - /> -
+
+ +
+

Informasi Produk

+
+
+

' + ? 'Belum ada deskripsi' + : product.description, + }} + />
+
- {isDesktop && ( -
- -
+ {isDesktop && ( +
+ +
+ + + | + + + + | + + + +
- | - - - - | +
+
Produk Serupa
- - - -
+
-
-
Produk Serupa
+ +
+ )} -
+
+
Kamu Mungkin Juga Suka
- -
- )} +
-
-
Kamu Mungkin Juga Suka
+ + + +
-
+
+
+ +); - - - -
-
-
- - ); }; -export default ProductDetail; \ No newline at end of file +export default ProductDetail; -- cgit v1.2.3 From 2403eae1686c565364691022d294123a16f4f031 Mon Sep 17 00:00:00 2001 From: Miqdad Date: Tue, 26 Aug 2025 12:04:46 +0700 Subject: Fix Breadcrumb & image --- src-migrate/modules/product-detail/components/ProductDetail.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src-migrate/modules/product-detail/components/ProductDetail.tsx') diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx index 8ecdb2fc..35df97df 100644 --- a/src-migrate/modules/product-detail/components/ProductDetail.tsx +++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx @@ -161,7 +161,7 @@ return ( {`Gambar { (e.target as HTMLImageElement).src = '/path/to/fallback-image.jpg'; @@ -174,7 +174,7 @@ return ( Gambar produk
)} -- cgit v1.2.3 From 37bda78dec58cb8c218849a77620d95682b201b9 Mon Sep 17 00:00:00 2001 From: Miqdad Date: Tue, 26 Aug 2025 15:38:29 +0700 Subject: Major Fix --- src-migrate/modules/product-detail/components/ProductDetail.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src-migrate/modules/product-detail/components/ProductDetail.tsx') diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx index 35df97df..79921e22 100644 --- a/src-migrate/modules/product-detail/components/ProductDetail.tsx +++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx @@ -161,7 +161,7 @@ return ( {`Gambar { (e.target as HTMLImageElement).src = '/path/to/fallback-image.jpg'; @@ -174,7 +174,7 @@ return ( Gambar produk
)} -- cgit v1.2.3