@lime-bundles/widget 2.3.0 → 2.4.0

package/dist/index.js

@@ -369,6 +369,7 @@ function renderProductRow(state, currency, qtyFor, onVariantChange) {
       const select = document.createElement("select");
       select.className = "lb-bundle-variant-select";
       select.setAttribute("data-variant-select", "");
+      select.name = `lb-variant-${state.product.id.replace(/^.*\//, "")}`;
       select.setAttribute(
         "aria-label",
         `Select variant for ${state.product.title}`
@@ -588,7 +589,12 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
       variantTitle: firstVariant.title,
       imageUrl: firstEligible.product.featuredImage?.url ?? null,
       priceCents: parseCents(firstVariant.price.amount),
-      compareCents: firstVariant.compareAtPrice ? parseCents(firstVariant.compareAtPrice.amount) : null
+      compareCents: firstVariant.compareAtPrice ? parseCents(firstVariant.compareAtPrice.amount) : null,
+      unitPriceLabel: formatUnitPrice(
+        firstVariant.unitPrice,
+        firstVariant.unitPriceMeasurement,
+        currency
+      )
     });
   }
   afterMutation();
@@ -601,7 +607,12 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
       variantTitle: variant.title,
       imageUrl: product.featuredImage?.url ?? null,
       priceCents: parseCents(variant.price.amount),
-      compareCents: variant.compareAtPrice ? parseCents(variant.compareAtPrice.amount) : null
+      compareCents: variant.compareAtPrice ? parseCents(variant.compareAtPrice.amount) : null,
+      unitPriceLabel: formatUnitPrice(
+        variant.unitPrice,
+        variant.unitPriceMeasurement,
+        currency
+      )
     });
     afterMutation();
   }
