@liquidcommerce/elements-sdk 2.5.6-beta.5 → 2.5.6-beta.7
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/README.md +18 -15
- package/dist/index.esm.js +9403 -9336
- package/dist/types/constants/core.constant.d.ts +1 -0
- package/dist/types/core/google-tag-manager.service.d.ts +0 -19
- package/dist/types/core/pubsub/interfaces/cart.interface.d.ts +0 -2
- package/dist/types/core/pubsub/interfaces/checkout.interface.d.ts +0 -7
- package/dist/types/core/pubsub/interfaces/core.interface.d.ts +14 -8
- package/dist/types/core/pubsub/interfaces/product.interface.d.ts +0 -6
- package/dist/types/enums/core.enum.d.ts +5 -4
- package/dist/types/modules/product/utils/helpers.d.ts +0 -7
- package/docs/ACTIONS.md +29 -29
- package/docs/EVENTS.md +62 -29
- package/docs/THEMING.md +2 -5
- package/package.json +3 -3
- package/umd/elements.js +1 -1
|
@@ -80,26 +80,7 @@ export declare class GoogleTagManagerService {
|
|
|
80
80
|
removeFromCart(item: BaseItem): void;
|
|
81
81
|
beginCheckout(items: BaseItem[], coupon?: string): void;
|
|
82
82
|
addShippingInfo(items: BaseItem[], coupon?: string): void;
|
|
83
|
-
addShippingInfoWithCustomerData(value: number, coupon?: string, customerData?: {
|
|
84
|
-
phone?: string;
|
|
85
|
-
email?: string;
|
|
86
|
-
birth_date?: string;
|
|
87
|
-
customer_id?: string;
|
|
88
|
-
}, amounts?: {
|
|
89
|
-
subtotal?: number;
|
|
90
|
-
total_before_discounts?: number;
|
|
91
|
-
discounts?: number;
|
|
92
|
-
gift_cards?: number;
|
|
93
|
-
net_total?: number;
|
|
94
|
-
}): void;
|
|
95
83
|
addPaymentInfo(items: BaseItem[], paymentType?: string, coupon?: string): void;
|
|
96
|
-
addPaymentInfoWithoutItems(value: number, paymentType?: string, coupon?: string, amounts?: {
|
|
97
|
-
subtotal?: number;
|
|
98
|
-
total_before_discounts?: number;
|
|
99
|
-
discounts?: number;
|
|
100
|
-
gift_cards?: number;
|
|
101
|
-
net_total?: number;
|
|
102
|
-
}): void;
|
|
103
84
|
purchase(purchaseData: PurchaseData & {
|
|
104
85
|
subtotal?: number;
|
|
105
86
|
total_before_discounts?: number;
|
|
@@ -92,11 +92,9 @@ export interface ICartItemEngravingUpdatedEventData {
|
|
|
92
92
|
export interface ICartPromoCodeEventData {
|
|
93
93
|
discountAmount?: number;
|
|
94
94
|
newTotal?: number;
|
|
95
|
-
applied: boolean;
|
|
96
95
|
}
|
|
97
96
|
export interface ICartPromoCodeFailedEventData {
|
|
98
97
|
error: string;
|
|
99
|
-
attempted: boolean;
|
|
100
98
|
}
|
|
101
99
|
export interface ICartProductAddEventData {
|
|
102
100
|
itemsAdded: number;
|
|
@@ -43,25 +43,18 @@ export interface ICheckoutItemEngravingUpdatedEventData {
|
|
|
43
43
|
engravingLines: string[];
|
|
44
44
|
previousEngravingLines: string[];
|
|
45
45
|
}
|
|
46
|
-
export interface ICheckoutFormUpdatedEventData {
|
|
47
|
-
fieldName: string;
|
|
48
|
-
}
|
|
49
46
|
export interface ICheckoutPromoCodeEventData {
|
|
50
47
|
discountAmount?: number;
|
|
51
48
|
newTotal?: number;
|
|
52
|
-
applied: boolean;
|
|
53
49
|
}
|
|
54
50
|
export interface ICheckoutPromoCodeFailedEventData {
|
|
55
51
|
error: string;
|
|
56
|
-
attempted: boolean;
|
|
57
52
|
}
|
|
58
53
|
export interface ICheckoutGiftCardEventData {
|
|
59
|
-
applied: boolean;
|
|
60
54
|
newTotal?: number;
|
|
61
55
|
}
|
|
62
56
|
export interface ICheckoutGiftCardFailedEventData {
|
|
63
57
|
error: string;
|
|
64
|
-
attempted: boolean;
|
|
65
58
|
}
|
|
66
59
|
export interface ICheckoutProductAddEventData {
|
|
67
60
|
itemsAdded: number;
|
|
@@ -1,8 +1,14 @@
|
|
|
1
1
|
import type { IAddressActionEventData } from '@/core/pubsub/interfaces/address.interface';
|
|
2
2
|
import type { ICartFailedEventData, ICartItemAddedEventData, ICartItemEngravingUpdatedEventData, ICartItemQuantityChangedEventData, ICartItemRemovedEventData, ICartLoadedEventData, ICartProductAddEventData, ICartProductAddFailedEventData, ICartPromoCodeEventData, ICartPromoCodeFailedEventData, ICartUpdatedEventData } from '@/core/pubsub/interfaces/cart.interface';
|
|
3
|
-
import type { ICheckoutFailedEventData,
|
|
4
|
-
import type {
|
|
3
|
+
import type { ICheckoutFailedEventData, ICheckoutGiftCardEventData, ICheckoutGiftCardFailedEventData, ICheckoutItemEngravingUpdatedEventData, ICheckoutItemQuantityChangedEventData, ICheckoutItemRemovedEventData, ICheckoutLoadedEventData, ICheckoutMarketingPreferencesToggleEventData, ICheckoutProductAddEventData, ICheckoutProductAddFailedEventData, ICheckoutPromoCodeEventData, ICheckoutPromoCodeFailedEventData, ICheckoutSubmitCompletedEventData, ICheckoutSubmitFailedEventData, ICheckoutSubmitStartedEventData, ICheckoutTipUpdatedEventData, ICheckoutToggleEventData } from '@/core/pubsub/interfaces/checkout.interface';
|
|
4
|
+
import type { IProductAddToCartEventData, IProductFulfillmentChangedEventData, IProductFulfillmentTypeChangedEventData, IProductLoadedEventData, IProductQuantityChangedEventData, IProductSizeChangedEventData } from '@/core/pubsub/interfaces/product.interface';
|
|
5
5
|
import { ELEMENTS_ACTIONS_EVENT } from '@/enums';
|
|
6
|
+
export interface IElementsClientIsReadyEventData {
|
|
7
|
+
isReady: boolean;
|
|
8
|
+
message: string;
|
|
9
|
+
timestamp: number;
|
|
10
|
+
version?: string;
|
|
11
|
+
}
|
|
6
12
|
export interface IEventMetadata {
|
|
7
13
|
eventId: string;
|
|
8
14
|
namespace: 'actions' | 'forms';
|
|
@@ -17,6 +23,9 @@ export interface IEnhancedEventData<T> {
|
|
|
17
23
|
}
|
|
18
24
|
export interface IElementsActionsEventsMap {
|
|
19
25
|
[ELEMENTS_ACTIONS_EVENT.CLIENT_READY]: IElementsClientIsReadyEventData;
|
|
26
|
+
[ELEMENTS_ACTIONS_EVENT.ADDRESS_UPDATED]: IAddressActionEventData;
|
|
27
|
+
[ELEMENTS_ACTIONS_EVENT.ADDRESS_CLEARED]: boolean;
|
|
28
|
+
[ELEMENTS_ACTIONS_EVENT.ADDRESS_FAILED]: IAddressActionEventData;
|
|
20
29
|
[ELEMENTS_ACTIONS_EVENT.PRODUCT_LOADED]: IProductLoadedEventData;
|
|
21
30
|
[ELEMENTS_ACTIONS_EVENT.PRODUCT_QUANTITY_DECREASE]: IProductQuantityChangedEventData;
|
|
22
31
|
[ELEMENTS_ACTIONS_EVENT.PRODUCT_QUANTITY_INCREASE]: IProductQuantityChangedEventData;
|
|
@@ -40,9 +49,6 @@ export interface IElementsActionsEventsMap {
|
|
|
40
49
|
[ELEMENTS_ACTIONS_EVENT.CART_PROMO_CODE_FAILED]: ICartPromoCodeFailedEventData;
|
|
41
50
|
[ELEMENTS_ACTIONS_EVENT.CART_PRODUCT_ADD_SUCCESS]: ICartProductAddEventData;
|
|
42
51
|
[ELEMENTS_ACTIONS_EVENT.CART_PRODUCT_ADD_FAILED]: ICartProductAddFailedEventData;
|
|
43
|
-
[ELEMENTS_ACTIONS_EVENT.ADDRESS_UPDATED]: IAddressActionEventData;
|
|
44
|
-
[ELEMENTS_ACTIONS_EVENT.ADDRESS_CLEARED]: boolean;
|
|
45
|
-
[ELEMENTS_ACTIONS_EVENT.ADDRESS_FAILED]: IAddressActionEventData;
|
|
46
52
|
[ELEMENTS_ACTIONS_EVENT.CHECKOUT_OPENED]: boolean;
|
|
47
53
|
[ELEMENTS_ACTIONS_EVENT.CHECKOUT_CLOSED]: boolean;
|
|
48
54
|
[ELEMENTS_ACTIONS_EVENT.CHECKOUT_LOADED]: ICheckoutLoadedEventData;
|
|
@@ -50,9 +56,9 @@ export interface IElementsActionsEventsMap {
|
|
|
50
56
|
[ELEMENTS_ACTIONS_EVENT.CHECKOUT_IS_GIFT_TOGGLED]: ICheckoutToggleEventData;
|
|
51
57
|
[ELEMENTS_ACTIONS_EVENT.CHECKOUT_BILLING_SAME_AS_SHIPPING_TOGGLED]: ICheckoutToggleEventData;
|
|
52
58
|
[ELEMENTS_ACTIONS_EVENT.CHECKOUT_MARKETING_PREFERENCES_TOGGLED]: ICheckoutMarketingPreferencesToggleEventData;
|
|
53
|
-
[ELEMENTS_ACTIONS_EVENT.CHECKOUT_CUSTOMER_INFORMATION_UPDATED]:
|
|
54
|
-
[ELEMENTS_ACTIONS_EVENT.
|
|
55
|
-
[ELEMENTS_ACTIONS_EVENT.
|
|
59
|
+
[ELEMENTS_ACTIONS_EVENT.CHECKOUT_CUSTOMER_INFORMATION_UPDATED]: boolean;
|
|
60
|
+
[ELEMENTS_ACTIONS_EVENT.CHECKOUT_GIFT_INFORMATION_UPDATED]: boolean;
|
|
61
|
+
[ELEMENTS_ACTIONS_EVENT.CHECKOUT_BILLING_INFORMATION_UPDATED]: boolean;
|
|
56
62
|
[ELEMENTS_ACTIONS_EVENT.CHECKOUT_ITEM_REMOVED]: ICheckoutItemRemovedEventData;
|
|
57
63
|
[ELEMENTS_ACTIONS_EVENT.CHECKOUT_ITEM_QUANTITY_INCREASE]: ICheckoutItemQuantityChangedEventData;
|
|
58
64
|
[ELEMENTS_ACTIONS_EVENT.CHECKOUT_ITEM_QUANTITY_DECREASE]: ICheckoutItemQuantityChangedEventData;
|
|
@@ -1,11 +1,5 @@
|
|
|
1
1
|
import type { FulfillmentType } from '@/enums';
|
|
2
2
|
import type { IAddress, ICoords } from '@/interfaces/cloud';
|
|
3
|
-
export interface IElementsClientIsReadyEventData {
|
|
4
|
-
isReady: boolean;
|
|
5
|
-
message: string;
|
|
6
|
-
timestamp: number;
|
|
7
|
-
version?: string;
|
|
8
|
-
}
|
|
9
3
|
export interface IBaseProductFulfillmentEventData {
|
|
10
4
|
price: number;
|
|
11
5
|
partNumber: string;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export declare const ELEMENTS_ENV: {
|
|
2
|
+
readonly BETA: "beta";
|
|
2
3
|
readonly LOCAL: "local";
|
|
3
4
|
readonly DEVELOPMENT: "development";
|
|
4
5
|
readonly STAGING: "staging";
|
|
@@ -7,6 +8,9 @@ export declare const ELEMENTS_ENV: {
|
|
|
7
8
|
export type ElementsEnv = (typeof ELEMENTS_ENV)[keyof typeof ELEMENTS_ENV];
|
|
8
9
|
export declare const ELEMENTS_ACTIONS_EVENT: {
|
|
9
10
|
readonly CLIENT_READY: "client_ready";
|
|
11
|
+
readonly ADDRESS_UPDATED: "address_updated";
|
|
12
|
+
readonly ADDRESS_CLEARED: "address_cleared";
|
|
13
|
+
readonly ADDRESS_FAILED: "address_failed";
|
|
10
14
|
readonly PRODUCT_LOADED: "product_loaded";
|
|
11
15
|
readonly PRODUCT_QUANTITY_INCREASE: "product_quantity_increase";
|
|
12
16
|
readonly PRODUCT_QUANTITY_DECREASE: "product_quantity_decrease";
|
|
@@ -30,9 +34,6 @@ export declare const ELEMENTS_ACTIONS_EVENT: {
|
|
|
30
34
|
readonly CART_PROMO_CODE_FAILED: "cart_promo_code_failed";
|
|
31
35
|
readonly CART_PRODUCT_ADD_SUCCESS: "cart_product_add_success";
|
|
32
36
|
readonly CART_PRODUCT_ADD_FAILED: "cart_product_add_failed";
|
|
33
|
-
readonly ADDRESS_UPDATED: "address_updated";
|
|
34
|
-
readonly ADDRESS_CLEARED: "address_cleared";
|
|
35
|
-
readonly ADDRESS_FAILED: "address_failed";
|
|
36
37
|
readonly CHECKOUT_LOADED: "checkout_loaded";
|
|
37
38
|
readonly CHECKOUT_OPENED: "checkout_opened";
|
|
38
39
|
readonly CHECKOUT_CLOSED: "checkout_closed";
|
|
@@ -41,8 +42,8 @@ export declare const ELEMENTS_ACTIONS_EVENT: {
|
|
|
41
42
|
readonly CHECKOUT_BILLING_SAME_AS_SHIPPING_TOGGLED: "checkout_billing_same_as_shipping_toggled";
|
|
42
43
|
readonly CHECKOUT_MARKETING_PREFERENCES_TOGGLED: "checkout_marketing_preferences_toggled";
|
|
43
44
|
readonly CHECKOUT_CUSTOMER_INFORMATION_UPDATED: "checkout_customer_information_updated";
|
|
44
|
-
readonly CHECKOUT_BILLING_INFORMATION_UPDATED: "checkout_billing_information_updated";
|
|
45
45
|
readonly CHECKOUT_GIFT_INFORMATION_UPDATED: "checkout_gift_information_updated";
|
|
46
|
+
readonly CHECKOUT_BILLING_INFORMATION_UPDATED: "checkout_billing_information_updated";
|
|
46
47
|
readonly CHECKOUT_ITEM_REMOVED: "checkout_item_removed";
|
|
47
48
|
readonly CHECKOUT_ITEM_QUANTITY_INCREASE: "checkout_item_quantity_increase";
|
|
48
49
|
readonly CHECKOUT_ITEM_QUANTITY_DECREASE: "checkout_item_quantity_decrease";
|
|
@@ -1,10 +1,3 @@
|
|
|
1
1
|
import type { IProductFulfillmentStore } from '@/core/store/interfaces/product.interface';
|
|
2
2
|
import { type FulfillmentType } from '@/enums';
|
|
3
|
-
import type { IProductSize, IRetailer } from '@/interfaces/cloud';
|
|
4
|
-
export declare const filterRetailersByFulfillmentType: ({ retailers, selectedSize, engravingLines, fulfillmentType, }: {
|
|
5
|
-
retailers: IRetailer[];
|
|
6
|
-
selectedSize: IProductSize | null;
|
|
7
|
-
engravingLines: string[];
|
|
8
|
-
fulfillmentType: FulfillmentType;
|
|
9
|
-
}) => IRetailer[];
|
|
10
3
|
export declare function fulfillmentAddress(address: IProductFulfillmentStore['retailerAddress'], selectedFulfillmentType: FulfillmentType): string;
|
package/docs/ACTIONS.md
CHANGED
|
@@ -24,15 +24,15 @@ const actions = window.elements.actions;
|
|
|
24
24
|
// 1. Fire the action (simple, clean)
|
|
25
25
|
await actions.cart.applyPromoCode('SAVE20');
|
|
26
26
|
|
|
27
|
-
// 2. Listen for success/failure feedback via events
|
|
27
|
+
// 2. Listen for success/failure feedback via events
|
|
28
28
|
window.addEventListener('lce:actions.cart_promo_code_applied', function(event) {
|
|
29
|
-
const {
|
|
29
|
+
const { discountAmount, newTotal } = event.detail.data;
|
|
30
30
|
showSuccessMessage(`🎉 Promo applied! You saved $${discountAmount}!`);
|
|
31
31
|
updateCartDisplay(newTotal);
|
|
32
32
|
});
|
|
33
33
|
|
|
34
34
|
window.addEventListener('lce:actions.cart_promo_code_failed', function(event) {
|
|
35
|
-
const {
|
|
35
|
+
const { error } = event.detail.data;
|
|
36
36
|
showErrorMessage('Promo code could not be applied. Please try again.');
|
|
37
37
|
});
|
|
38
38
|
```
|
|
@@ -262,26 +262,26 @@ All actions provide feedback through events. Here are all available success/fail
|
|
|
262
262
|
'lce:actions.cart_product_add_failed' // { identifiers: string[], error: string }
|
|
263
263
|
|
|
264
264
|
// Promo code management
|
|
265
|
-
'lce:actions.cart_promo_code_applied' // {
|
|
266
|
-
'lce:actions.cart_promo_code_removed' // {
|
|
267
|
-
'lce:actions.cart_promo_code_failed' // {
|
|
265
|
+
'lce:actions.cart_promo_code_applied' // { discountAmount?: number, newTotal?: number }
|
|
266
|
+
'lce:actions.cart_promo_code_removed' // { newTotal?: number }
|
|
267
|
+
'lce:actions.cart_promo_code_failed' // { error: string }
|
|
268
268
|
```
|
|
269
269
|
|
|
270
270
|
### **Checkout Action Events**
|
|
271
271
|
```javascript
|
|
272
|
-
// Product management
|
|
273
|
-
'lce:actions.checkout_product_add_success' // { itemsAdded: number, identifiers: string[] }
|
|
274
|
-
'lce:actions.checkout_product_add_failed' // { identifiers: string[], error: string }
|
|
272
|
+
// Product management
|
|
273
|
+
'lce:actions.checkout_product_add_success' // { itemsAdded: number, identifiers: string[], isPresale?: boolean }
|
|
274
|
+
'lce:actions.checkout_product_add_failed' // { identifiers: string[], error: string, isPresale?: boolean }
|
|
275
275
|
|
|
276
276
|
// Promo code management
|
|
277
|
-
'lce:actions.checkout_promo_code_applied' // {
|
|
278
|
-
'lce:actions.checkout_promo_code_removed' // {
|
|
279
|
-
'lce:actions.checkout_promo_code_failed' // {
|
|
277
|
+
'lce:actions.checkout_promo_code_applied' // { discountAmount?: number, newTotal?: number }
|
|
278
|
+
'lce:actions.checkout_promo_code_removed' // { newTotal?: number }
|
|
279
|
+
'lce:actions.checkout_promo_code_failed' // { error: string }
|
|
280
280
|
|
|
281
281
|
// Gift card management
|
|
282
|
-
'lce:actions.checkout_gift_card_applied' // {
|
|
283
|
-
'lce:actions.checkout_gift_card_removed' // {
|
|
284
|
-
'lce:actions.checkout_gift_card_failed' // {
|
|
282
|
+
'lce:actions.checkout_gift_card_applied' // { newTotal?: number }
|
|
283
|
+
'lce:actions.checkout_gift_card_removed' // { newTotal?: number }
|
|
284
|
+
'lce:actions.checkout_gift_card_failed' // { error: string }
|
|
285
285
|
```
|
|
286
286
|
|
|
287
287
|
### **Address Action Events**
|
|
@@ -335,14 +335,14 @@ window.addEventListener('lce:actions.cart_product_add_success', function(event)
|
|
|
335
335
|
```javascript
|
|
336
336
|
// ✅ Create reusable handlers
|
|
337
337
|
const handlePromoSuccess = (event) => {
|
|
338
|
-
const {
|
|
338
|
+
const { discountAmount, newTotal } = event.detail.data;
|
|
339
339
|
showSuccessMessage(`Discount applied! Saved: $${discountAmount}`);
|
|
340
340
|
updatePriceDisplay(newTotal);
|
|
341
341
|
trackPromoSuccess(discountAmount);
|
|
342
342
|
};
|
|
343
343
|
|
|
344
344
|
const handlePromoFailure = (event) => {
|
|
345
|
-
const {
|
|
345
|
+
const { error } = event.detail.data;
|
|
346
346
|
showErrorMessage('Promo code could not be applied');
|
|
347
347
|
trackPromoFailure();
|
|
348
348
|
};
|
|
@@ -472,19 +472,19 @@ await actions.cart.applyPromoCode('WELCOME10');
|
|
|
472
472
|
|
|
473
473
|
// Listen for success
|
|
474
474
|
window.addEventListener('lce:actions.cart_promo_code_applied', function(event) {
|
|
475
|
-
const {
|
|
475
|
+
const { discountAmount, newTotal } = event.detail.data;
|
|
476
476
|
showMessage(`Welcome discount applied! You saved $${discountAmount}!`);
|
|
477
477
|
updateCartDisplay(newTotal);
|
|
478
|
-
|
|
478
|
+
|
|
479
479
|
// Track successful promo usage
|
|
480
480
|
analytics.track('Promo Applied', { discount: discountAmount });
|
|
481
481
|
});
|
|
482
482
|
|
|
483
483
|
// Listen for failure and try fallback
|
|
484
484
|
window.addEventListener('lce:actions.cart_promo_code_failed', function(event) {
|
|
485
|
-
const {
|
|
485
|
+
const { error } = event.detail.data;
|
|
486
486
|
console.log('First promo failed, trying backup promo');
|
|
487
|
-
|
|
487
|
+
|
|
488
488
|
// Try another strategy
|
|
489
489
|
actions.cart.applyPromoCode('FIRSTTIME');
|
|
490
490
|
});
|
|
@@ -494,9 +494,9 @@ await actions.cart.removePromoCode();
|
|
|
494
494
|
|
|
495
495
|
// Listen for removal confirmation
|
|
496
496
|
window.addEventListener('lce:actions.cart_promo_code_removed', function(event) {
|
|
497
|
-
const {
|
|
497
|
+
const { newTotal } = event.detail.data;
|
|
498
498
|
showMessage("Previous promo removed. Applying better discount...");
|
|
499
|
-
|
|
499
|
+
|
|
500
500
|
// Apply better deal
|
|
501
501
|
actions.cart.applyPromoCode('BETTER20');
|
|
502
502
|
});
|
|
@@ -624,31 +624,31 @@ const customer = getCurrentCustomer();
|
|
|
624
624
|
|
|
625
625
|
// Set up event listeners first
|
|
626
626
|
window.addEventListener('lce:actions.checkout_promo_code_applied', function(event) {
|
|
627
|
-
const {
|
|
627
|
+
const { discountAmount, newTotal } = event.detail.data;
|
|
628
628
|
showCheckoutSuccess(`Discount applied! You saved $${discountAmount}`);
|
|
629
629
|
updateCheckoutTotal(newTotal);
|
|
630
|
-
|
|
630
|
+
|
|
631
631
|
// Track successful conversion optimization
|
|
632
632
|
analytics.track('Checkout Discount Applied', { discount: discountAmount });
|
|
633
633
|
});
|
|
634
634
|
|
|
635
635
|
window.addEventListener('lce:actions.checkout_promo_code_failed', function(event) {
|
|
636
|
-
const {
|
|
636
|
+
const { error } = event.detail.data;
|
|
637
637
|
console.log('Promo code failed:', error);
|
|
638
|
-
|
|
638
|
+
|
|
639
639
|
// Try fallback strategies or notify user
|
|
640
640
|
showCheckoutError('Discount could not be applied');
|
|
641
641
|
});
|
|
642
642
|
|
|
643
643
|
// Apply gift card event listeners
|
|
644
644
|
window.addEventListener('lce:actions.checkout_gift_card_applied', function(event) {
|
|
645
|
-
const {
|
|
645
|
+
const { newTotal } = event.detail.data;
|
|
646
646
|
showCheckoutSuccess('Gift card applied to your order!');
|
|
647
647
|
updateCheckoutTotal(newTotal);
|
|
648
648
|
});
|
|
649
649
|
|
|
650
650
|
window.addEventListener('lce:actions.checkout_gift_card_failed', function(event) {
|
|
651
|
-
const {
|
|
651
|
+
const { error } = event.detail.data;
|
|
652
652
|
showCheckoutError('Gift card could not be applied. Please check and try again.');
|
|
653
653
|
});
|
|
654
654
|
|
package/docs/EVENTS.md
CHANGED
|
@@ -293,10 +293,13 @@ window.addEventListener('lce:actions.cart_loaded', function(event) {
|
|
|
293
293
|
'lce:actions.checkout_submit_completed' // → "SALE COMPLETED! 🎉"
|
|
294
294
|
'lce:actions.checkout_submit_failed' // → "Sale lost - fix the issue!"
|
|
295
295
|
|
|
296
|
-
// Form updates
|
|
296
|
+
// Form updates (Security: returns boolean only, no sensitive data)
|
|
297
297
|
'lce:actions.checkout_customer_information_updated' // → "Customer filling out details"
|
|
298
|
+
// Data: boolean (true) - No customer data exposed for security
|
|
298
299
|
'lce:actions.checkout_billing_information_updated' // → "Payment info being entered"
|
|
300
|
+
// Data: boolean (true) - No billing data exposed for security
|
|
299
301
|
'lce:actions.checkout_gift_information_updated' // → "Gift recipient info updated"
|
|
302
|
+
// Data: boolean (true) - No recipient data exposed for security
|
|
300
303
|
|
|
301
304
|
// Checkout options
|
|
302
305
|
'lce:actions.checkout_is_gift_toggled' // → "Customer toggled gift option"
|
|
@@ -313,7 +316,37 @@ window.addEventListener('lce:actions.cart_loaded', function(event) {
|
|
|
313
316
|
'lce:actions.checkout_tip_updated' // → "Customer updated delivery tip"
|
|
314
317
|
```
|
|
315
318
|
|
|
316
|
-
|
|
319
|
+
**🔒 Security Note on Form Update Events:**
|
|
320
|
+
The following events return only a boolean `true` value instead of customer data for security reasons:
|
|
321
|
+
- `checkout_customer_information_updated` - No customer contact details exposed
|
|
322
|
+
- `checkout_billing_information_updated` - No payment or billing address details exposed
|
|
323
|
+
- `checkout_gift_information_updated` - No gift recipient details exposed
|
|
324
|
+
|
|
325
|
+
This design prevents malicious scripts from intercepting sensitive customer information (names, emails, phone numbers, addresses, etc.) while still allowing you to track form completion for analytics. **This is intentional and prioritizes customer privacy and security.**
|
|
326
|
+
|
|
327
|
+
```javascript
|
|
328
|
+
// ✅ Correct: Track form completion securely
|
|
329
|
+
window.addEventListener('lce:actions.checkout_customer_information_updated', function(event) {
|
|
330
|
+
const completed = event.detail.data; // boolean: true
|
|
331
|
+
|
|
332
|
+
// Track the milestone without exposing customer data
|
|
333
|
+
analytics.track('Checkout Step Completed', { step: 'customer_info' });
|
|
334
|
+
updateProgressBar('customer_info');
|
|
335
|
+
});
|
|
336
|
+
|
|
337
|
+
window.addEventListener('lce:actions.checkout_billing_information_updated', function(event) {
|
|
338
|
+
const completed = event.detail.data; // boolean: true
|
|
339
|
+
|
|
340
|
+
// Track billing form completion
|
|
341
|
+
analytics.track('Checkout Step Completed', { step: 'billing_info' });
|
|
342
|
+
updateProgressBar('billing_info');
|
|
343
|
+
});
|
|
344
|
+
|
|
345
|
+
// 🚫 You will NOT receive customer data like names, emails, addresses, etc.
|
|
346
|
+
// This protects your customers from malicious scripts and data breaches.
|
|
347
|
+
```
|
|
348
|
+
|
|
349
|
+
**Important Note on Checkout Personalization:**
|
|
317
350
|
Personalization cannot be edited during checkout - only removed. This is by design to prevent order processing complications. If a customer wants to modify personalization, they must return to the cart. The checkout only displays personalization details and provides a remove option.
|
|
318
351
|
|
|
319
352
|
#### Checkout Details Event Data
|
|
@@ -432,48 +465,48 @@ These events fire when programmatic actions succeed or fail, giving you complete
|
|
|
432
465
|
'lce:actions.cart_product_add_success' // → "Products successfully added to cart"
|
|
433
466
|
// Data: { itemsAdded: number, identifiers: string[] }
|
|
434
467
|
|
|
435
|
-
'lce:actions.cart_product_add_failed' // → "Products could not be added to cart"
|
|
468
|
+
'lce:actions.cart_product_add_failed' // → "Products could not be added to cart"
|
|
436
469
|
// Data: { identifiers: string[], error: string }
|
|
437
470
|
|
|
438
471
|
// Promo code feedback
|
|
439
472
|
'lce:actions.cart_promo_code_applied' // → "Promo code worked - show success!"
|
|
440
|
-
// Data: {
|
|
473
|
+
// Data: { discountAmount?: number, newTotal?: number }
|
|
441
474
|
|
|
442
475
|
'lce:actions.cart_promo_code_removed' // → "Promo code removed successfully"
|
|
443
|
-
// Data: {
|
|
476
|
+
// Data: { newTotal?: number }
|
|
444
477
|
|
|
445
478
|
'lce:actions.cart_promo_code_failed' // → "Promo code didn't work - show error"
|
|
446
|
-
// Data: {
|
|
479
|
+
// Data: { error: string }
|
|
447
480
|
```
|
|
448
481
|
|
|
449
482
|
#### 💳 **Checkout Action Feedback**
|
|
450
483
|
```javascript
|
|
451
484
|
// Product addition feedback
|
|
452
485
|
'lce:actions.checkout_product_add_success' // → "Products added to checkout successfully"
|
|
453
|
-
// Data: { itemsAdded: number, identifiers: string[] }
|
|
486
|
+
// Data: { itemsAdded: number, identifiers: string[], isPresale?: boolean }
|
|
454
487
|
|
|
455
488
|
'lce:actions.checkout_product_add_failed' // → "Could not add products to checkout"
|
|
456
|
-
// Data: { identifiers: string[], error: string }
|
|
489
|
+
// Data: { identifiers: string[], error: string, isPresale?: boolean }
|
|
457
490
|
|
|
458
491
|
// Promo code feedback
|
|
459
492
|
'lce:actions.checkout_promo_code_applied' // → "Checkout discount applied!"
|
|
460
|
-
// Data: {
|
|
493
|
+
// Data: { discountAmount?: number, newTotal?: number }
|
|
461
494
|
|
|
462
495
|
'lce:actions.checkout_promo_code_removed' // → "Checkout discount removed"
|
|
463
|
-
// Data: {
|
|
496
|
+
// Data: { newTotal?: number }
|
|
464
497
|
|
|
465
498
|
'lce:actions.checkout_promo_code_failed' // → "Checkout discount failed"
|
|
466
|
-
// Data: {
|
|
499
|
+
// Data: { error: string }
|
|
467
500
|
|
|
468
|
-
// Gift card feedback
|
|
501
|
+
// Gift card feedback
|
|
469
502
|
'lce:actions.checkout_gift_card_applied' // → "Gift card applied successfully!"
|
|
470
|
-
// Data: {
|
|
503
|
+
// Data: { newTotal?: number }
|
|
471
504
|
|
|
472
505
|
'lce:actions.checkout_gift_card_removed' // → "Gift card removed"
|
|
473
|
-
// Data: {
|
|
506
|
+
// Data: { newTotal?: number }
|
|
474
507
|
|
|
475
508
|
'lce:actions.checkout_gift_card_failed' // → "Gift card could not be applied"
|
|
476
|
-
// Data: {
|
|
509
|
+
// Data: { error: string }
|
|
477
510
|
```
|
|
478
511
|
|
|
479
512
|
#### 🔒 **Security Note**
|
|
@@ -484,12 +517,12 @@ Action feedback events **never expose sensitive information** like promo codes o
|
|
|
484
517
|
// Fire the action (simple)
|
|
485
518
|
await actions.cart.applyPromoCode('SECRET20');
|
|
486
519
|
|
|
487
|
-
// Get feedback (secure)
|
|
520
|
+
// Get feedback (secure)
|
|
488
521
|
window.addEventListener('lce:actions.cart_promo_code_applied', function(event) {
|
|
489
|
-
const {
|
|
490
|
-
// ✅ You get:
|
|
522
|
+
const { discountAmount, newTotal } = event.detail.data;
|
|
523
|
+
// ✅ You get: discount amount, new total
|
|
491
524
|
// 🚫 You DON'T get: 'SECRET20' (secure!)
|
|
492
|
-
|
|
525
|
+
|
|
493
526
|
showSuccessMessage(`🎉 Discount applied! You saved $${discountAmount}!`);
|
|
494
527
|
updateCartTotal(newTotal);
|
|
495
528
|
});
|
|
@@ -506,32 +539,32 @@ async function applyPromoCodeWithFeedback(code) {
|
|
|
506
539
|
|
|
507
540
|
// Set up event listeners BEFORE firing action
|
|
508
541
|
const successHandler = (event) => {
|
|
509
|
-
const {
|
|
542
|
+
const { discountAmount, newTotal } = event.detail.data;
|
|
510
543
|
hideLoadingMessage();
|
|
511
544
|
showSuccessMessage(`🎉 Success! You saved $${discountAmount}!`);
|
|
512
545
|
updatePriceDisplay(newTotal);
|
|
513
|
-
|
|
546
|
+
|
|
514
547
|
// Track successful promo usage
|
|
515
|
-
analytics.track('Promo Applied', {
|
|
548
|
+
analytics.track('Promo Applied', {
|
|
516
549
|
discount: discountAmount,
|
|
517
|
-
newTotal: newTotal
|
|
550
|
+
newTotal: newTotal
|
|
518
551
|
});
|
|
519
|
-
|
|
552
|
+
|
|
520
553
|
// Clean up
|
|
521
554
|
cleanup();
|
|
522
555
|
};
|
|
523
|
-
|
|
556
|
+
|
|
524
557
|
const failureHandler = (event) => {
|
|
525
|
-
const {
|
|
558
|
+
const { error } = event.detail.data;
|
|
526
559
|
hideLoadingMessage();
|
|
527
560
|
showErrorMessage('Promo code could not be applied. Please try again.');
|
|
528
|
-
|
|
561
|
+
|
|
529
562
|
// Track failed attempts (for optimization)
|
|
530
563
|
analytics.track('Promo Failed', { error: error });
|
|
531
|
-
|
|
564
|
+
|
|
532
565
|
// Maybe suggest alternatives
|
|
533
566
|
suggestAlternativePromos();
|
|
534
|
-
|
|
567
|
+
|
|
535
568
|
// Clean up
|
|
536
569
|
cleanup();
|
|
537
570
|
};
|
package/docs/THEMING.md
CHANGED
|
@@ -284,7 +284,6 @@ interface ICheckoutComponent {
|
|
|
284
284
|
thankYouButtonText: string;
|
|
285
285
|
drawerHeaderText: string;
|
|
286
286
|
placeOrderButtonText: string;
|
|
287
|
-
placeOrderButtonShowRequiredFields: boolean;
|
|
288
287
|
};
|
|
289
288
|
}
|
|
290
289
|
```
|
|
@@ -319,8 +318,7 @@ customTheme: {
|
|
|
319
318
|
exitUrl: '/',
|
|
320
319
|
thankYouButtonText: 'Continue Shopping',
|
|
321
320
|
drawerHeaderText: 'Checkout',
|
|
322
|
-
placeOrderButtonText: 'Place Order'
|
|
323
|
-
placeOrderButtonShowRequiredFields: true
|
|
321
|
+
placeOrderButtonText: 'Place Order'
|
|
324
322
|
}
|
|
325
323
|
}
|
|
326
324
|
}
|
|
@@ -441,8 +439,7 @@ const client = await Elements('YOUR_API_KEY', {
|
|
|
441
439
|
exitUrl: '/',
|
|
442
440
|
thankYouButtonText: 'Continue Shopping',
|
|
443
441
|
drawerHeaderText: 'Checkout',
|
|
444
|
-
placeOrderButtonText: 'Place Order'
|
|
445
|
-
placeOrderButtonShowRequiredFields: true
|
|
442
|
+
placeOrderButtonText: 'Place Order'
|
|
446
443
|
}
|
|
447
444
|
},
|
|
448
445
|
address: {
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "LiquidCommerce Elements SDK",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"author": "LiquidCommerce Team",
|
|
6
|
-
"version": "2.5.6-beta.
|
|
6
|
+
"version": "2.5.6-beta.7",
|
|
7
7
|
"homepage": "https://docs.liquidcommerce.co/elements-sdk",
|
|
8
8
|
"repository": {
|
|
9
9
|
"type": "git",
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
"embeddable commerce"
|
|
72
72
|
],
|
|
73
73
|
"devDependencies": {
|
|
74
|
-
"@biomejs/biome": "2.3.
|
|
74
|
+
"@biomejs/biome": "2.3.5",
|
|
75
75
|
"@commitlint/cli": "^20.1.0",
|
|
76
76
|
"@commitlint/config-conventional": "^20.0.0",
|
|
77
77
|
"@rollup/plugin-alias": "^6.0.0",
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
"@semantic-release/npm": "^13.1.1",
|
|
88
88
|
"@semantic-release/release-notes-generator": "^14.1.0",
|
|
89
89
|
"@types/core-js": "^2.5.8",
|
|
90
|
-
"@types/node": "^24.10.
|
|
90
|
+
"@types/node": "^24.10.1",
|
|
91
91
|
"conventional-changelog-cli": "^5.0.0",
|
|
92
92
|
"husky": "^9.1.7",
|
|
93
93
|
"process": "^0.11.10",
|