@liquidcommerce/elements-sdk 2.7.2 → 2.7.4

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.
Files changed (111) hide show
  1. package/README.md +1 -1
  2. package/dist/index.checkout.esm.js +7345 -7451
  3. package/dist/index.esm.js +12318 -12512
  4. package/dist/ssr-stub.checkout.esm.js +18 -0
  5. package/dist/ssr-stub.esm.js +270 -0
  6. package/dist/types/auto-initialize/shared-utils.d.ts +3 -1
  7. package/dist/types/clients/base.d.ts +7 -4
  8. package/dist/types/clients/builder.d.ts +2 -1
  9. package/dist/types/clients/checkout.d.ts +2 -10
  10. package/dist/types/clients/helpers.d.ts +1 -1
  11. package/dist/types/clients/main.d.ts +2 -1
  12. package/dist/types/constants/core.constant.d.ts +0 -6
  13. package/dist/types/core/api/api-client.service.d.ts +16 -15
  14. package/dist/types/core/api/api-result.d.ts +19 -0
  15. package/dist/types/core/api/auth-client.service.d.ts +13 -5
  16. package/dist/types/core/client/client-action.service.d.ts +1 -1
  17. package/dist/types/core/client/client-config.service.d.ts +1 -1
  18. package/dist/types/core/pubsub/pubsub.service.d.ts +0 -2
  19. package/dist/types/core/singleton-manager.service.d.ts +12 -8
  20. package/dist/types/core/store/interfaces/core.interface.d.ts +8 -12
  21. package/dist/types/core/store/interfaces/product-list.interface.d.ts +12 -28
  22. package/dist/types/core/store/store.constant.d.ts +2 -1
  23. package/dist/types/core/store/store.service.d.ts +1 -0
  24. package/dist/types/core/telemetry/telemetry.service.d.ts +1 -0
  25. package/dist/types/enums/core.enum.d.ts +5 -4
  26. package/dist/types/index.checkout.d.ts +3 -2
  27. package/dist/types/index.checkout.umd.d.ts +1 -1
  28. package/dist/types/index.d.ts +4 -1
  29. package/dist/types/interfaces/api/product-list.interface.d.ts +2 -1
  30. package/dist/types/interfaces/client.interface.d.ts +72 -0
  31. package/dist/types/interfaces/component.interface.d.ts +7 -0
  32. package/dist/types/interfaces/config.interface.d.ts +46 -0
  33. package/dist/types/interfaces/configs/address.interface.d.ts +1 -1
  34. package/dist/types/interfaces/configs/cart.interface.d.ts +1 -1
  35. package/dist/types/interfaces/configs/checkout.interface.d.ts +1 -1
  36. package/dist/types/interfaces/configs/global.interface.d.ts +2 -2
  37. package/dist/types/interfaces/configs/product-list.interface.d.ts +34 -20
  38. package/dist/types/interfaces/configs/product.interface.d.ts +1 -1
  39. package/dist/types/interfaces/injection.interface.d.ts +47 -0
  40. package/dist/types/modules/address/address-input.component.d.ts +0 -11
  41. package/dist/types/modules/address/address.command.d.ts +1 -1
  42. package/dist/types/modules/checkout/components/checkout-completed.component.d.ts +1 -0
  43. package/dist/types/modules/product/components/product-image-carousel.component.d.ts +3 -0
  44. package/dist/types/modules/product/components/product-retailers-carousel.component.d.ts +3 -0
  45. package/dist/types/modules/product/components/product-retailers-popup-list.component.d.ts +5 -2
  46. package/dist/types/modules/product/product.commands.d.ts +1 -3
  47. package/dist/types/modules/product-list/components/card-components/index.d.ts +0 -2
  48. package/dist/types/modules/product-list/components/card-components/product-badge.d.ts +1 -0
  49. package/dist/types/modules/product-list/components/card-components/product-button.d.ts +1 -3
  50. package/dist/types/modules/product-list/components/card-components/product-quantity-selector.d.ts +3 -4
  51. package/dist/types/modules/product-list/components/card-components/product-sizes-list.d.ts +9 -5
  52. package/dist/types/modules/product-list/components/filter-components/product-list-toggle-filters.d.ts +0 -6
  53. package/dist/types/modules/product-list/components/index.d.ts +1 -1
  54. package/dist/types/modules/product-list/components/product-list-engraving.component.d.ts +7 -5
  55. package/dist/types/modules/product-list/components/product-list-filters.component.d.ts +4 -5
  56. package/dist/types/modules/product-list/components/product-list-product-engraving-lines.component.d.ts +22 -0
  57. package/dist/types/modules/product-list/components/product-list-product-pre-cart.component.d.ts +32 -14
  58. package/dist/types/modules/product-list/components/product-list-search.component.d.ts +4 -3
  59. package/dist/types/modules/product-list/product-list-card.component.d.ts +20 -16
  60. package/dist/types/modules/product-list/product-list-filter.utils.d.ts +8 -0
  61. package/dist/types/modules/product-list/product-list.commands.d.ts +16 -62
  62. package/dist/types/modules/product-list/product-list.component.d.ts +3 -11
  63. package/dist/types/modules/product-list/product-list.constants.d.ts +0 -1
  64. package/dist/types/modules/product-list/product-list.interface.d.ts +0 -30
  65. package/dist/types/modules/ui-components/drawer/drawer.component.d.ts +1 -0
  66. package/dist/types/modules/ui-components/engraving/engraving-form.component.d.ts +2 -10
  67. package/dist/types/modules/ui-components/engraving/engraving-view.component.d.ts +5 -1
  68. package/dist/types/modules/ui-components/promo-code-ticker/promo-code-ticker.component.d.ts +1 -1
  69. package/dist/types/modules/ui-components/ui.commands.d.ts +6 -4
  70. package/dist/types/ssr/stub.checkout.d.ts +6 -0
  71. package/dist/types/ssr/stub.d.ts +10 -0
  72. package/dist/types/utils/product-selection.d.ts +16 -0
  73. package/dist/types/utils/product.d.ts +10 -0
  74. package/docs/v1/README.md +2 -2
  75. package/docs/v1/api/actions/address-actions.md +11 -11
  76. package/docs/v1/api/actions/cart-actions.md +13 -13
  77. package/docs/v1/api/actions/checkout-actions.md +23 -23
  78. package/docs/v1/api/actions/product-actions.md +6 -6
  79. package/docs/v1/api/client.md +11 -11
  80. package/docs/v1/api/ui-helpers.md +11 -11
  81. package/docs/v1/examples/advanced-patterns.md +1 -1
  82. package/docs/v1/examples/checkout-flow.md +1 -1
  83. package/docs/v1/getting-started/concepts.md +7 -7
  84. package/docs/v1/getting-started/installation.md +2 -2
  85. package/docs/v1/getting-started/quick-start.md +3 -3
  86. package/docs/v1/guides/address-component.md +11 -11
  87. package/docs/v1/guides/best-practices.md +14 -14
  88. package/docs/v1/guides/cart-component.md +23 -23
  89. package/docs/v1/guides/checkout-component.md +24 -24
  90. package/docs/v1/guides/product-component.md +5 -5
  91. package/docs/v1/integration/nextjs.md +11 -2
  92. package/docs/v1/integration/react.md +3 -3
  93. package/docs/v1/integration/vanilla-js.md +1 -1
  94. package/docs/v1/integration/vue.md +24 -0
  95. package/docs/v1/reference/error-handling.md +2 -2
  96. package/docs/v1/reference/troubleshooting.md +10 -2
  97. package/package.json +17 -13
  98. package/dist/types/interfaces/core.interface.d.ts +0 -140
  99. package/dist/types/modules/product-list/components/card-components/product-fulfillments.d.ts +0 -12
  100. package/dist/types/modules/product-list/components/card-components/product-title.d.ts +0 -6
  101. package/dist/types/modules/product-list/components/product-list-retailers.component.d.ts +0 -26
  102. package/dist/types/modules/ui-components/modal/modal.component.d.ts +0 -23
  103. package/dist/types/modules/ui-components/styles/modal.style.d.ts +0 -1
  104. package/docs/gitbook/actions.md +0 -964
  105. package/docs/gitbook/address.md +0 -48
  106. package/docs/gitbook/cart.md +0 -65
  107. package/docs/gitbook/checkout.md +0 -131
  108. package/docs/gitbook/events.md +0 -1765
  109. package/docs/gitbook/overview.md +0 -166
  110. package/docs/gitbook/product.md +0 -64
  111. package/docs/gitbook/quick-start-guide.md +0 -393
