@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.
- package/README.md +1 -1
- package/dist/index.checkout.esm.js +7345 -7451
- package/dist/index.esm.js +12318 -12512
- package/dist/ssr-stub.checkout.esm.js +18 -0
- package/dist/ssr-stub.esm.js +270 -0
- package/dist/types/auto-initialize/shared-utils.d.ts +3 -1
- package/dist/types/clients/base.d.ts +7 -4
- package/dist/types/clients/builder.d.ts +2 -1
- package/dist/types/clients/checkout.d.ts +2 -10
- package/dist/types/clients/helpers.d.ts +1 -1
- package/dist/types/clients/main.d.ts +2 -1
- package/dist/types/constants/core.constant.d.ts +0 -6
- package/dist/types/core/api/api-client.service.d.ts +16 -15
- package/dist/types/core/api/api-result.d.ts +19 -0
- package/dist/types/core/api/auth-client.service.d.ts +13 -5
- package/dist/types/core/client/client-action.service.d.ts +1 -1
- package/dist/types/core/client/client-config.service.d.ts +1 -1
- package/dist/types/core/pubsub/pubsub.service.d.ts +0 -2
- package/dist/types/core/singleton-manager.service.d.ts +12 -8
- package/dist/types/core/store/interfaces/core.interface.d.ts +8 -12
- package/dist/types/core/store/interfaces/product-list.interface.d.ts +12 -28
- package/dist/types/core/store/store.constant.d.ts +2 -1
- package/dist/types/core/store/store.service.d.ts +1 -0
- package/dist/types/core/telemetry/telemetry.service.d.ts +1 -0
- package/dist/types/enums/core.enum.d.ts +5 -4
- package/dist/types/index.checkout.d.ts +3 -2
- package/dist/types/index.checkout.umd.d.ts +1 -1
- package/dist/types/index.d.ts +4 -1
- package/dist/types/interfaces/api/product-list.interface.d.ts +2 -1
- package/dist/types/interfaces/client.interface.d.ts +72 -0
- package/dist/types/interfaces/component.interface.d.ts +7 -0
- package/dist/types/interfaces/config.interface.d.ts +46 -0
- package/dist/types/interfaces/configs/address.interface.d.ts +1 -1
- package/dist/types/interfaces/configs/cart.interface.d.ts +1 -1
- package/dist/types/interfaces/configs/checkout.interface.d.ts +1 -1
- package/dist/types/interfaces/configs/global.interface.d.ts +2 -2
- package/dist/types/interfaces/configs/product-list.interface.d.ts +34 -20
- package/dist/types/interfaces/configs/product.interface.d.ts +1 -1
- package/dist/types/interfaces/injection.interface.d.ts +47 -0
- package/dist/types/modules/address/address-input.component.d.ts +0 -11
- package/dist/types/modules/address/address.command.d.ts +1 -1
- package/dist/types/modules/checkout/components/checkout-completed.component.d.ts +1 -0
- package/dist/types/modules/product/components/product-image-carousel.component.d.ts +3 -0
- package/dist/types/modules/product/components/product-retailers-carousel.component.d.ts +3 -0
- package/dist/types/modules/product/components/product-retailers-popup-list.component.d.ts +5 -2
- package/dist/types/modules/product/product.commands.d.ts +1 -3
- package/dist/types/modules/product-list/components/card-components/index.d.ts +0 -2
- package/dist/types/modules/product-list/components/card-components/product-badge.d.ts +1 -0
- package/dist/types/modules/product-list/components/card-components/product-button.d.ts +1 -3
- package/dist/types/modules/product-list/components/card-components/product-quantity-selector.d.ts +3 -4
- package/dist/types/modules/product-list/components/card-components/product-sizes-list.d.ts +9 -5
- package/dist/types/modules/product-list/components/filter-components/product-list-toggle-filters.d.ts +0 -6
- package/dist/types/modules/product-list/components/index.d.ts +1 -1
- package/dist/types/modules/product-list/components/product-list-engraving.component.d.ts +7 -5
- package/dist/types/modules/product-list/components/product-list-filters.component.d.ts +4 -5
- package/dist/types/modules/product-list/components/product-list-product-engraving-lines.component.d.ts +22 -0
- package/dist/types/modules/product-list/components/product-list-product-pre-cart.component.d.ts +32 -14
- package/dist/types/modules/product-list/components/product-list-search.component.d.ts +4 -3
- package/dist/types/modules/product-list/product-list-card.component.d.ts +20 -16
- package/dist/types/modules/product-list/product-list-filter.utils.d.ts +8 -0
- package/dist/types/modules/product-list/product-list.commands.d.ts +16 -62
- package/dist/types/modules/product-list/product-list.component.d.ts +3 -11
- package/dist/types/modules/product-list/product-list.constants.d.ts +0 -1
- package/dist/types/modules/product-list/product-list.interface.d.ts +0 -30
- package/dist/types/modules/ui-components/drawer/drawer.component.d.ts +1 -0
- package/dist/types/modules/ui-components/engraving/engraving-form.component.d.ts +2 -10
- package/dist/types/modules/ui-components/engraving/engraving-view.component.d.ts +5 -1
- package/dist/types/modules/ui-components/promo-code-ticker/promo-code-ticker.component.d.ts +1 -1
- package/dist/types/modules/ui-components/ui.commands.d.ts +6 -4
- package/dist/types/ssr/stub.checkout.d.ts +6 -0
- package/dist/types/ssr/stub.d.ts +10 -0
- package/dist/types/utils/product-selection.d.ts +16 -0
- package/dist/types/utils/product.d.ts +10 -0
- package/docs/v1/README.md +2 -2
- package/docs/v1/api/actions/address-actions.md +11 -11
- package/docs/v1/api/actions/cart-actions.md +13 -13
- package/docs/v1/api/actions/checkout-actions.md +23 -23
- package/docs/v1/api/actions/product-actions.md +6 -6
- package/docs/v1/api/client.md +11 -11
- package/docs/v1/api/ui-helpers.md +11 -11
- package/docs/v1/examples/advanced-patterns.md +1 -1
- package/docs/v1/examples/checkout-flow.md +1 -1
- package/docs/v1/getting-started/concepts.md +7 -7
- package/docs/v1/getting-started/installation.md +2 -2
- package/docs/v1/getting-started/quick-start.md +3 -3
- package/docs/v1/guides/address-component.md +11 -11
- package/docs/v1/guides/best-practices.md +14 -14
- package/docs/v1/guides/cart-component.md +23 -23
- package/docs/v1/guides/checkout-component.md +24 -24
- package/docs/v1/guides/product-component.md +5 -5
- package/docs/v1/integration/nextjs.md +11 -2
- package/docs/v1/integration/react.md +3 -3
- package/docs/v1/integration/vanilla-js.md +1 -1
- package/docs/v1/integration/vue.md +24 -0
- package/docs/v1/reference/error-handling.md +2 -2
- package/docs/v1/reference/troubleshooting.md +10 -2
- package/package.json +17 -13
- package/dist/types/interfaces/core.interface.d.ts +0 -140
- package/dist/types/modules/product-list/components/card-components/product-fulfillments.d.ts +0 -12
- package/dist/types/modules/product-list/components/card-components/product-title.d.ts +0 -6
- package/dist/types/modules/product-list/components/product-list-retailers.component.d.ts +0 -26
- package/dist/types/modules/ui-components/modal/modal.component.d.ts +0 -23
- package/dist/types/modules/ui-components/styles/modal.style.d.ts +0 -1
- package/docs/gitbook/actions.md +0 -964
- package/docs/gitbook/address.md +0 -48
- package/docs/gitbook/cart.md +0 -65
- package/docs/gitbook/checkout.md +0 -131
- package/docs/gitbook/events.md +0 -1765
- package/docs/gitbook/overview.md +0 -166
- package/docs/gitbook/product.md +0 -64
- 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`);
|
package/docs/v1/api/client.md
CHANGED
|
@@ -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
|
|
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:**
|
|
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
|
|