@liquidcommerce/elements-sdk 2.7.2 → 2.7.3

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();
   });
 }
 ```

package/docs/v1/api/ui-helpers.md

@@ -23,10 +23,10 @@ cartButton(containerId: string, showItemsCount?: boolean): void
 
 ```javascript
 // Simple cart button
-window.elements.ui.cartButton('header-cart');
+window.LiquidCommerce.elements.ui.cartButton('header-cart');
 
 // Cart button with item count badge
-window.elements.ui.cartButton('header-cart', true);
+window.LiquidCommerce.elements.ui.cartButton('header-cart', true);
 ```
 
 ---
@@ -51,10 +51,10 @@ floatingCartButton(showItemsCount?: boolean): void
 
 ```javascript
 // Floating button without badge
-window.elements.ui.floatingCartButton();
+window.LiquidCommerce.elements.ui.floatingCartButton();
 
 // Floating button with badge
-window.elements.ui.floatingCartButton(true);
+window.LiquidCommerce.elements.ui.floatingCartButton(true);
 ```
 
 ---
@@ -82,7 +82,7 @@ cartSubtotal(elementId: string): void
 ```
 
 ```javascript
-window.elements.ui.cartSubtotal('cart-total');
+window.LiquidCommerce.elements.ui.cartSubtotal('cart-total');
 // Element now shows: "$49.99"
 // Updates automatically when cart changes
 ```
@@ -114,10 +114,10 @@ cartItemsCount(elementId: string, options?: { hideZero: boolean }): void
 
 ```javascript
 // Hide when cart is empty
-window.elements.ui.cartItemsCount('items-count', { hideZero: true });
+window.LiquidCommerce.elements.ui.cartItemsCount('items-count', { hideZero: true });
 
 // Always show count (even "0")
-window.elements.ui.cartItemsCount('items-count', { hideZero: false });
+window.LiquidCommerce.elements.ui.cartItemsCount('items-count', { hideZero: false });
 ```
 
 ## Use Cases
@@ -135,7 +135,7 @@ window.elements.ui.cartItemsCount('items-count', { hideZero: false });
 
 <script>
 window.addEventListener('lce:actions.client_ready', () => {
-  window.elements.ui.cartButton('cart-btn', true);
+  window.LiquidCommerce.elements.ui.cartButton('cart-btn', true);
 });
 </script>
 ```
@@ -151,8 +151,8 @@ window.addEventListener('lce:actions.client_ready', () => {
 
 <script>
 window.addEventListener('lce:actions.client_ready', () => {
-  window.elements.ui.cartItemsCount('item-count');
-  window.elements.ui.cartSubtotal('cart-total');
+  window.LiquidCommerce.elements.ui.cartItemsCount('item-count');
+  window.LiquidCommerce.elements.ui.cartSubtotal('cart-total');
 });
 </script>
 ```
