@pradip1995/segment-powerhouse-carousel 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-powerhouse-carousel",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

package/src/carousel.css

@@ -90,16 +90,14 @@
 }
 
 .powerhouse-carousel__card {
+  position: relative;
+  z-index: 1;
   display: flex;
   flex-direction: column;
   height: 100%;
   padding: 0.6875rem;
+  border: 1px solid #dddddd;
   background: #fff;
-  transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.powerhouse-carousel__card:hover {
-  box-shadow: 0 2px 8px #80808033;
 }
 
 .powerhouse-carousel__card-media {
@@ -116,6 +114,12 @@
   height: 100%;
   object-fit: cover;
   display: block;
+  transform: scale(1);
+  transition: transform 0.5s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.powerhouse-carousel__card:hover .powerhouse-carousel__card-image {
+  transform: scale(1.05);
 }
 
 .powerhouse-carousel__badge {
@@ -131,6 +135,19 @@
   line-height: 1.2;
 }
 
+.powerhouse-carousel__sold {
+  position: absolute;
+  bottom: 0.6rem;
+  left: 0.6rem;
+  padding: 0.2rem 0.45rem;
+  background: #1d1d1d;
+  color: #fff;
+  font-family: var(--font-sans, inherit);
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
 .powerhouse-carousel__card-info {
   display: flex;
   flex-direction: column;
@@ -140,6 +157,7 @@
 
 .powerhouse-carousel__price {
   margin-top: 0.25rem;
+  min-height: 2.7rem;
 }
 
 .powerhouse-carousel__price-compare {
@@ -163,7 +181,12 @@
 }
 
 .powerhouse-carousel__card-title {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
   margin: 0.625rem 0 0;
+  min-height: calc(1em * 1.3125 * 2);
   font-family: var(--font-sans, inherit);
   font-size: 1rem;
   font-weight: 300;
@@ -177,31 +200,41 @@
 
 .powerhouse-carousel__stock {
   margin: 0.5rem 0 0;
+  min-height: 1.2em;
   color: #688600;
   font-size: 0.875rem;
 }
 
+.powerhouse-carousel__stock.is-out {
+  color: #6e6e6e;
+}
+
 .powerhouse-carousel__actions {
   display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  gap: 0.4rem;
   margin-top: auto;
   padding-top: 0.75rem;
 }
 
 .powerhouse-carousel__quickshop,
 .powerhouse-carousel__atc {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
+  width: 100%;
   min-height: 2.5rem;
-  padding: 0.55rem 0.9rem;
+  padding: 0.5rem 0.45rem;
   border-radius: 2px;
+  box-sizing: border-box;
   font-family: var(--font-sans, inherit);
-  font-size: 0.875rem;
-  font-weight: 500;
-  letter-spacing: 0.04em;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0;
   text-decoration: none;
+  text-align: center;
+  white-space: nowrap;
   cursor: pointer;
 }
 
@@ -227,7 +260,7 @@
 
 .powerhouse-carousel__atc:disabled {
   opacity: 0.65;
-  cursor: wait;
+  cursor: not-allowed;
 }
 
 @media screen and (min-width: 720px) {
@@ -239,16 +272,40 @@
 @media screen and (min-width: 860px) {
   .powerhouse-carousel {
     margin-top: 1.75rem;
+    overflow: visible;
+  }
+
+  .powerhouse-carousel__viewport,
+  .powerhouse-carousel__track {
+    overflow: visible;
+  }
+
+  .powerhouse-carousel__track {
+    overflow-x: auto;
+    padding-bottom: 4.5rem;
+    margin-bottom: -3rem;
   }
 
   .powerhouse-carousel__heading {
     margin-bottom: 1.75rem;
   }
 
+  .powerhouse-carousel__slide {
+    display: flex;
+    align-items: stretch;
+  }
+
   .powerhouse-carousel__card {
+    width: 100%;
     padding: 1rem;
   }
 
+  .powerhouse-carousel__card:hover,
+  .powerhouse-carousel__card:focus-within {
+    z-index: 8;
+    box-shadow: 0 6px 18px rgba(29, 29, 29, 0.12);
+  }
+
   .powerhouse-carousel__arrow--prev {
     left: 2.1875rem;
   }
@@ -256,6 +313,38 @@
   .powerhouse-carousel__arrow--next {
     right: 2.1875rem;
   }
+
+  .powerhouse-carousel__actions {
+    position: absolute;
+    left: -1px;
+    right: -1px;
+    top: calc(100% - 1px);
+    flex-direction: row;
+    margin-top: 0;
+    padding: 0.75rem 1rem 1rem;
+    border: 1px solid #dddddd;
+    border-top: 0;
+    background: #fff;
+    box-sizing: border-box;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition: opacity 0.2s ease, visibility 0.2s ease;
+  }
+
+  .powerhouse-carousel__quickshop,
+  .powerhouse-carousel__atc {
+    flex: 1 1 0;
+    width: auto;
+    min-width: 0;
+  }
+
+  .powerhouse-carousel__card:hover .powerhouse-carousel__actions,
+  .powerhouse-carousel__card:focus-within .powerhouse-carousel__actions {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+  }
 }
 
 @media screen and (min-width: 1080px) {
@@ -266,17 +355,6 @@
   .powerhouse-carousel__slide {
     flex-basis: calc(25% - 15px);
   }
-
-  .powerhouse-carousel__actions {
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.2s ease;
-  }
-
-  .powerhouse-carousel__card:hover .powerhouse-carousel__actions {
-    opacity: 1;
-    pointer-events: auto;
-  }
 }
 
 @media screen and (min-width: 1280px) {

package/src/product-card.tsx

@@ -24,12 +24,17 @@ export default function ProductCard({ product, region, countryCode }: Props) {
   const onSale = originalPrice != null && price != null && originalPrice > price
   const saved = onSale && originalPrice != null && price != null ? originalPrice - price : null
   const inventory = variant?.inventory_quantity
+  const inStock =
+    variant?.manage_inventory === false ||
+    variant?.allow_backorder === true ||
+    (inventory ?? 0) > 0
   const href = `/products/${product.handle}`
+  const hasOptions = (product.variants?.length ?? 0) > 1
 
   const handleAdd = async (event: React.MouseEvent) => {
     event.preventDefault()
     event.stopPropagation()
-    if (!variant?.id || adding) return
+    if (!variant?.id || adding || !inStock || hasOptions) return
     setAdding(true)
     try {
       await addToCart({
@@ -59,6 +64,7 @@ export default function ProductCard({ product, region, countryCode }: Props) {
         {onSale && saved != null ? (
           <span className="powerhouse-carousel__badge">Save {formatPrice(saved, currency)}</span>
         ) : null}
+        {!inStock ? <span className="powerhouse-carousel__sold">Sold out</span> : null}
       </LocalizedLink>
 
       <div className="powerhouse-carousel__card-info">
@@ -79,21 +85,30 @@ export default function ProductCard({ product, region, countryCode }: Props) {
 
         {inventory != null && inventory > 0 && inventory <= 5 ? (
           <p className="powerhouse-carousel__stock">Only {inventory} left!</p>
-        ) : null}
+        ) : !inStock ? (
+          <p className="powerhouse-carousel__stock is-out">Out of stock</p>
+        ) : (
+          <p className="powerhouse-carousel__stock">in stock</p>
+        )}
 
         <div className="powerhouse-carousel__actions">
           <LocalizedLink href={href} countryCode={countryCode} className="powerhouse-carousel__quickshop">
             Quick shop
           </LocalizedLink>
-          <button
-            type="button"
-            className="powerhouse-carousel__atc"
-            onClick={handleAdd}
-            disabled={adding || !variant?.id}
-            aria-label="Add to cart"
-          >
-            {adding ? "Adding…" : "Add to cart"}
-          </button>
+          {hasOptions ? (
+            <LocalizedLink href={href} countryCode={countryCode} className="powerhouse-carousel__atc">
+              Choose options
+            </LocalizedLink>
+          ) : (
+            <button
+              type="button"
+              className="powerhouse-carousel__atc"
+              onClick={handleAdd}
+              disabled={adding || !variant?.id || !inStock}
+            >
+              {adding ? "Adding…" : !inStock ? "Sold out" : "Add to cart"}
+            </button>
+          )}
         </div>
       </div>
     </article>