@liquidcommerce/elements-sdk 2.7.34 → 2.7.36
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.checkout.esm.js +7875 -7687
- package/dist/index.esm.js +12542 -12337
- package/dist/ssr-stub.esm.js +1 -0
- package/dist/types/clients/helpers.d.ts +2 -0
- package/dist/types/core/pubsub/interfaces/cart.interface.d.ts +5 -0
- package/dist/types/core/pubsub/interfaces/core.interface.d.ts +2 -1
- package/dist/types/core/store/interfaces/checkout.interface.d.ts +1 -0
- package/dist/types/enums/core.enum.d.ts +1 -0
- package/dist/types/interfaces/configs/cart.interface.d.ts +1 -0
- package/dist/types/modules/cart/cart.commands.d.ts +5 -1
- package/dist/types/modules/cart/components/cart-fulfillment.component.d.ts +1 -1
- package/dist/types/modules/checkout/checkout.commands.d.ts +6 -0
- package/dist/types/modules/checkout/checkout.component.d.ts +4 -1
- package/dist/types/modules/checkout/components/checkout-stripe-form.component.d.ts +2 -1
- package/dist/types/modules/checkout/payment-session-error.d.ts +4 -0
- package/dist/types/modules/product/product.commands.d.ts +1 -1
- package/dist/types/modules/product-list/product-list.commands.d.ts +1 -1
- package/docs/v1/api/configuration.md +2 -0
- package/docs/v1/examples/custom-theming.md +13 -0
- package/docs/v1/guides/accessibility.md +24 -1
- package/docs/v1/guides/cart-component.md +43 -0
- package/docs/v1/guides/events.md +30 -0
- package/docs/v1/guides/theming.md +13 -0
- package/package.json +8 -3
package/dist/ssr-stub.esm.js
CHANGED
|
@@ -97,6 +97,7 @@ const ELEMENTS_ACTIONS_EVENT = {
|
|
|
97
97
|
PRODUCT_FULFILLMENT_TYPE_CHANGED: 'product_fulfillment_type_changed',
|
|
98
98
|
PRODUCT_FULFILLMENT_CHANGED: 'product_fulfillment_changed',
|
|
99
99
|
CART_LOADED: 'cart_loaded',
|
|
100
|
+
CART_SHOP_RETAILER: 'cart_shop_retailer',
|
|
100
101
|
CART_CLOSED: 'cart_closed',
|
|
101
102
|
CART_OPENED: 'cart_opened',
|
|
102
103
|
CART_UPDATED: 'cart_updated',
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { type ComponentType } from '@/enums';
|
|
2
|
+
import type { ICartComponent } from '@/interfaces/configs';
|
|
2
3
|
export declare function normalizeProductListLists<T extends Record<string, any>>(data: T): T;
|
|
4
|
+
export declare function withCartLayoutDefaults(cart: ICartComponent): ICartComponent;
|
|
3
5
|
export declare function deepMergeConfigs<T extends Record<string, any>>(target: T, source: Partial<T>, currentPath?: string): T;
|
|
4
6
|
export declare const layoutFieldToComponentTypes: Map<string, ComponentType[]>;
|
|
5
7
|
export declare function getComponentTypesForLayoutFields(parentPath: string, layoutFields: Record<string, any>): ComponentType[];
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { IAddressActionEventData, IAddressFailedEventData } from '@/core/pubsub/interfaces/address.interface';
|
|
2
|
-
import type { ICartFailedEventData, ICartItemAddedEventData, ICartItemEngravingUpdatedEventData, ICartItemQuantityChangedEventData, ICartItemRemovedEventData, ICartLoadedEventData, ICartProductAddEventData, ICartProductAddFailedEventData, ICartPromoCodeEventData, ICartPromoCodeFailedEventData, ICartUpdatedEventData } from '@/core/pubsub/interfaces/cart.interface';
|
|
2
|
+
import type { ICartFailedEventData, ICartItemAddedEventData, ICartItemEngravingUpdatedEventData, ICartItemQuantityChangedEventData, ICartItemRemovedEventData, ICartLoadedEventData, ICartProductAddEventData, ICartProductAddFailedEventData, ICartPromoCodeEventData, ICartPromoCodeFailedEventData, ICartShopRetailerEventData, ICartUpdatedEventData } from '@/core/pubsub/interfaces/cart.interface';
|
|
3
3
|
import type { ICheckoutBillingInformationUpdatedEventData, ICheckoutCustomerInformationUpdatedEventData, ICheckoutFailedEventData, ICheckoutGiftCardEventData, ICheckoutGiftCardFailedEventData, ICheckoutGiftInformationUpdatedEventData, ICheckoutItemEngravingUpdatedEventData, ICheckoutItemQuantityChangedEventData, ICheckoutItemRemovedEventData, ICheckoutLoadedEventData, ICheckoutMarketingPreferencesToggleEventData, ICheckoutProductAddEventData, ICheckoutProductAddFailedEventData, ICheckoutPromoCodeEventData, ICheckoutPromoCodeFailedEventData, ICheckoutSubmitCompletedEventData, ICheckoutSubmitFailedEventData, ICheckoutSubmitStartedEventData, ICheckoutTipUpdatedEventData, ICheckoutToggleEventData } from '@/core/pubsub/interfaces/checkout.interface';
|
|
4
4
|
import type { IProductAddToCartEventData, IProductFulfillmentChangedEventData, IProductFulfillmentTypeChangedEventData, IProductLoadedEventData, IProductQuantityChangedEventData, IProductSizeChangedEventData } from '@/core/pubsub/interfaces/product.interface';
|
|
5
5
|
import { ELEMENTS_ACTIONS_EVENT } from '@/enums';
|
|
@@ -37,6 +37,7 @@ export interface IElementsActionsEventsMap {
|
|
|
37
37
|
[ELEMENTS_ACTIONS_EVENT.PRODUCT_SIZE_CHANGED]: IProductSizeChangedEventData;
|
|
38
38
|
[ELEMENTS_ACTIONS_EVENT.PRODUCT_FULFILLMENT_TYPE_CHANGED]: IProductFulfillmentTypeChangedEventData;
|
|
39
39
|
[ELEMENTS_ACTIONS_EVENT.PRODUCT_FULFILLMENT_CHANGED]: IProductFulfillmentChangedEventData;
|
|
40
|
+
[ELEMENTS_ACTIONS_EVENT.CART_SHOP_RETAILER]: ICartShopRetailerEventData;
|
|
40
41
|
[ELEMENTS_ACTIONS_EVENT.CART_CLOSED]: boolean;
|
|
41
42
|
[ELEMENTS_ACTIONS_EVENT.CART_OPENED]: boolean;
|
|
42
43
|
[ELEMENTS_ACTIONS_EVENT.CART_UPDATED]: ICartUpdatedEventData;
|
|
@@ -16,6 +16,7 @@ export declare const ELEMENTS_ACTIONS_EVENT: {
|
|
|
16
16
|
readonly PRODUCT_FULFILLMENT_TYPE_CHANGED: "product_fulfillment_type_changed";
|
|
17
17
|
readonly PRODUCT_FULFILLMENT_CHANGED: "product_fulfillment_changed";
|
|
18
18
|
readonly CART_LOADED: "cart_loaded";
|
|
19
|
+
readonly CART_SHOP_RETAILER: "cart_shop_retailer";
|
|
19
20
|
readonly CART_CLOSED: "cart_closed";
|
|
20
21
|
readonly CART_OPENED: "cart_opened";
|
|
21
22
|
readonly CART_UPDATED: "cart_updated";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { BaseCommand } from '@/core/command/base-command.service';
|
|
2
|
-
import type { IBaseCartEventData } from '@/core/pubsub/interfaces/cart.interface';
|
|
2
|
+
import type { IBaseCartEventData, ICartShopRetailerEventData } from '@/core/pubsub/interfaces/cart.interface';
|
|
3
3
|
export interface AddItemParams {
|
|
4
4
|
fulfillmentId: string;
|
|
5
5
|
partNumber: string;
|
|
@@ -10,6 +10,10 @@ export interface AddItemParams {
|
|
|
10
10
|
export declare class CartCommands extends BaseCommand {
|
|
11
11
|
constructor();
|
|
12
12
|
static getInstance(): CartCommands;
|
|
13
|
+
getShopRetailerTarget(fulfillmentId: string): (ICartShopRetailerEventData & {
|
|
14
|
+
retailerName: string;
|
|
15
|
+
}) | null;
|
|
16
|
+
shopRetailer(fulfillmentId: string): void;
|
|
13
17
|
updateItemQuantity(itemId: string, delta: number): Promise<void>;
|
|
14
18
|
removeItem(itemId: string, isNotStandAlone?: boolean): Promise<void>;
|
|
15
19
|
updateItemEngraving(productItemId: string, engravingLines: string[]): Promise<void>;
|
|
@@ -9,6 +9,7 @@ export declare class CartFulfillmentComponent extends BaseComponent<ICartFulfill
|
|
|
9
9
|
private handleItemsUpdate;
|
|
10
10
|
private setupItemElements;
|
|
11
11
|
private setupMinimumPurchaseAlert;
|
|
12
|
+
private removeMinimumControl;
|
|
12
13
|
private createLoadingOverlay;
|
|
13
14
|
private hasLoadingOverlay;
|
|
14
15
|
private showLoadingOverlay;
|
|
@@ -16,7 +17,6 @@ export declare class CartFulfillmentComponent extends BaseComponent<ICartFulfill
|
|
|
16
17
|
private isAnyItemUpdating;
|
|
17
18
|
private checkAndUpdateLoadingState;
|
|
18
19
|
onStoreChanged(changes: IOnStoreChanged[]): boolean | undefined;
|
|
19
|
-
private hasFulfillmentDataChanged;
|
|
20
20
|
protected afterRender(): void;
|
|
21
21
|
protected disconnected(): void;
|
|
22
22
|
protected template(): HTMLElement[];
|
|
@@ -6,6 +6,11 @@ import type { AddItemParams } from '@/modules/cart/cart.commands';
|
|
|
6
6
|
import type { PresaleExpiredReason } from '@/modules/checkout/components';
|
|
7
7
|
export declare class CheckoutCommands extends BaseCommand {
|
|
8
8
|
private readonly uiCommands;
|
|
9
|
+
private lastLoadParams;
|
|
10
|
+
private paymentGeneration;
|
|
11
|
+
private confirmedPayment;
|
|
12
|
+
assertPaymentReady(): void;
|
|
13
|
+
retryLoadCheckout(): Promise<void>;
|
|
9
14
|
constructor();
|
|
10
15
|
static getInstance(): CheckoutCommands;
|
|
11
16
|
addPresaleItem(params: AddItemParams): Promise<void>;
|
|
@@ -14,6 +19,7 @@ export declare class CheckoutCommands extends BaseCommand {
|
|
|
14
19
|
cartId?: string;
|
|
15
20
|
isForPresale?: boolean;
|
|
16
21
|
}): Promise<void>;
|
|
22
|
+
private showAlreadyCompletedCheckout;
|
|
17
23
|
loadCheckoutFromResponse(response: ICheckoutPrepare): void;
|
|
18
24
|
toggleIsGift(active?: boolean): Promise<void>;
|
|
19
25
|
toggleBillingSameAsShipping(active?: boolean): Promise<void>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { BaseComponent } from '@/core/base-component.service';
|
|
1
|
+
import { BaseComponent, type IOnStoreChanged } from '@/core/base-component.service';
|
|
2
2
|
import type { ICheckoutComponent } from '@/interfaces/configs';
|
|
3
3
|
export interface ICheckoutComponentParams {
|
|
4
4
|
checkoutId: string;
|
|
@@ -7,6 +7,9 @@ export interface ICheckoutComponentParams {
|
|
|
7
7
|
}
|
|
8
8
|
export declare class CheckoutComponent extends BaseComponent<ICheckoutComponentParams, ICheckoutComponent> {
|
|
9
9
|
constructor();
|
|
10
|
+
onStoreWatch(_changes: IOnStoreChanged[]): void;
|
|
11
|
+
private updateInitializationState;
|
|
12
|
+
afterRender(): void;
|
|
10
13
|
protected template(): HTMLElement[];
|
|
11
14
|
private createHeader;
|
|
12
15
|
}
|
|
@@ -26,12 +26,14 @@ export interface IStripeFormStatus {
|
|
|
26
26
|
}
|
|
27
27
|
export declare class CheckoutStripeFormComponent extends SafeHTMLElement {
|
|
28
28
|
private _initialized;
|
|
29
|
+
private _lifecycleGeneration;
|
|
29
30
|
private _stripe;
|
|
30
31
|
private _stripeElements;
|
|
31
32
|
private _paymentElement;
|
|
32
33
|
private _isProcessing;
|
|
33
34
|
private _isFormComplete;
|
|
34
35
|
private _hasUsedCurrentSession;
|
|
36
|
+
private _pendingConfirmation;
|
|
35
37
|
private _stripeConfig;
|
|
36
38
|
private _sessionRefreshPromise;
|
|
37
39
|
initialize({ data }: {
|
|
@@ -45,7 +47,6 @@ export declare class CheckoutStripeFormComponent extends SafeHTMLElement {
|
|
|
45
47
|
private handleSubmit;
|
|
46
48
|
private requestSessionRefresh;
|
|
47
49
|
private refreshPaymentSession;
|
|
48
|
-
private resetForm;
|
|
49
50
|
private updateStripeFormStatus;
|
|
50
51
|
private createConfirmationTokenId;
|
|
51
52
|
disconnected(): Promise<void>;
|
|
@@ -22,7 +22,7 @@ export declare class ProductCommands extends BaseCommand {
|
|
|
22
22
|
openProductDrawer(productId: string, contentType: IProductDrawerContentConfig['type'], data?: Record<string, any>, trigger?: HTMLElement | null): Promise<void>;
|
|
23
23
|
closeProductDrawer(productId: string): Promise<void>;
|
|
24
24
|
rerenderAllProducts(): Promise<void>;
|
|
25
|
-
addToCart(productId: string, params: AddItemParams, trigger?: HTMLElement | null): Promise<void>;
|
|
25
|
+
addToCart(productId: string, params: AddItemParams, trigger?: HTMLElement | null, triggerFallback?: () => HTMLElement | null): Promise<void>;
|
|
26
26
|
addPresaleToCart(productId: string, params: AddItemParams): Promise<void>;
|
|
27
27
|
productDataForEventFromStore(identifier: string): IBaseProductEventData;
|
|
28
28
|
}
|
|
@@ -22,7 +22,7 @@ export declare class ProductListCommands extends BaseCommand {
|
|
|
22
22
|
getItemsPerPage(slug: string): number;
|
|
23
23
|
updatePagination(navigation: INavigationResponse | undefined): IPagination;
|
|
24
24
|
createInitialPagination(): IPagination;
|
|
25
|
-
addToCart(slug: string, productId: string, params: AddItemParams, trigger?: HTMLElement | null): Promise<void>;
|
|
25
|
+
addToCart(slug: string, productId: string, params: AddItemParams, trigger?: HTMLElement | null, triggerFallback?: () => HTMLElement | null): Promise<void>;
|
|
26
26
|
selectSize(slug: string, productId: string, sizeId: string): Promise<void>;
|
|
27
27
|
changeFulfillmentType: (slug: string, productId: string, newFulfillmentType: FulfillmentType) => Promise<void>;
|
|
28
28
|
selectFulfillment: (slug: string, productId: string, selectedFulfillmentId: string) => Promise<void>;
|
|
@@ -271,6 +271,7 @@ interface ICartTheme {
|
|
|
271
271
|
|
|
272
272
|
```typescript
|
|
273
273
|
interface ICartLayout {
|
|
274
|
+
showShopRetailerButton?: boolean;
|
|
274
275
|
showQuantityCounter: boolean;
|
|
275
276
|
quantityCounterStyle: 'outlined' | 'ghost';
|
|
276
277
|
drawerHeaderText: string;
|
|
@@ -280,6 +281,7 @@ interface ICartLayout {
|
|
|
280
281
|
|
|
281
282
|
| Property | Type | Description |
|
|
282
283
|
|----------|------|-------------|
|
|
284
|
+
| `showShopRetailerButton` | `boolean` | Default `false`, including older server themes. Shows the retailer shopping button for eligible unmet minimums; requires a `cart_shop_retailer` event handler. |
|
|
283
285
|
| `showQuantityCounter` | `boolean` | Show quantity counter in cart items |
|
|
284
286
|
| `quantityCounterStyle` | `'outlined' \| 'ghost'` | Visual style for quantity counter |
|
|
285
287
|
| `drawerHeaderText` | `string` | Header text for the cart drawer |
|
|
@@ -41,6 +41,7 @@ const client = await Elements('YOUR_API_KEY', {
|
|
|
41
41
|
},
|
|
42
42
|
cart: {
|
|
43
43
|
layout: {
|
|
44
|
+
showShopRetailerButton: false, // Enable only with a cart_shop_retailer event handler
|
|
44
45
|
drawerHeaderText: 'Your Cart',
|
|
45
46
|
goToCheckoutButtonText: 'Checkout Now'
|
|
46
47
|
}
|
|
@@ -57,6 +58,18 @@ const client = await Elements('YOUR_API_KEY', {
|
|
|
57
58
|
|
|
58
59
|
> If you use custom fonts, make sure the font is available on the page.
|
|
59
60
|
|
|
61
|
+
### Shop the same retailer
|
|
62
|
+
|
|
63
|
+
Set `customTheme.cart.layout.showShopRetailerButton: true` to show a native **Shop {retailer}**
|
|
64
|
+
button beside each unmet order-minimum warning (below it on mobile). The default is `false`,
|
|
65
|
+
including when the server theme predates this option. It only appears for a current, nonempty
|
|
66
|
+
`onDemand` or `shipping` fulfillment with a positive amount remaining and valid retailer ownership.
|
|
67
|
+
|
|
68
|
+
Handle `ELEMENTS_ACTIONS_EVENT.CART_SHOP_RETAILER` (`lce:actions.cart_shop_retailer`) to close the
|
|
69
|
+
cart and open your retailer-filtered catalog. The SDK emits identifiers only and performs no
|
|
70
|
+
navigation. Revalidate them against `client.actions.cart.getDetails()` before navigating; see
|
|
71
|
+
[Events](../guides/events.md) for the payload.
|
|
72
|
+
|
|
60
73
|
## Related Docs
|
|
61
74
|
|
|
62
75
|
- [Theming Guide](../guides/theming.md)
|
|
@@ -44,7 +44,12 @@ retailer closes the panel — arrow keys move focus and `Enter` commits.
|
|
|
44
44
|
|
|
45
45
|
### Focus management
|
|
46
46
|
|
|
47
|
-
- **Opening an overlay** moves focus
|
|
47
|
+
- **Opening an overlay** moves focus onto the first control inside it — the panel's close
|
|
48
|
+
button, the address field — and remembers the control that opened it. Focus lands on a
|
|
49
|
+
control rather than on the panel itself so the focus ring shows a sighted keyboard user
|
|
50
|
+
where they now are; the dialog's role and name are announced either way as focus crosses
|
|
51
|
+
into it. Views whose point is the text at the top of them (the order confirmation) focus
|
|
52
|
+
that heading instead.
|
|
48
53
|
- **Closing** returns focus to that control, even when a re-render has replaced it.
|
|
49
54
|
- **While an overlay is open** focus is trapped inside it and the rest of the page is `inert` and
|
|
50
55
|
`aria-hidden`, so a screen reader cannot wander behind the dialog.
|
|
@@ -55,6 +60,18 @@ retailer closes the panel — arrow keys move focus and `Enter` commits.
|
|
|
55
60
|
- **Nothing hidden is focusable.** Collapsed panels are removed from the tab order and the
|
|
56
61
|
accessibility tree, and closed overlays have their content torn down.
|
|
57
62
|
|
|
63
|
+
### Retailer shopping from the cart
|
|
64
|
+
|
|
65
|
+
The opt-in `cart.layout.showShopRetailerButton` uses a native **Shop {retailer}** button with
|
|
66
|
+
normal Tab, Enter and Space behavior, a 44px minimum target height and a visible focus ring.
|
|
67
|
+
It appears beside the unmet-minimum warning on desktop and below it on mobile. Warning updates
|
|
68
|
+
retain the button node and its focus; if it disappears because the minimum is met or eligibility
|
|
69
|
+
changes, focus moves to the containing fulfillment before its item controls. The host handles
|
|
70
|
+
focus after closing the drawer and navigating in response to `cart_shop_retailer`.
|
|
71
|
+
|
|
72
|
+
The button text, border and focus ring use `global.theme.primaryColor`; check that color against
|
|
73
|
+
the cart background as part of your theme contrast review.
|
|
74
|
+
|
|
58
75
|
### Focus indicator
|
|
59
76
|
|
|
60
77
|
A 2px ring in `--focus-ring-color`, offset 2px from the control. Controls that span their
|
|
@@ -206,3 +223,9 @@ for (const region of document.querySelectorAll('[data-lce-live-region]')) {
|
|
|
206
223
|
- [Theming Guide](./theming.md) — the colour tokens to check for contrast
|
|
207
224
|
- [Best Practices](./best-practices.md)
|
|
208
225
|
- [Browser Support](../reference/browser-support.md)
|
|
226
|
+
|
|
227
|
+
## Checkout initialization and payment recovery
|
|
228
|
+
|
|
229
|
+
Checkout announces loading or initialization failure in a status region. If initialization fails, payment fields are withheld and a keyboard-operable **Retry checkout** button retries the same checkout. The button is disabled while loading.
|
|
230
|
+
|
|
231
|
+
Save Payment Information remains disabled until checkout initializes. During payment save it stays busy until the server responds. Recoverable billing/prepare errors are announced while the mounted card fields and billing input remain available for correction and retry.
|
|
@@ -277,6 +277,36 @@ Or using data attributes:
|
|
|
277
277
|
|
|
278
278
|
## Events
|
|
279
279
|
|
|
280
|
+
### `lce:actions.cart_shop_retailer`
|
|
281
|
+
|
|
282
|
+
A shopper activated **Shop {retailer}** from an unmet cart fulfillment minimum. Opt in with
|
|
283
|
+
`customTheme.cart.layout.showShopRetailerButton: true` (default `false`). The cart command
|
|
284
|
+
revalidates the fulfillment, its current retailer and items, fulfillment type, and remaining
|
|
285
|
+
minimum before emitting. Unsupported, empty, stale or already-satisfied fulfillments emit nothing.
|
|
286
|
+
|
|
287
|
+
```typescript
|
|
288
|
+
interface ICartShopRetailerEventData {
|
|
289
|
+
retailerId: string;
|
|
290
|
+
fulfillmentId: string;
|
|
291
|
+
fulfillmentType: 'onDemand' | 'shipping';
|
|
292
|
+
}
|
|
293
|
+
```
|
|
294
|
+
|
|
295
|
+
Listen with the exported constant; the usual event envelope is `{ data, metadata }`:
|
|
296
|
+
|
|
297
|
+
```javascript
|
|
298
|
+
window.addEventListener(`lce:actions.${ELEMENTS_ACTIONS_EVENT.CART_SHOP_RETAILER}`, (event) => {
|
|
299
|
+
const { retailerId, fulfillmentId, fulfillmentType } = event.detail.data;
|
|
300
|
+
// Revalidate against client.actions.cart.getDetails(), then close the drawer
|
|
301
|
+
// and route to your catalog scoped to this retailer and fulfillment type.
|
|
302
|
+
});
|
|
303
|
+
```
|
|
304
|
+
|
|
305
|
+
The SDK leaves the drawer open and does not navigate. The host handles routing and derives
|
|
306
|
+
retailer names, totals and minimums from current cart details. The event is also sent to `lce:actions`.
|
|
307
|
+
|
|
308
|
+
|
|
309
|
+
|
|
280
310
|
### Cart Loaded
|
|
281
311
|
|
|
282
312
|
Fired when cart data is loaded:
|
|
@@ -410,6 +440,7 @@ const client = await Elements('YOUR_API_KEY', {
|
|
|
410
440
|
backgroundColor: '#ffffff'
|
|
411
441
|
},
|
|
412
442
|
layout: {
|
|
443
|
+
showShopRetailerButton: false, // Enable only with a cart_shop_retailer event handler
|
|
413
444
|
showQuantityCounter: true,
|
|
414
445
|
quantityCounterStyle: 'outlined', // or 'ghost'
|
|
415
446
|
drawerHeaderText: 'My Bag',
|
|
@@ -420,6 +451,18 @@ const client = await Elements('YOUR_API_KEY', {
|
|
|
420
451
|
});
|
|
421
452
|
```
|
|
422
453
|
|
|
454
|
+
### Shop the same retailer
|
|
455
|
+
|
|
456
|
+
Set `customTheme.cart.layout.showShopRetailerButton: true` to show a native **Shop {retailer}**
|
|
457
|
+
button beside each unmet order-minimum warning (below it on mobile). The default is `false`,
|
|
458
|
+
including when the server theme predates this option. It only appears for a current, nonempty
|
|
459
|
+
`onDemand` or `shipping` fulfillment with a positive amount remaining and valid retailer ownership.
|
|
460
|
+
|
|
461
|
+
Handle `ELEMENTS_ACTIONS_EVENT.CART_SHOP_RETAILER` (`lce:actions.cart_shop_retailer`) to close the
|
|
462
|
+
cart and open your retailer-filtered catalog. The SDK emits identifiers only and performs no
|
|
463
|
+
navigation. Revalidate them against `client.actions.cart.getDetails()` before navigating; see
|
|
464
|
+
[Events](./events.md) for the payload.
|
|
465
|
+
|
|
423
466
|
## State Persistence
|
|
424
467
|
|
|
425
468
|
### Local Storage
|
package/docs/v1/guides/events.md
CHANGED
|
@@ -226,6 +226,36 @@ window.addEventListener('lce:actions.address_failed', (event) => {
|
|
|
226
226
|
|
|
227
227
|
## Cart Events
|
|
228
228
|
|
|
229
|
+
### `lce:actions.cart_shop_retailer`
|
|
230
|
+
|
|
231
|
+
A shopper activated **Shop {retailer}** from an unmet cart fulfillment minimum. Opt in with
|
|
232
|
+
`customTheme.cart.layout.showShopRetailerButton: true` (default `false`). The cart command
|
|
233
|
+
revalidates the fulfillment, its current retailer and items, fulfillment type, and remaining
|
|
234
|
+
minimum before emitting. Unsupported, empty, stale or already-satisfied fulfillments emit nothing.
|
|
235
|
+
|
|
236
|
+
```typescript
|
|
237
|
+
interface ICartShopRetailerEventData {
|
|
238
|
+
retailerId: string;
|
|
239
|
+
fulfillmentId: string;
|
|
240
|
+
fulfillmentType: 'onDemand' | 'shipping';
|
|
241
|
+
}
|
|
242
|
+
```
|
|
243
|
+
|
|
244
|
+
Listen with the exported constant; the usual event envelope is `{ data, metadata }`:
|
|
245
|
+
|
|
246
|
+
```javascript
|
|
247
|
+
window.addEventListener(`lce:actions.${ELEMENTS_ACTIONS_EVENT.CART_SHOP_RETAILER}`, (event) => {
|
|
248
|
+
const { retailerId, fulfillmentId, fulfillmentType } = event.detail.data;
|
|
249
|
+
// Revalidate against client.actions.cart.getDetails(), then close the drawer
|
|
250
|
+
// and route to your catalog scoped to this retailer and fulfillment type.
|
|
251
|
+
});
|
|
252
|
+
```
|
|
253
|
+
|
|
254
|
+
The SDK leaves the drawer open and does not navigate. The host handles routing and derives
|
|
255
|
+
retailer names, totals and minimums from current cart details. The event is also sent to `lce:actions`.
|
|
256
|
+
|
|
257
|
+
|
|
258
|
+
|
|
229
259
|
### `lce:actions.cart_loaded`
|
|
230
260
|
|
|
231
261
|
Fires when the cart is fully loaded or synced.
|
|
@@ -138,6 +138,7 @@ customTheme: {
|
|
|
138
138
|
backgroundColor: '#ffffff'
|
|
139
139
|
},
|
|
140
140
|
layout: {
|
|
141
|
+
showShopRetailerButton: false, // Enable only with a cart_shop_retailer event handler
|
|
141
142
|
showQuantityCounter: true,
|
|
142
143
|
quantityCounterStyle: 'outlined',
|
|
143
144
|
drawerHeaderText: 'Your Shopping Cart',
|
|
@@ -227,3 +228,15 @@ const client = await Elements('YOUR_API_KEY', {
|
|
|
227
228
|
|
|
228
229
|
- [Configuration Reference](../api/configuration.md)
|
|
229
230
|
- [Component Guides](../guides/)
|
|
231
|
+
|
|
232
|
+
### Shop the same retailer
|
|
233
|
+
|
|
234
|
+
Set `customTheme.cart.layout.showShopRetailerButton: true` to show a native **Shop {retailer}**
|
|
235
|
+
button beside each unmet order-minimum warning (below it on mobile). The default is `false`,
|
|
236
|
+
including when the server theme predates this option. It only appears for a current, nonempty
|
|
237
|
+
`onDemand` or `shipping` fulfillment with a positive amount remaining and valid retailer ownership.
|
|
238
|
+
|
|
239
|
+
Handle `ELEMENTS_ACTIONS_EVENT.CART_SHOP_RETAILER` (`lce:actions.cart_shop_retailer`) to close the
|
|
240
|
+
cart and open your retailer-filtered catalog. The SDK emits identifiers only and performs no
|
|
241
|
+
navigation. Revalidate them against `client.actions.cart.getDetails()` before navigating; see
|
|
242
|
+
[Events](./events.md) for the payload.
|
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.7.
|
|
6
|
+
"version": "2.7.36",
|
|
7
7
|
"homepage": "https://docs.liquidcommerce.co/elements-sdk",
|
|
8
8
|
"repository": {
|
|
9
9
|
"type": "git",
|
|
@@ -64,7 +64,9 @@
|
|
|
64
64
|
"clean": "rm -rf dist umd node_modules && pnpm install && pnpm build:all",
|
|
65
65
|
"prepublishOnly": "pnpm run build",
|
|
66
66
|
"deprecate:old": "npm deprecate @liquidcommerceteam/elements-sdk@\"*\" \"Package moved to @liquidcommerce/elements-sdk\"",
|
|
67
|
-
"prepare": "husky"
|
|
67
|
+
"prepare": "husky",
|
|
68
|
+
"test": "vitest run",
|
|
69
|
+
"test:browser": "playwright test"
|
|
68
70
|
},
|
|
69
71
|
"keywords": [
|
|
70
72
|
"liquidcommerce",
|
|
@@ -110,6 +112,7 @@
|
|
|
110
112
|
"@biomejs/biome": "^2.5.11",
|
|
111
113
|
"@commitlint/cli": "^21.2.2",
|
|
112
114
|
"@commitlint/config-conventional": "^21.2.2",
|
|
115
|
+
"@playwright/test": "1.60.0",
|
|
113
116
|
"@rollup/plugin-alias": "^6.0.0",
|
|
114
117
|
"@rollup/plugin-commonjs": "^29.0.3",
|
|
115
118
|
"@rollup/plugin-json": "^6.1.0",
|
|
@@ -126,13 +129,15 @@
|
|
|
126
129
|
"@types/node": "^26.4.0",
|
|
127
130
|
"conventional-changelog": "8.1.3",
|
|
128
131
|
"husky": "^9.1.7",
|
|
132
|
+
"jsdom": "26.1.0",
|
|
129
133
|
"process": "^0.11.10",
|
|
130
134
|
"rollup": "^4.63.1",
|
|
131
135
|
"rollup-obfuscator": "^4.1.1",
|
|
132
136
|
"rollup-plugin-typescript2": "^0.37.0",
|
|
133
137
|
"semantic-release": "^25.0.9",
|
|
134
138
|
"ts-node": "^10.9.2",
|
|
135
|
-
"typescript": "6.0.3"
|
|
139
|
+
"typescript": "6.0.3",
|
|
140
|
+
"vitest": "2.1.9"
|
|
136
141
|
},
|
|
137
142
|
"engines": {
|
|
138
143
|
"node": ">=22"
|