diff options
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | src-migrate/modules/product-detail/components/ProductDetail.tsx | 47 | ||||
| -rw-r--r-- | src/utils/solrMapping.js | 1 |
3 files changed, 48 insertions, 2 deletions
diff --git a/package.json b/package.json index 9e7fcc1b..b0f1e3d4 100644 --- a/package.json +++ b/package.json @@ -49,8 +49,10 @@ "react-multi-select-component": "^4.3.4", "react-query": "^3.39.3", "react-select": "^5.8.0", + "react-slick": "^0.30.3", "react-web-share": "^2.0.2", "redis": "^4.7.0", + "slick-carousel": "^1.8.1", "snakecase-keys": "^5.5.0", "swiper": "^8.4.4", "tw-merge": "^0.0.1-alpha.3", diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx index 4667e086..c26dafde 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 } from 'react'; +import { useEffect, useState } from 'react'; import { Button } from '@chakra-ui/react'; import { MessageCircleIcon, Share2Icon } from 'lucide-react'; @@ -73,6 +73,19 @@ const ProductDetail = ({ product }: Props) => { // setSelectedVariant(product?.variants[0]) }, []); + + + // 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); + + const [mainImage, setMainImage] = useState(allImages[0] || ''); + return ( <> <div className='md:flex md:flex-wrap'> @@ -82,7 +95,37 @@ const ProductDetail = ({ product }: Props) => { <div className='md:w-9/12 md:flex md:flex-col md:pr-4 md:pt-6'> <div className='md:flex md:flex-wrap'> <div className='md:w-4/12'> - <ProductImage product={product} /> + <ProductImage product={{ ...product, image: mainImage }} /> + + {/* Carousel horizontal */} + {allImages.length > 0 && ( + <div className="mt-4 overflow-x-auto"> + <div className="flex space-x-3 pb-3"> + {allImages.map((img, index) => ( + <div + key={index} + className={`flex-shrink-0 w-16 h-16 cursor-pointer border-2 rounded-md transition-colors ${ + mainImage === img + ? 'border-red-500 ring-2 ring-red-200' + : 'border-gray-200 hover:border-gray-300' + }`} + onClick={() => setMainImage(img)} + > + <img + src={img} + alt={`Thumbnail ${index + 1}`} + className="w-full h-full object-cover rounded-sm" + loading="lazy" + onError={(e) => { + e.target.src = '/path/to/fallback-image.jpg'; // Fallback jika gambar error + }} + /> + </div> + ))} + </div> + </div> + )} + </div> <div className='md:w-8/12 px-4 md:pl-6'> diff --git a/src/utils/solrMapping.js b/src/utils/solrMapping.js index ecd62be2..33f0cbaf 100644 --- a/src/utils/solrMapping.js +++ b/src/utils/solrMapping.js @@ -43,6 +43,7 @@ export const productMappingSolr = (products, pricelist) => { let productMapped = { id: product.product_id_i || '', image: product.image_s || '', + imageCarousel: product.image_carousel_ss || '', imageMobile: product.image_mobile_s || '', code: product.default_code_s || '', description: product.description_t || '', |