@@ -788,6 +799,11 @@ function renderFilledSlot(selection, index, currency, onRemove) {
   priceEl.textContent = formatCents(selection.priceCents, currency);
   priceWrap.appendChild(priceEl);
   info.appendChild(priceWrap);
+  if (selection.unitPriceLabel) {
+    const unitPrice = el("span", "lb-bundle-product-unit-price");
+    unitPrice.textContent = selection.unitPriceLabel;
+    info.appendChild(unitPrice);
+  }
   slot.appendChild(info);
   const remove = document.createElement("button");
   remove.type = "button";
@@ -942,8 +958,10 @@ function renderModal(bundle, eligible, currency, handlers) {
     rowsBuilt = true;
     list.innerHTML = "";
     eligible.forEach((ep) => {
-      const variant = ep.firstAvailableVariant ?? ep.variants[0];
-      if (!variant) return;
+      const availableVariants = ep.variants.filter((v) => v.availableForSale);
+      const firstAvailVariant = availableVariants[0] ?? ep.firstAvailableVariant ?? ep.variants[0];
+      if (!firstAvailVariant) return;
+      let currentVariant = firstAvailVariant;
       const productEl = el(
         "div",
         ep.isOos ? "lb-mix-match__modal-product lb-mix-match__modal-product--sold-out" : "lb-mix-match__modal-product",
@@ -965,26 +983,86 @@ function renderModal(bundle, eligible, currency, handlers) {
       } else {
         thumb.insertAdjacentHTML("beforeend", PLACEHOLDER_THUMB_SVG2);
       }
+      const countBadge = el("span", "lb-bundle-qty-badge");
+      countBadge.style.display = "none";
+      thumb.appendChild(countBadge);
       productEl.appendChild(thumb);
       const info = el("div", "lb-mix-match__modal-product-info");
-      const title = el("span", "lb-mix-match__modal-product-title");
+      const title = el("p", "lb-mix-match__modal-product-title");
       title.textContent = ep.product.title;
       info.appendChild(title);
-      const price = el("span", "lb-mix-match__modal-product-price");
-      price.textContent = formatCents(parseCents(variant.price.amount), currency);
+      const price = el("p", "lb-mix-match__modal-product-price");
+      price.textContent = formatCents(
+        parseCents(currentVariant.price.amount),
+        currency
+      );
       info.appendChild(price);
-      const unitPriceText = formatUnitPrice(
-        variant.unitPrice,
-        variant.unitPriceMeasurement,
+      const unitPrice = el(
+        "p",
+        "lb-mix-match__modal-product-unit-price lb-bundle-product-unit-price"
+      );
+      const initialUnitText = formatUnitPrice(
+        currentVariant.unitPrice,
+        currentVariant.unitPriceMeasurement,
         currency
       );
-      if (unitPriceText) {
-        const unitPrice = el(
-          "span",
-          "lb-mix-match__modal-product-unit-price lb-bundle-product-unit-price"
+      if (initialUnitText) {
+        unitPrice.textContent = initialUnitText;
+      } else {
+        unitPrice.hidden = true;
+      }
+      info.appendChild(unitPrice);
+      const row = {
+        el: productEl,
+        product: ep.product,
+        variant: firstAvailVariant,
+        updateCount: () => {
+        }
+      };
+      if (availableVariants.length > 1) {
+        const select = document.createElement("select");
+        select.className = "lb-mix-match__variant-select";
+        select.setAttribute("data-variant-select", "");
+        select.name = `lb-variant-${ep.product.id.replace(/^.*\//, "")}`;
+        select.setAttribute(
+          "aria-label",
+          `Select variant for ${ep.product.title}`
         );
-        unitPrice.textContent = unitPriceText;
-        info.appendChild(unitPrice);
+        availableVariants.forEach((v) => {
+          const opt = document.createElement("option");
+          opt.value = v.id;
+          opt.textContent = v.title;
+          if (v.id === firstAvailVariant.id) opt.selected = true;
+          select.appendChild(opt);
+        });
+        select.addEventListener("change", () => {
+          const next = availableVariants.find((v) => v.id === select.value);
+          if (!next) return;
+          currentVariant = next;
+          row.variant = next;
+          price.textContent = formatCents(
+            parseCents(currentVariant.price.amount),
+            currency
+          );
+          const nextUnitText = formatUnitPrice(
+            currentVariant.unitPrice,
+            currentVariant.unitPriceMeasurement,
+            currency
+          );
+          if (nextUnitText) {
+            unitPrice.textContent = nextUnitText;
+            unitPrice.hidden = false;
+          } else {
+            unitPrice.textContent = "";
+            unitPrice.hidden = true;
+          }
+          rowUpdateCount();
+        });
+        info.appendChild(select);
+      } else if (availableVariants.length === 1 && firstAvailVariant.title !== "Default Title") {
+        const variantLabel = el("span", "lb-mix-match__filled-variant");
+        variantLabel.textContent = firstAvailVariant.title;
+        info.appendChild(variantLabel);
       }
       if (ep.isOos) {
         const soldOut = el("span", "lb-mix-match__modal-sold-out-label");
@@ -992,56 +1070,29 @@ function renderModal(bundle, eligible, currency, handlers) {
         info.appendChild(soldOut);
       }
       productEl.appendChild(info);
+      const rowUpdateCount = () => {
+        const count = handlers.countFor(ep.product.id, currentVariant.id);
+        if (count > 0) {
+          countBadge.textContent = String(count);
+          countBadge.style.display = "";
+        } else {
+          countBadge.style.display = "none";
+        }
+      };
       if (!ep.isOos) {
         const addBtn = document.createElement("button");
         addBtn.type = "button";
         addBtn.className = "lb-mix-match__modal-add";
-        addBtn.setAttribute("aria-label", `Add ${ep.product.title}`);
-        addBtn.innerHTML = PLUS_ICON_SVG;
-        const countBadge = el("span", "lb-bundle-qty-badge");
-        countBadge.style.display = "none";
-        addBtn.appendChild(countBadge);
+        addBtn.textContent = "Add";
         addBtn.addEventListener("click", () => {
           if (handlers.isOverMax()) return;
-          handlers.onAdd(ep.product, variant);
+          handlers.onAdd(ep.product, currentVariant);
         });
         productEl.appendChild(addBtn);
-        const removeBtn = document.createElement("button");
-        removeBtn.type = "button";
-        removeBtn.className = "lb-mix-match__slot-remove";
-        removeBtn.setAttribute("aria-label", `Remove one ${ep.product.title}`);
-        removeBtn.style.display = "none";
-        removeBtn.innerHTML = CLOSE_ICON_SVG;
-        removeBtn.addEventListener("click", (e) => {
-          e.stopPropagation();
-          handlers.onRemove(ep.product.id, variant.id);
-        });
-        productEl.appendChild(removeBtn);
-        productRows.push({
-          el: productEl,
-          product: ep.product,
-          variant,
-          updateCount: () => {
-            const count = handlers.countFor(ep.product.id, variant.id);
-            if (count > 0) {
-              countBadge.textContent = String(count);
-              countBadge.style.display = "";
-              removeBtn.style.display = "";
-            } else {
-              countBadge.style.display = "none";
-              removeBtn.style.display = "none";
-            }
-          }
-        });
-      } else {
-        productRows.push({
-          el: productEl,
-          product: ep.product,
-          variant,
-          updateCount: () => {
-          }
-        });
       }
+      row.updateCount = ep.isOos ? () => {
+      } : rowUpdateCount;
+      productRows.push(row);
       list.appendChild(productEl);
     });
     refreshCounts();
@@ -1612,15 +1663,18 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
 /* Product rows */
 .lb-bundle-product-row {
   display: flex;
-  gap: 12px;
+  gap: 20px;
   padding: 12px 0;
 }
 
 .lb-bundle-thumbnail {
   position: relative;
   width: 48px;
-  height: 48px;
   min-width: 48px;
+  /* Aspect-ratio comes from the merchant \`thumbnailRatio\` enum via Liquid;
+     "original" sets it to \`auto\` so the box sizes to the image's intrinsic
+     ratio. Default keeps the historical 1:1 behaviour. */
+  aspect-ratio: var(--lb-thumbnail-aspect-ratio, 1 / 1);
   background: var(--lb-thumbnail-bg);
   border-radius: 8px;
   overflow: hidden;
@@ -1631,8 +1685,10 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
 
 .lb-bundle-thumbnail img {
   width: 100%;
-  height: 100%;
-  object-fit: cover;
+  /* Height + fit come from the same merchant enum; "original" sets them to
+     \`auto\` / \`contain\` so the image renders uncropped at intrinsic ratio. */
+  height: var(--lb-thumbnail-img-height, 100%);
+  object-fit: var(--lb-thumbnail-img-fit, cover);
 }
 
 .lb-bundle-thumbnail svg {
@@ -1663,7 +1719,7 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
 .lb-bundle-product-price {
   /* --lb-product-price-display fallback is the "on" branch; Liquid sets 'none' when merchant disables. */
   display: var(--lb-product-price-display, block);
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 400;
   line-height: 20px;
   color: var(--lb-text);
@@ -1680,7 +1736,7 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
 .lb-bundle-product-compare-price {
   /* --lb-product-compare-display fallback is the "on" branch; Liquid sets 'none' when merchant disables. */
   display: var(--lb-product-compare-display, inline);
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 400;
   line-height: 20px;
   color: color-mix(in srgb, var(--lb-text) 60%, transparent);
@@ -1699,7 +1755,7 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
    secondary text beneath the price row so it doesn't compete visually. */
 .lb-bundle-product-unit-price {
   display: block;
-  font-size: 11px;
+  font-size: 12px;
   line-height: 16px;
   color: color-mix(in srgb, var(--lb-text) 60%, transparent);
   margin-top: 2px;
@@ -1822,7 +1878,7 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
   grid-template-rows: 1fr;
   grid-template-columns: 1fr;
   width: 100%;
-  padding: 16px;
+  padding: 12px 16px;
   border: var(--lb-cta-border-width) solid var(--lb-cta-border-color);
   border-radius: var(--lb-cta-radius);
   font-size: 16px;
@@ -1957,14 +2013,14 @@ var BUNDLE_FIXED_CSS = `/* Lime Bundles \u2014 Fixed bundle styles */
 
 /* Fixed bundles: product rows */
 .lb-fixed .lb-bundle-product-row {
-  gap: 16px;
+  gap: 20px;
   align-items: center;
 }
 
-/* Fixed bundles: larger thumbnails */
+/* Fixed bundles: larger thumbnails. Height comes from --lb-thumbnail-aspect-ratio
+   (set on .lb-bundle-widget via Liquid / applyWidgetConfigVars). */
 .lb-fixed .lb-bundle-thumbnail {
   width: 60px;
-  height: 60px;
   min-width: 60px;
   border-radius: var(--lb-image-border-radius);
   border: var(--lb-image-border-width) solid var(--lb-image-border-color);
@@ -2065,7 +2121,10 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   width: 60px;
   height: 60px;
   min-width: 60px;
-  border: var(--lb-image-border-width) dashed color-mix(in srgb, var(--lb-text) 20%, transparent);
+  /* 2px border is intentionally independent of --lb-image-border-width \u2014
+     empty slots always need a visible dashed outline as an affordance,
+     regardless of how the merchant has styled populated thumbnails. */
+  border: 2px dashed color-mix(in srgb, var(--lb-text) 35%, transparent);
   border-radius: var(--lb-image-border-radius);
   box-sizing: border-box;
   display: flex;
@@ -2085,9 +2144,10 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   cursor: default;
 }
 
+/* Mix-match thumbnails. Height comes from --lb-thumbnail-aspect-ratio
+   (set on .lb-bundle-widget via Liquid / applyWidgetConfigVars). */
 .lb-mix-match .lb-bundle-thumbnail {
   width: 60px;
-  height: 60px;
   min-width: 60px;
   border-radius: var(--lb-image-border-radius);
   border: var(--lb-image-border-width) solid var(--lb-image-border-color);
@@ -2322,7 +2382,7 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
 .lb-mix-match__modal-product {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 20px;
   padding: 12px 0;
   border-bottom: 1px solid color-mix(in srgb, var(--lb-picker-text) 7%, transparent);
 }
@@ -2334,8 +2394,11 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
 .lb-mix-match__modal-product-thumb {
   position: relative;
   width: 48px;
-  height: 48px;
   min-width: 48px;
+  /* Modal picker thumbs follow the merchant's pickerThumbnailRatio \u2014
+     independent from the main widget's thumbnailRatio so a merchant can
+     e.g. show tall picker thumbs with square main thumbs. */
+  aspect-ratio: var(--lb-picker-thumbnail-aspect-ratio, 1 / 1);
   border-radius: var(--lb-picker-product-radius);
   border: var(--lb-picker-product-border-width) solid var(--lb-picker-product-border-color);
   box-sizing: border-box;
@@ -2356,8 +2419,10 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
 
 .lb-mix-match__modal-product-thumb img {
   width: 100%;
-  height: 100%;
-  object-fit: cover;
+  /* Height + fit come from pickerThumbnailRatio \u2014 "original" sets both
+     to auto/contain so the image renders uncropped at intrinsic ratio. */
+  height: var(--lb-picker-thumbnail-img-height, 100%);
+  object-fit: var(--lb-picker-thumbnail-img-fit, cover);
   border-radius: max(0px, calc(var(--lb-picker-product-radius) - var(--lb-picker-product-border-width)));
 }
 
@@ -2592,7 +2657,7 @@ var BUNDLE_VOLUME_CSS = `/* Lime Bundles \u2014 Volume / Quantity Breaks styles
 
 .lb-volume__tier-price {
   grid-column: 1 / -1;
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 500;
   color: var(--lb-text);
 }
@@ -2604,7 +2669,7 @@ var BUNDLE_VOLUME_CSS = `/* Lime Bundles \u2014 Volume / Quantity Breaks styles
 
 /* Compare-at (strikethrough) price */
 .lb-volume__tier-compare {
-  font-size: 12px;
+  font-size: 14px;
   line-height: 16px;
   color: color-mix(in srgb, var(--lb-text) 60%, transparent);
   text-decoration: line-through;