@akinon/projectzero 1.125.0-rc.1 → 1.125.0

package/app-template/src/views/product/slider.tsx

@@ -36,100 +36,53 @@ export default function ProductInfoSlider({ product }: ProductSliderItem) {
     carouselRef.current?.next();
   };
 
-  const handleThumbnailClick = (index: number) => {
+  const handleThumbnailClick = (index) => {
     setActiveIndex(index);
     carouselRef.current?.goToSlide(index);
   };
 
   return (
-    <>
-      <div className="lg:grid lg:grid-cols-6">
-        <div className="lg:col-span-1">
-          <div className="flex flex-col items-center justify-center md:mr-[6px]">
-            <button
-              onClick={goToPrev}
-              className={twMerge(
-                'hidden justify-center p-2 mb-3 border border-gray-100 rounded-full cursor-pointer lg:block',
-                [activeIndex === 0 && 'cursor-not-allowed opacity-45']
-              )}
-              disabled={activeIndex === 0}
-            >
-              <Icon name="chevron-up" size={15} className="fill-[#000000]" />
-            </button>
-            <div className="hidden flex-col items-center overflow-scroll w-[80px] max-h-[620px] lg:block">
-              {product?.productimage_set?.map((item, index) => (
-                <Image
-                  key={index}
-                  src={item.image}
-                  alt={`Thumbnail ${index}`}
-                  width={80}
-                  height={128}
-                  aspectRatio={80 / 128}
-                  className={twMerge('cursor-pointer', [
-                    activeIndex === index && 'border-2 border-primary'
-                  ])}
-                  onClick={() => handleThumbnailClick(index)}
-                />
-              ))}
-            </div>
-            <button
-              onClick={goToNext}
-              className={twMerge(
-                'hidden justify-center p-2 mt-3 border border-gray-100 rounded-full cursor-pointer lg:block',
-                [
-                  activeIndex === product.productimage_set.length - 1 &&
-                    'cursor-not-allowed opacity-45'
-                ]
-              )}
-              disabled={activeIndex === product.productimage_set.length - 1}
-            >
-              <Icon name="chevron-down" size={15} className="fill-[#000000]" />
-            </button>
-          </div>
-        </div>
-
-        <div className="relative lg:col-span-5">
-          <FavButton className="absolute right-8 top-6 z-[20] sm:hidden" />
-
-          <PluginModule
-            component={Component.ProductImageSearchFeature}
-            props={{
-              product,
-              activeIndex,
-              showResetButton: true
-            }}
-          />
-
-          <CarouselCore
-            responsive={{
-              all: {
-                breakpoint: { max: 5000, min: 0 },
-                items: 1
-              }
-            }}
-            arrows={false}
-            swipeable={true}
-            ref={carouselRef}
-            afterChange={(previousSlide, { currentSlide }) => {
-              setActiveIndex(currentSlide);
-            }}
-            containerAspectRatio={{ mobile: 520 / 798, desktop: 484 / 726 }}
+    <div className="lg:grid lg:grid-cols-6">
+      <div className="lg:col-span-1">
+        <div className="flex flex-col items-center justify-center md:mr-[6px]">
+          <button
+            onClick={goToPrev}
+            className={twMerge(
+              'hidden justify-center p-2 mb-3 border border-gray-100 rounded-full cursor-pointer lg:block',
+              [activeIndex === 0 && 'cursor-not-allowed opacity-45']
+            )}
+            disabled={activeIndex === 0}
           >
-            {product?.productimage_set?.map((item, i) => (
+            <Icon name="chevron-up" size={15} className="fill-[#000000]" />
+          </button>
+          <div className="hidden flex-col items-center overflow-scroll w-[80px] max-h-[620px] lg:block">
+            {product?.productimage_set?.map((item, index) => (
               <Image
-                key={i}
+                key={index}
                 src={item.image}
-                alt={product?.name || 'Product image'}
-                draggable={false}
-                aspectRatio={484 / 726}
-                sizes="(min-width: 425px) 512px,
-              (min-width: 601px) 576px,
-              (min-width: 768px) 336px,
-              (min-width: 1024px) 484px, 368px"
-                fill
+                alt={`Thumbnail ${index}`}
+                width={80}
+                height={128}
+                className={twMerge('cursor-pointer', [
+                  activeIndex === index && 'border-2 border-primary'
+                ])}
+                onClick={() => handleThumbnailClick(index)}
               />
             ))}
-          </CarouselCore>
+          </div>
+          <button
+            onClick={goToNext}
+            className={twMerge(
+              'hidden justify-center p-2 mt-3 border border-gray-100 rounded-full cursor-pointer lg:block',
+              [
+                activeIndex === product.productimage_set.length - 1 &&
+                  'cursor-not-allowed opacity-45'
+              ]
+            )}
+            disabled={activeIndex === product.productimage_set.length - 1}
+          >
+            <Icon name="chevron-down" size={15} className="fill-[#000000]" />
+          </button>
         </div>
       </div>
 
@@ -187,6 +140,6 @@ export default function ProductInfoSlider({ product }: ProductSliderItem) {
           ))}
         </CarouselCore>
       </div>
-    </>
+    </div>
   );
 }

package/app-template/tsconfig.json

@@ -5,16 +5,12 @@
     "baseUrl": "./src",
     "paths": {
       "@theme/*": ["./*"],
-      "@root/*": ["./app/[commerce]/[locale]/[currency]/*"],
-      "@product/*": ["./app/[commerce]/[locale]/[currency]/product/*"],
-      "@group-product/*": [
-        "./app/[commerce]/[locale]/[currency]/group-product/*"
-      ],
-      "@category/*": ["./app/[commerce]/[locale]/[currency]/category/*"],
-      "@special-page/*": [
-        "./app/[commerce]/[locale]/[currency]/special-page/*"
-      ],
-      "@flat-page/*": ["./app/[commerce]/[locale]/[currency]/flat-page/*"]
+      "@root/*": ["./app/[pz]/*"],
+      "@product/*": ["./app/[pz]/product/*"],
+      "@group-product/*": ["./app/[pz]/group-product/*"],
+      "@category/*": ["./app/[pz]/category/*"],
+      "@special-page/*": ["./app/[pz]/special-page/*"],
+      "@flat-page/*": ["./app/[pz]/flat-page/*"]
     },
     "allowSyntheticDefaultImports": true,
     "composite": false,