@pradip1995/segment-product-card 0.3.16 → 0.3.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-product-card",
-  "version": "0.3.16",
+  "version": "0.3.18",
   "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"
         >
           ›

package/src/resolve-product-images.ts

@@ -2,14 +2,19 @@ import type { HttpTypes } from "@medusajs/types"
 import { resolveMediaUrl } from "@pradip1995/segment-primitives/resolve-media-url"
 
 export function resolveProductCardImages(product: HttpTypes.StoreProduct) {
-  const images =
+  const gallery =
     product.images
       ?.map((image) => resolveMediaUrl(image.url))
       .filter((url): url is string => !!url) ?? []
 
+  const variantImages = (product.variants ?? [])
+    .map((variant) => resolveMediaUrl((variant as { thumbnail?: string | null }).thumbnail))
+    .filter((url): url is string => !!url)
+
+  const images = [...gallery, ...variantImages]
   const thumbnail = resolveMediaUrl(product.thumbnail) || ""
   const primary = thumbnail || images[0] || ""
-  const hover = images.find((url) => url && url !== primary) || ""
+  const hover = [...new Set(images)].find((url) => url && url !== primary) || ""
 
   return { primary, hover }
 }

package/src/segment.css

@@ -246,10 +246,15 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
-  transition: opacity 0.4s ease;
+  transition: opacity 0.45s ease, transform 0.55s ease;
+}
+
+.jewelry-product-card__image--primary {
+  z-index: 1;
 }
 
 .jewelry-product-card__image--hover {
+  z-index: 2;
   opacity: 0;
 }
 
@@ -257,10 +262,14 @@
   opacity: 1;
 }
 
-.jewelry-product-card__media--has-hover:hover .jewelry-product-card__image--primary {
+.jewelry-product-card:hover .jewelry-product-card__media--has-hover .jewelry-product-card__image--primary {
   opacity: 0;
 }
 
+.jewelry-product-card:hover .jewelry-product-card__media:not(.jewelry-product-card__media--has-hover) .jewelry-product-card__image--primary {
+  transform: scale(1.06);
+}
+
 .jewelry-product-card__placeholder {
   background: linear-gradient(135deg, var(--color-surface-muted) 0%, var(--color-surface-alt) 100%);
 }
@@ -288,14 +297,16 @@
 }
 
 .jewelry-product-card .product-card__quick-add-wrap {
-  left: 0;
-  right: 0;
-  bottom: 0;
+  left: 0.75rem;
+  right: 0.75rem;
+  bottom: 0.75rem;
   top: auto;
+  z-index: 12;
+  padding: 0;
   opacity: 0;
-  transform: translateY(100%);
+  transform: translateY(0.5rem);
   pointer-events: none;
-  transition: opacity 0.25s ease, transform 0.25s ease;
+  transition: opacity 0.28s ease, transform 0.28s ease;
 }
 
 .jewelry-product-card:hover .product-card__quick-add-wrap {
@@ -306,19 +317,23 @@
 
 .jewelry-product-card .product-card__quick-add {
   width: 100%;
-  border-radius: 0;
-  background: rgba(26, 26, 26, 0.88);
-  color: var(--color-text-inverse);
-  letter-spacing: 0.08em;
+  border-radius: 999px;
+  border: 1px solid var(--color-footer-bg, #45355e);
+  background: var(--color-footer-bg, #45355e);
+  color: #ffffff;
+  letter-spacing: 0.12em;
   text-transform: uppercase;
   font-size: 0.6875rem;
   font-weight: 600;
-  min-height: 2.75rem;
-  backdrop-filter: blur(4px);
+  min-height: 2.5rem;
+  box-shadow: 0 8px 22px rgba(69, 53, 94, 0.22);
 }
 
-.jewelry-product-card .product-card__quick-add:hover:not(:disabled) {
-  background: var(--color-brand-primary);
+.jewelry-product-card .product-card__quick-add:hover:not(:disabled),
+.jewelry-product-card .product-card__quick-add:focus-visible:not(:disabled) {
+  background: var(--color-footer-bg, #45355e);
+  border-color: var(--color-footer-bg, #45355e);
+  color: #ffffff;
 }
 
 .jewelry-product-card .product-card__quick-add-label {
@@ -368,12 +383,14 @@
 }
 
 .product-scroll__slide:has(.jewelry-product-card) {
-  flex: 0 0 clamp(210px, 38vw, 280px);
+  flex: 0 0 calc((100cqw - 0.75rem) / 1.2);
+  width: calc((100cqw - 0.75rem) / 1.2);
 }
 
 @media (min-width: 768px) {
   .product-scroll__slide:has(.jewelry-product-card) {
     flex: 0 0 clamp(240px, 22vw, 280px);
+    width: auto;
   }
 }