@repobit/dex-store-elements 1.2.5 → 1.2.6

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.6](https://github.com/bitdefender/dex-core/compare/@repobit/dex-store-elements@1.2.5...@repobit/dex-store-elements@1.2.6) (2025-10-31)
+
+**Note:** Version bump only for package @repobit/dex-store-elements
+
+
+
+
+
 ## [1.2.5](https://github.com/bitdefender/dex-core/compare/@repobit/dex-store-elements@1.2.4...@repobit/dex-store-elements@1.2.5) (2025-10-28)
 
 **Note:** Version bump only for package @repobit/dex-store-elements

package/README.md

@@ -35,6 +35,21 @@ Peer dependencies are resolved automatically by npm; no extra install command is
       provider: { name: 'vlaicu' }
     });
 
+    // Optional: analytics data layer callback
+    // Fires once per <bd-option> that sets `data-layer-event`
+    root.dataLayer = ({ option, event }) => {
+      // Example GTM-style push; adapt fields as needed
+      window.dataLayer?.push({
+        event,
+        productId   : option.getProduct().getId(),
+        campaign    : option.getProduct().getCampaign(),
+        variation   : option.getVariation(), // e.g. "5-12"
+        devices     : option.getDevices(),
+        subscription: option.getSubscription(),
+        price       : option.getDiscountedPrice({ currency: false })
+      });
+    };
+
     // Optional: define derived values/functions for templates + hide DSL
     root.derived = async ({ option }) => ({
       mails: (p) => ((option?.getDevices?.() ?? 0) / p) * 100
@@ -47,7 +62,7 @@ Peer dependencies are resolved automatically by npm; no extra install command is
 
 <bd-root store-name="root">
   <bd-product store-name="product" product-id="com.bitdefender.tsmd.v2">
-    <bd-option devices="5" subscription="12">
+    <bd-option devices="5" subscription="12" data-layer-event="info">
       <!-- Attribute renderers (see below) -->
       <div data-store-render data-store-devices></div>
       <div data-store-render data-store-subscription data-store-subscription-type="years"></div>
@@ -239,6 +254,58 @@ Notes
 - All price/discount values in the DSL are formatted strings (currency-aware). Do not perform numeric comparisons on them. Prefer truthiness checks (e.g., `!it.option.price.discounted`).
 - `it.ctx` is an alias of `it.state` for convenience.
 
+## Data Layer
+- Provide a function on `<bd-root>`: `root.dataLayer = ({ option, event }) => { ... }`.
+  - Called once per `<bd-option>` instance that declares `data-layer-event` (on first successful load).
+  - Safe if attached after the option loads; it still fires once when available.
+  - Intended for analytics (e.g., pushing to `window.dataLayer`).
+- Event name is set on each `<bd-option>` with `data-layer-event`.
+  - Canonical values: `all`, `info`, `comparison`. Any custom string is also accepted.
+- Payload shape passed to your callback:
+  - `event`: string event name.
+  - `option`: `ProductOption` from `@repobit/dex-store` with getters like `getProduct()`, `getVariation()`, `getDevices()`, `getSubscription()`, `getBuyLink()`, `getDiscountedPrice()`.
+
+Example:
+
+```html
+<script type="module">
+  import { registerContextNodes, registerActionNodes } from '@repobit/dex-store-elements';
+  import { Store } from '@repobit/dex-store';
+
+  window.addEventListener('DOMContentLoaded', async () => {
+    registerContextNodes();
+    const root = document.querySelector('bd-root');
+    root.store = new Store({ locale: 'en-us', provider: { name: 'vlaicu' } });
+
+    root.dataLayer = ({ option, event }) => {
+      window.dataLayer = window.dataLayer || [];
+      window.dataLayer.push({
+        event,
+        productId: option.getProduct().getId(),
+        campaign : option.getProduct().getCampaign(),
+        variation: option.getVariation(),
+        devices  : option.getDevices(),
+        subscription: option.getSubscription()
+      });
+    };
+
+    registerActionNodes(root);
+  });
+</script>
+
+<bd-root store-name="root">
+  <bd-product store-name="product" product-id="com.bitdefender.tsmd.v2">
+    <bd-option devices="5" subscription="12" data-layer-event="info">
+      <!-- your UI here -->
+    </bd-option>
+  </bd-product>
+</bd-root>
+```
+
+Behavior notes
+- Fires only once per `<bd-option>` instance (first load). Subsequent changes via actions or deltas do not trigger the callback again.
+- Set different `data-layer-event` values on different options if you need multiple distinct analytics events.
+
 ## Actions
 - Add `data-store-action` to elements to emit store events.
   - Set absolute values: `data-store-set-devices`, `data-store-set-subscription`, `data-store-set-id`, `data-store-set-campaign`

package/dist/src/contexts/context.datalayer.d.ts

@@ -1,7 +1,7 @@
 import type { ProductOption } from '@repobit/dex-store';
 export type dataLayerPayload = {
     option: ProductOption;
-    event: "product-loaded" | "main-product-loaded" | "product-comparison" | (string & {});
+    event: "all" | "info" | "comparison" | (string & {});
 };
 export type dataLayerContextType = ((payload: dataLayerPayload) => void) | undefined;
 export declare const dataLayerContext: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-store-elements",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "description": "HTML elements layer for pricings",
   "author": "Buga Adrian Alexandru <abuga@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -62,5 +62,5 @@
       ]
     }
   },
-  "gitHead": "9994983ec6b6d8140dbb2cfb2c11a6935943381e"
+  "gitHead": "45026ddb310bc191c78072fa27ab36ec1049fa0d"
 }