@liquidcommerce/elements-sdk 2.6.0-beta.41 → 2.6.0-beta.43

package/dist/types/modules/checkout/components/checkout-stripe-form.component.d.ts

@@ -1,3 +1,4 @@
+import { SafeHTMLElement } from '@/utils/dom-compat';
 declare global {
     interface Window {
         Stripe: any;
@@ -23,7 +24,7 @@ export interface IStripeFormStatus {
     hasError: boolean;
     errorMessage: string | null;
 }
-export declare class CheckoutStripeFormComponent extends HTMLElement {
+export declare class CheckoutStripeFormComponent extends SafeHTMLElement {
     private _initialized;
     private _stripe;
     private _stripeElements;

package/dist/types/modules/product/components/product-image-carousel.component.d.ts

@@ -17,6 +17,8 @@ export declare class ProductImageCarouselComponent extends BaseComponent<IImageC
     private startX;
     private currentTranslateX;
     private translateX;
+    private boundDragMove;
+    private boundDragEnd;
     constructor();
     afterRender(): void;
     onStoreWatch(changes: IOnStoreChanged[]): void;
@@ -26,6 +28,7 @@ export declare class ProductImageCarouselComponent extends BaseComponent<IImageC
     private scrollToIndex;
     private setupMainImageSwipe;
     private setupGalleryDrag;
+    protected disconnected(): void;
     private handleDragStart;
     private handleDragMove;
     private handleDragEnd;

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

@@ -13,6 +13,8 @@ export declare class ProductRetailersCarouselComponent extends BaseComponent<IPr
     private startX;
     private currentTranslateX;
     private translateX;
+    private boundDragMove;
+    private boundDragEnd;
     constructor();
     afterRender(): void;
     private cacheElements;
@@ -21,6 +23,7 @@ export declare class ProductRetailersCarouselComponent extends BaseComponent<IPr
     private updateSelectedCard;
     private scrollToIndex;
     private setupDrag;
+    protected disconnected(): void;
     private handleDragStart;
     private handleDragMove;
     private handleDragEnd;

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

@@ -1,5 +1,5 @@
 import { BaseComponent } from 'core/base-component.service';
-import type { ProductListFilterType } from 'interfaces/core.interface';
+import type { ProductListFilterType } from 'interfaces/injection.interface';
 export interface IProductListFiltersParams {
     filters: ProductListFilterType[];
 }
@@ -25,11 +25,13 @@ export declare class ProductListFiltersComponent extends BaseComponent<IProductL
     private fulfillmentFilterChevronIcon?;
     private priceSliderWrapper?;
     private resizeHandler;
+    private boundDrawerClosedHandler;
     private priceFilterDebounceTimer;
     constructor();
     get hostClasses(): string[];
     protected connected(): Promise<void>;
     private setupDrawerCloseListener;
+    protected disconnected(): void;
     private setupResizeListener;
     private detectIfRenderedInDrawer;
     onStoreWatch(): void;

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

@@ -5,7 +5,7 @@ import { BaseCommand } from '@/core/command/base-command.service';
 import { type FulfillmentType } from '@/enums';
 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 { ProductListFilterType } from '@/interfaces/injection.interface';
 import { type AddItemParams } from '@/modules/cart/cart.commands';
 import type { IExtendedFilterSchema, IPagination, IProductAvailabilityData, IProductListFilters } from './product-list.interface';
 type StateListener = (state: IProductListStore) => void;

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

@@ -1,6 +1,6 @@
 import type { IProductListComponent } from 'interfaces/configs';
 import { BaseComponent, type IOnStoreChanged } from '@/core/base-component.service';
-import type { ProductListFilterType } from '@/interfaces/core.interface';
+import type { ProductListFilterType } from '@/interfaces/injection.interface';
 export interface IProductListComponentParams {
     rows: number;
     columns: number;

package/dist/types/modules/ui-components/lce-element/lce-element.component.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentType } from '@/enums';
-export declare class LceElementComponent extends HTMLElement {
+import { SafeHTMLElement } from '@/utils/dom-compat';
+export declare class LceElementComponent extends SafeHTMLElement {
     private _initialized;
     protected _container: ShadowRoot | null;
     private _wrappedComponentRerender;

package/dist/types/ssr/stub.checkout.d.ts

@@ -0,0 +1,6 @@
+export type { DebugMode, ElementsEnv } from '../enums/core.enum';
+export { DEBUG_MODE, ELEMENTS_ENV } from '../enums/core.enum';
+export type { IElementsCheckoutActions, IElementsCheckoutClient, } from '../interfaces/client.interface';
+export type { IInjectedComponent } from '../interfaces/component.interface';
+export type { ILiquidCommerceElementsCheckoutClientConfig } from '../interfaces/config.interface';
+export declare function ElementsCheckout(..._args: any[]): Promise<null>;

package/dist/types/ssr/stub.d.ts

@@ -0,0 +1,10 @@
+export { SDKError, isSDKError } from '../core/sdk-error-handler';
+export type { CartEventLevel, CartEventType, CheckoutEventLevel, CheckoutEventType, ComponentType, DebugMode, DisplayModeType, ElementsEnv, FulfillmentType, NavigationSourceType, } from '../enums/core.enum';
+export { CART_EVENT_LEVEL, CART_EVENT_TYPE, CHECKOUT_EVENT_LEVEL, CHECKOUT_EVENT_TYPE, COMPONENT_TYPE, DEBUG_MODE, DISPLAY_MODE, ELEMENTS_ACTIONS_EVENT, ELEMENTS_ENV, ELEMENTS_FORM, FULFILLMENT_TYPE, NAVIGATION_SOURCE, } from '../enums/core.enum';
+export type { ILiquidCommerceElementsActions, ILiquidCommerceElementsBuilderClient, ILiquidCommerceElementsClient, } from '../interfaces/client.interface';
+export type { IInjectedComponent } from '../interfaces/component.interface';
+export type { IElementsProxyConfig, ILiquidCommerceElementsBuilderConfig, ILiquidCommerceElementsCheckoutConfig, ILiquidCommerceElementsConfig, ILiquidCommerceElementsDevelopmentConfig, } from '../interfaces/config.interface';
+export type * from '../interfaces/configs';
+export type { IBuilderInjectElementParams, IInjectCheckoutBuilderParams, IInjectCheckoutParams, IInjectProductElement, IInjectProductListFiltersParams, IInjectProductListParams, IInjectProductListSearchParams, ProductListFilterType, } from '../interfaces/injection.interface';
+export declare function Elements(..._args: any[]): Promise<null>;
+export declare function ElementsBuilder(..._args: any[]): Promise<null>;

package/dist/types/utils/dom-compat.d.ts

@@ -0,0 +1,2 @@
+export declare const SafeHTMLElement: typeof HTMLElement;
+export declare function isHTMLElement(value: unknown): value is HTMLElement;

package/docs/v1/README.md

@@ -125,13 +125,13 @@ await client.injectProductElement([
 ### Opening the Cart
 
 ```javascript
-window.elements.actions.cart.openCart();
+window.LiquidCommerce.elements.actions.cart.openCart();
 ```
 
 ### Adding to Cart Programmatically
 
 ```javascript
-await window.elements.actions.cart.addProduct([
+await window.LiquidCommerce.elements.actions.cart.addProduct([
   {
     identifier: '00619947000020',
     fulfillmentType: 'shipping',

package/docs/v1/api/actions/address-actions.md

@@ -21,7 +21,7 @@ setAddressByPlacesId(placesId: string): Promise<void>
 ### Example
 
 ```javascript
-await window.elements.actions.address.setAddressByPlacesId(
+await window.LiquidCommerce.elements.actions.address.setAddressByPlacesId(
   'ChIJOwg_06VPwokRYv534QaPC8g'
 );
 ```
@@ -65,7 +65,7 @@ interface IAddressCoordinates {
 ### Example
 
 ```javascript
-await window.elements.actions.address.setAddressManually(
+await window.LiquidCommerce.elements.actions.address.setAddressManually(
   {
     one: '123 Main Street',
     two: 'Apt 4',
@@ -110,7 +110,7 @@ clear(): Promise<void>
 ### Example
 
 ```javascript
-await window.elements.actions.address.clear();
+await window.LiquidCommerce.elements.actions.address.clear();
 ```
 
 ### Effects
@@ -156,7 +156,7 @@ Returns `null` if no address is set.
 ### Example
 
 ```javascript
-const address = window.elements.actions.address.getDetails();
+const address = window.LiquidCommerce.elements.actions.address.getDetails();
 
 if (address) {
   console.log('Current address:', address.formattedAddress);
@@ -171,7 +171,7 @@ if (address) {
 #### Check if Address is Set
 
 ```javascript
-if (!window.elements.actions.address.getDetails()) {
+if (!window.LiquidCommerce.elements.actions.address.getDetails()) {
   // Prompt user to set address
   showAddressPrompt();
 }
@@ -180,7 +180,7 @@ if (!window.elements.actions.address.getDetails()) {
 #### Display Current Address
 
 ```javascript
-const address = window.elements.actions.address.getDetails();
+const address = window.LiquidCommerce.elements.actions.address.getDetails();
 
 if (address) {
   document.getElementById('current-address').textContent = 
@@ -217,10 +217,10 @@ Google Places provides accurate geocoding:
 
 ```javascript
 // Good - accurate and validated
-await window.elements.actions.address.setAddressByPlacesId(placesId);
+await window.LiquidCommerce.elements.actions.address.setAddressByPlacesId(placesId);
 
 // Less ideal - requires manual geocoding
-await window.elements.actions.address.setAddressManually(address, coords);
+await window.LiquidCommerce.elements.actions.address.setAddressManually(address, coords);
 ```
 
 ### Validate Manual Addresses
@@ -244,7 +244,7 @@ async function setManualAddress(address, coords) {
     throw new Error('Invalid ZIP code');
   }
   
-  await window.elements.actions.address.setAddressManually(address, coords);
+  await window.LiquidCommerce.elements.actions.address.setAddressManually(address, coords);
 }
 ```
 
@@ -252,7 +252,7 @@ async function setManualAddress(address, coords) {
 
 ```javascript
 try {
-  await window.elements.actions.address.setAddressByPlacesId(placesId);
+  await window.LiquidCommerce.elements.actions.address.setAddressByPlacesId(placesId);
   showSuccess('Address saved!');
 } catch (error) {
   console.error('Failed to set address:', error);
@@ -266,7 +266,7 @@ Set address as soon as possible in user flow:
 
 ```javascript
 window.addEventListener('lce:actions.client_ready', () => {
-  if (!window.elements.actions.address.getDetails()) {
+  if (!window.LiquidCommerce.elements.actions.address.getDetails()) {
     // Prompt for address on first visit
     showAddressModal();
   }

package/docs/v1/api/actions/cart-actions.md

@@ -15,7 +15,7 @@ openCart(): void
 ### Example
 
 ```javascript
-window.elements.actions.cart.openCart();
+window.LiquidCommerce.elements.actions.cart.openCart();
 ```
 
 ---
@@ -33,7 +33,7 @@ closeCart(): void
 ### Example
 
 ```javascript
-window.elements.actions.cart.closeCart();
+window.LiquidCommerce.elements.actions.cart.closeCart();
 ```
 
 ---
@@ -53,7 +53,7 @@ toggleCart(): void
 ```javascript
 // Add to your cart button
 document.getElementById('cart-btn').addEventListener('click', () => {
-  window.elements.actions.cart.toggleCart();
+  window.LiquidCommerce.elements.actions.cart.toggleCart();
 });
 ```
 
@@ -88,7 +88,7 @@ interface IAddProductParams {
 
 ```javascript
 // Add single product
-await window.elements.actions.cart.addProduct([
+await window.LiquidCommerce.elements.actions.cart.addProduct([
   {
     identifier: '00619947000020',
     fulfillmentType: 'shipping',
@@ -97,7 +97,7 @@ await window.elements.actions.cart.addProduct([
 ], true);  // Open cart after adding
 
 // Add multiple products
-await window.elements.actions.cart.addProduct([
+await window.LiquidCommerce.elements.actions.cart.addProduct([
   {
     identifier: '00619947000020',
     fulfillmentType: 'shipping',
@@ -149,7 +149,7 @@ applyPromoCode(promoCode: string): Promise<void>
 
 ```javascript
 try {
-  await window.elements.actions.cart.applyPromoCode('SUMMER20');
+  await window.LiquidCommerce.elements.actions.cart.applyPromoCode('SUMMER20');
   console.log('Promo code applied successfully');
 } catch (error) {
   console.error('Invalid promo code:', error);
@@ -178,7 +178,7 @@ removePromoCode(): Promise<void>
 ### Example
 
 ```javascript
-await window.elements.actions.cart.removePromoCode();
+await window.LiquidCommerce.elements.actions.cart.removePromoCode();
 ```
 
 ---
@@ -196,7 +196,7 @@ resetCart(): Promise<void>
 ### Example
 
 ```javascript
-await window.elements.actions.cart.resetCart();
+await window.LiquidCommerce.elements.actions.cart.resetCart();
 console.log('Cart cleared');
 ```
 
@@ -238,7 +238,7 @@ interface IBaseCartEventData {
 ### Example
 
 ```javascript
-const cart = window.elements.actions.cart.getDetails();
+const cart = window.LiquidCommerce.elements.actions.cart.getDetails();
 
 console.log(`Cart ID: ${cart.cartId}`);
 console.log(`Items: ${cart.itemsCount}`);
@@ -256,7 +256,7 @@ if (cart.promoCode) {
 
 ```javascript
 function updateCartSummary() {
-  const cart = window.elements.actions.cart.getDetails();
+  const cart = window.LiquidCommerce.elements.actions.cart.getDetails();
   
   document.getElementById('cart-count').textContent = cart.itemsCount;
   document.getElementById('cart-total').textContent = `$${cart.total / 100}`;
@@ -270,21 +270,21 @@ window.addEventListener('lce:actions.cart_updated', updateCartSummary);
 
 ```javascript
 document.getElementById('checkout-btn').addEventListener('click', () => {
-  const cart = window.elements.actions.cart.getDetails();
+  const cart = window.LiquidCommerce.elements.actions.cart.getDetails();
   
   if (cart.itemsCount === 0) {
     alert('Your cart is empty');
     return;
   }
   
-  window.elements.actions.checkout.openCheckout();
+  window.LiquidCommerce.elements.actions.checkout.openCheckout();
 });
 ```
 
 #### Track Cart Value
 
 ```javascript
-const cart = window.elements.actions.cart.getDetails();
+const cart = window.LiquidCommerce.elements.actions.cart.getDetails();
 
 gtag('event', 'view_cart', {
   value: cart.total / 100,

package/docs/v1/api/actions/checkout-actions.md

@@ -13,7 +13,7 @@ openCheckout(): void
 Opens the checkout drawer or navigates to checkout page.
 
 ```javascript
-window.elements.actions.checkout.openCheckout();
+window.LiquidCommerce.elements.actions.checkout.openCheckout();
 ```
 
 ### actions.checkout.closeCheckout()
@@ -25,7 +25,7 @@ closeCheckout(): void
 Closes the checkout drawer.
 
 ```javascript
-window.elements.actions.checkout.closeCheckout();
+window.LiquidCommerce.elements.actions.checkout.closeCheckout();
 ```
 
 ### actions.checkout.toggleCheckout()
@@ -37,7 +37,7 @@ toggleCheckout(): void
 Toggles checkout open/closed.
 
 ```javascript
-window.elements.actions.checkout.toggleCheckout();
+window.LiquidCommerce.elements.actions.checkout.toggleCheckout();
 ```
 
 ### actions.checkout.exitCheckout()
@@ -49,7 +49,7 @@ exitCheckout(): void
 Navigates away from checkout (requires `exitUrl` configuration).
 
 ```javascript
-window.elements.actions.checkout.exitCheckout();
+window.LiquidCommerce.elements.actions.checkout.exitCheckout();
 ```
 
 ## Product Actions
@@ -63,7 +63,7 @@ addProduct(params: IAddProductParams[], openCheckout?: boolean): Promise<void>
 Add products directly to checkout, bypassing the cart.
 
 ```javascript
-await window.elements.actions.checkout.addProduct([
+await window.LiquidCommerce.elements.actions.checkout.addProduct([
   {
     identifier: '00619947000020',
     fulfillmentType: 'shipping',
@@ -83,7 +83,7 @@ applyPromoCode(promoCode: string): Promise<void>
 Apply a promo code during checkout.
 
 ```javascript
-await window.elements.actions.checkout.applyPromoCode('WELCOME10');
+await window.LiquidCommerce.elements.actions.checkout.applyPromoCode('WELCOME10');
 ```
 
 ### actions.checkout.removePromoCode()
@@ -95,7 +95,7 @@ removePromoCode(): Promise<void>
 Remove the active promo code.
 
 ```javascript
-await window.elements.actions.checkout.removePromoCode();
+await window.LiquidCommerce.elements.actions.checkout.removePromoCode();
 ```
 
 ### actions.checkout.applyGiftCard()
@@ -107,7 +107,7 @@ applyGiftCard(code: string): Promise<void>
 Apply a gift card.
 
 ```javascript
-await window.elements.actions.checkout.applyGiftCard('GIFT-1234-5678-9012');
+await window.LiquidCommerce.elements.actions.checkout.applyGiftCard('GIFT-1234-5678-9012');
 ```
 
 ### actions.checkout.removeGiftCard()
@@ -119,7 +119,7 @@ removeGiftCard(code: string): Promise<void>
 Remove a gift card.
 
 ```javascript
-await window.elements.actions.checkout.removeGiftCard('GIFT-1234-5678-9012');
+await window.LiquidCommerce.elements.actions.checkout.removeGiftCard('GIFT-1234-5678-9012');
 ```
 
 ## Toggle Actions
@@ -134,13 +134,13 @@ Enable/disable gift mode.
 
 ```javascript
 // Enable
-await window.elements.actions.checkout.toggleIsGift(true);
+await window.LiquidCommerce.elements.actions.checkout.toggleIsGift(true);
 
 // Disable
-await window.elements.actions.checkout.toggleIsGift(false);
+await window.LiquidCommerce.elements.actions.checkout.toggleIsGift(false);
 
 // Toggle
-await window.elements.actions.checkout.toggleIsGift();
+await window.LiquidCommerce.elements.actions.checkout.toggleIsGift();
 ```
 
 ### actions.checkout.toggleBillingSameAsShipping()
@@ -153,10 +153,10 @@ Set whether billing address matches shipping.
 
 ```javascript
 // Use shipping address for billing
-await window.elements.actions.checkout.toggleBillingSameAsShipping(true);
+await window.LiquidCommerce.elements.actions.checkout.toggleBillingSameAsShipping(true);
 
 // Use different billing address
-await window.elements.actions.checkout.toggleBillingSameAsShipping(false);
+await window.LiquidCommerce.elements.actions.checkout.toggleBillingSameAsShipping(false);
 ```
 
 ### actions.checkout.toggleMarketingPreferences()
@@ -169,10 +169,10 @@ Set marketing opt-in preferences.
 
 ```javascript
 // Opt into email marketing
-await window.elements.actions.checkout.toggleMarketingPreferences('canEmail', true);
+await window.LiquidCommerce.elements.actions.checkout.toggleMarketingPreferences('canEmail', true);
 
 // Opt into SMS marketing
-await window.elements.actions.checkout.toggleMarketingPreferences('canSms', true);
+await window.LiquidCommerce.elements.actions.checkout.toggleMarketingPreferences('canSms', true);
 ```
 
 ## Form Update Actions
@@ -192,7 +192,7 @@ Pre-fill customer information.
 - `company`
 
 ```javascript
-window.elements.actions.checkout.updateCustomerInfo({
+window.LiquidCommerce.elements.actions.checkout.updateCustomerInfo({
   firstName: 'John',
   lastName: 'Doe',
   email: 'john@example.com',
@@ -218,7 +218,7 @@ Pre-fill billing address.
 - `city`, `state`, `zipCode`
 
 ```javascript
-window.elements.actions.checkout.updateBillingInfo({
+window.LiquidCommerce.elements.actions.checkout.updateBillingInfo({
   firstName: 'John',
   lastName: 'Doe',
   email: 'john@example.com',
@@ -246,7 +246,7 @@ Pre-fill gift recipient information.
 - `message`, `addressTwo`
 
 ```javascript
-window.elements.actions.checkout.updateGiftInfo({
+window.LiquidCommerce.elements.actions.checkout.updateGiftInfo({
   firstName: 'Jane',
   lastName: 'Smith',
   email: 'jane@example.com',
@@ -267,7 +267,7 @@ getDetails(): ICheckoutDetailsEventData
 Retrieve current checkout information.
 
 ```javascript
-const checkout = window.elements.actions.checkout.getDetails();
+const checkout = window.LiquidCommerce.elements.actions.checkout.getDetails();
 
 console.log(`Cart ID: ${checkout.cartId}`);
 console.log(`Total: $${checkout.amounts.total / 100}`);
@@ -306,7 +306,7 @@ interface ICheckoutDetailsEventData {
 ```javascript
 window.addEventListener('lce:actions.checkout_opened', () => {
   if (userIsLoggedIn) {
-    window.elements.actions.checkout.updateCustomerInfo({
+    window.LiquidCommerce.elements.actions.checkout.updateCustomerInfo({
       firstName: currentUser.firstName,
       lastName: currentUser.lastName,
       email: currentUser.email,
@@ -342,7 +342,7 @@ window.addEventListener('lce:actions.checkout_submit_completed', (event) => {
 
 ```javascript
 document.getElementById('gift-checkbox').addEventListener('change', async (e) => {
-  await window.elements.actions.checkout.toggleIsGift(e.target.checked);
+  await window.LiquidCommerce.elements.actions.checkout.toggleIsGift(e.target.checked);
   
   if (e.target.checked) {
     showGiftForm();
@@ -361,7 +361,7 @@ const campaignCode = params.get('promo');
 if (campaignCode) {
   window.addEventListener('lce:actions.checkout_opened', async () => {
     try {
-      await window.elements.actions.checkout.applyPromoCode(campaignCode);
+      await window.LiquidCommerce.elements.actions.checkout.applyPromoCode(campaignCode);
     } catch (error) {
       console.log('Invalid campaign code');
     }

package/docs/v1/api/actions/product-actions.md

@@ -40,7 +40,7 @@ interface IBaseProductEventData {
 ### Example
 
 ```javascript
-const productData = window.elements.actions.product.getDetails('00619947000020');
+const productData = window.LiquidCommerce.elements.actions.product.getDetails('00619947000020');
 
 console.log(productData.name);        // "Premium Whiskey"
 console.log(productData.price / 100); // 49.99
@@ -57,7 +57,7 @@ console.log(productData.quantity);     // 1
 
 ```javascript
 try {
-  const data = window.elements.actions.product.getDetails('invalid_id');
+  const data = window.LiquidCommerce.elements.actions.product.getDetails('invalid_id');
 } catch (error) {
   console.error('Product not found:', error.message);
 }
@@ -68,7 +68,7 @@ try {
 #### Display Product Info Elsewhere
 
 ```javascript
-const product = window.elements.actions.product.getDetails('00619947000020');
+const product = window.LiquidCommerce.elements.actions.product.getDetails('00619947000020');
 
 document.getElementById('product-name').textContent = product.name;
 document.getElementById('product-price').textContent = `$${product.price / 100}`;
@@ -78,7 +78,7 @@ document.getElementById('product-price').textContent = `$${product.price / 100}`
 
 ```javascript
 window.addEventListener('lce:actions.product_loaded', () => {
-  const product = window.elements.actions.product.getDetails('00619947000020');
+  const product = window.LiquidCommerce.elements.actions.product.getDetails('00619947000020');
   
   gtag('event', 'view_item', {
     items: [{
@@ -94,8 +94,8 @@ window.addEventListener('lce:actions.product_loaded', () => {
 #### Custom Product Comparison
 
 ```javascript
-const product1 = window.elements.actions.product.getDetails('00619947000020');
-const product2 = window.elements.actions.product.getDetails('08504405135');
+const product1 = window.LiquidCommerce.elements.actions.product.getDetails('00619947000020');
+const product2 = window.LiquidCommerce.elements.actions.product.getDetails('08504405135');
 
 if (product1.price < product2.price) {
   console.log(`${product1.name} is cheaper`);

package/docs/v1/api/client.md

@@ -201,17 +201,17 @@ development: {
 
 ## Global Access
 
-After initialization, the client is available globally:
+After initialization, the client is available globally under the `window.LiquidCommerce` namespace:
 
 ```javascript
-window.elements
+window.LiquidCommerce.elements
 ```
 
 This allows access from anywhere in your application:
 
 ```javascript
 // From any script
-window.elements.actions.cart.openCart();
+window.LiquidCommerce.elements.actions.cart.openCart();
 ```
 
 ## Client Ready Event
@@ -225,7 +225,7 @@ window.addEventListener('lce:actions.client_ready', ( event ) => {
   console.log(`Elements SDK v${version} ready`);
 
   // Safe to use client
-  window.elements.injectProductElement([...]);
+  window.LiquidCommerce.elements.injectProductElement([...]);
 });
 ```
 
@@ -345,7 +345,7 @@ The SDK catches and contains its own errors:
 
 ```javascript
 // Even if SDK throws, your app continues
-window.elements.actions.cart.addProduct([/* invalid */]);
+window.LiquidCommerce.elements.actions.cart.addProduct([/* invalid */]);
 
 // Your code still runs
 console.log('App still working');
@@ -430,15 +430,15 @@ await Elements('KEY', { env: 'production' });
 
 ### Use Global Access
 
-After initialization, use `window.elements`:
+After initialization, use `window.LiquidCommerce.elements`:
 
 ```javascript
 // Initialize once
 await Elements('KEY', { env: 'production' });
 
 // Use globally
-window.elements.actions.cart.openCart();
-window.elements.ui.cartButton('cart-btn');
+window.LiquidCommerce.elements.actions.cart.openCart();
+window.LiquidCommerce.elements.ui.cartButton('cart-btn');
 ```
 
 ### Check Client Ready
@@ -446,13 +446,13 @@ window.elements.ui.cartButton('cart-btn');
 Wait for client ready before using:
 
 ```javascript
-if (window.elements) {
+if (window.LiquidCommerce?.elements) {
   // Client is ready
-  window.elements.actions.cart.openCart();
+  window.LiquidCommerce.elements.actions.cart.openCart();
 } else {
   // Wait for client ready
   window.addEventListener('lce:actions.client_ready', () => {
-    window.elements.actions.cart.openCart();
+    window.LiquidCommerce.elements.actions.cart.openCart();
   });
 }
 ```