@lime-bundles/widget 2.2.0 → 2.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +36 -30
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +20 -12
- package/dist/index.js.map +1 -1
- package/dist/lime-bundle.global.js +33 -24
- package/dist/lime-bundle.global.js.map +1 -1
- package/package.json +2 -2
package/dist/index.cjs
CHANGED
|
@@ -25,6 +25,9 @@ __export(index_exports, {
|
|
|
25
25
|
module.exports = __toCommonJS(index_exports);
|
|
26
26
|
|
|
27
27
|
// src/lime-bundle.ts
|
|
28
|
+
var import_core5 = require("@lime-bundles/core");
|
|
29
|
+
|
|
30
|
+
// src/renderers/fixed.ts
|
|
28
31
|
var import_core4 = require("@lime-bundles/core");
|
|
29
32
|
|
|
30
33
|
// src/renderers/pricing.ts
|
|
@@ -123,11 +126,7 @@ var PLACEHOLDER_THUMB_SVG = `
|
|
|
123
126
|
</svg>`;
|
|
124
127
|
function renderFixedBundle(container, bundle, onAddToCart, onCleanup) {
|
|
125
128
|
const wc = bundle.widgetConfig;
|
|
126
|
-
const qtyFor = (productId, variantId) =>
|
|
127
|
-
const vq = bundle.variantQuantities[variantId];
|
|
128
|
-
if (vq !== void 0) return vq;
|
|
129
|
-
return bundle.productQuantities[productId] ?? 1;
|
|
130
|
-
};
|
|
129
|
+
const qtyFor = (productId, variantId) => (0, import_core4.resolveBundleQty)(bundle, productId, variantId);
|
|
131
130
|
const rows = [];
|
|
132
131
|
let oosCount = 0;
|
|
133
132
|
bundle.products.forEach((product, idx) => {
|
|
@@ -218,9 +217,7 @@ function buildRowState(bundle, product, productIndex) {
|
|
|
218
217
|
const eligibleVariants = selectedVariantIds && selectedVariantIds.length > 0 ? available.filter((v) => selectedVariantIds.includes(v.id)) : available;
|
|
219
218
|
const isOos = eligibleVariants.length === 0;
|
|
220
219
|
const selected = eligibleVariants[0] ?? null;
|
|
221
|
-
const
|
|
222
|
-
const variantQty = selected ? bundle.variantQuantities[selected.id] : void 0;
|
|
223
|
-
const qty = variantQty ?? productQty;
|
|
220
|
+
const qty = selected ? (0, import_core4.resolveBundleQty)(bundle, product.id, selected.id) : 1;
|
|
224
221
|
return { product, eligibleVariants, selected, qty, isOos };
|
|
225
222
|
}
|
|
226
223
|
function renderHeader(bundle, currency) {
|
|
@@ -1412,7 +1409,7 @@ function clamp(n, min, max) {
|
|
|
1412
1409
|
}
|
|
1413
1410
|
|
|
1414
1411
|
// src/lime-bundle.ts
|
|
1415
|
-
var
|
|
1412
|
+
var import_core6 = require("@lime-bundles/core");
|
|
1416
1413
|
|
|
1417
1414
|
// src/styles/bundle-css.ts
|
|
1418
1415
|
var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle widget types */
|
|
@@ -1487,11 +1484,20 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
|
|
|
1487
1484
|
display: none;
|
|
1488
1485
|
}
|
|
1489
1486
|
|
|
1490
|
-
/*
|
|
1491
|
-
|
|
1487
|
+
/* Sibling widget spacing \u2014 separates multiple bundles on the same product page.
|
|
1488
|
+
Uses \`~\` (general sibling) rather than \`+\` (adjacent) because each Liquid
|
|
1489
|
+
loop iteration emits a {% style %} block before its widget div, so the
|
|
1490
|
+
rendered DOM alternates <style><widget><style><widget>. The \`+\` combinator
|
|
1491
|
+
requires immediate adjacency and would match nothing; \`~\` matches every
|
|
1492
|
+
widget after the first regardless of elements between. Single-widget pages
|
|
1493
|
+
stay unaffected (no prior \`.lb-bundle-widget\` sibling to match against).
|
|
1494
|
+
Only \`margin-top\` \u2014 do NOT override \`padding-top\` here. The gradient header
|
|
1495
|
+
uses \`margin-top: calc(-1 * var(--lb-widget-pad))\` to reach the widget's
|
|
1496
|
+
inner border edge, assuming padding-top == --lb-widget-pad. Changing
|
|
1497
|
+
padding-top on the subsequent widget breaks that math and leaves a visible
|
|
1498
|
+
gap above the header. */
|
|
1499
|
+
.lb-bundle-widget ~ .lb-bundle-widget {
|
|
1492
1500
|
margin-top: 24px;
|
|
1493
|
-
padding-top: 24px;
|
|
1494
|
-
border-top: 1px solid var(--lb-border);
|
|
1495
1501
|
}
|
|
1496
1502
|
|
|
1497
1503
|
/* Header \u2014 gradient banner with title + savings badge */
|
|
@@ -2748,7 +2754,7 @@ var LimeBundleElement = class extends HTMLElement {
|
|
|
2748
2754
|
const controller = new AbortController();
|
|
2749
2755
|
this.abortController = controller;
|
|
2750
2756
|
this.renderLoading();
|
|
2751
|
-
const client = (0,
|
|
2757
|
+
const client = (0, import_core5.createStorefrontClient)({
|
|
2752
2758
|
shopDomain: this.shopDomain,
|
|
2753
2759
|
accessToken: this.storefrontToken
|
|
2754
2760
|
});
|
|
@@ -2773,7 +2779,7 @@ var LimeBundleElement = class extends HTMLElement {
|
|
|
2773
2779
|
handle
|
|
2774
2780
|
);
|
|
2775
2781
|
}
|
|
2776
|
-
const cssPromise = client.query(
|
|
2782
|
+
const cssPromise = client.query(import_core5.SHOP_CUSTOM_CSS_QUERY, void 0, {
|
|
2777
2783
|
signal: controller.signal
|
|
2778
2784
|
}).catch(() => null);
|
|
2779
2785
|
await bundlePromise;
|
|
@@ -2785,8 +2791,8 @@ var LimeBundleElement = class extends HTMLElement {
|
|
|
2785
2791
|
}
|
|
2786
2792
|
const css = await cssPromise;
|
|
2787
2793
|
if (css?.shop?.metafield?.value) {
|
|
2788
|
-
(0,
|
|
2789
|
-
const sanitized = (0,
|
|
2794
|
+
(0, import_core5.injectCustomCss)(this.shopDomain, css.shop.metafield.value);
|
|
2795
|
+
const sanitized = (0, import_core5.sanitizeCustomCss)(css.shop.metafield.value);
|
|
2790
2796
|
if (sanitized.ok) this.shopCustomCss = sanitized.css;
|
|
2791
2797
|
}
|
|
2792
2798
|
await this.applyABVariants();
|
|
@@ -2814,14 +2820,14 @@ var LimeBundleElement = class extends HTMLElement {
|
|
|
2814
2820
|
this.bundles.map(async (bundle) => {
|
|
2815
2821
|
if (!bundle.abTestId || !bundle.abVariantB) return bundle;
|
|
2816
2822
|
try {
|
|
2817
|
-
const assignment = await (0,
|
|
2823
|
+
const assignment = await (0, import_core5.getABTestAssignment)(
|
|
2818
2824
|
this.appUrl,
|
|
2819
2825
|
this.shopDomain,
|
|
2820
2826
|
bundle.abTestId,
|
|
2821
2827
|
bundle.id
|
|
2822
2828
|
);
|
|
2823
2829
|
if (assignment?.variant === "B") {
|
|
2824
|
-
return (0,
|
|
2830
|
+
return (0, import_core5.applyABVariantB)(bundle);
|
|
2825
2831
|
}
|
|
2826
2832
|
} catch (err) {
|
|
2827
2833
|
console.warn(
|
|
@@ -2836,7 +2842,7 @@ var LimeBundleElement = class extends HTMLElement {
|
|
|
2836
2842
|
}
|
|
2837
2843
|
async fetchSingleBundle(client, signal) {
|
|
2838
2844
|
const data = await client.query(
|
|
2839
|
-
|
|
2845
|
+
import_core5.BUNDLE_METAOBJECT_QUERY,
|
|
2840
2846
|
{ id: this.bundleGid },
|
|
2841
2847
|
{ signal }
|
|
2842
2848
|
);
|
|
@@ -2844,7 +2850,7 @@ var LimeBundleElement = class extends HTMLElement {
|
|
|
2844
2850
|
this.bundles = [];
|
|
2845
2851
|
return;
|
|
2846
2852
|
}
|
|
2847
|
-
const parsed = (0,
|
|
2853
|
+
const parsed = (0, import_core5.parseMetaobjectBundle)(
|
|
2848
2854
|
data.metaobject.id,
|
|
2849
2855
|
data.metaobject.fields
|
|
2850
2856
|
);
|
|
@@ -2852,7 +2858,7 @@ var LimeBundleElement = class extends HTMLElement {
|
|
|
2852
2858
|
}
|
|
2853
2859
|
async fetchProductBundles(client, signal, productHandle) {
|
|
2854
2860
|
const data = await client.query(
|
|
2855
|
-
|
|
2861
|
+
import_core5.BUNDLES_FOR_PRODUCT_QUERY,
|
|
2856
2862
|
{ handle: productHandle },
|
|
2857
2863
|
{ signal }
|
|
2858
2864
|
);
|
|
@@ -2863,7 +2869,7 @@ var LimeBundleElement = class extends HTMLElement {
|
|
|
2863
2869
|
const refs = data.product.metafield?.references?.nodes ?? [];
|
|
2864
2870
|
const bundles = [];
|
|
2865
2871
|
for (const ref of refs) {
|
|
2866
|
-
const parsed = (0,
|
|
2872
|
+
const parsed = (0, import_core5.parseMetaobjectBundle)(ref.id, ref.fields);
|
|
2867
2873
|
if (parsed) bundles.push(parsed);
|
|
2868
2874
|
}
|
|
2869
2875
|
this.bundles = bundles;
|
|
@@ -2896,7 +2902,7 @@ var LimeBundleElement = class extends HTMLElement {
|
|
|
2896
2902
|
*/
|
|
2897
2903
|
async defaultAddToCart(lines) {
|
|
2898
2904
|
if (typeof window === "undefined") return;
|
|
2899
|
-
const client = (0,
|
|
2905
|
+
const client = (0, import_core5.createStorefrontClient)({
|
|
2900
2906
|
shopDomain: this.shopDomain,
|
|
2901
2907
|
accessToken: this.storefrontToken
|
|
2902
2908
|
});
|
|
@@ -2907,7 +2913,7 @@ var LimeBundleElement = class extends HTMLElement {
|
|
|
2907
2913
|
let checkoutUrl = null;
|
|
2908
2914
|
if (existingCartId) {
|
|
2909
2915
|
const res = await client.query(
|
|
2910
|
-
|
|
2916
|
+
import_core5.CART_LINES_ADD_MUTATION,
|
|
2911
2917
|
{ cartId: existingCartId, lines }
|
|
2912
2918
|
);
|
|
2913
2919
|
const payload = res.cartLinesAdd;
|
|
@@ -2919,7 +2925,7 @@ var LimeBundleElement = class extends HTMLElement {
|
|
|
2919
2925
|
}
|
|
2920
2926
|
if (!checkoutUrl) {
|
|
2921
2927
|
const res = await client.query(
|
|
2922
|
-
|
|
2928
|
+
import_core5.CART_CREATE_MUTATION,
|
|
2923
2929
|
{ input: { lines } }
|
|
2924
2930
|
);
|
|
2925
2931
|
const payload = res.cartCreate;
|
|
@@ -2965,7 +2971,7 @@ var LimeBundleElement = class extends HTMLElement {
|
|
|
2965
2971
|
const price = variant ? parseFloat(variant.price.amount) : 0;
|
|
2966
2972
|
return sum + price * line.quantity;
|
|
2967
2973
|
}, 0);
|
|
2968
|
-
(0,
|
|
2974
|
+
(0, import_core5.reportAddToCart)(
|
|
2969
2975
|
{ shopDomain: this.shopDomain, appUrl: this.appUrl },
|
|
2970
2976
|
{
|
|
2971
2977
|
bundleGid: bundle.id,
|
|
@@ -3001,7 +3007,7 @@ var LimeBundleElement = class extends HTMLElement {
|
|
|
3001
3007
|
container.setAttribute("aria-label", bundle.title);
|
|
3002
3008
|
container.setAttribute("data-bundle-type", bundle.bundleType);
|
|
3003
3009
|
container.setAttribute("data-bundle-gid", bundle.id);
|
|
3004
|
-
(0,
|
|
3010
|
+
(0, import_core6.applyWidgetConfigVars)(container, bundle.widgetConfig);
|
|
3005
3011
|
const dispatch = (lines) => this.handleAddToCart(bundle, lines);
|
|
3006
3012
|
const registerCleanup = (fn) => this.renderCleanups.push(fn);
|
|
3007
3013
|
switch (bundle.bundleType) {
|
|
@@ -3036,8 +3042,8 @@ var LimeBundleElement = class extends HTMLElement {
|
|
|
3036
3042
|
}
|
|
3037
3043
|
setupImpressionFor(bundle, element) {
|
|
3038
3044
|
if (!this.analyticsEnabled || !this.appUrl) return;
|
|
3039
|
-
const cleanup = (0,
|
|
3040
|
-
(0,
|
|
3045
|
+
const cleanup = (0, import_core5.observeImpression)(element, () => {
|
|
3046
|
+
(0, import_core5.reportImpression)(
|
|
3041
3047
|
{ shopDomain: this.shopDomain, appUrl: this.appUrl },
|
|
3042
3048
|
{
|
|
3043
3049
|
bundleGid: bundle.id,
|