@liquidcommerce/elements-sdk 2.7.0 → 2.7.1

package/dist/types/auto-initialize/shared-utils.d.ts

@@ -1,7 +1,12 @@
 import type { IInjectCheckoutParams, IInjectedComponent, ILiquidCommerceElementsDevelopmentConfig } from '@/interfaces/core.interface';
 export declare const SHARED_ATTR: {
     readonly SCRIPT: {
+        readonly MAIN: "data-liquid-commerce-elements";
+        readonly TOKEN: "data-token";
+        readonly ENV: "data-env";
+        readonly DEBUG_MODE: "data-debug-mode";
         readonly CHECKOUT_PARAM: "data-checkout-param";
+        readonly CHECKOUT_URL: "data-checkout-url";
     };
     readonly ELEMENT: {
         readonly CHECKOUT: "data-lce-checkout";

package/dist/types/constants/core.constant.d.ts

@@ -48,7 +48,3 @@ export declare const Z_INDEX: {
     readonly MODAL: 2147483640;
 };
 export declare const DESKTOP_BREAKPOINT = 1024;
-export declare const DISPLAY_MODE: {
-    MODAL: string;
-    DRAWER: string;
-};

package/dist/types/core/pubsub/interfaces/checkout.interface.d.ts

@@ -1,5 +1,6 @@
 import type { ICheckoutAmounts, ICheckoutItem } from '@/interfaces/api/checkout.interface';
 export interface IBaseCheckoutEventData {
+    token: string;
     cartId: string;
     isGift: boolean;
     billingSameAsShipping: boolean;

package/dist/types/enums/core.enum.d.ts

@@ -100,6 +100,7 @@ export declare const COMPONENT_TYPE: {
     readonly PRODUCT_LIST_CARD_LOADING: "product-list-card-loading";
     readonly PRODUCT_LIST_RETAILERS: "product-list-retailers";
     readonly PRODUCT_LIST_ENGRAVING_FORM: "product-list-engraving-form";
+    readonly PRODUCT_LIST_PRODUCT_PRE_CART: "product-list-product-pre-cart";
     readonly CART: "cart";
     readonly CART_RETAILER: "cart-retailer";
     readonly CART_ITEM: "cart-item";
@@ -172,3 +173,13 @@ export declare const CHECKOUT_EVENT_LEVEL: {
     readonly ERROR: "error";
 };
 export type CheckoutEventLevel = (typeof CHECKOUT_EVENT_LEVEL)[keyof typeof CHECKOUT_EVENT_LEVEL];
+export declare const DISPLAY_MODE: {
+    readonly MODAL: "modal";
+    readonly DRAWER: "drawer";
+};
+export type DisplayModeType = (typeof DISPLAY_MODE)[keyof typeof DISPLAY_MODE];
+export declare const NAVIGATION_SOURCE: {
+    readonly PRODUCT_CARD: "productCard";
+    readonly ADD_TO_CART_DRAWER: "addToCartDrawer";
+};
+export type NavigationSourceType = (typeof NAVIGATION_SOURCE)[keyof typeof NAVIGATION_SOURCE];

package/dist/types/interfaces/configs/product-list.interface.d.ts

@@ -1,10 +1,10 @@
+import type { DisplayModeType } from 'enums';
 import type { DeepPartial } from '@/interfaces/core.interface';
 export type ProductListCardStyle = 'card' | 'ghost';
 export type ProductListCardCornerRadius = 'rounded' | 'sharp';
 export interface IProductListTheme {
     backgroundColor: string;
 }
-export type IDisplayMode = 'modal' | 'drawer';
 export interface IProductListLayout {
     productCard: {
         style: ProductListCardStyle;
@@ -19,7 +19,7 @@ export interface IProductListLayout {
         showCollections: boolean;
         enablePersonalization: boolean;
     };
-    displayMode: IDisplayMode;
+    displayMode: DisplayModeType;
 }
 export interface IProductListComponent {
     theme: IProductListTheme;

package/dist/types/modules/address/address-input.component.d.ts

@@ -1,3 +1,7 @@
+import type { IProductListProduct } from 'core/store/interfaces/product-list.interface';
+import { type NavigationSourceType } from 'enums';
+import type { IFulfillment } from 'interfaces/api/product.interface';
+import type { IProductListComponent } from 'interfaces/configs';
 import { BaseComponent } from '@/core/base-component.service';
 import type { IAddressComponent } from '@/interfaces/configs';
 import type { IAddressOptions } from './address.interface';
@@ -5,6 +9,12 @@ export interface IAddressInputComponentParams {
     productId?: string;
     isIndependentComponent?: boolean;
     options?: IAddressOptions;
+    navigationSource?: NavigationSourceType;
+    product?: IProductListProduct;
+    shippingFulfillment?: IFulfillment | null;
+    onDemandFulfillment?: IFulfillment | null;
+    showCollections?: boolean;
+    config?: IProductListComponent;
 }
 export declare class AddressInputComponent extends BaseComponent<IAddressInputComponentParams, IAddressComponent> {
     private suggestions;
@@ -24,6 +34,7 @@ export declare class AddressInputComponent extends BaseComponent<IAddressInputCo
     private closeDrawer;
     private handleCancel;
     private handleCheckAvailability;
+    private reopenAddToCartDrawer;
     private handleSuggestionClick;
     private handleDocumentClick;
     private searchAddresses;

package/dist/types/modules/product-list/components/card-components/index.d.ts

@@ -1,4 +1,7 @@
+export * from './product-badge';
 export * from './product-button';
 export * from './product-fulfillments';
+export * from './product-price-and-personalization';
 export * from './product-quantity-selector';
 export * from './product-sizes-list';
+export * from './product-title';

package/dist/types/modules/product-list/components/card-components/product-badge.d.ts

@@ -0,0 +1,8 @@
+export interface IBadgesParams {
+    badges: Array<{
+        text: string;
+        className?: string;
+    }>;
+    separatorText?: string;
+}
+export declare const createProductBadges: ({ badges, separatorText }: IBadgesParams) => HTMLElement;

package/dist/types/modules/product-list/components/card-components/product-fulfillments.d.ts

@@ -1,10 +1,12 @@
 import type { IProductFulfillmentStore } from 'core/store/interfaces/product.interface';
+import { type NavigationSourceType } from 'enums';
 export interface IFulfillmentSectionParams {
     shippingVariants: Record<string, IProductFulfillmentStore>;
     onDemandVariants: Record<string, IProductFulfillmentStore>;
     enableShippingFulfillment: boolean;
     enableOnDemandFulfillment: boolean;
     productId: string;
+    navigationSource?: NavigationSourceType;
     onDeliveryOptionsClick: (productId: string) => void | Promise<void>;
 }
 export declare const createFulfillmentSection: (params: IFulfillmentSectionParams) => HTMLElement;

package/dist/types/modules/product-list/components/card-components/product-price-and-personalization.d.ts

@@ -0,0 +1,13 @@
+export interface IPricePersonalizationSectionParams {
+    price: number;
+    showPrice: boolean;
+    hasPersonalization: boolean;
+    showPersonalization: boolean;
+    hasAddress: boolean;
+    wrapperClassName?: string;
+    priceClassName?: string;
+    personalizeClassName?: string;
+    personalizeText?: string;
+    onPersonalizeClick?: () => void;
+}
+export declare const createPricePersonalizationSection: ({ price, showPrice, hasPersonalization, showPersonalization, hasAddress, wrapperClassName, priceClassName, personalizeClassName, personalizeText, onPersonalizeClick, }: IPricePersonalizationSectionParams) => HTMLElement | null;

package/dist/types/modules/product-list/components/card-components/product-title.d.ts

@@ -0,0 +1,6 @@
+export interface ITitleSectionParams {
+    name: string;
+    productUrl?: string | null;
+    onTitleClick?: () => void;
+}
+export declare const createProductTitle: ({ name, productUrl, onTitleClick }: ITitleSectionParams) => HTMLElement;

package/dist/types/modules/product-list/components/index.d.ts

@@ -4,5 +4,6 @@ export * from './filter-components/product-list-apply-filter-button';
 export * from './product-list-card-loading.component';
 export * from './product-list-engraving.component';
 export * from './product-list-filters.component';
+export * from './product-list-product-pre-cart.component';
 export * from './product-list-retailers.component';
 export * from './product-list-search.component';

package/dist/types/modules/product-list/components/product-list-engraving.component.d.ts

@@ -1,6 +1,10 @@
 import { BaseComponent } from 'core/base-component.service';
 import type { IEngravingFormComponentParams } from 'modules/ui-components/engraving';
 export declare class ProductListEngravingComponent extends BaseComponent<IEngravingFormComponentParams> {
-    protected template(): HTMLElement;
+    protected template(): HTMLElement[];
     private createHeader;
+    private handleClose;
+    private handleEngravingComplete;
+    private handleEngravingCancel;
+    private reopenAddToCartDrawer;
 }

package/dist/types/modules/product-list/components/product-list-product-pre-cart.component.d.ts

@@ -0,0 +1,28 @@
+import { BaseComponent } from 'core/base-component.service';
+import type { IProductListProduct } from 'core/store/interfaces/product-list.interface';
+import { type DisplayModeType } from 'enums';
+import type { IFulfillment } from 'interfaces/api/product.interface';
+import type { IProductListComponent } from 'interfaces/configs';
+export interface IProductListProductPreCartComponentParams {
+    displayMode: DisplayModeType;
+    product: IProductListProduct;
+    shippingFulfillment: IFulfillment | null;
+    onDemandFulfillment: IFulfillment | null;
+    config: IProductListComponent;
+}
+export declare class ProductListProductPreCartComponent extends BaseComponent<IProductListProductPreCartComponentParams, IProductListComponent> {
+    private selectedSize;
+    constructor();
+    protected template(): HTMLElement[];
+    private createCartHeader;
+    private createImageSection;
+    private createPricePersonalizationSection;
+    private createDeliversToSection;
+    private createSizesSection;
+    private handleDeliveryOptionsClick;
+    private createFulfillmentSectionWrapper;
+    createFulfillmentTextSection(selectedFulfillmentType: string, selectedFulfillmentRetailerName: string): HTMLElement;
+    private createAddToCartSection;
+    private handleAddToCart;
+    private createExpectationArrivalInfoSection;
+}

package/dist/types/modules/product-list/components/product-list-retailers.component.d.ts

@@ -1,9 +1,16 @@
-import type { IDisplayMode, IProductListComponent } from 'interfaces/configs';
+import type { IProductListProduct } from 'core/store/interfaces/product-list.interface';
+import { type DisplayModeType, type NavigationSourceType } from 'enums';
+import type { IFulfillment } from 'interfaces/api/product.interface';
+import type { IProductListComponent } from 'interfaces/configs';
 import { BaseComponent } from '@/core/base-component.service';
 export interface IProductListRetailersParams {
+    product?: IProductListProduct;
     productId: string;
     config?: IProductListComponent;
-    displayMode?: IDisplayMode;
+    displayMode?: DisplayModeType;
+    navigationSource?: NavigationSourceType;
+    shippingFulfillment?: IFulfillment | null;
+    onDemandFulfillment?: IFulfillment | null;
 }
 export declare class ProductListRetailersComponent extends BaseComponent<IProductListRetailersParams, IProductListComponent> {
     get hostClasses(): string[];
@@ -13,6 +20,7 @@ export declare class ProductListRetailersComponent extends BaseComponent<IProduc
     private extractFulfillments;
     private onFulfillmentTabClick;
     private onRetailerCardClick;
+    private reopenAddToCartDrawer;
     private createHeader;
     private createNoAvailabilityMessage;
 }

package/dist/types/modules/product-list/product-list-card.component.d.ts

@@ -16,16 +16,11 @@ export declare class ProductListCardComponent extends BaseComponent<IProductList
     protected connected(): Promise<void>;
     disconnected(): void;
     private reRender;
-    private getAvailabilityData;
-    private isPresaleActive;
-    private handleAddToCart;
     protected template(): HTMLElement[];
     private generateProductUrl;
     private createVariantStandard;
     private createImageSection;
     private createContentSection;
-    private createBadgesSection;
-    private createTitleSection;
     private createPricePersonalizationSection;
     private createSizesSection;
     private handleDeliveryOptionsClick;

package/dist/types/modules/product-list/product-list.commands.d.ts

@@ -1,12 +1,13 @@
 import type { IModalContentConfig } from 'core/store/interfaces/core.interface';
+import type { IProductSizeStore } from 'core/store/interfaces/product.interface';
 import type { IProductListProduct, IProductListStore } from 'core/store/interfaces/product-list.interface';
 import { BaseCommand } from '@/core/command/base-command.service';
 import { type FulfillmentType } from '@/enums';
-import type { IProduct, IRetailer } from '@/interfaces/api/product.interface';
+import type { IFulfillment, IProduct, IProductSizeAttributes, IRetailer } from '@/interfaces/api/product.interface';
 import type { IFilterSchema, INavigationResponse, IProductSearchParams, IProductSearchResponse } from '@/interfaces/api/product-list.interface';
 import type { ProductListFilterType } from '@/interfaces/core.interface';
 import { type AddItemParams } from '@/modules/cart/cart.commands';
-import type { IExtendedFilterSchema, IPagination, IProductListFilters } from './product-list.interface';
+import type { IExtendedFilterSchema, IPagination, IProductAvailabilityData, IProductListFilters } from './product-list.interface';
 type StateListener = (state: IProductListStore) => void;
 export declare class ProductListCommands extends BaseCommand {
     private readonly uiCommands;
@@ -63,5 +64,13 @@ export declare class ProductListCommands extends BaseCommand {
     selectSize: (productId: string, sizeId: string) => Promise<void>;
     private getFulfillmentForSize;
     updateQuantity: (productId: string, quantity: number) => void;
+    getAvailabilityData(params: {
+        product: IProductListProduct;
+        size?: IProductSizeStore;
+        shippingFulfillment?: IFulfillment | null;
+        onDemandFulfillment?: IFulfillment | null;
+        state?: string;
+    }): IProductAvailabilityData;
+    isPresaleActive(sizeAttributes: IProductSizeAttributes): boolean;
 }
 export {};

package/dist/types/modules/product-list/product-list.interface.d.ts

@@ -70,6 +70,7 @@ export interface IProductAvailabilityData {
     state: string;
     isPresale: boolean;
     isPresaleActive: boolean;
+    presaleShipBy: string | null;
 }
 export interface IProductVariantParams {
     image: string;

package/dist/types/modules/ui-components/engraving/engraving-form.component.d.ts

@@ -1,5 +1,8 @@
+import type { IProductListProduct } from 'core/store/interfaces/product-list.interface';
+import type { IFulfillment } from 'interfaces/api/product.interface';
 import { BaseComponent } from '@/core/base-component.service';
-import type { IDisplayMode } from '@/interfaces/configs';
+import { type DisplayModeType, type NavigationSourceType } from '@/enums';
+import type { IProductListComponent } from '@/interfaces/configs';
 export interface IEngravingFormComponentParams {
     identifier: string;
     context: 'product' | 'cart' | 'product-list';
@@ -8,7 +11,13 @@ export interface IEngravingFormComponentParams {
     maxCharsPerLine: number;
     fee: number;
     location?: string;
-    displayMode?: IDisplayMode;
+    displayMode?: DisplayModeType;
+    navigationSource?: NavigationSourceType;
+    product?: IProductListProduct;
+    shippingFulfillment?: IFulfillment | null;
+    onDemandFulfillment?: IFulfillment | null;
+    showCollections?: boolean;
+    config?: IProductListComponent;
 }
 export declare class EngravingFormComponent extends BaseComponent<IEngravingFormComponentParams, null> {
     get hostClasses(): string[];

package/docs/gitbook/actions.md

@@ -0,0 +1,160 @@
+# Actions
+
+Actions let you control Elements programmatically after the SDK initializes. All actions live under `window.elements.actions.*`.
+
+## Quick start
+```js
+window.addEventListener('lce:actions.client_ready', () => {
+  window.elements.actions.cart.openCart();
+});
+```
+
+## Product actions
+- `actions.product.getDetails(identifier)`
+  Returns the current loaded product data (price, size, fulfillment, retailer, quantity, images, etc.). The product must already be injected and loaded.
+
+```js
+const product = window.elements.actions.product.getDetails('00619947000020');
+console.log(product.name, product.price);
+```
+
+## Cart actions
+- `actions.cart.openCart()`
+  Opens the cart drawer.
+- `actions.cart.closeCart()`
+  Closes the cart drawer.
+- `actions.cart.toggleCart()`
+  Toggles the cart drawer open/closed.
+- `actions.cart.addProduct(params[], openCart?)`
+  Adds one or more products to the cart. If no address is set, the SDK prompts for one and retries automatically.
+- `actions.cart.applyPromoCode(promoCode)`
+  Applies a promo code (replaces any existing code).
+- `actions.cart.removePromoCode()`
+  Removes the active promo code.
+- `actions.cart.resetCart()`
+  Clears all cart items (no undo).
+- `actions.cart.getDetails()`
+  Returns current cart data (items, totals, promo, retailers, etc.).
+
+```js
+await window.elements.actions.cart.addProduct([
+  { identifier: '00619947000020', fulfillmentType: 'shipping', quantity: 1 }
+], true);
+
+await window.elements.actions.cart.applyPromoCode('SUMMER20');
+await window.elements.actions.cart.removePromoCode();
+await window.elements.actions.cart.resetCart();
+
+const cart = window.elements.actions.cart.getDetails();
+```
+
+## Checkout actions
+- `actions.checkout.openCheckout()`
+  Opens the checkout drawer.
+- `actions.checkout.closeCheckout()`
+  Closes the checkout drawer.
+- `actions.checkout.toggleCheckout()`
+  Toggles the checkout drawer open/closed.
+- `actions.checkout.exitCheckout()`
+  Navigates away from checkout (requires `exitUrl` config).
+- `actions.checkout.addProduct(params[], openCheckout?)`
+  Adds products directly to checkout (bypasses cart).
+- `actions.checkout.applyPromoCode(promoCode)`
+  Applies a promo code in checkout.
+- `actions.checkout.removePromoCode()`
+  Removes the active promo code.
+- `actions.checkout.applyGiftCard(code)`
+  Applies a gift card.
+- `actions.checkout.removeGiftCard(code)`
+  Removes a gift card.
+- `actions.checkout.toggleIsGift(active?)`
+  Enables/disables gift mode (or toggles when omitted).
+- `actions.checkout.toggleBillingSameAsShipping(active?)`
+  Sets billing address to match shipping.
+- `actions.checkout.toggleMarketingPreferences(field, active)`
+  Sets marketing opt-in (`canEmail` or `canSms`).
+- `actions.checkout.updateCustomerInfo(fields)`
+  Prefills customer info (name, email, phone, birthdate, etc.).
+- `actions.checkout.updateBillingInfo(fields)`
+  Prefills billing address fields.
+- `actions.checkout.updateGiftInfo(fields)`
+  Prefills gift recipient information.
+
+```js
+window.elements.actions.checkout.openCheckout();
+window.elements.actions.checkout.closeCheckout();
+window.elements.actions.checkout.toggleCheckout();
+
+await window.elements.actions.checkout.addProduct([
+  { identifier: '00619947000020', fulfillmentType: 'shipping', quantity: 1 }
+], true);
+
+await window.elements.actions.checkout.applyPromoCode('WELCOME10');
+await window.elements.actions.checkout.applyGiftCard('GIFT-1234-5678');
+
+await window.elements.actions.checkout.toggleIsGift(true);
+await window.elements.actions.checkout.toggleBillingSameAsShipping(false);
+await window.elements.actions.checkout.toggleMarketingPreferences('canEmail', true);
+
+window.elements.actions.checkout.updateCustomerInfo({
+  firstName: 'John',
+  lastName: 'Doe',
+  email: 'john@example.com'
+});
+
+window.elements.actions.checkout.updateBillingInfo({
+  firstName: 'John',
+  lastName: 'Doe',
+  addressOne: '789 Elm St',
+  city: 'Chicago',
+  state: 'IL',
+  zipCode: '60601'
+});
+
+window.elements.actions.checkout.updateGiftInfo({
+  firstName: 'Jane',
+  lastName: 'Smith',
+  message: 'Happy Birthday!'
+});
+```
+
+## Address actions
+- `actions.address.setAddressByPlacesId(placesId)`
+  Sets address using a Google Places ID (recommended).
+- `actions.address.setAddressManually(address, coordinates)`
+  Sets address with your own address + lat/long data.
+- `actions.address.getDetails()`
+  Returns the current address (or null if not set).
+- `actions.address.clear()`
+  Removes the stored address and resets availability.
+
+```js
+await window.elements.actions.address.setAddressByPlacesId('ChIJOwg_06VPwokRYv534QaPC8g');
+
+await window.elements.actions.address.setAddressManually(
+  { one: '123 Main Street', city: 'New York', state: 'NY', zip: '10001' },
+  { latitude: 40.7128, longitude: -74.0060 }
+);
+
+const address = window.elements.actions.address.getDetails();
+await window.elements.actions.address.clear();
+```
+
+## UI helpers (non-actions)
+These helpers live under `window.elements.ui.*` and are commonly used with actions.
+
+- `ui.cartButton(containerId, showItemsCount?)`
+  Renders a cart button inside the given container.
+- `ui.floatingCartButton(showItemsCount?)`
+  Renders a floating cart button (bottom-right).
+- `ui.cartSubtotal(elementId)`
+  Keeps an element updated with cart subtotal.
+- `ui.cartItemsCount(elementId, { hideZero })`
+  Keeps an element updated with cart item count.
+
+```js
+window.elements.ui.cartButton('header-cart', true);
+window.elements.ui.floatingCartButton(true);
+window.elements.ui.cartSubtotal('cart-total');
+window.elements.ui.cartItemsCount('items-count', { hideZero: true });
+```

package/docs/gitbook/address.md

@@ -0,0 +1,48 @@
+# Address
+
+The Address component sets the delivery location used for availability, pricing, and fulfillment options.
+
+## How it works
+- Address is embedded in the Product component by default
+- If a user adds to cart without an address, the SDK prompts automatically
+- The address is reused across product, cart, and checkout
+
+## Standalone address component
+```js
+const client = await Elements('YOUR_API_KEY', { env: 'production' });
+await client.injectAddressElement('address', {
+  onAddressSet: (address) => {
+    console.log('Address set:', address);
+  }
+});
+```
+
+## Address actions
+```js
+await window.elements.actions.address.setAddressByPlacesId('ChIJOwg_06VPwokRYv534QaPC8g');
+
+await window.elements.actions.address.setAddressManually(
+  {
+    one: '123 Main Street',
+    two: 'Apt 4',
+    city: 'New York',
+    state: 'NY',
+    zip: '10001'
+  },
+  { latitude: 40.7128, longitude: -74.0060 }
+);
+
+const address = window.elements.actions.address.getDetails();
+await window.elements.actions.address.clear();
+```
+
+## Address events (examples)
+```js
+window.addEventListener('lce:actions.address_updated', (event) => {
+  const { formattedAddress } = event.detail.data;
+});
+
+window.addEventListener('lce:actions.address_failed', (event) => {
+  const { error } = event.detail.data;
+});
+```

package/docs/gitbook/cart.md

@@ -0,0 +1,65 @@
+# Cart
+
+The Cart component is a slide-out drawer that manages items, quantities, promo codes, and checkout.
+
+## What you get
+- Drawer UI with item list and totals
+- Grouped items by retailer
+- Quantity updates and removals
+- Promo code support
+- Cart persistence across sessions and tabs
+- Checkout entry point
+
+## Show a cart button (CDN)
+```html
+<script
+  defer
+  data-liquid-commerce-elements
+  data-token="YOUR_API_KEY"
+  data-env="production"
+  data-cart-badge-button="header-cart"
+  type="text/javascript"
+  src="https://assets-elements.liquidcommerce.us/all/elements.js"
+></script>
+
+<div id="header-cart"></div>
+```
+
+## Cart UI helpers (programmatic)
+```js
+window.elements.ui.cartButton('header-cart', true);
+window.elements.ui.floatingCartButton(true);
+window.elements.ui.cartSubtotal('cart-total');
+window.elements.ui.cartItemsCount('items-count', { hideZero: true });
+```
+
+## Cart actions
+```js
+window.elements.actions.cart.openCart();
+window.elements.actions.cart.closeCart();
+window.elements.actions.cart.toggleCart();
+
+await window.elements.actions.cart.addProduct([
+  { identifier: '00619947000020', fulfillmentType: 'shipping', quantity: 1 }
+], true);
+
+await window.elements.actions.cart.applyPromoCode('SUMMER20');
+await window.elements.actions.cart.removePromoCode();
+await window.elements.actions.cart.resetCart();
+
+const cart = window.elements.actions.cart.getDetails();
+```
+
+## Address behavior
+If no address is set, add-to-cart automatically opens the address prompt, then retries the add.
+
+## Cart events (examples)
+```js
+window.addEventListener('lce:actions.cart_item_added', (event) => {
+  const { identifiers, itemsAdded } = event.detail.data;
+});
+
+window.addEventListener('lce:actions.cart_updated', (event) => {
+  const { subtotal, itemsCount } = event.detail.data;
+});
+```