@@ -162,7 +162,7 @@ window.addEventListener('lce:actions.client_ready', () => {
 ```javascript
 // Show floating button only on mobile
 if (window.innerWidth < 768) {
-  window.elements.ui.floatingCartButton(true);
+  window.LiquidCommerce.elements.ui.floatingCartButton(true);
 }
 ```
 

package/docs/v1/examples/advanced-patterns.md

@@ -22,7 +22,7 @@ await client.injectProductElement(
 ## 2) Pre-Set Address (Skip Prompt)
 
 ```javascript
-await window.elements.actions.address.setAddressManually(
+await window.LiquidCommerce.elements.actions.address.setAddressManually(
   {
     one: '123 Main St',
     two: 'Apt 4',

package/docs/v1/examples/checkout-flow.md

@@ -75,7 +75,7 @@ When users click checkout, the cart redirects to your hosted checkout page with
 ## Optional: Skip Cart and Go Directly to Checkout
 
 ```javascript
-await window.elements.actions.checkout.addProduct([
+await window.LiquidCommerce.elements.actions.checkout.addProduct([
   {
     identifier: '00619947000020',
     fulfillmentType: 'shipping',

package/docs/v1/getting-started/concepts.md

@@ -72,7 +72,7 @@ When using the CDN, the SDK auto-initializes on page load:
 ></script>
 ```
 
-The client becomes available globally as `window.elements`.
+The client becomes available globally under `window.LiquidCommerce.elements`.
 
 #### Programmatic Initialization (NPM)
 
@@ -115,7 +115,7 @@ window.addEventListener('lce:actions.client_ready', (event) => {
   console.log('Ready at:', event.detail.timestamp);
   
   // Safe to use client
-  window.elements.actions.cart.openCart();
+  window.LiquidCommerce.elements.actions.cart.openCart();
 });
 ```
 
@@ -193,7 +193,7 @@ You can use declarative initialization and programmatic control:
 <script>
 // Later, add products programmatically
 window.addEventListener('lce:actions.client_ready', async () => {
-  await window.elements.injectProductElement([
+  await window.LiquidCommerce.elements.injectProductElement([
     { containerId: 'dynamic-product', identifier: selectedProductId }
   ]);
 });
@@ -236,7 +236,7 @@ When you update the cart in one tab, all other tabs update automatically:
 
 ```javascript
 // Tab 1
-await window.elements.actions.cart.addProduct([...]);
+await window.LiquidCommerce.elements.actions.cart.addProduct([...]);
 
 // Tab 2 automatically receives the update
 // No additional code needed
@@ -261,14 +261,14 @@ Components automatically rerender when data changes:
 
 ```javascript
 // This triggers a rerender
-await window.elements.actions.cart.addProduct([...]);
+await window.LiquidCommerce.elements.actions.cart.addProduct([...]);
 // Cart component updates automatically
 ```
 
 Manual rerendering:
 
 ```javascript
-const components = window.elements.getInjectedComponents();
+const components = window.LiquidCommerce.elements.getInjectedComponents();
 const productComponent = components.get('product-1');
 
 // Force rerender
@@ -337,7 +337,7 @@ SDK errors are caught and logged, but don't propagate to your application:
 ```javascript
 // Even if SDK throws an error, your code continues
 try {
-  await window.elements.actions.cart.addProduct([/* invalid data */]);
+  await window.LiquidCommerce.elements.actions.cart.addProduct([/* invalid data */]);
 } catch (error) {
   console.log('This error is caught by SDK internally');
 }

package/docs/v1/getting-started/installation.md

@@ -237,7 +237,7 @@ export default function ProductPage() {
 }
 ```
 
-> **Note:** When using Next.js or other frameworks with server-side rendering, the SDK must be initialized on the client side only. The SDK requires browser APIs (Window, Document, Web Components) and cannot run server-side.
+> **Note:** The SDK is SSR-safe. When imported in a Node.js / SSR environment, a lightweight stub is resolved automatically — factory functions return `null` and no browser APIs are accessed. Initialize on the client (e.g., `useEffect`, `onMounted`) to get the real client.
 
 ## Configuration Options
 
@@ -267,7 +267,7 @@ Open your browser's console and check for:
 
 ```javascript
 // The client is available globally
-console.log(window.elements);
+console.log(window.LiquidCommerce.elements);
 // Should output: { injectProductElement: ƒ, ui: {...}, actions: {...}, ... }
 ```
 

package/docs/v1/getting-started/quick-start.md

@@ -156,7 +156,7 @@ If you prefer JavaScript over HTML attributes:
   <script defer>
     // Wait for SDK to be ready
     window.addEventListener('lce:actions.client_ready', async (event) => {
-      const client = window.elements;
+      const client = window.LiquidCommerce.elements;
       
       // Inject the product
       await client.injectProductElement([
@@ -252,7 +252,7 @@ Want to customize the look, visit the Elements Builder in our [Partner Portal](h
 ```html
 <script>
 window.addEventListener('lce:actions.client_ready', async () => {
-  const client = window.elements;
+  const client = window.LiquidCommerce.elements;
   
   // You can customize after initialization
   // See Theming Guide for more options
@@ -313,7 +313,7 @@ The cart should open automatically after adding a product. If it doesn't:
 
 1. Check browser console for JavaScript errors
 2. Verify no other scripts are conflicting
-3. Try manually opening: `window.elements.actions.cart.openCart()`
+3. Try manually opening: `window.LiquidCommerce.elements.actions.cart.openCart()`
 
 ## Next Steps
 

package/docs/v1/guides/address-component.md

@@ -52,7 +52,7 @@ await client.injectAddressElement('address-container', {
 The recommended method - provides accurate geocoding:
 
 ```javascript
-await window.elements.actions.address.setAddressByPlacesId('ChIJOwg_06VPwokRYv534QaPC8g');
+await window.LiquidCommerce.elements.actions.address.setAddressByPlacesId('ChIJOwg_06VPwokRYv534QaPC8g');
 ```
 
 **How to get a Places ID:**
@@ -64,7 +64,7 @@ Visit [Google Place IDs](https://developers.google.com/maps/documentation/places
 For custom address flows without Google Places:
 
 ```javascript
-await window.elements.actions.address.setAddressManually(
+await window.LiquidCommerce.elements.actions.address.setAddressManually(
   {
     one: '123 Main Street',
     two: 'Apt 4',         // Optional
@@ -93,7 +93,7 @@ await window.elements.actions.address.setAddressManually(
 Retrieve the current address:
 
 ```javascript
-const addressData = window.elements.actions.address.getDetails();
+const addressData = window.LiquidCommerce.elements.actions.address.getDetails();
 
 console.log(addressData);
 // {
@@ -120,7 +120,7 @@ console.log(addressData);
 Remove the current address:
 
 ```javascript
-await window.elements.actions.address.clear();
+await window.LiquidCommerce.elements.actions.address.clear();
 ```
 
 This will:
@@ -209,7 +209,7 @@ Create a dedicated page for address selection:
   
   <script>
     window.addEventListener('lce:actions.client_ready', async () => {
-      await window.elements.injectAddressElement('address');
+      await window.LiquidCommerce.elements.injectAddressElement('address');
     });
     
     window.addEventListener('lce:actions.address_updated', () => {
@@ -237,7 +237,7 @@ document.getElementById('save-address-btn').addEventListener('click', async () =
   const coords = await geocodeAddress(address);
   
   try {
-    await window.elements.actions.address.setAddressManually(address, coords);
+    await window.LiquidCommerce.elements.actions.address.setAddressManually(address, coords);
     showSuccessMessage('Address saved!');
   } catch (error) {
     showErrorMessage('Invalid address');
@@ -251,7 +251,7 @@ document.getElementById('save-address-btn').addEventListener('click', async () =
 // After user logs in, set their saved address
 window.addEventListener('lce:actions.client_ready', async () => {
   if (userIsLoggedIn && !currentAddressSet) {
-    await window.elements.actions.address.setAddressManually(
+    await window.LiquidCommerce.elements.actions.address.setAddressManually(
       user.savedAddress,
       user.savedCoordinates
     );
@@ -288,7 +288,7 @@ const locations = [
 document.getElementById('location-select').addEventListener('change', async (e) => {
   const selectedLocation = locations[e.target.value];
   
-  await window.elements.actions.address.setAddressByPlacesId(
+  await window.LiquidCommerce.elements.actions.address.setAddressByPlacesId(
     selectedLocation.placesId
   );
   
@@ -328,7 +328,7 @@ Set address as early as possible in the user flow:
 ```javascript
 // On homepage or landing page
 window.addEventListener('lce:actions.client_ready', () => {
-  const currentAddress = window.elements.actions.address.getDetails();
+  const currentAddress = window.LiquidCommerce.elements.actions.address.getDetails();
   
   if (!currentAddress) {
     // Show address prompt
@@ -380,7 +380,7 @@ async function setAddress(address, coords) {
   }
   
   // Set address
-  await window.elements.actions.address.setAddressManually(address, coords);
+  await window.LiquidCommerce.elements.actions.address.setAddressManually(address, coords);
 }
 ```
 
@@ -388,7 +388,7 @@ async function setAddress(address, coords) {
 
 ```javascript
 try {
-  await window.elements.actions.address.setAddressByPlacesId(placesId);
+  await window.LiquidCommerce.elements.actions.address.setAddressByPlacesId(placesId);
 } catch (error) {
   console.error('Failed to set address:', error);