diff --git a/site/components/product/ProductSidebar/ProductSidebar.tsx b/site/components/product/ProductSidebar/ProductSidebar.tsx index 927a14fba..70636715a 100644 --- a/site/components/product/ProductSidebar/ProductSidebar.tsx +++ b/site/components/product/ProductSidebar/ProductSidebar.tsx @@ -72,7 +72,7 @@ const ProductSidebar: FC = ({ className }) => { {process.env.COMMERCE_CUSTOMFIELDS_ENABLED && product.customFields && product.customFields.length > 0 && ( - + )} diff --git a/site/components/product/ProductSlider/ProductSlider.tsx b/site/components/product/ProductSlider/ProductSlider.tsx index a367ac924..e52159bc9 100644 --- a/site/components/product/ProductSlider/ProductSlider.tsx +++ b/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 = ({ children, className = '', }) => { - const { imageIndex, setImageIndex } = useProduct() - const [currentSlide, setCurrentSlide] = useState(imageIndex ?? 0) + const { product, variant } = useProduct() + + const [currentSlide, setCurrentSlide] = useState(0) const [isMounted, setIsMounted] = useState(false) const sliderContainerRef = useRef(null) const thumbsContainerRef = useRef(null) @@ -30,9 +32,7 @@ const ProductSlider: React.FC = ({ const [ref, slider] = useKeenSlider({ loop: true, slides: { perView: 1 }, - dragStarted: () => { - setImageIndex(null) - }, + dragStarted: () => {}, created: () => setIsMounted(true), slideChanged(s) { const slideNumber = s.track.details.rel @@ -48,6 +48,17 @@ const ProductSlider: React.FC = ({ }, }) + 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 = ({ } }, []) - 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 (
@@ -133,7 +134,6 @@ const ProductSlider: React.FC = ({ }), id: `thumb-${idx}`, onClick: () => { - setImageIndex(null) slider.current?.moveToIdx(idx) }, }, diff --git a/site/components/product/context.tsx b/site/components/product/context.tsx index 195a4952c..4ec5128ef 100644 --- a/site/components/product/context.tsx +++ b/site/components/product/context.tsx @@ -13,8 +13,6 @@ import { getProductVariant, selectDefaultOptionFromProduct } from './helpers' export interface ProductContextValue { product: Product - imageIndex: number | null - setImageIndex: Dispatch> price: string variant: ProductVariant selectedOptions: SelectedOptions @@ -34,7 +32,6 @@ export const ProductProvider: FC = ({ product, children, }) => { - const [imageIndex, setImageIndex] = useState(null) const [selectedOptions, setSelectedOptions] = useState({}) useEffect( @@ -53,26 +50,15 @@ export const ProductProvider: FC = ({ 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 (