@lime-bundles/widget 4.2.0 → 4.3.0

package/README.md

@@ -58,6 +58,7 @@ document.querySelector("lime-bundle").addEventListener(
 | `storefront-token` | ✓ | Storefront Access Token from `/app/settings/headless`. |
 | `bundle-gid` |  | Render one specific bundle. Overrides auto-detect. |
 | `product-handle` |  | Render bundles for this handle. Overrides URL detection. |
+| `product-id` |  | The product this embed is standing on — full GID or bare numeric id. Volume bundles price and sell this product; falls back to the handle cascade, then the bundle's first product. |
 | `app-url` |  | Enables impression + add-to-cart analytics when set. |
 | `analytics` |  | `"false"` suppresses analytics even when `app-url` is set. |
 | `locale` |  | BCP-47 tag forwarded to the Storefront API. |
@@ -67,6 +68,8 @@ document.querySelector("lime-bundle").addEventListener(
 
 **Product resolution** (when `bundle-gid` is absent): explicit `product-handle` → `<meta name="shopify:product-handle">` → `/products/<handle>` URL segment.
 
+**Multi-product binding**: a volume bundle can span several products, and the widget prices and sells the one the shopper is looking at: explicit `product-id` → the handle cascade above → the bundle's first product. On a pinned `bundle-gid` embed outside a `/products/<handle>` URL, set `product-id` (or `product-handle`) or the first product is what gets sold.
+
 Changing any attribute at runtime re-fetches and re-renders.
 
 ### B2B buyer identity (programmatic property only)

package/dist/index.cjs

@@ -28,6 +28,28 @@ module.exports = __toCommonJS(index_exports);
 // src/lime-bundle.ts
 var import_core6 = require("@lime-bundles/core");
 
+// ../render/src/host.ts
+function intlFormatMoney(currencyCode) {
+  return (cents) => {
+    try {
+      return new Intl.NumberFormat(void 0, {
+        style: "currency",
+        currency: currencyCode
+      }).format(cents / 100);
+    } catch {
+      return currencyCode + " " + (cents / 100).toFixed(2);
+    }
+  };
+}
+var BUNDLE_GID_ATTRIBUTE = "_lime_bundle_gid";
+var BUNDLE_TYPE_ATTRIBUTE = "_lime_bundle_type";
+function bundleLineAttributes(bundleGid, bundleType) {
+  return [
+    { key: BUNDLE_GID_ATTRIBUTE, value: bundleGid },
+    { key: BUNDLE_TYPE_ATTRIBUTE, value: bundleType }
+  ];
+}
+
 // ../render/src/adapt.ts
 var import_core = require("@lime-bundles/core");
 function numericId(gid) {
@@ -230,28 +252,6 @@ function recalcPricing(container, products, formatMoney) {
   }
 }
 
-// ../render/src/host.ts
-function intlFormatMoney(currencyCode) {
-  return (cents) => {
-    try {
-      return new Intl.NumberFormat(void 0, {
-        style: "currency",
-        currency: currencyCode
-      }).format(cents / 100);
-    } catch {
-      return currencyCode + " " + (cents / 100).toFixed(2);
-    }
-  };
-}
-var BUNDLE_GID_ATTRIBUTE = "_lime_bundle_gid";
-var BUNDLE_TYPE_ATTRIBUTE = "_lime_bundle_type";
-function bundleLineAttributes(bundleGid, bundleType) {
-  return [
-    { key: BUNDLE_GID_ATTRIBUTE, value: bundleGid },
-    { key: BUNDLE_TYPE_ATTRIBUTE, value: bundleType }
-  ];
-}
-
 // ../render/src/product/option-selects.ts
 function bindVariantSelects(row, getProduct, onSelected) {
   const optionSelects = row.querySelectorAll("[data-variant-option]");
@@ -2939,9 +2939,9 @@ function selectTier(container, allTiers, basePrice, discountType, index, transla
 }
 
 // src/renderers/volume.ts
-function renderVolumeBundle(container, bundle, onAddToCart) {
+function renderVolumeBundle(container, bundle, onAddToCart, productContext) {
   const wc = bundle.widgetConfig;
-  const product = bundle.products[0];
+  const product = (0, import_core4.resolveContextProduct)(bundle.products, productContext);
   if (!product) return;
   const variants = product.variants.nodes;
   const minTierQty = Math.min(
@@ -6737,6 +6737,7 @@ var LimeBundleElement = class extends HTMLElement {
     "storefront-token",
     "bundle-gid",
     "product-handle",
+    "product-id",
     "app-url",
     "analytics",
     "locale",
@@ -6797,7 +6798,7 @@ var LimeBundleElement = class extends HTMLElement {
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue === newValue || !this.isConnected) return;
-    if (name === "bundle-gid" || name === "product-handle" || name === "shop-domain" || name === "storefront-token") {
+    if (name === "bundle-gid" || name === "product-handle" || name === "product-id" || name === "shop-domain" || name === "storefront-token") {
       if (this.shopDomain && this.storefrontToken) {
         this.fetchBundle();
       }
@@ -6815,6 +6816,16 @@ var LimeBundleElement = class extends HTMLElement {
   get productHandleAttr() {
     return this.getAttribute("product-handle") ?? "";
   }
+  /**
+   * The current product's id — full GID (`gid://shopify/Product/123`) or
+   * bare numeric id. Tells multi-product renderers (volume) which of the
+   * bundle's products this embed is standing on; takes precedence over the
+   * handle cascade. Without it (and with no resolvable handle) they bind to
+   * the bundle's first product.
+   */
+  get productIdAttr() {
+    return this.getAttribute("product-id") ?? "";
+  }
   get appUrl() {
     return this.getAttribute("app-url") ?? "";
   }
@@ -6988,7 +6999,7 @@ var LimeBundleElement = class extends HTMLElement {
     });
     const storage = window.localStorage;
     const key = cartStorageKey(this.shopDomain);
-    const existingCartId = storage?.getItem(key) ?? null;
+    let cartId = storage?.getItem(key) ?? null;
     const isStaleCartError = (errors) => errors.length > 0 && errors.every((e) => (e.field ?? []).includes("cartId"));
     const stockCapped = (warnings) => (warnings ?? []).some((w) => w.code === "MERCHANDISE_NOT_ENOUGH_STOCK");
     const fail = (message) => {
@@ -7002,10 +7013,17 @@ var LimeBundleElement = class extends HTMLElement {
     };
     try {
       let checkoutUrl = null;
-      if (existingCartId) {
+      if (cartId) {
+        cartId = await this.clearAbandonedBundleLines(
+          client,
+          cartId,
+          () => storage?.removeItem(key)
+        );
+      }
+      if (cartId) {
         const res = await client.query(
           import_core6.CART_LINES_ADD_MUTATION,
-          { cartId: existingCartId, lines }
+          { cartId, lines }
         );
         const payload = res.cartLinesAdd;
         if (payload?.userErrors?.length) {
@@ -7058,6 +7076,42 @@ var LimeBundleElement = class extends HTMLElement {
       );
     }
   }
+  /**
+   * Remove this widget's own earlier lines — the ones tagged with the
+   * `_lime_bundle_gid` attribute — from the saved cart, so a shopper who
+   * clicked add three times while deciding checks out with only what they
+   * just built. Lines without the tag were put in the cart by something
+   * else (the host site, a previous non-widget purchase flow) and are
+   * left alone.
+   *
+   * Returns the cart id when the cart is still usable. Returns null after
+   * calling `dropSavedCart` when it isn't: either the id no longer
+   * resolves (expired or merged on Shopify's side), or the removal itself
+   * failed — in both cases a fresh cart is the only way to guarantee the
+   * checkout matches the shopper's current build.
+   */
+  async clearAbandonedBundleLines(client, cartId, dropSavedCart) {
+    const res = await client.query(import_core6.CART_LINES_QUERY, {
+      cartId
+    });
+    if (!res.cart) {
+      dropSavedCart();
+      return null;
+    }
+    const abandonedLineIds = res.cart.lines.nodes.filter(
+      (line) => line.attributes.some((attr) => attr.key === BUNDLE_GID_ATTRIBUTE)
+    ).map((line) => line.id);
+    if (abandonedLineIds.length === 0) return cartId;
+    const removal = await client.query(
+      import_core6.CART_LINES_REMOVE_MUTATION,
+      { cartId, lineIds: abandonedLineIds }
+    );
+    if (removal.cartLinesRemove?.userErrors?.length) {
+      dropSavedCart();
+      return null;
+    }
+    return cartId;
+  }
   reportAddToCartEvent(bundle, lines) {
     if (!this.analyticsEnabled || !this.appUrl) return;
     const quantity = lines.reduce((sum, l) => sum + l.quantity, 0);
@@ -7129,7 +7183,10 @@ var LimeBundleElement = class extends HTMLElement {
           );
           break;
         case "volume":
-          renderVolumeBundle(container, bundle, dispatch);
+          renderVolumeBundle(container, bundle, dispatch, {
+            productId: this.productIdAttr || null,
+            productHandle: this.currentProductHandle
+          });
           break;
         case "bogo":
           renderBogoBundle(container, bundle, dispatch, registerCleanup);

package/dist/index.d.cts

@@ -26,6 +26,10 @@ import { BuyerResolver } from '@lime-bundles/core';
  *   3. /products/<handle> segment of window.location.pathname
  *   4. fallthrough: renders nothing, fires `lime-bundle:error`
  *
+ * Multi-product renderers (volume) bind to the product this embed is
+ * standing on: the explicit `product-id` attribute wins, then the handle
+ * cascade above, then the bundle's first product when neither names one.
+ *
  * ## Add-to-cart behaviour
  *
  * Merchants who do nothing get a default: the widget calls Shopify's
@@ -92,6 +96,14 @@ declare class LimeBundleElement extends HTMLElement {
     private get storefrontToken();
     private get bundleGid();
     private get productHandleAttr();
+    /**
+     * The current product's id — full GID (`gid://shopify/Product/123`) or
+     * bare numeric id. Tells multi-product renderers (volume) which of the
+     * bundle's products this embed is standing on; takes precedence over the
+     * handle cascade. Without it (and with no resolvable handle) they bind to
+     * the bundle's first product.
+     */
+    private get productIdAttr();
     private get appUrl();
     private get analyticsEnabled();
     private get country();
@@ -128,6 +140,21 @@ declare class LimeBundleElement extends HTMLElement {
      * instead of creating a new one every click.
      */
     private defaultAddToCart;
+    /**
+     * Remove this widget's own earlier lines — the ones tagged with the
+     * `_lime_bundle_gid` attribute — from the saved cart, so a shopper who
+     * clicked add three times while deciding checks out with only what they
+     * just built. Lines without the tag were put in the cart by something
+     * else (the host site, a previous non-widget purchase flow) and are
+     * left alone.
+     *
+     * Returns the cart id when the cart is still usable. Returns null after
+     * calling `dropSavedCart` when it isn't: either the id no longer
+     * resolves (expired or merged on Shopify's side), or the removal itself
+     * failed — in both cases a fresh cart is the only way to guarantee the
+     * checkout matches the shopper's current build.
+     */
+    private clearAbandonedBundleLines;
     private reportAddToCartEvent;
     private renderBundles;
     private setupImpressionFor;

package/dist/index.d.ts

@@ -26,6 +26,10 @@ import { BuyerResolver } from '@lime-bundles/core';
  *   3. /products/<handle> segment of window.location.pathname
  *   4. fallthrough: renders nothing, fires `lime-bundle:error`
  *
+ * Multi-product renderers (volume) bind to the product this embed is
+ * standing on: the explicit `product-id` attribute wins, then the handle
+ * cascade above, then the bundle's first product when neither names one.
+ *
  * ## Add-to-cart behaviour
  *
  * Merchants who do nothing get a default: the widget calls Shopify's
@@ -92,6 +96,14 @@ declare class LimeBundleElement extends HTMLElement {
     private get storefrontToken();
     private get bundleGid();
     private get productHandleAttr();
+    /**
+     * The current product's id — full GID (`gid://shopify/Product/123`) or
+     * bare numeric id. Tells multi-product renderers (volume) which of the
+     * bundle's products this embed is standing on; takes precedence over the
+     * handle cascade. Without it (and with no resolvable handle) they bind to
+     * the bundle's first product.
+     */
+    private get productIdAttr();
     private get appUrl();
     private get analyticsEnabled();
     private get country();
@@ -128,6 +140,21 @@ declare class LimeBundleElement extends HTMLElement {
      * instead of creating a new one every click.
      */
     private defaultAddToCart;
+    /**
+     * Remove this widget's own earlier lines — the ones tagged with the
+     * `_lime_bundle_gid` attribute — from the saved cart, so a shopper who
+     * clicked add three times while deciding checks out with only what they
+     * just built. Lines without the tag were put in the cart by something
+     * else (the host site, a previous non-widget purchase flow) and are
+     * left alone.
+     *
+     * Returns the cart id when the cart is still usable. Returns null after
+     * calling `dropSavedCart` when it isn't: either the id no longer
+     * resolves (expired or merged on Shopify's side), or the removal itself
+     * failed — in both cases a fresh cart is the only way to guarantee the
+     * checkout matches the shopper's current build.
+     */
+    private clearAbandonedBundleLines;
     private reportAddToCartEvent;
     private renderBundles;
     private setupImpressionFor;

package/dist/index.js

@@ -5,6 +5,8 @@ import {
   BUNDLES_FOR_PRODUCT_QUERY,
   CART_CREATE_MUTATION,
   CART_LINES_ADD_MUTATION,
+  CART_LINES_QUERY,
+  CART_LINES_REMOVE_MUTATION,
   SHOP_SETTINGS_QUERY,
   parseMetaobjectBundle,
   observeImpression,
@@ -19,6 +21,28 @@ import {
   resolveAbTests
 } from "@lime-bundles/core";
 
+// ../render/src/host.ts
+function intlFormatMoney(currencyCode) {
+  return (cents) => {
+    try {
+      return new Intl.NumberFormat(void 0, {
+        style: "currency",
+        currency: currencyCode
+      }).format(cents / 100);
+    } catch {
+      return currencyCode + " " + (cents / 100).toFixed(2);
+    }
+  };
+}
+var BUNDLE_GID_ATTRIBUTE = "_lime_bundle_gid";
+var BUNDLE_TYPE_ATTRIBUTE = "_lime_bundle_type";
+function bundleLineAttributes(bundleGid, bundleType) {
+  return [
+    { key: BUNDLE_GID_ATTRIBUTE, value: bundleGid },
+    { key: BUNDLE_TYPE_ATTRIBUTE, value: bundleType }
+  ];
+}
+
 // ../render/src/adapt.ts
 import {
   formatUnitPrice,
@@ -226,28 +250,6 @@ function recalcPricing(container, products, formatMoney) {
   }
 }
 
-// ../render/src/host.ts
-function intlFormatMoney(currencyCode) {
-  return (cents) => {
-    try {
-      return new Intl.NumberFormat(void 0, {
-        style: "currency",
-        currency: currencyCode
-      }).format(cents / 100);
-    } catch {
-      return currencyCode + " " + (cents / 100).toFixed(2);
-    }
-  };
-}
-var BUNDLE_GID_ATTRIBUTE = "_lime_bundle_gid";
-var BUNDLE_TYPE_ATTRIBUTE = "_lime_bundle_type";
-function bundleLineAttributes(bundleGid, bundleType) {
-  return [
-    { key: BUNDLE_GID_ATTRIBUTE, value: bundleGid },
-    { key: BUNDLE_TYPE_ATTRIBUTE, value: bundleType }
-  ];
-}
-
 // ../render/src/product/option-selects.ts
 function bindVariantSelects(row, getProduct, onSelected) {
   const optionSelects = row.querySelectorAll("[data-variant-option]");
@@ -2809,6 +2811,7 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup, current
 import {
   bestValueTierIndex,
   isVariantFulfillable as isVariantFulfillable2,
+  resolveContextProduct,
   resolveDefaultTierIndex,
   resolvePopularTierIndex,
   stockCapForVariant as stockCapForVariant2
@@ -2941,9 +2944,9 @@ function selectTier(container, allTiers, basePrice, discountType, index, transla
 }
 
 // src/renderers/volume.ts
-function renderVolumeBundle(container, bundle, onAddToCart) {
+function renderVolumeBundle(container, bundle, onAddToCart, productContext) {
   const wc = bundle.widgetConfig;
-  const product = bundle.products[0];
+  const product = resolveContextProduct(bundle.products, productContext);
   if (!product) return;
   const variants = product.variants.nodes;
   const minTierQty = Math.min(
@@ -6742,6 +6745,7 @@ var LimeBundleElement = class extends HTMLElement {
     "storefront-token",
     "bundle-gid",
     "product-handle",
+    "product-id",
     "app-url",
     "analytics",
     "locale",
@@ -6802,7 +6806,7 @@ var LimeBundleElement = class extends HTMLElement {
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue === newValue || !this.isConnected) return;
-    if (name === "bundle-gid" || name === "product-handle" || name === "shop-domain" || name === "storefront-token") {
+    if (name === "bundle-gid" || name === "product-handle" || name === "product-id" || name === "shop-domain" || name === "storefront-token") {
       if (this.shopDomain && this.storefrontToken) {
         this.fetchBundle();
       }
@@ -6820,6 +6824,16 @@ var LimeBundleElement = class extends HTMLElement {
   get productHandleAttr() {
     return this.getAttribute("product-handle") ?? "";
   }
+  /**
+   * The current product's id — full GID (`gid://shopify/Product/123`) or
+   * bare numeric id. Tells multi-product renderers (volume) which of the
+   * bundle's products this embed is standing on; takes precedence over the
+   * handle cascade. Without it (and with no resolvable handle) they bind to
+   * the bundle's first product.
+   */
+  get productIdAttr() {
+    return this.getAttribute("product-id") ?? "";
+  }
   get appUrl() {
     return this.getAttribute("app-url") ?? "";
   }
@@ -6993,7 +7007,7 @@ var LimeBundleElement = class extends HTMLElement {
     });
     const storage = window.localStorage;
     const key = cartStorageKey(this.shopDomain);
-    const existingCartId = storage?.getItem(key) ?? null;
+    let cartId = storage?.getItem(key) ?? null;
     const isStaleCartError = (errors) => errors.length > 0 && errors.every((e) => (e.field ?? []).includes("cartId"));
     const stockCapped = (warnings) => (warnings ?? []).some((w) => w.code === "MERCHANDISE_NOT_ENOUGH_STOCK");
     const fail = (message) => {
@@ -7007,10 +7021,17 @@ var LimeBundleElement = class extends HTMLElement {
     };
     try {
       let checkoutUrl = null;
-      if (existingCartId) {
+      if (cartId) {
+        cartId = await this.clearAbandonedBundleLines(
+          client,
+          cartId,
+          () => storage?.removeItem(key)
+        );
+      }
+      if (cartId) {
         const res = await client.query(
           CART_LINES_ADD_MUTATION,
-          { cartId: existingCartId, lines }
+          { cartId, lines }
         );
         const payload = res.cartLinesAdd;
         if (payload?.userErrors?.length) {
@@ -7063,6 +7084,42 @@ var LimeBundleElement = class extends HTMLElement {
       );
     }
   }
+  /**
+   * Remove this widget's own earlier lines — the ones tagged with the
+   * `_lime_bundle_gid` attribute — from the saved cart, so a shopper who
+   * clicked add three times while deciding checks out with only what they
+   * just built. Lines without the tag were put in the cart by something
+   * else (the host site, a previous non-widget purchase flow) and are
+   * left alone.
+   *
+   * Returns the cart id when the cart is still usable. Returns null after
+   * calling `dropSavedCart` when it isn't: either the id no longer
+   * resolves (expired or merged on Shopify's side), or the removal itself
+   * failed — in both cases a fresh cart is the only way to guarantee the
+   * checkout matches the shopper's current build.
+   */
+  async clearAbandonedBundleLines(client, cartId, dropSavedCart) {
+    const res = await client.query(CART_LINES_QUERY, {
+      cartId
+    });
+    if (!res.cart) {
+      dropSavedCart();
+      return null;
+    }
+    const abandonedLineIds = res.cart.lines.nodes.filter(
+      (line) => line.attributes.some((attr) => attr.key === BUNDLE_GID_ATTRIBUTE)
+    ).map((line) => line.id);
+    if (abandonedLineIds.length === 0) return cartId;
+    const removal = await client.query(
+      CART_LINES_REMOVE_MUTATION,
+      { cartId, lineIds: abandonedLineIds }
+    );
+    if (removal.cartLinesRemove?.userErrors?.length) {
+      dropSavedCart();
+      return null;
+    }
+    return cartId;
+  }
   reportAddToCartEvent(bundle, lines) {
     if (!this.analyticsEnabled || !this.appUrl) return;
     const quantity = lines.reduce((sum, l) => sum + l.quantity, 0);
@@ -7134,7 +7191,10 @@ var LimeBundleElement = class extends HTMLElement {
           );
           break;
         case "volume":
-          renderVolumeBundle(container, bundle, dispatch);
+          renderVolumeBundle(container, bundle, dispatch, {
+            productId: this.productIdAttr || null,
+            productHandle: this.currentProductHandle
+          });
           break;
         case "bogo":
           renderBogoBundle(container, bundle, dispatch, registerCleanup);