improvement

site/components/product/ProductSidebar/ProductSidebar.tsx

@@ -72,7 +72,7 @@ const ProductSidebar: FC<ProductSidebarProps> = ({ className }) => {
         {process.env.COMMERCE_CUSTOMFIELDS_ENABLED &&
           product.customFields &&
           product.customFields.length > 0 && (
-            <Collapse title="Technical Details">
+            <Collapse title="Specifications">
               <ProductCustomFields fields={product.customFields} />
             </Collapse>
           )}

site/components/product/ProductSlider/ProductSlider.tsx

@@ -11,6 +11,7 @@ import { a } from '@react-spring/web'
 import s from './ProductSlider.module.css'
 import ProductSliderControl from '../ProductSliderControl'
 import { useProduct } from '../context'
+import { ProductImage } from '@commerce/types/product'
 
 interface ProductSliderProps {
   children: React.ReactNode[]
@@ -21,8 +22,9 @@ const ProductSlider: React.FC<ProductSliderProps> = ({
   children,
   className = '',
 }) => {
-  const { imageIndex, setImageIndex } = useProduct()
+  const { product, variant } = useProduct()
-  const [currentSlide, setCurrentSlide] = useState(imageIndex ?? 0)
+
+  const [currentSlide, setCurrentSlide] = useState(0)
   const [isMounted, setIsMounted] = useState(false)
   const sliderContainerRef = useRef<HTMLDivElement>(null)
   const thumbsContainerRef = useRef<HTMLDivElement>(null)
@@ -30,9 +32,7 @@ const ProductSlider: React.FC<ProductSliderProps> = ({
   const [ref, slider] = useKeenSlider<HTMLDivElement>({
     loop: true,
     slides: { perView: 1 },
-    dragStarted: () => {
+    dragStarted: () => {},
-      setImageIndex(null)
-    },
     created: () => setIsMounted(true),
     slideChanged(s) {
       const slideNumber = s.track.details.rel
@@ -48,6 +48,17 @@ const ProductSlider: React.FC<ProductSliderProps> = ({
     },
   })
 
+  useEffect(() => {
+    const index = product.images.findIndex((image: ProductImage) => {
+      return image.url === variant?.image?.url
+    })
+    if (index !== -1) {
+      slider.current?.moveToIdx(index, false, {
+        duration: 0,
+      })
+    }
+  }, [variant, product, slider])
+
   // Stop the history navigation gesture on touch devices
   useEffect(() => {
     const preventNavigation = (event: TouchEvent) => {
@@ -78,23 +89,13 @@ const ProductSlider: React.FC<ProductSliderProps> = ({
     }
   }, [])
 
-  useEffect(() => {
-    if (imageIndex !== null) {
-      slider.current?.moveToIdx(imageIndex, false, {
-        duration: 0,
-      })
-    }
-  }, [imageIndex, slider])
-
   const onPrev = React.useCallback(() => {
-    setImageIndex(null)
     slider.current?.prev()
-  }, [setImageIndex, slider])
+  }, [slider])
 
   const onNext = React.useCallback(() => {
-    setImageIndex(null)
     slider.current?.next()
-  }, [setImageIndex, slider])
+  }, [slider])
 
   return (
     <div className={cn(s.root, className)} ref={sliderContainerRef}>
@@ -133,7 +134,6 @@ const ProductSlider: React.FC<ProductSliderProps> = ({
                   }),
                   id: `thumb-${idx}`,
                   onClick: () => {
-                    setImageIndex(null)
                     slider.current?.moveToIdx(idx)
                   },
                 },

site/components/product/context.tsx

@@ -13,8 +13,6 @@ import { getProductVariant, selectDefaultOptionFromProduct } from './helpers'
 
 export interface ProductContextValue {
   product: Product
-  imageIndex: number | null
-  setImageIndex: Dispatch<SetStateAction<number | null>>
   price: string
   variant: ProductVariant
   selectedOptions: SelectedOptions
@@ -34,7 +32,6 @@ export const ProductProvider: FC<ProductProviderProps> = ({
   product,
   children,
 }) => {
-  const [imageIndex, setImageIndex] = useState<number | null>(null)
   const [selectedOptions, setSelectedOptions] = useState<SelectedOptions>({})
 
   useEffect(
@@ -53,26 +50,15 @@ export const ProductProvider: FC<ProductProviderProps> = ({
     currencyCode: variant?.price?.currencyCode || product.price.currencyCode!,
   })
 
-  useEffect(() => {
-    const index = product.images.findIndex((image: ProductImage) => {
-      return image.url === variant?.image?.url
-    })
-    if (index !== -1) {
-      setImageIndex(index)
-    }
-  }, [variant, product])
-
   const value = useMemo(
     () => ({
       price,
       product,
       variant,
-      imageIndex,
-      setImageIndex,
       selectedOptions,
       setSelectedOptions,
     }),
-    [price, product, variant, imageIndex, selectedOptions]
+    [price, product, selectedOptions, variant]
   )
 
   return (