@empathyco/x-components 3.0.0-alpha.209 → 3.0.0-alpha.210
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/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,15 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See
|
|
4
4
|
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [3.0.0-alpha.210](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.209...@empathyco/x-components@3.0.0-alpha.210) (2022-11-02)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @empathyco/x-components
|
|
9
|
+
|
|
10
|
+
# Change Log
|
|
11
|
+
|
|
12
|
+
All notable changes to this project will be documented in this file. See
|
|
13
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
14
|
+
|
|
6
15
|
## [3.0.0-alpha.209](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.208...@empathyco/x-components@3.0.0-alpha.209) (2022-11-02)
|
|
7
16
|
|
|
8
17
|
### Features
|
|
@@ -3420,6 +3420,26 @@
|
|
|
3420
3420
|
--x-size-gap-row-20: var(--x-size-base-20);
|
|
3421
3421
|
}
|
|
3422
3422
|
/* @deprecated */
|
|
3423
|
+
.x-row--padding-02 {
|
|
3424
|
+
--x-size-padding-row: var(--x-size-padding-row-02);
|
|
3425
|
+
}
|
|
3426
|
+
|
|
3427
|
+
.x-row--padding-03 {
|
|
3428
|
+
--x-size-padding-row: var(--x-size-padding-row-03);
|
|
3429
|
+
}
|
|
3430
|
+
|
|
3431
|
+
.x-row--padding-04 {
|
|
3432
|
+
--x-size-padding-row: var(--x-size-padding-row-04);
|
|
3433
|
+
}
|
|
3434
|
+
|
|
3435
|
+
.x-row--padding-05 {
|
|
3436
|
+
--x-size-padding-row: var(--x-size-padding-row-05);
|
|
3437
|
+
}
|
|
3438
|
+
|
|
3439
|
+
.x-row--padding-06 {
|
|
3440
|
+
--x-size-padding-row: var(--x-size-padding-row-06);
|
|
3441
|
+
}
|
|
3442
|
+
/* @deprecated */
|
|
3423
3443
|
:root {
|
|
3424
3444
|
--x-size-padding-row-02: var(--x-size-base-02);
|
|
3425
3445
|
--x-size-padding-row-03: var(--x-size-base-03);
|
|
@@ -3994,26 +4014,6 @@
|
|
|
3994
4014
|
--x-number-font-weight-tag-default-selected
|
|
3995
4015
|
);
|
|
3996
4016
|
}
|
|
3997
|
-
/* @deprecated */
|
|
3998
|
-
.x-row--padding-02 {
|
|
3999
|
-
--x-size-padding-row: var(--x-size-padding-row-02);
|
|
4000
|
-
}
|
|
4001
|
-
|
|
4002
|
-
.x-row--padding-03 {
|
|
4003
|
-
--x-size-padding-row: var(--x-size-padding-row-03);
|
|
4004
|
-
}
|
|
4005
|
-
|
|
4006
|
-
.x-row--padding-04 {
|
|
4007
|
-
--x-size-padding-row: var(--x-size-padding-row-04);
|
|
4008
|
-
}
|
|
4009
|
-
|
|
4010
|
-
.x-row--padding-05 {
|
|
4011
|
-
--x-size-padding-row: var(--x-size-padding-row-05);
|
|
4012
|
-
}
|
|
4013
|
-
|
|
4014
|
-
.x-row--padding-06 {
|
|
4015
|
-
--x-size-padding-row: var(--x-size-padding-row-06);
|
|
4016
|
-
}
|
|
4017
4017
|
.x-tag--ghost.x-tag,
|
|
4018
4018
|
.x-tag--ghost .x-tag {
|
|
4019
4019
|
--x-color-background-tag-default: var(--x-color-background-tag-ghost);
|
|
@@ -6484,15 +6484,6 @@
|
|
|
6484
6484
|
font-size: var(--x-size-base-20) !important;
|
|
6485
6485
|
line-height: 1.5;
|
|
6486
6486
|
}
|
|
6487
|
-
.x-font-weight--light {
|
|
6488
|
-
font-weight: var(--x-number-font-weight-base-light) !important;
|
|
6489
|
-
}
|
|
6490
|
-
.x-font-weight--regular {
|
|
6491
|
-
font-weight: var(--x-number-font-weight-base-regular) !important;
|
|
6492
|
-
}
|
|
6493
|
-
.x-font-weight--bold {
|
|
6494
|
-
font-weight: var(--x-number-font-weight-base-bold) !important;
|
|
6495
|
-
}
|
|
6496
6487
|
.x-line-clamp--2 {
|
|
6497
6488
|
overflow: hidden !important;
|
|
6498
6489
|
display: -webkit-box !important;
|
|
@@ -6550,6 +6541,15 @@
|
|
|
6550
6541
|
.x-line-height--loose {
|
|
6551
6542
|
line-height: 2 !important;
|
|
6552
6543
|
}
|
|
6544
|
+
.x-font-weight--light {
|
|
6545
|
+
font-weight: var(--x-number-font-weight-base-light) !important;
|
|
6546
|
+
}
|
|
6547
|
+
.x-font-weight--regular {
|
|
6548
|
+
font-weight: var(--x-number-font-weight-base-regular) !important;
|
|
6549
|
+
}
|
|
6550
|
+
.x-font-weight--bold {
|
|
6551
|
+
font-weight: var(--x-number-font-weight-base-bold) !important;
|
|
6552
|
+
}
|
|
6553
6553
|
.x-margin--auto {
|
|
6554
6554
|
margin: auto !important;
|
|
6555
6555
|
}
|
|
@@ -211,6 +211,8 @@ out further information about:
|
|
|
211
211
|
- **[Callbacks and X event types](#callbacks-and-interface-x-events-types)** available to
|
|
212
212
|
subscribe to when initializing
|
|
213
213
|
- **Functions supported by the [X API object](#x-api)** to initialize Interface X
|
|
214
|
+
- Notes on how to set up [**the preview of query results**](#dynamic-query-results-preview) for
|
|
215
|
+
determined queries at the pre-search stage
|
|
214
216
|
|
|
215
217
|
### Snippet configuration
|
|
216
218
|
|
|
@@ -233,7 +235,7 @@ following configuration parameters:
|
|
|
233
235
|
| [`callbacks`](#callbacks-and-interface-x-events-types) | `Record<XEventName, (payload: XEventPayload<Event>, metadata: WireMetadata) => void` | _Optional_. Callback record where the _key_ is the event to listen and the _value_ is the callback to be executed whenever the event is emitted. E.g. to listen to the `UserAcceptedAQuery` event: `{ UserAcceptedAQuery({ eventPayload }) { console.log('UserAcceptedAQuery', eventPayload); }` |
|
|
234
236
|
| `isSpa` | `boolean` | _Optional_. Enables single-page application model. You set it to `true` when the X Archetype runs on top of a SPA website. |
|
|
235
237
|
| `filters` | `string[]` | _Optional_. Filters to be applied at the start of the application and start to searching with those filters selected. |
|
|
236
|
-
| `queriesPreview` | `QueryPreviewInfo[]` | _Optional_.
|
|
238
|
+
| `queriesPreview` | `QueryPreviewInfo[]` | _Optional_. List of queries to preview. Every query defined includes a preview of related product results before shoppers type a search term in the search box. E.g. to preview results for the queries `backpacks` and `watches`, you add the following: `[{query: "backpack", title: "Back to school"}, {query: "watch", title: "Get on time"}]`. See [Dynamic query results preview](#dynamic-query-results-preview) for more information. |
|
|
237
239
|
| `<extra parameters>` | `any` | _Optional_. Any other parameters to sent to the API calls directly. E.g. to filter the search catalogue with a warehouse parameter, you add `warehouse: <your-warehouse-identifier>` to the snippet configuration. |
|
|
238
240
|
|
|
239
241
|
::: note Consent parameter
|
|
@@ -306,12 +308,15 @@ functions to integrate Interface X in your website. You can access these fu
|
|
|
306
308
|
| `setSnippetConfig` | [snippet configuration params](#snippet-configuration) - _Required_. Initialization options | Changes initialization options so that all components react to the changes, i.e. changing both search engine and language without reloading the page. |
|
|
307
309
|
| `addProductToCart` | `productId` - _Optional._ Id of the product added to cart | Sends tracking of the `AddToCart` event to the [Empathy Tagging microservice](https://docs.empathy.co/develop-empathy-platform/capture-interaction-signals/tagging-api-guide.html) for the product displayed on screen. This function is called from the product detail page (PDP) when the shopper clicks on the add-to-cart button. If the `productId` is not provided, the URL detects whether the shopper found the product via a search session or not. |
|
|
308
310
|
|
|
309
|
-
###
|
|
311
|
+
### Dynamic query results preview
|
|
310
312
|
|
|
311
|
-
The `queriesPreview` parameter can be changed
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
313
|
+
The `queriesPreview` parameter settings can be changed to dynamically preview product results from
|
|
314
|
+
the queries you define according to your brand's strategy. Use the `setSnippetConfig` function in
|
|
315
|
+
the [`X API`](#x-api) object to determine the queries to be previewed dynamically depending on the
|
|
316
|
+
section the shopper is visiting in your commerce store, for instance, or any other scenario.
|
|
317
|
+
|
|
318
|
+
The following example shows you how to change dynamically the preview of query results in the _kids_
|
|
319
|
+
and _adult_ sections:
|
|
315
320
|
|
|
316
321
|
```html
|
|
317
322
|
<script>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@empathyco/x-components",
|
|
3
|
-
"version": "3.0.0-alpha.
|
|
3
|
+
"version": "3.0.0-alpha.210",
|
|
4
4
|
"description": "Empathy X Components",
|
|
5
5
|
"author": "Empathy Systems Corporation S.L.",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -135,5 +135,5 @@
|
|
|
135
135
|
"access": "public",
|
|
136
136
|
"directory": "dist"
|
|
137
137
|
},
|
|
138
|
-
"gitHead": "
|
|
138
|
+
"gitHead": "340dbddbf1dafc4c2a4711a760ee7b67d25b2b3c"
|
|
139
139
|
}
|