@empathyco/x-components 3.1.0-alpha.0 → 3.1.0-alpha.2

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.1.0-alpha.2](https://github.com/empathyco/x/compare/@empathyco/x-components@3.1.0-alpha.1...@empathyco/x-components@3.1.0-alpha.2) (2023-11-13)
+
+
+### Documentation
+
+* **integration:** how to track add2cart event (#1349) ([65509fd](https://github.com/empathyco/x/commit/65509fdfcbd89ce823bd2a36898c3bbf21b7b3ce))
+
+
+
+## [3.1.0-alpha.1](https://github.com/empathyco/x/compare/@empathyco/x-components@3.1.0-alpha.0...@empathyco/x-components@3.1.0-alpha.1) (2023-11-10)
+
+
+### Documentation
+
+* fix `@empathyco/x-components import path in examples (#1353) ([071f12d](https://github.com/empathyco/x/commit/071f12dd96285a02f56c9ddc52c8fe6b802cefae))
+
+
+
 ## [3.1.0-alpha.0](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.1-alpha.4...@empathyco/x-components@3.1.0-alpha.0) (2023-11-06)
 
 

package/design-system/deprecated-full-theme.css

@@ -1,5 +1,4 @@
 
-
 .x-uppercase {
   text-transform: uppercase;
 }
@@ -15,6 +14,7 @@
 .x-normal-case {
   text-transform: none;
 }
+
 .x-underline {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
@@ -4895,9 +4895,6 @@
 :root {
   --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
 }
-:root {
-  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
-}
 
 .x-result.x-result--card {
   overflow: hidden;
@@ -8845,4 +8842,7 @@
   --x-size-border-radius-base-m: var(--x-size-base-06);
   --x-size-border-radius-base-pill: 99999px;
   --x-size-border-width-base: 1px;
+}
+:root {
+  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
 }

package/docs/API-reference/components/common/column-picker/x-components.base-column-picker-list.md

@@ -46,7 +46,7 @@ It is required to send the columns prop.
   <BaseColumnPickerList :columns="columns" />
 </template>
 <script>
-  import { BaseColumnPickerList } from '@empathyco/xcomponents';
+  import { BaseColumnPickerList } from '@empathyco/x-components';
 
   export default {
     components: {
@@ -69,7 +69,7 @@ updated if it changed the value or if the parent changes it.
   <BaseColumnPickerList :columns="columns" v-model="selectedColumns" />
 </template>
 <script>
-  import { BaseColumnPickerList } from '@empathyco/xcomponents';
+  import { BaseColumnPickerList } from '@empathyco/x-components';
 
   export default {
     components: {
@@ -95,7 +95,7 @@ It is possible to override the column picker button content.
   </BaseColumnPickerList>
 </template>
 <script>
-  import { BaseColumnPickerList } from '@empathyco/xcomponents';
+  import { BaseColumnPickerList } from '@empathyco/x-components';
 
   export default {
     components: {
@@ -120,7 +120,7 @@ It is also possible to add a divider element between the column picker buttons b
   </BaseColumnPickerList>
 </template>
 <script>
-  import { BaseColumnPickerList, ChevronRightIcon } from '@empathyco/xcomponents';
+  import { BaseColumnPickerList, ChevronRightIcon } from '@empathyco/x-components';
 
   export default {
     components: {
@@ -143,7 +143,7 @@ The `buttonClass` prop can be used to add classes to the buttons.
   <BaseColumnPickerList :columns="columns" buttonClass="x-button--round" />
 </template>
 <script>
-  import { BaseColumnPickerList } from '@empathyco/xcomponents';
+  import { BaseColumnPickerList } from '@empathyco/x-components';
 
   export default {
     components: {

package/docs/build-search-ui/web-archetype-integration-guide.md

@@ -213,6 +213,7 @@ out further information about:
 - **Functions supported by the [X API object](#x-api)** to initialize Interface X
 - Notes on how to set up [**the preview of query results**](#dynamic-query-results-preview) for
   determined queries at the pre-search stage
+- [**Tracking options for add to cart events**](#tracking-events-for-add-to-cart-on-product-detail-pages) from product detail pages
 
 ### Snippet configuration
 
@@ -405,3 +406,64 @@ instance:
   });
 </script>
 ```
+
+### Tracking events for add to cart on product detail pages
+
+Empathy Platform Interface X allows you to track shoppers' add-to-cart interactions from any product detail page (PDP) in your commerce store, regardless of whether your commerce store is running on a **single-page application or not**.
+
+#### Tracking add-to-cart events on non-SPA webpages
+To track your shoppers' add-to-cart interactions from any PDP based on a non-spa structured webpage, follow these steps:
+
+1. Add the `productId` parameter when initializing the script.
+
+    ```html
+    window.InterfaceX.init({
+        instance: "instanceName",
+        lang: "es",
+        documentDirection: "ltr",
+        scope: 'desktop',
+        currency: "EUR",
+        consent: true,
+        isSPA: false,
+        queriesPreview: []
+            {
+                query: 'coats',
+                title: 'Winter Coats'
+            }
+        ],
+        callbacks: {
+            UserClickedAResult: function(a, b, e, t) {}
+        },
+        productId: '11776347-ES' // Add this parameter
+    })
+    ```
+
+2. Call the `InterfaceX.addProductToCart('11776347-ES')` function to track the event when the add-to-cart button is clicked.
+
+    ```html
+    yourCommerceStoreEnvironment.addToCartButton.addEventListener('click', () =>
+      InterfaceX.addProductToCart('11776347-ES');
+   );
+   ```
+
+
+#### Tracking add-to-cart events on SPA webpages
+To track your shoppers' add-to-cart interactions from any PDP based on a SPA structured webpage, follow these steps:
+
+1. Call the `InterfaceX.bus.emit('PDPIsLoaded')` function any time a new PDP-type page is loaded.
+
+
+    ```html
+    if (yourCommerceStoreEnvironment.isPDP && window.initX.isSpa) {
+      InterfaceX.bus.emit('PDPIsLoaded')
+    }
+    ```
+
+2. Call the `InterfaceX.addProductToCart()` function to track the event when the add-to-cart button is clicked:  
+
+
+    ```html
+    yourCommerceStoreEnvironment.addToCartButton.addEventListener('click', () =>
+      InterfaceX.addProductToCart();
+    );
+    ```

package/js/components/column-picker/base-column-picker-list.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-column-picker-list.vue.js","sources":["../../../../src/components/column-picker/base-column-picker-list.vue"],"sourcesContent":["<template>\n  <div class=\"x-column-picker-list x-button-group\" data-test=\"column-picker-list\" role=\"list\">\n    <template v-for=\"({ column, cssClasses, events, isSelected }, index) in columnsWithCssClasses\">\n      <BaseEventButton\n        :key=\"column\"\n        class=\"x-column-picker-list__button x-button\"\n        :class=\"[buttonClass, cssClasses]\"\n        data-test=\"column-picker-button\"\n        :aria-pressed=\"isSelected\"\n        :events=\"events\"\n        :aria-label=\"`${column} columns`\"\n        role=\"listitem\"\n      >\n        <!--\n          @slot Customized Column Picker Button content. Specifying a slot with the column value\n          will result in the column using that slot composition to render.\n            @binding {number} column - Columns Number to pick.\n            @binding {boolean} isSelected - True if the columns number are the chosen value.\n        -->\n        <slot v-bind=\"{ column, isSelected }\">\n          {{ column }}\n        </slot>\n      </BaseEventButton>\n\n      <!--\n          @slot Customized Column Picker divider. Specify an element to act as divider for\n          the items in the column picker. Empty by default.\n        -->\n      <slot v-if=\"index !== columnsWithCssClasses.length - 1\" name=\"divider\"></slot>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { mixins } from 'vue-class-component';\n  import { Component } from 'vue-property-decorator';\n  import { VueCSSClasses } from '../../utils/types';\n  import { XEventsTypes } from '../../wiring';\n  import BaseEventButton from '../base-event-button.vue';\n  import { dynamicPropsMixin } from '../dynamic-props.mixin';\n  import ColumnPickerMixin from './column-picker.mixin';\n\n  interface ColumnPickerItem {\n    column: number;\n    cssClasses: VueCSSClasses;\n    events: Partial<XEventsTypes>;\n    isSelected: boolean;\n  }\n\n  /**\n   * Column picker list component renders a list of buttons to choose the columns number.\n   *\n   * Additionally, this component exposes the following props to modify the classes of the\n   * elements: `buttonClass`.\n   *\n   * @remarks It extends {@link ColumnPickerMixin}.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseEventButton }\n  })\n  export default class BaseColumnPickerList extends mixins(\n    ColumnPickerMixin,\n    dynamicPropsMixin(['buttonClass'])\n  ) {\n    /**\n     * Maps the column to an object containing: the `column` and `CSS classes`.\n     *\n     * @returns An array of objects containing the column number and CSS classes.\n     *\n     * @internal\n     */\n    protected get columnsWithCssClasses(): ColumnPickerItem[] {\n      return this.columns.map(column => ({\n        column,\n        cssClasses: [\n          `x-column-picker-list__button--${column}-cols`,\n          {\n            'x-selected': this.selectedColumns === column\n          }\n        ],\n        isSelected: this.selectedColumns === column,\n        events: {\n          UserClickedColumnPicker: column,\n          ColumnsNumberProvided: column\n        }\n      }));\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on the columns prop. Each\nelement will emit the needed events to sync other instances of columns pickers, or grids with the\nnumber of columns that it is being selected when it is clicked.\n\n### Default usage\n\nIt is required to send the columns prop.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" />\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/xcomponents';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\n#### Using v-model\n\nIt is possible to do two way binding in order to synchronize the value with the parents. It will be\nupdated if it changed the value or if the parent changes it.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" v-model=\"selectedColumns\" />\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/xcomponents';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6], selectedColumns: 4 };\n    }\n  };\n</script>\n```\n\n### Customized usage\n\n#### Overriding the slots\n\nIt is possible to override the column picker button content.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" #default=\"{ column, isSelected }\">\n    <span>{{ column }} {{ isSelected ? '🟢' : '' }}</span>\n  </BaseColumnPickerList>\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/xcomponents';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\nIt is also possible to add a divider element between the column picker buttons by overriding the\n`divider` slot.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\">\n    <template #divider>\n      <ChevronRightIcon aria-hidden=\"true\" />\n    </template>\n  </BaseColumnPickerList>\n</template>\n<script>\n  import { BaseColumnPickerList, ChevronRightIcon } from '@empathyco/xcomponents';\n\n  export default {\n    components: {\n      BaseColumnPickerList,\n      ChevronRightIcon\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\n#### Customizing the buttons with classes\n\nThe `buttonClass` prop can be used to add classes to the buttons.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" buttonClass=\"x-button--round\" />\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/xcomponents';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedColumnPicker`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks an item. The event payload is the number of columns\n  that the clicked item represents.\n- [`ColumnsNumberProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted on component mount. The event payload is the current `selectedColumns` value.\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-column-picker-list.vue.js","sources":["../../../../src/components/column-picker/base-column-picker-list.vue"],"sourcesContent":["<template>\n  <div class=\"x-column-picker-list x-button-group\" data-test=\"column-picker-list\" role=\"list\">\n    <template v-for=\"({ column, cssClasses, events, isSelected }, index) in columnsWithCssClasses\">\n      <BaseEventButton\n        :key=\"column\"\n        class=\"x-column-picker-list__button x-button\"\n        :class=\"[buttonClass, cssClasses]\"\n        data-test=\"column-picker-button\"\n        :aria-pressed=\"isSelected\"\n        :events=\"events\"\n        :aria-label=\"`${column} columns`\"\n        role=\"listitem\"\n      >\n        <!--\n          @slot Customized Column Picker Button content. Specifying a slot with the column value\n          will result in the column using that slot composition to render.\n            @binding {number} column - Columns Number to pick.\n            @binding {boolean} isSelected - True if the columns number are the chosen value.\n        -->\n        <slot v-bind=\"{ column, isSelected }\">\n          {{ column }}\n        </slot>\n      </BaseEventButton>\n\n      <!--\n          @slot Customized Column Picker divider. Specify an element to act as divider for\n          the items in the column picker. Empty by default.\n        -->\n      <slot v-if=\"index !== columnsWithCssClasses.length - 1\" name=\"divider\"></slot>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { mixins } from 'vue-class-component';\n  import { Component } from 'vue-property-decorator';\n  import { VueCSSClasses } from '../../utils/types';\n  import { XEventsTypes } from '../../wiring';\n  import BaseEventButton from '../base-event-button.vue';\n  import { dynamicPropsMixin } from '../dynamic-props.mixin';\n  import ColumnPickerMixin from './column-picker.mixin';\n\n  interface ColumnPickerItem {\n    column: number;\n    cssClasses: VueCSSClasses;\n    events: Partial<XEventsTypes>;\n    isSelected: boolean;\n  }\n\n  /**\n   * Column picker list component renders a list of buttons to choose the columns number.\n   *\n   * Additionally, this component exposes the following props to modify the classes of the\n   * elements: `buttonClass`.\n   *\n   * @remarks It extends {@link ColumnPickerMixin}.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseEventButton }\n  })\n  export default class BaseColumnPickerList extends mixins(\n    ColumnPickerMixin,\n    dynamicPropsMixin(['buttonClass'])\n  ) {\n    /**\n     * Maps the column to an object containing: the `column` and `CSS classes`.\n     *\n     * @returns An array of objects containing the column number and CSS classes.\n     *\n     * @internal\n     */\n    protected get columnsWithCssClasses(): ColumnPickerItem[] {\n      return this.columns.map(column => ({\n        column,\n        cssClasses: [\n          `x-column-picker-list__button--${column}-cols`,\n          {\n            'x-selected': this.selectedColumns === column\n          }\n        ],\n        isSelected: this.selectedColumns === column,\n        events: {\n          UserClickedColumnPicker: column,\n          ColumnsNumberProvided: column\n        }\n      }));\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on the columns prop. Each\nelement will emit the needed events to sync other instances of columns pickers, or grids with the\nnumber of columns that it is being selected when it is clicked.\n\n### Default usage\n\nIt is required to send the columns prop.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" />\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\n#### Using v-model\n\nIt is possible to do two way binding in order to synchronize the value with the parents. It will be\nupdated if it changed the value or if the parent changes it.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" v-model=\"selectedColumns\" />\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6], selectedColumns: 4 };\n    }\n  };\n</script>\n```\n\n### Customized usage\n\n#### Overriding the slots\n\nIt is possible to override the column picker button content.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" #default=\"{ column, isSelected }\">\n    <span>{{ column }} {{ isSelected ? '🟢' : '' }}</span>\n  </BaseColumnPickerList>\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\nIt is also possible to add a divider element between the column picker buttons by overriding the\n`divider` slot.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\">\n    <template #divider>\n      <ChevronRightIcon aria-hidden=\"true\" />\n    </template>\n  </BaseColumnPickerList>\n</template>\n<script>\n  import { BaseColumnPickerList, ChevronRightIcon } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      BaseColumnPickerList,\n      ChevronRightIcon\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\n#### Customizing the buttons with classes\n\nThe `buttonClass` prop can be used to add classes to the buttons.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" buttonClass=\"x-button--round\" />\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedColumnPicker`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks an item. The event payload is the number of columns\n  that the clicked item represents.\n- [`ColumnsNumberProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted on component mount. The event payload is the current `selectedColumns` value.\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "3.1.0-alpha.0",
+  "version": "3.1.0-alpha.2",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -143,5 +143,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "6a38784650ffcae60dc0a58afc002c600d702da6"
+  "gitHead": "1096966c93eab5719555bb24779d94bf15a70570"
 }