@@ -21,7 +21,7 @@ setAddressByPlacesId(placesId: string): Promise<void>
21
21
  ### Example
22
22
 
23
23
  ```javascript
24
- await window.elements.actions.address.setAddressByPlacesId(
24
+ await window.LiquidCommerce.elements.actions.address.setAddressByPlacesId(
25
25
  'ChIJOwg_06VPwokRYv534QaPC8g'
26
26
  );
27
27
  ```
@@ -65,7 +65,7 @@ interface IAddressCoordinates {
65
65
  ### Example
66
66
 
67
67
  ```javascript
68
- await window.elements.actions.address.setAddressManually(
68
+ await window.LiquidCommerce.elements.actions.address.setAddressManually(
69
69
  {
70
70
  one: '123 Main Street',
71
71
  two: 'Apt 4',
@@ -110,7 +110,7 @@ clear(): Promise<void>
110
110
  ### Example
111
111
 
112
112
  ```javascript
113
- await window.elements.actions.address.clear();
113
+ await window.LiquidCommerce.elements.actions.address.clear();
114
114
  ```
115
115
 
116
116
  ### Effects
@@ -156,7 +156,7 @@ Returns `null` if no address is set.
156
156
  ### Example
157
157
 
158
158
  ```javascript
159
- const address = window.elements.actions.address.getDetails();
159
+ const address = window.LiquidCommerce.elements.actions.address.getDetails();
160
160
 
161
161
  if (address) {
162
162
  console.log('Current address:', address.formattedAddress);
@@ -171,7 +171,7 @@ if (address) {
171
171
  #### Check if Address is Set
172
172
 
173
173
  ```javascript
174
- if (!window.elements.actions.address.getDetails()) {
174
+ if (!window.LiquidCommerce.elements.actions.address.getDetails()) {
175
175
  // Prompt user to set address
176
176
  showAddressPrompt();
177
177
  }
@@ -180,7 +180,7 @@ if (!window.elements.actions.address.getDetails()) {
180
180
  #### Display Current Address
181
181
 
182
182
  ```javascript
183
- const address = window.elements.actions.address.getDetails();
183
+ const address = window.LiquidCommerce.elements.actions.address.getDetails();
184
184
 
185
185
  if (address) {
186
186
  document.getElementById('current-address').textContent =
@@ -217,10 +217,10 @@ Google Places provides accurate geocoding:
217
217
 
218
218
  ```javascript
219
219
  // Good - accurate and validated
220
- await window.elements.actions.address.setAddressByPlacesId(placesId);
220
+ await window.LiquidCommerce.elements.actions.address.setAddressByPlacesId(placesId);
221
221
 
222
222
  // Less ideal - requires manual geocoding
223
- await window.elements.actions.address.setAddressManually(address, coords);
223
+ await window.LiquidCommerce.elements.actions.address.setAddressManually(address, coords);
224
224
  ```
225
225
 
226
226
  ### Validate Manual Addresses
@@ -244,7 +244,7 @@ async function setManualAddress(address, coords) {
244
244
  throw new Error('Invalid ZIP code');
245
245
  }
246
246
 
247
- await window.elements.actions.address.setAddressManually(address, coords);
247
+ await window.LiquidCommerce.elements.actions.address.setAddressManually(address, coords);
248
248
  }
249
249
  ```
250
250
 
@@ -252,7 +252,7 @@ async function setManualAddress(address, coords) {
252
252
 
253
253
  ```javascript
254
254
  try {
255
- await window.elements.actions.address.setAddressByPlacesId(placesId);
255
+ await window.LiquidCommerce.elements.actions.address.setAddressByPlacesId(placesId);
256
256
  showSuccess('Address saved!');
257
257
  } catch (error) {
258
258
  console.error('Failed to set address:', error);
@@ -266,7 +266,7 @@ Set address as soon as possible in user flow:
266
266
 
267
267
  ```javascript
268
268
  window.addEventListener('lce:actions.client_ready', () => {
269
- if (!window.elements.actions.address.getDetails()) {
269
+ if (!window.LiquidCommerce.elements.actions.address.getDetails()) {
270
270
  // Prompt for address on first visit
271
271
  showAddressModal();
272
272
  }
@@ -15,7 +15,7 @@ openCart(): void
15
15
  ### Example
16
16
 
17
17
  ```javascript
18
- window.elements.actions.cart.openCart();
18
+ window.LiquidCommerce.elements.actions.cart.openCart();
19
19
  ```
20
20
 
21
21
  ---
@@ -33,7 +33,7 @@ closeCart(): void
33
33
  ### Example
34
34
 
35
35
  ```javascript
36
- window.elements.actions.cart.closeCart();
36
+ window.LiquidCommerce.elements.actions.cart.closeCart();
37
37
  ```
38
38
 
39
39
  ---
@@ -53,7 +53,7 @@ toggleCart(): void
53
53
  ```javascript
54
54
  // Add to your cart button
55
55
  document.getElementById('cart-btn').addEventListener('click', () => {
56
- window.elements.actions.cart.toggleCart();
56
+ window.LiquidCommerce.elements.actions.cart.toggleCart();
57
57
  });
58
58
  ```
59
59
 
@@ -88,7 +88,7 @@ interface IAddProductParams {
88
88
 
89
89
  ```javascript
90
90
  // Add single product
91
- await window.elements.actions.cart.addProduct([
91
+ await window.LiquidCommerce.elements.actions.cart.addProduct([
92
92
  {
93
93
  identifier: '00619947000020',
94
94
  fulfillmentType: 'shipping',
@@ -97,7 +97,7 @@ await window.elements.actions.cart.addProduct([
97
97
  ], true); // Open cart after adding
98
98
 
99
99
  // Add multiple products
100
- await window.elements.actions.cart.addProduct([
100
+ await window.LiquidCommerce.elements.actions.cart.addProduct([
101
101
  {
102
102
  identifier: '00619947000020',
103
103
  fulfillmentType: 'shipping',
@@ -149,7 +149,7 @@ applyPromoCode(promoCode: string): Promise<void>
149
149
 
150
150
  ```javascript
151
151
  try {
152
- await window.elements.actions.cart.applyPromoCode('SUMMER20');
152
+ await window.LiquidCommerce.elements.actions.cart.applyPromoCode('SUMMER20');
153
153
  console.log('Promo code applied successfully');
154
154
  } catch (error) {
155
155
  console.error('Invalid promo code:', error);
@@ -178,7 +178,7 @@ removePromoCode(): Promise<void>
178
178
  ### Example
179
179
 
180
180
  ```javascript
181
- await window.elements.actions.cart.removePromoCode();
181
+ await window.LiquidCommerce.elements.actions.cart.removePromoCode();
182
182
  ```
183
183
 
184
184
  ---
@@ -196,7 +196,7 @@ resetCart(): Promise<void>
196
196
  ### Example
197
197
 
198
198
  ```javascript
199
- await window.elements.actions.cart.resetCart();
199
+ await window.LiquidCommerce.elements.actions.cart.resetCart();
200
200
  console.log('Cart cleared');
201
201
  ```
202
202
 
@@ -238,7 +238,7 @@ interface IBaseCartEventData {
238
238
  ### Example
239
239
 
240
240
  ```javascript
241
- const cart = window.elements.actions.cart.getDetails();
241
+ const cart = window.LiquidCommerce.elements.actions.cart.getDetails();
242
242
 
243
243
  console.log(`Cart ID: ${cart.cartId}`);
244
244
  console.log(`Items: ${cart.itemsCount}`);
@@ -256,7 +256,7 @@ if (cart.promoCode) {
256
256
 
257
257
  ```javascript
258
258
  function updateCartSummary() {
259
- const cart = window.elements.actions.cart.getDetails();
259
+ const cart = window.LiquidCommerce.elements.actions.cart.getDetails();
260
260
 
261
261
  document.getElementById('cart-count').textContent = cart.itemsCount;
262
262
  document.getElementById('cart-total').textContent = `$${cart.total / 100}`;
@@ -270,21 +270,21 @@ window.addEventListener('lce:actions.cart_updated', updateCartSummary);
270
270
 
271
271
  ```javascript
272
272
  document.getElementById('checkout-btn').addEventListener('click', () => {
273
- const cart = window.elements.actions.cart.getDetails();
273
+ const cart = window.LiquidCommerce.elements.actions.cart.getDetails();
274
274
 
275
275
  if (cart.itemsCount === 0) {
276
276
  alert('Your cart is empty');
277
277
  return;
278
278
  }
279
279
 
280
- window.elements.actions.checkout.openCheckout();
280
+ window.LiquidCommerce.elements.actions.checkout.openCheckout();
281
281
  });
282
282
  ```
283
283
 
284
284
  #### Track Cart Value
285
285
 
286
286
  ```javascript
287
- const cart = window.elements.actions.cart.getDetails();
287
+ const cart = window.LiquidCommerce.elements.actions.cart.getDetails();
288
288
 
289
289
  gtag('event', 'view_cart', {
290
290
  value: cart.total / 100,
@@ -13,7 +13,7 @@ openCheckout(): void
13
13
  Opens the checkout drawer or navigates to checkout page.
14
14
 
15
15
  ```javascript
16
- window.elements.actions.checkout.openCheckout();
16
+ window.LiquidCommerce.elements.actions.checkout.openCheckout();
17
17
  ```
18
18
 
19
19
  ### actions.checkout.closeCheckout()
@@ -25,7 +25,7 @@ closeCheckout(): void
25
25
  Closes the checkout drawer.
26
26
 
27
27
  ```javascript
28
- window.elements.actions.checkout.closeCheckout();
28
+ window.LiquidCommerce.elements.actions.checkout.closeCheckout();
29
29
  ```
30
30
 
31
31
  ### actions.checkout.toggleCheckout()
@@ -37,7 +37,7 @@ toggleCheckout(): void
37
37
  Toggles checkout open/closed.
38
38
 
39
39
  ```javascript
40
- window.elements.actions.checkout.toggleCheckout();
40
+ window.LiquidCommerce.elements.actions.checkout.toggleCheckout();
41
41
  ```
42
42
 
43
43
  ### actions.checkout.exitCheckout()
@@ -49,7 +49,7 @@ exitCheckout(): void
49
49
  Navigates away from checkout (requires `exitUrl` configuration).
50
50
 
51
51
  ```javascript
52
- window.elements.actions.checkout.exitCheckout();
52
+ window.LiquidCommerce.elements.actions.checkout.exitCheckout();
53
53
  ```
54
54
 
55
55
  ## Product Actions
@@ -63,7 +63,7 @@ addProduct(params: IAddProductParams[], openCheckout?: boolean): Promise<void>
63
63
  Add products directly to checkout, bypassing the cart.
64
64
 
65
65
  ```javascript
66
- await window.elements.actions.checkout.addProduct([
66
+ await window.LiquidCommerce.elements.actions.checkout.addProduct([
67
67
  {
68
68
  identifier: '00619947000020',
69
69
  fulfillmentType: 'shipping',
@@ -83,7 +83,7 @@ applyPromoCode(promoCode: string): Promise<void>
83
83
  Apply a promo code during checkout.
84
84
 
85
85
  ```javascript
86
- await window.elements.actions.checkout.applyPromoCode('WELCOME10');
86
+ await window.LiquidCommerce.elements.actions.checkout.applyPromoCode('WELCOME10');
87
87
  ```
88
88
 
89
89
  ### actions.checkout.removePromoCode()
@@ -95,7 +95,7 @@ removePromoCode(): Promise<void>
95
95
  Remove the active promo code.
96
96
 
97
97
  ```javascript
98
- await window.elements.actions.checkout.removePromoCode();
98
+ await window.LiquidCommerce.elements.actions.checkout.removePromoCode();
99
99
  ```
100
100
 
101
101
  ### actions.checkout.applyGiftCard()
@@ -107,7 +107,7 @@ applyGiftCard(code: string): Promise<void>
107
107
  Apply a gift card.
108
108
 
109
109
  ```javascript
110
- await window.elements.actions.checkout.applyGiftCard('GIFT-1234-5678-9012');
110
+ await window.LiquidCommerce.elements.actions.checkout.applyGiftCard('GIFT-1234-5678-9012');
111
111
  ```
112
112
 
113
113
  ### actions.checkout.removeGiftCard()
@@ -119,7 +119,7 @@ removeGiftCard(code: string): Promise<void>
119
119
  Remove a gift card.
120
120
 
121
121
  ```javascript
122
- await window.elements.actions.checkout.removeGiftCard('GIFT-1234-5678-9012');
122
+ await window.LiquidCommerce.elements.actions.checkout.removeGiftCard('GIFT-1234-5678-9012');
123
123
  ```
124
124
 
125
125
  ## Toggle Actions
@@ -134,13 +134,13 @@ Enable/disable gift mode.
134
134
 
135
135
  ```javascript
136
136
  // Enable
137
- await window.elements.actions.checkout.toggleIsGift(true);
137
+ await window.LiquidCommerce.elements.actions.checkout.toggleIsGift(true);
138
138
 
139
139
  // Disable
140
- await window.elements.actions.checkout.toggleIsGift(false);
140
+ await window.LiquidCommerce.elements.actions.checkout.toggleIsGift(false);
141
141
 
142
142
  // Toggle
143
- await window.elements.actions.checkout.toggleIsGift();
143
+ await window.LiquidCommerce.elements.actions.checkout.toggleIsGift();
144
144
  ```
145
145
 
146
146
  ### actions.checkout.toggleBillingSameAsShipping()
@@ -153,10 +153,10 @@ Set whether billing address matches shipping.
153
153
 
154
154
  ```javascript
155
155
  // Use shipping address for billing
156
- await window.elements.actions.checkout.toggleBillingSameAsShipping(true);
156
+ await window.LiquidCommerce.elements.actions.checkout.toggleBillingSameAsShipping(true);
157
157
 
158
158
  // Use different billing address
159
- await window.elements.actions.checkout.toggleBillingSameAsShipping(false);
159
+ await window.LiquidCommerce.elements.actions.checkout.toggleBillingSameAsShipping(false);
160
160
  ```
161
161
 
162
162
  ### actions.checkout.toggleMarketingPreferences()
@@ -169,10 +169,10 @@ Set marketing opt-in preferences.
169
169
 
170
170
  ```javascript
171
171
  // Opt into email marketing
172
- await window.elements.actions.checkout.toggleMarketingPreferences('canEmail', true);
172
+ await window.LiquidCommerce.elements.actions.checkout.toggleMarketingPreferences('canEmail', true);
173
173
 
174
174
  // Opt into SMS marketing
175
- await window.elements.actions.checkout.toggleMarketingPreferences('canSms', true);
175
+ await window.LiquidCommerce.elements.actions.checkout.toggleMarketingPreferences('canSms', true);
176
176
  ```
177
177
 
178
178
  ## Form Update Actions
@@ -192,7 +192,7 @@ Pre-fill customer information.
192
192
  - `company`
193
193
 
194
194
  ```javascript
195
- window.elements.actions.checkout.updateCustomerInfo({
195
+ window.LiquidCommerce.elements.actions.checkout.updateCustomerInfo({
196
196
  firstName: 'John',
197
197
  lastName: 'Doe',
198
198
  email: 'john@example.com',
@@ -218,7 +218,7 @@ Pre-fill billing address.
218
218
  - `city`, `state`, `zipCode`
219
219
 
220
220
  ```javascript
221
- window.elements.actions.checkout.updateBillingInfo({
221
+ window.LiquidCommerce.elements.actions.checkout.updateBillingInfo({
222
222
  firstName: 'John',
223
223
  lastName: 'Doe',
224
224
  email: 'john@example.com',
@@ -246,7 +246,7 @@ Pre-fill gift recipient information.
246
246
  - `message`, `addressTwo`
247
247
 
248
248
  ```javascript
249
- window.elements.actions.checkout.updateGiftInfo({
249
+ window.LiquidCommerce.elements.actions.checkout.updateGiftInfo({
250
250
  firstName: 'Jane',
251
251
  lastName: 'Smith',
252
252
  email: 'jane@example.com',
@@ -267,7 +267,7 @@ getDetails(): ICheckoutDetailsEventData
267
267
  Retrieve current checkout information.
268
268
 
269
269
  ```javascript
270
- const checkout = window.elements.actions.checkout.getDetails();
270
+ const checkout = window.LiquidCommerce.elements.actions.checkout.getDetails();
271
271
 
272
272
  console.log(`Cart ID: ${checkout.cartId}`);
273
273
  console.log(`Total: $${checkout.amounts.total / 100}`);
@@ -306,7 +306,7 @@ interface ICheckoutDetailsEventData {
306
306
  ```javascript
307
307
  window.addEventListener('lce:actions.checkout_opened', () => {
308
308
  if (userIsLoggedIn) {
309
- window.elements.actions.checkout.updateCustomerInfo({
309
+ window.LiquidCommerce.elements.actions.checkout.updateCustomerInfo({
310
310
  firstName: currentUser.firstName,
311
311
  lastName: currentUser.lastName,
312
312
  email: currentUser.email,
@@ -342,7 +342,7 @@ window.addEventListener('lce:actions.checkout_submit_completed', (event) => {
342
342
 
343
343
  ```javascript
344
344
  document.getElementById('gift-checkbox').addEventListener('change', async (e) => {
345
- await window.elements.actions.checkout.toggleIsGift(e.target.checked);
345
+ await window.LiquidCommerce.elements.actions.checkout.toggleIsGift(e.target.checked);
346
346
 
347
347
  if (e.target.checked) {
348
348
  showGiftForm();
@@ -361,7 +361,7 @@ const campaignCode = params.get('promo');
361
361
  if (campaignCode) {
362
362
  window.addEventListener('lce:actions.checkout_opened', async () => {
363
363
  try {
364
- await window.elements.actions.checkout.applyPromoCode(campaignCode);
364
+ await window.LiquidCommerce.elements.actions.checkout.applyPromoCode(campaignCode);
365
365
  } catch (error) {
366
366
  console.log('Invalid campaign code');
367
367
  }
@@ -40,7 +40,7 @@ interface IBaseProductEventData {
40
40
  ### Example
41
41
 
42
42
  ```javascript
43
- const productData = window.elements.actions.product.getDetails('00619947000020');
43
+ const productData = window.LiquidCommerce.elements.actions.product.getDetails('00619947000020');
44
44
 
45
45
  console.log(productData.name); // "Premium Whiskey"
46
46
  console.log(productData.price / 100); // 49.99
@@ -57,7 +57,7 @@ console.log(productData.quantity); // 1
57
57
 
58
58
  ```javascript
59
59
  try {
60
- const data = window.elements.actions.product.getDetails('invalid_id');
60
+ const data = window.LiquidCommerce.elements.actions.product.getDetails('invalid_id');
61
61
  } catch (error) {
62
62
  console.error('Product not found:', error.message);
63
63
  }
@@ -68,7 +68,7 @@ try {
68
68
  #### Display Product Info Elsewhere
69
69
 
70
70
  ```javascript
71
- const product = window.elements.actions.product.getDetails('00619947000020');
71
+ const product = window.LiquidCommerce.elements.actions.product.getDetails('00619947000020');
72
72
 
73
73
  document.getElementById('product-name').textContent = product.name;
74
74
  document.getElementById('product-price').textContent = `$${product.price / 100}`;
@@ -78,7 +78,7 @@ document.getElementById('product-price').textContent = `$${product.price / 100}`
78
78
 
79
79
  ```javascript
80
80
  window.addEventListener('lce:actions.product_loaded', () => {
81
- const product = window.elements.actions.product.getDetails('00619947000020');
81
+ const product = window.LiquidCommerce.elements.actions.product.getDetails('00619947000020');
82
82
 
83
83
  gtag('event', 'view_item', {
84
84
  items: [{
@@ -94,8 +94,8 @@ window.addEventListener('lce:actions.product_loaded', () => {
94
94
  #### Custom Product Comparison
95
95
 
96
96
  ```javascript
97
- const product1 = window.elements.actions.product.getDetails('00619947000020');
98
- const product2 = window.elements.actions.product.getDetails('08504405135');
97
+ const product1 = window.LiquidCommerce.elements.actions.product.getDetails('00619947000020');
98
+ const product2 = window.LiquidCommerce.elements.actions.product.getDetails('08504405135');
99
99
 
100
100
  if (product1.price < product2.price) {
101
101
  console.log(`${product1.name} is cheaper`);
@@ -201,17 +201,17 @@ development: {
201
201
 
202
202
  ## Global Access
203
203
 
204
- After initialization, the client is available globally:
204
+ After initialization, the client is available globally under the `window.LiquidCommerce` namespace:
205
205
 
206
206
  ```javascript
207
- window.elements
207
+ window.LiquidCommerce.elements
208
208
  ```
209
209
 
210
210
  This allows access from anywhere in your application:
211
211
 
212
212
  ```javascript
213
213
  // From any script
214
- window.elements.actions.cart.openCart();
214
+ window.LiquidCommerce.elements.actions.cart.openCart();
215
215
  ```
216
216
 
217
217
  ## Client Ready Event
@@ -225,7 +225,7 @@ window.addEventListener('lce:actions.client_ready', ( event ) => {
225
225
  console.log(`Elements SDK v${version} ready`);
226
226
 
227
227
  // Safe to use client
228
- window.elements.injectProductElement([...]);
228
+ window.LiquidCommerce.elements.injectProductElement([...]);
229
229
  });
230
230
  ```
231
231
 
@@ -345,7 +345,7 @@ The SDK catches and contains its own errors:
345
345
 
346
346
  ```javascript
347
347
  // Even if SDK throws, your app continues
348
- window.elements.actions.cart.addProduct([/* invalid */]);
348
+ window.LiquidCommerce.elements.actions.cart.addProduct([/* invalid */]);
349
349
 
350
350
  // Your code still runs
351
351
  console.log('App still working');
@@ -430,15 +430,15 @@ await Elements('KEY', { env: 'production' });
430
430
 
431
431
  ### Use Global Access
432
432
 
433
- After initialization, use `window.elements`:
433
+ After initialization, use `window.LiquidCommerce.elements`:
434
434
 
435
435
  ```javascript
436
436
  // Initialize once
437
437
  await Elements('KEY', { env: 'production' });
438
438
 
439
439
  // Use globally
440
- window.elements.actions.cart.openCart();
441
- window.elements.ui.cartButton('cart-btn');
440
+ window.LiquidCommerce.elements.actions.cart.openCart();
441
+ window.LiquidCommerce.elements.ui.cartButton('cart-btn');
442
442
  ```
443
443
 
444
444
  ### Check Client Ready
@@ -446,13 +446,13 @@ window.elements.ui.cartButton('cart-btn');
446
446
  Wait for client ready before using:
447
447
 
448
448
  ```javascript
449
- if (window.elements) {
449
+ if (window.LiquidCommerce?.elements) {
450
450
  // Client is ready
451
- window.elements.actions.cart.openCart();
451
+ window.LiquidCommerce.elements.actions.cart.openCart();
452
452
  } else {
453
453
  // Wait for client ready
454
454
  window.addEventListener('lce:actions.client_ready', () => {
455
- window.elements.actions.cart.openCart();
455
+ window.LiquidCommerce.elements.actions.cart.openCart();
456
456
  });
457
457
  }
458
458
  ```
@@ -23,10 +23,10 @@ cartButton(containerId: string, showItemsCount?: boolean): void
23
23
 
24
24
  ```javascript
25
25
  // Simple cart button
26
- window.elements.ui.cartButton('header-cart');
26
+ window.LiquidCommerce.elements.ui.cartButton('header-cart');
27
27
 
28
28
  // Cart button with item count badge
29
- window.elements.ui.cartButton('header-cart', true);
29
+ window.LiquidCommerce.elements.ui.cartButton('header-cart', true);
30
30
  ```
31
31
 
32
32
  ---
@@ -51,10 +51,10 @@ floatingCartButton(showItemsCount?: boolean): void
51
51
 
52
52
  ```javascript
53
53
  // Floating button without badge
54
- window.elements.ui.floatingCartButton();
54
+ window.LiquidCommerce.elements.ui.floatingCartButton();
55
55
 
56
56
  // Floating button with badge
57
- window.elements.ui.floatingCartButton(true);
57
+ window.LiquidCommerce.elements.ui.floatingCartButton(true);
58
58
  ```
59
59
 
60
60
  ---
@@ -82,7 +82,7 @@ cartSubtotal(elementId: string): void
82
82
  ```
83
83
 
84
84
  ```javascript
85
- window.elements.ui.cartSubtotal('cart-total');
85
+ window.LiquidCommerce.elements.ui.cartSubtotal('cart-total');
86
86
  // Element now shows: "$49.99"
87
87
  // Updates automatically when cart changes
88
88
  ```
@@ -114,10 +114,10 @@ cartItemsCount(elementId: string, options?: { hideZero: boolean }): void
114
114
 
115
115
  ```javascript
116
116
  // Hide when cart is empty
117
- window.elements.ui.cartItemsCount('items-count', { hideZero: true });
117
+ window.LiquidCommerce.elements.ui.cartItemsCount('items-count', { hideZero: true });
118
118
 
119
119
  // Always show count (even "0")
120
- window.elements.ui.cartItemsCount('items-count', { hideZero: false });
120
+ window.LiquidCommerce.elements.ui.cartItemsCount('items-count', { hideZero: false });
121
121
  ```
122
122
 
123
123
  ## Use Cases
@@ -135,7 +135,7 @@ window.elements.ui.cartItemsCount('items-count', { hideZero: false });
135
135
 
136
136
  <script>
137
137
  window.addEventListener('lce:actions.client_ready', () => {
138
- window.elements.ui.cartButton('cart-btn', true);
138
+ window.LiquidCommerce.elements.ui.cartButton('cart-btn', true);
139
139
  });
140
140
  </script>
141
141
  ```
@@ -151,8 +151,8 @@ window.addEventListener('lce:actions.client_ready', () => {
151
151
 
152
152
  <script>
153
153
  window.addEventListener('lce:actions.client_ready', () => {
154
- window.elements.ui.cartItemsCount('item-count');
155
- window.elements.ui.cartSubtotal('cart-total');
154
+ window.LiquidCommerce.elements.ui.cartItemsCount('item-count');
155
+ window.LiquidCommerce.elements.ui.cartSubtotal('cart-total');
156
156
  });
157
157
  </script>
158
158
  ```
@@ -162,7 +162,7 @@ window.addEventListener('lce:actions.client_ready', () => {
162
162
  ```javascript
163
163
  // Show floating button only on mobile
164
164
  if (window.innerWidth < 768) {
165
- window.elements.ui.floatingCartButton(true);
165
+ window.LiquidCommerce.elements.ui.floatingCartButton(true);
166
166
  }
167
167
  ```
168
168
 
@@ -22,7 +22,7 @@ await client.injectProductElement(
22
22
  ## 2) Pre-Set Address (Skip Prompt)
23
23
 
24
24
  ```javascript
25
- await window.elements.actions.address.setAddressManually(
25
+ await window.LiquidCommerce.elements.actions.address.setAddressManually(
26
26
  {
27
27
  one: '123 Main St',
28
28
  two: 'Apt 4',
@@ -75,7 +75,7 @@ When users click checkout, the cart redirects to your hosted checkout page with
75
75
  ## Optional: Skip Cart and Go Directly to Checkout
76
76
 
77
77
  ```javascript
78
- await window.elements.actions.checkout.addProduct([
78
+ await window.LiquidCommerce.elements.actions.checkout.addProduct([
79
79
  {
80
80
  identifier: '00619947000020',
81
81
  fulfillmentType: 'shipping',
@@ -72,7 +72,7 @@ When using the CDN, the SDK auto-initializes on page load:
72
72
  ></script>
73
73
  ```
74
74
 
75
- The client becomes available globally as `window.elements`.
75
+ The client becomes available globally under `window.LiquidCommerce.elements`.
76
76
 
77
77
  #### Programmatic Initialization (NPM)
78
78
 
@@ -115,7 +115,7 @@ window.addEventListener('lce:actions.client_ready', (event) => {
115
115
  console.log('Ready at:', event.detail.timestamp);
116
116
 
117
117
  // Safe to use client
118
- window.elements.actions.cart.openCart();
118
+ window.LiquidCommerce.elements.actions.cart.openCart();
119
119
  });
120
120
  ```
121
121
 
@@ -193,7 +193,7 @@ You can use declarative initialization and programmatic control:
193
193
  <script>
194
194
  // Later, add products programmatically
195
195
  window.addEventListener('lce:actions.client_ready', async () => {
196
- await window.elements.injectProductElement([
196
+ await window.LiquidCommerce.elements.injectProductElement([
197
197
  { containerId: 'dynamic-product', identifier: selectedProductId }
198
198
  ]);
199
199
  });
@@ -236,7 +236,7 @@ When you update the cart in one tab, all other tabs update automatically:
236
236
 
237
237
  ```javascript
238
238
  // Tab 1
239
- await window.elements.actions.cart.addProduct([...]);
239
+ await window.LiquidCommerce.elements.actions.cart.addProduct([...]);
240
240
 
241
241
  // Tab 2 automatically receives the update
242
242
  // No additional code needed
@@ -261,14 +261,14 @@ Components automatically rerender when data changes:
261
261
 
262
262
  ```javascript
263
263
  // This triggers a rerender
264
- await window.elements.actions.cart.addProduct([...]);
264
+ await window.LiquidCommerce.elements.actions.cart.addProduct([...]);
265
265
  // Cart component updates automatically
266
266
  ```
267
267
 
268
268
  Manual rerendering:
269
269
 
270
270
  ```javascript
271
- const components = window.elements.getInjectedComponents();
271
+ const components = window.LiquidCommerce.elements.getInjectedComponents();
272
272
  const productComponent = components.get('product-1');
273
273
 
274
274
  // Force rerender
@@ -337,7 +337,7 @@ SDK errors are caught and logged, but don't propagate to your application:
337
337
  ```javascript
338
338
  // Even if SDK throws an error, your code continues
339
339
  try {
340
- await window.elements.actions.cart.addProduct([/* invalid data */]);
340
+ await window.LiquidCommerce.elements.actions.cart.addProduct([/* invalid data */]);
341
341
  } catch (error) {
342
342
  console.log('This error is caught by SDK internally');
343
343
  }
@@ -237,7 +237,7 @@ export default function ProductPage() {
237
237
  }
238
238
  ```
239
239
 
240
- > **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.
240
+ > **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.
241
241
 
242
242
  ## Configuration Options
243
243
 
@@ -267,7 +267,7 @@ Open your browser's console and check for:
267
267
 
268
268
  ```javascript
269
269
  // The client is available globally
270
- console.log(window.elements);
270
+ console.log(window.LiquidCommerce.elements);
271
271
  // Should output: { injectProductElement: ƒ, ui: {...}, actions: {...}, ... }
272
272
  ```
273
273