@liquidcommerce/elements-sdk 2.7.39 → 2.7.40
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/dist/index.checkout.esm.js +7723 -7643
- package/dist/index.esm.js +12946 -12865
- package/dist/types/auto-initialize/shared-utils.d.ts +1 -0
- package/dist/types/core/client/client-config.service.d.ts +3 -1
- package/dist/types/core/google-tag-manager.service.d.ts +7 -0
- package/dist/types/interfaces/config.interface.d.ts +4 -0
- package/dist/types/modules/checkout/components/checkout-prop65-warning.component.d.ts +1 -1
- package/dist/types/ssr/stub.d.ts +1 -1
- package/docs/v1/api/client.md +19 -0
- package/docs/v1/api/configuration.md +18 -0
- package/docs/v1/api/typescript-types.md +11 -0
- package/docs/v1/getting-started/installation.md +2 -0
- package/docs/v1/guides/checkout-component.md +4 -4
- package/docs/v1/reference/analytics.md +15 -1
- package/package.json +7 -7
|
@@ -19,6 +19,7 @@ export declare const SHARED_ATTR: {
|
|
|
19
19
|
readonly PROMO_CODE_PARAM: "data-promo-code-param";
|
|
20
20
|
readonly CHECKOUT_PARAM: "data-checkout-param";
|
|
21
21
|
readonly CHECKOUT_URL: "data-checkout-url";
|
|
22
|
+
readonly GTM_GATEWAY_URL: "data-gtm-gateway-url";
|
|
22
23
|
};
|
|
23
24
|
readonly ELEMENT: {
|
|
24
25
|
readonly CHECKOUT: "data-lce-checkout";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type DebugMode, type ElementsEnv } from '@/enums';
|
|
2
|
-
import type { IClientCustomThemeConfig, IElementsProxyConfig, ILiquidCommerceElementsCheckoutConfig } from '@/interfaces/config.interface';
|
|
2
|
+
import type { IClientCustomThemeConfig, IElementsGTMConfig, IElementsProxyConfig, ILiquidCommerceElementsCheckoutConfig } from '@/interfaces/config.interface';
|
|
3
3
|
import type { IPromoTicker } from '@/interfaces/configs';
|
|
4
4
|
export type DeviceType = 'desktop' | 'tablet' | 'mobile';
|
|
5
5
|
export interface IClientConfigs {
|
|
@@ -12,6 +12,7 @@ export interface IClientConfigs {
|
|
|
12
12
|
partnerName?: string;
|
|
13
13
|
customTheme: IClientCustomThemeConfig | null;
|
|
14
14
|
proxy: IElementsProxyConfig | null;
|
|
15
|
+
gtm: IElementsGTMConfig | null;
|
|
15
16
|
deviceType: DeviceType;
|
|
16
17
|
userDeviceId?: string;
|
|
17
18
|
localStorageKeyPrefix?: string;
|
|
@@ -31,6 +32,7 @@ export interface IClientConfigInput {
|
|
|
31
32
|
debugMode?: DebugMode;
|
|
32
33
|
customTheme?: IClientCustomThemeConfig;
|
|
33
34
|
proxy?: IElementsProxyConfig;
|
|
35
|
+
gtm?: IElementsGTMConfig;
|
|
34
36
|
promoTicker?: IPromoTicker[];
|
|
35
37
|
development?: {
|
|
36
38
|
customApiUrl?: string;
|
|
@@ -51,6 +51,7 @@ export declare class GoogleTagManagerService {
|
|
|
51
51
|
private partnerName?;
|
|
52
52
|
private partnerCode?;
|
|
53
53
|
private partnerGTMId?;
|
|
54
|
+
private partnerGatewayUrl?;
|
|
54
55
|
private liquidCommerceGTMId?;
|
|
55
56
|
private enablePartnerGTM;
|
|
56
57
|
private enableLiquidCommerceGTM;
|
|
@@ -67,6 +68,12 @@ export declare class GoogleTagManagerService {
|
|
|
67
68
|
private waitForDOMReady;
|
|
68
69
|
private isGTMAlreadyLoaded;
|
|
69
70
|
private isContainerLoaded;
|
|
71
|
+
private isGatewayScriptForContainer;
|
|
72
|
+
private getPartnerGatewayScripts;
|
|
73
|
+
private parseScriptUrl;
|
|
74
|
+
private resolveGatewayUrl;
|
|
75
|
+
private getContainerRegistry;
|
|
76
|
+
private isContainerRegistered;
|
|
70
77
|
private isContainerInitialized;
|
|
71
78
|
private loadGTMScript;
|
|
72
79
|
private waitForContainerInit;
|
|
@@ -7,6 +7,9 @@ export interface IElementsProxyConfig {
|
|
|
7
7
|
baseUrl: string;
|
|
8
8
|
headers?: Record<string, string>;
|
|
9
9
|
}
|
|
10
|
+
export interface IElementsGTMConfig {
|
|
11
|
+
gatewayUrl?: string;
|
|
12
|
+
}
|
|
10
13
|
export interface ILiquidCommerceElementsDevelopmentConfig {
|
|
11
14
|
customApiUrl?: string;
|
|
12
15
|
openShadowDom?: boolean;
|
|
@@ -30,6 +33,7 @@ export interface ILiquidCommerceElementsBaseConfig {
|
|
|
30
33
|
debugMode?: DebugMode;
|
|
31
34
|
checkout?: ILiquidCommerceElementsCheckoutConfig;
|
|
32
35
|
proxy?: IElementsProxyConfig;
|
|
36
|
+
gtm?: IElementsGTMConfig;
|
|
33
37
|
development?: ILiquidCommerceElementsDevelopmentConfig;
|
|
34
38
|
}
|
|
35
39
|
export interface ILiquidCommerceElementsBuilderConfig extends ILiquidCommerceElementsBaseConfig {
|
package/dist/types/ssr/stub.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ export type { CartEventLevel, CartEventType, CheckoutEventLevel, CheckoutEventTy
|
|
|
3
3
|
export { CART_EVENT_LEVEL, CART_EVENT_TYPE, CHECKOUT_EVENT_LEVEL, CHECKOUT_EVENT_TYPE, COMPONENT_TYPE, DEBUG_MODE, DISPLAY_MODE, ELEMENTS_ACTIONS_EVENT, ELEMENTS_ENV, ELEMENTS_FORM, FULFILLMENT_TYPE, NAVIGATION_SOURCE, } from '../enums/core.enum';
|
|
4
4
|
export type { ILiquidCommerceElementsActions, ILiquidCommerceElementsBuilderClient, ILiquidCommerceElementsClient, } from '../interfaces/client.interface';
|
|
5
5
|
export type { IInjectedComponent } from '../interfaces/component.interface';
|
|
6
|
-
export type { IElementsProxyConfig, ILiquidCommerceElementsBuilderConfig, ILiquidCommerceElementsCheckoutConfig, ILiquidCommerceElementsConfig, ILiquidCommerceElementsDevelopmentConfig, } from '../interfaces/config.interface';
|
|
6
|
+
export type { IElementsGTMConfig, IElementsProxyConfig, ILiquidCommerceElementsBuilderConfig, ILiquidCommerceElementsCheckoutConfig, ILiquidCommerceElementsConfig, ILiquidCommerceElementsDevelopmentConfig, } from '../interfaces/config.interface';
|
|
7
7
|
export type * from '../interfaces/configs';
|
|
8
8
|
export type { IBuilderInjectElementParams, IInjectCheckoutBuilderParams, IInjectCheckoutParams, IInjectProductElement, IInjectProductListFiltersParams, IInjectProductListParams, IInjectProductListSearchParams, ProductListFilterType, } from '../interfaces/injection.interface';
|
|
9
9
|
export declare function Elements(..._args: any[]): Promise<null>;
|
package/docs/v1/api/client.md
CHANGED
|
@@ -108,6 +108,7 @@ interface ILiquidCommerceElementsConfig {
|
|
|
108
108
|
customTheme?: IClientCustomThemeConfig;
|
|
109
109
|
promoTicker?: IPromoTicker[];
|
|
110
110
|
proxy?: IElementsProxyConfig;
|
|
111
|
+
gtm?: IElementsGTMConfig;
|
|
111
112
|
checkout?: ILiquidCommerceElementsCheckoutConfig;
|
|
112
113
|
development?: ILiquidCommerceElementsDevelopmentConfig;
|
|
113
114
|
}
|
|
@@ -192,6 +193,24 @@ proxy: {
|
|
|
192
193
|
|
|
193
194
|
See [Proxy Setup Guide](../integration/proxy-setup.md) for implementation.
|
|
194
195
|
|
|
196
|
+
#### GTM Configuration
|
|
197
|
+
|
|
198
|
+
```typescript
|
|
199
|
+
interface IElementsGTMConfig {
|
|
200
|
+
gatewayUrl?: string;
|
|
201
|
+
}
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
**Example:**
|
|
205
|
+
|
|
206
|
+
```javascript
|
|
207
|
+
gtm: {
|
|
208
|
+
gatewayUrl: 'https://www.yoursite.com/metrics/'
|
|
209
|
+
}
|
|
210
|
+
```
|
|
211
|
+
|
|
212
|
+
Set this when your site serves its own GTM container through Google tag gateway. See [Analytics → Google tag gateway](../reference/analytics.md#google-tag-gateway).
|
|
213
|
+
|
|
195
214
|
#### Checkout Configuration
|
|
196
215
|
|
|
197
216
|
```typescript
|
|
@@ -16,6 +16,7 @@ interface ILiquidCommerceElementsConfig {
|
|
|
16
16
|
debugMode?: DebugMode;
|
|
17
17
|
checkout?: ILiquidCommerceElementsCheckoutConfig;
|
|
18
18
|
proxy?: IElementsProxyConfig;
|
|
19
|
+
gtm?: IElementsGTMConfig;
|
|
19
20
|
development?: ILiquidCommerceElementsDevelopmentConfig;
|
|
20
21
|
}
|
|
21
22
|
```
|
|
@@ -28,6 +29,7 @@ interface ILiquidCommerceElementsConfig {
|
|
|
28
29
|
| `debugMode` | `'none' \| 'console' \| 'panel'` | No | Debug output mode |
|
|
29
30
|
| `checkout` | `ILiquidCommerceElementsCheckoutConfig` | No | Checkout behavior settings |
|
|
30
31
|
| `proxy` | `IElementsProxyConfig` | No | Proxy configuration for API requests |
|
|
32
|
+
| `gtm` | `IElementsGTMConfig` | No | Google tag gateway URL of your own GTM container |
|
|
31
33
|
| `development` | `ILiquidCommerceElementsDevelopmentConfig` | No | Development/testing options |
|
|
32
34
|
|
|
33
35
|
> **Note:** `debugMode` (`'console'` or `'panel'`) is **ignored in production** -- it is forced off when `env` is `'production'`. It only takes effect outside production (`'staging'`).
|
|
@@ -530,6 +532,22 @@ See [Proxy Setup Guide](../integration/proxy-setup.md) for implementation detail
|
|
|
530
532
|
|
|
531
533
|
---
|
|
532
534
|
|
|
535
|
+
## GTM Configuration
|
|
536
|
+
|
|
537
|
+
### IElementsGTMConfig
|
|
538
|
+
|
|
539
|
+
```typescript
|
|
540
|
+
interface IElementsGTMConfig {
|
|
541
|
+
gatewayUrl?: string;
|
|
542
|
+
}
|
|
543
|
+
```
|
|
544
|
+
|
|
545
|
+
If your site loads its own GTM container through Google tag gateway for advertisers, set `gatewayUrl` to that first-party path (e.g. `'https://www.yoursite.com/metrics/'` or `'/metrics/'`) so the SDK recognizes the container instead of treating the page as having none. Declarative equivalent: `data-gtm-gateway-url`. An empty or non-string value drops the whole `gtm` config with a console warning.
|
|
546
|
+
|
|
547
|
+
See [Analytics → Google tag gateway](../reference/analytics.md#google-tag-gateway).
|
|
548
|
+
|
|
549
|
+
---
|
|
550
|
+
|
|
533
551
|
## Development Configuration
|
|
534
552
|
|
|
535
553
|
### ILiquidCommerceElementsDevelopmentConfig
|
|
@@ -99,6 +99,7 @@ interface ILiquidCommerceElementsConfig {
|
|
|
99
99
|
debugMode?: DebugMode;
|
|
100
100
|
checkout?: ILiquidCommerceElementsCheckoutConfig;
|
|
101
101
|
proxy?: IElementsProxyConfig;
|
|
102
|
+
gtm?: IElementsGTMConfig;
|
|
102
103
|
development?: ILiquidCommerceElementsDevelopmentConfig;
|
|
103
104
|
}
|
|
104
105
|
```
|
|
@@ -133,6 +134,16 @@ interface IElementsProxyConfig {
|
|
|
133
134
|
}
|
|
134
135
|
```
|
|
135
136
|
|
|
137
|
+
### IElementsGTMConfig
|
|
138
|
+
|
|
139
|
+
```typescript
|
|
140
|
+
interface IElementsGTMConfig {
|
|
141
|
+
gatewayUrl?: string;
|
|
142
|
+
}
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
`gatewayUrl` is the Google tag gateway path your own GTM container is served from (see [Analytics → Google tag gateway](../reference/analytics.md#google-tag-gateway)).
|
|
146
|
+
|
|
136
147
|
### ILiquidCommerceElementsDevelopmentConfig
|
|
137
148
|
|
|
138
149
|
```typescript
|
|
@@ -47,6 +47,7 @@ The path segment selects which bundle is served:
|
|
|
47
47
|
| `data-liquid-commerce-elements` | Yes | Identifies this as the Elements SDK script |
|
|
48
48
|
| `data-token` | Yes | Your LiquidCommerce API key |
|
|
49
49
|
| `data-env` | No | Environment: `staging` or `production`. Defaults to `production` if omitted. |
|
|
50
|
+
| `data-gtm-gateway-url` | No | Google tag gateway path your own GTM container is served from (e.g. `/metrics/`). See [Analytics → Google tag gateway](../reference/analytics.md#google-tag-gateway). |
|
|
50
51
|
| `defer` | Recommended | Allows non-blocking script loading |
|
|
51
52
|
|
|
52
53
|
### Where to Place the Script
|
|
@@ -269,6 +270,7 @@ const client = await Elements('YOUR_API_KEY', {
|
|
|
269
270
|
customTheme: { /* ... */ }, // Optional: Theme customization
|
|
270
271
|
promoTicker: [ /* ... */ ], // Optional: Promo ticker configuration
|
|
271
272
|
proxy: { /* ... */ }, // Optional: Proxy configuration
|
|
273
|
+
gtm: { /* ... */ }, // Optional: Google tag gateway URL of your own GTM container
|
|
272
274
|
checkout: { /* ... */ }, // Optional: Checkout configuration
|
|
273
275
|
development: { /* ... */ } // Optional: Development/testing options
|
|
274
276
|
});
|
|
@@ -454,16 +454,16 @@ window.addEventListener('lce:actions.checkout_product_add_failed', (event) => {
|
|
|
454
454
|
|
|
455
455
|
## California Proposition 65 Warning
|
|
456
456
|
|
|
457
|
-
|
|
458
|
-
(21+) required at delivery.**
|
|
457
|
+
When the shipping address is in California, the order summary shows a panel directly above the
|
|
458
|
+
place-order button reading **Adult signature (21+) required at delivery.** followed by
|
|
459
459
|
**CA WARNING · California Proposition 65 information for these products**, so the warning is
|
|
460
460
|
presented before the purchase completes. The text links to the OEHHA alcohol page,
|
|
461
461
|
[www.P65Warnings.ca.gov/alcohol](https://www.p65warnings.ca.gov/alcohol), in a new tab. The full
|
|
462
462
|
27 CCR § 25607.4 text is on the product element.
|
|
463
463
|
|
|
464
464
|
The panel appears in the drawer checkout, the hosted checkout and the checkout-only build. The
|
|
465
|
-
adult-signature notice is
|
|
466
|
-
|
|
465
|
+
whole panel, adult-signature notice included, is shown only for a California shipping address; it
|
|
466
|
+
appears or disappears when the address changes, and nothing renders in its place otherwise. Neither can be turned off or reworded by configuration. Its colours follow `global.layout.poweredByMode` — the same
|
|
467
467
|
light/dark switch the Stripe payment form uses — as a fixed pair so the copy is always legible:
|
|
468
468
|
`light` is `#18181B` on `#F5F3EE`, `dark` is `#F5F3EE` on `#2A2824`. The font and corner radius come
|
|
469
469
|
from your theme. If your checkout is dark, set `poweredByMode: 'dark'`.
|
|
@@ -48,7 +48,21 @@ Events fired before GTM finishes initializing are queued (up to 100, oldest drop
|
|
|
48
48
|
|
|
49
49
|
## Coexisting With Your Own GTM
|
|
50
50
|
|
|
51
|
-
The SDK detects an already-present partner/host GTM container rather than replacing it. When a host GTM install (an existing `gtag` function
|
|
51
|
+
The SDK detects an already-present partner/host GTM container rather than replacing it. When a host GTM install (an existing `gtag` function, an existing `googletagmanager.com/gtm.js` script tag, or a script served from your configured Google tag gateway) is detected, the SDK integrates with it. A container that has booted is also recognized through GTM's own `window.google_tag_manager[containerId]` registry, whichever host served it.
|
|
52
|
+
|
|
53
|
+
### Google tag gateway
|
|
54
|
+
|
|
55
|
+
If your site loads its own GTM container first-party through [Google tag gateway for advertisers](https://developers.google.com/tag-platform/tag-manager/gateway/get-started) (e.g. `https://www.yoursite.com/metrics/` instead of `https://www.googletagmanager.com/gtm.js?id=GTM-XXXX`), tell the SDK where that path is so it recognizes your container:
|
|
56
|
+
|
|
57
|
+
```javascript
|
|
58
|
+
const client = await Elements('YOUR_API_KEY', {
|
|
59
|
+
gtm: { gatewayUrl: 'https://www.yoursite.com/metrics/' }, // or '/metrics/'
|
|
60
|
+
});
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
Or declaratively, on the script tag: `data-gtm-gateway-url="/metrics/"`.
|
|
64
|
+
|
|
65
|
+
A gateway script URL usually carries no container ID, so without this setting the SDK cannot match the script tag to your partner container. A script with the same origin whose path starts with that value is matched to your partner container by container ID: an `id=` query parameter must equal your partner container ID, and a script without one counts only once GTM's `window.google_tag_manager` registry lists your container ID (or while no container has booted yet). A gateway serving a different container or a GA4/Ads tag is therefore never taken for yours. Relative values resolve against the current page. The setting affects detection only — the SDK never loads your container, and the LiquidCommerce container still loads from `googletagmanager.com`.
|
|
52
66
|
|
|
53
67
|
When both the LiquidCommerce container and a partner container are initialized, events are sent to both using GA4's `send_to` targeting (a dual-container send). Only containers that are actually initialized are added to `send_to`, so events are never routed to a container that failed to load.
|
|
54
68
|
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "LiquidCommerce Elements SDK",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"author": "LiquidCommerce Team",
|
|
6
|
-
"version": "2.7.
|
|
6
|
+
"version": "2.7.40",
|
|
7
7
|
"homepage": "https://docs.liquidcommerce.co/elements-sdk",
|
|
8
8
|
"repository": {
|
|
9
9
|
"type": "git",
|
|
@@ -122,22 +122,22 @@
|
|
|
122
122
|
"@semantic-release/changelog": "^7.0.0",
|
|
123
123
|
"@semantic-release/commit-analyzer": "^13.0.1",
|
|
124
124
|
"@semantic-release/git": "^11.0.1",
|
|
125
|
-
"@semantic-release/github": "^12.0.
|
|
126
|
-
"@semantic-release/npm": "^13.
|
|
125
|
+
"@semantic-release/github": "^12.0.10",
|
|
126
|
+
"@semantic-release/npm": "^13.2.0",
|
|
127
127
|
"@semantic-release/release-notes-generator": "^14.1.1",
|
|
128
128
|
"@types/core-js": "^2.5.8",
|
|
129
|
-
"@types/node": "^26.6.
|
|
129
|
+
"@types/node": "^26.6.3",
|
|
130
130
|
"conventional-changelog": "8.1.3",
|
|
131
131
|
"husky": "^9.1.7",
|
|
132
|
-
"jsdom": "30.1.
|
|
132
|
+
"jsdom": "30.1.1",
|
|
133
133
|
"process": "^0.11.10",
|
|
134
|
-
"rollup": "^4.63.
|
|
134
|
+
"rollup": "^4.63.5",
|
|
135
135
|
"rollup-obfuscator": "^4.1.1",
|
|
136
136
|
"rollup-plugin-typescript2": "^0.37.0",
|
|
137
137
|
"semantic-release": "^25.0.9",
|
|
138
138
|
"ts-node": "^10.9.2",
|
|
139
139
|
"typescript": "6.0.3",
|
|
140
|
-
"vitest": "5.0.
|
|
140
|
+
"vitest": "5.0.2"
|
|
141
141
|
},
|
|
142
142
|
"engines": {
|
|
143
143
|
"node": ">=22"
|