@pradip1995/segment-product-card 0.3.17 → 0.3.18

package/package.json

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

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;
   }
 }