@pradip1995/segment-product-card 0.3.16 → 0.3.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-product-card",
-  "version": "0.3.16",
+  "version": "0.3.17",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

package/src/product-rail-variants.tsx

@@ -111,6 +111,7 @@ export function ProductRailByVariant({
   wishlistProductIds,
   productCardVariant,
   showNavButtons,
+  autoScroll,
 }: {
   variant: ProductRailVariant
   products: HttpTypes.StoreProduct[]
@@ -123,6 +124,7 @@ export function ProductRailByVariant({
   wishlistProductIds?: string[]
   productCardVariant?: ProductCardVariant
   showNavButtons?: boolean
+  autoScroll?: boolean
 }) {
   return (
     <>
@@ -136,6 +138,7 @@ export function ProductRailByVariant({
           wishlistProductIds={wishlistProductIds}
           productCardVariant={productCardVariant}
           showNavButtons={showNavButtons}
+          autoScroll={autoScroll}
         />
       ) : variant === "featured" ? (
         <ProductRailFeatured

package/src/product-scroll.tsx

@@ -1,9 +1,13 @@
 "use client"
 
-import { useRef } from "react"
+import { useEffect, useRef, useState } from "react"
 import ProductCard, { type ProductCardVariant } from "./segment"
 import type { HttpTypes } from "@medusajs/types"
 
+/** Auto-scroll only when the rail has more cards than fit in one row. */
+const VISIBLE_CARDS = 4
+const AUTO_SCROLL_MS = 3200
+
 type ProductScrollProps = {
   products: HttpTypes.StoreProduct[]
   region?: HttpTypes.StoreRegion | null
@@ -12,6 +16,8 @@ type ProductScrollProps = {
   wishlistProductIds?: string[]
   productCardVariant?: ProductCardVariant
   showNavButtons?: boolean
+  /** When true and there are more than 4 products, advance the rail automatically. */
+  autoScroll?: boolean
 }
 
 export default function ProductScroll({
@@ -22,8 +28,13 @@ export default function ProductScroll({
   wishlistProductIds,
   productCardVariant,
   showNavButtons = true,
+  autoScroll = false,
 }: ProductScrollProps) {
   const viewportRef = useRef<HTMLDivElement>(null)
+  const pauseUntilRef = useRef(0)
+  const [paused, setPaused] = useState(false)
+
+  const shouldAutoScroll = autoScroll && products.length > VISIBLE_CARDS
 
   const scroll = (direction: "prev" | "next") => {
     const viewport = viewportRef.current
@@ -35,15 +46,75 @@ export default function ProductScroll({
     })
   }
 
+  useEffect(() => {
+    if (!shouldAutoScroll) return
+    if (
+      typeof window !== "undefined" &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches
+    ) {
+      return
+    }
+
+    const tick = () => {
+      const viewport = viewportRef.current
+      if (!viewport || paused) return
+      if (Date.now() < pauseUntilRef.current) return
+
+      const maxScroll = viewport.scrollWidth - viewport.clientWidth
+      if (maxScroll <= 4) return
+
+      const slide = viewport.querySelector(
+        ".product-scroll__slide, .bestsellers-carousel__slide"
+      ) as HTMLElement | null
+      const styles = getComputedStyle(viewport.querySelector(".product-scroll__track, .bestsellers-carousel__track") || viewport)
+      const gap = parseFloat(styles.columnGap || styles.gap || "16") || 16
+      const step = (slide?.offsetWidth || viewport.clientWidth / VISIBLE_CARDS) + gap
+      const next = viewport.scrollLeft + step
+
+      if (next >= maxScroll - 2) {
+        viewport.scrollTo({ left: 0, behavior: "smooth" })
+      } else {
+        viewport.scrollBy({ left: step, behavior: "smooth" })
+      }
+    }
+
+    const id = window.setInterval(tick, AUTO_SCROLL_MS)
+    return () => window.clearInterval(id)
+  }, [shouldAutoScroll, paused, products.length])
+
+  const pauseAutoScroll = (ms = AUTO_SCROLL_MS * 2) => {
+    pauseUntilRef.current = Date.now() + ms
+  }
+
   if (products.length === 0) return null
 
   return (
-    <div className="product-scroll bestsellers-carousel">
+    <div
+      className="product-scroll bestsellers-carousel"
+      onMouseEnter={() => {
+        if (shouldAutoScroll) setPaused(true)
+      }}
+      onMouseLeave={() => {
+        if (shouldAutoScroll) {
+          setPaused(false)
+          pauseAutoScroll(800)
+        }
+      }}
+      onFocusCapture={() => {
+        if (shouldAutoScroll) pauseAutoScroll()
+      }}
+      onPointerDown={() => {
+        if (shouldAutoScroll) pauseAutoScroll()
+      }}
+    >
       {showNavButtons ? (
         <button
           type="button"
           className="product-scroll__nav bestsellers-carousel__nav product-scroll__nav--prev bestsellers-carousel__nav--prev"
-          onClick={() => scroll("prev")}
+          onClick={() => {
+            pauseAutoScroll()
+            scroll("prev")
+          }}
           aria-label="Previous products"
         >
           ‹
@@ -75,7 +146,10 @@ export default function ProductScroll({
         <button
           type="button"
           className="product-scroll__nav bestsellers-carousel__nav product-scroll__nav--next bestsellers-carousel__nav--next"
-          onClick={() => scroll("next")}
+          onClick={() => {
+            pauseAutoScroll()
+            scroll("next")
+          }}
           aria-label="Next products"
         >
           ›