@empathyco/x-components 3.0.1-alpha.1 → 3.0.1-alpha.2
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 +9 -0
- package/design-system/deprecated-full-theme.css +24 -24
- package/docs/build-search-ui/web-archetype-integration-guide.md +7 -7
- package/docs/build-search-ui/web-how-to-use-x-components-guide.md +1 -1
- package/docs/experience-search-and-discovery/README.md +2 -1
- package/docs/experience-search-and-discovery/empathize.md +12 -7
- package/docs/experience-search-and-discovery/facets-and-filters.md +4 -1
- package/docs/experience-search-and-discovery/history-queries.md +4 -1
- package/docs/experience-search-and-discovery/id-results.md +4 -1
- package/docs/experience-search-and-discovery/my-history.md +4 -1
- package/docs/experience-search-and-discovery/next-queries.md +7 -3
- package/docs/experience-search-and-discovery/popular-searches.md +4 -1
- package/docs/experience-search-and-discovery/product-results-ui.md +5 -2
- package/docs/experience-search-and-discovery/query-suggestions.md +4 -1
- package/docs/experience-search-and-discovery/related-tags.md +4 -1
- package/docs/experience-search-and-discovery/search-box.md +9 -4
- package/docs/experience-search-and-discovery/serp-ui.md +8 -5
- package/docs/experience-search-and-discovery/web-local-storage.md +12 -7
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,15 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [3.0.1-alpha.2](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.1-alpha.1...@empathyco/x-components@3.0.1-alpha.2) (2023-10-27)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Documentation
|
|
10
|
+
|
|
11
|
+
* **static-docs:** added redirections in static docs metadata (#1341) ([8c1d27f](https://github.com/empathyco/x/commit/8c1d27fdef0ff5b95a274d0693c98495799436bb))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
6
15
|
## [3.0.1-alpha.1](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.1-alpha.0...@empathyco/x-components@3.0.1-alpha.1) (2023-10-26)
|
|
7
16
|
|
|
8
17
|
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
|
|
2
|
-
|
|
3
2
|
.x-uppercase {
|
|
4
3
|
text-transform: uppercase;
|
|
5
4
|
}
|
|
@@ -15,6 +14,7 @@
|
|
|
15
14
|
.x-normal-case {
|
|
16
15
|
text-transform: none;
|
|
17
16
|
}
|
|
17
|
+
|
|
18
18
|
.x-underline {
|
|
19
19
|
-webkit-text-decoration-line: underline;
|
|
20
20
|
text-decoration-line: underline;
|
|
@@ -8049,6 +8049,9 @@
|
|
|
8049
8049
|
:root {
|
|
8050
8050
|
--x-size-width-dropdown-l: 202px;
|
|
8051
8051
|
}
|
|
8052
|
+
:root {
|
|
8053
|
+
--x-size-width-dropdown-l: 202px;
|
|
8054
|
+
}
|
|
8052
8055
|
|
|
8053
8056
|
.x-dropdown.x-dropdown--l {
|
|
8054
8057
|
--x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
|
|
@@ -8126,9 +8129,6 @@
|
|
|
8126
8129
|
--x-string-overflow-dropdown-toggle-default: hidden;
|
|
8127
8130
|
--x-string-overflow-dropdown-list-default: hidden;
|
|
8128
8131
|
}
|
|
8129
|
-
:root {
|
|
8130
|
-
--x-size-width-dropdown-l: 202px;
|
|
8131
|
-
}
|
|
8132
8132
|
:root {
|
|
8133
8133
|
--x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
|
|
8134
8134
|
--x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
|
|
@@ -8468,6 +8468,16 @@
|
|
|
8468
8468
|
--x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
|
|
8469
8469
|
--x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
|
|
8470
8470
|
}
|
|
8471
|
+
:root {
|
|
8472
|
+
--x-color-background-button-secondary: transparent;
|
|
8473
|
+
--x-color-border-button-secondary: var(--x-color-border-button-default);
|
|
8474
|
+
--x-color-text-button-secondary: var(--x-color-border-button-default);
|
|
8475
|
+
--x-size-border-width-button-secondary: var(--x-size-border-width-base);
|
|
8476
|
+
--x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
|
|
8477
|
+
--x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
|
|
8478
|
+
--x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
|
|
8479
|
+
--x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
|
|
8480
|
+
}
|
|
8471
8481
|
|
|
8472
8482
|
.x-button--secondary.x-button,
|
|
8473
8483
|
.x-button--secondary .x-button {
|
|
@@ -8479,16 +8489,6 @@
|
|
|
8479
8489
|
--x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-secondary);
|
|
8480
8490
|
--x-size-border-width-left-button-default: var(--x-size-border-width-left-button-secondary);
|
|
8481
8491
|
}
|
|
8482
|
-
:root {
|
|
8483
|
-
--x-color-background-button-secondary: transparent;
|
|
8484
|
-
--x-color-border-button-secondary: var(--x-color-border-button-default);
|
|
8485
|
-
--x-color-text-button-secondary: var(--x-color-border-button-default);
|
|
8486
|
-
--x-size-border-width-button-secondary: var(--x-size-border-width-base);
|
|
8487
|
-
--x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
|
|
8488
|
-
--x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
|
|
8489
|
-
--x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
|
|
8490
|
-
--x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
|
|
8491
|
-
}
|
|
8492
8492
|
:root {
|
|
8493
8493
|
--x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
|
|
8494
8494
|
--x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
|
|
@@ -8723,16 +8723,6 @@
|
|
|
8723
8723
|
--x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
|
|
8724
8724
|
--x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
|
|
8725
8725
|
}
|
|
8726
|
-
:root {
|
|
8727
|
-
--x-color-background-badge-default: var(--x-color-base-neutral-10);
|
|
8728
|
-
--x-color-text-badge-default: var(--x-color-base-neutral-100);
|
|
8729
|
-
--x-color-border-badge-default: var(--x-color-base-neutral-10);
|
|
8730
|
-
--x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
|
|
8731
|
-
--x-size-border-width-badge-default: 0;
|
|
8732
|
-
--x-size-width-badge-default: 1.5em;
|
|
8733
|
-
--x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
|
|
8734
|
-
--x-size-font-badge-default: var(--x-size-font-base-xs);
|
|
8735
|
-
}
|
|
8736
8726
|
:root {
|
|
8737
8727
|
--x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
|
|
8738
8728
|
--x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
|
|
@@ -8765,6 +8755,16 @@
|
|
|
8765
8755
|
--x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
|
|
8766
8756
|
--x-size-font-badge-default: var(--x-size-font-base-xs);
|
|
8767
8757
|
}
|
|
8758
|
+
:root {
|
|
8759
|
+
--x-color-background-badge-default: var(--x-color-base-neutral-10);
|
|
8760
|
+
--x-color-text-badge-default: var(--x-color-base-neutral-100);
|
|
8761
|
+
--x-color-border-badge-default: var(--x-color-base-neutral-10);
|
|
8762
|
+
--x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
|
|
8763
|
+
--x-size-border-width-badge-default: 0;
|
|
8764
|
+
--x-size-width-badge-default: 1.5em;
|
|
8765
|
+
--x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
|
|
8766
|
+
--x-size-font-badge-default: var(--x-size-font-base-xs);
|
|
8767
|
+
}
|
|
8768
8768
|
|
|
8769
8769
|
[dir="ltr"] .x-badge {
|
|
8770
8770
|
right: calc(var(--x-size-width-badge-default) / 4);
|
|
@@ -308,13 +308,13 @@ object allows your commerce store to communicate with Interface X. It suppo
|
|
|
308
308
|
functions to integrate Interface X in your website. You can access these functions inside the
|
|
309
309
|
`window.InterfaceX` object.
|
|
310
310
|
|
|
311
|
-
| Function | Parameters | Description
|
|
312
|
-
| ------------------ | ------------------------------------------------------------------------------------------- |
|
|
313
|
-
| `init` | [snippet configuration params](#snippet-configuration) - _Required_. Initialization options | [Initializes Interface X on demand](#initializing-interface-x-project-on-demand).
|
|
314
|
-
| `search` | `query` - _Optional_. Query to open Interface X | Executes Interface X and triggers a search with the given query.
|
|
315
|
-
| `close` | none | Closes Interface X search layer.
|
|
316
|
-
| `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.
|
|
317
|
-
| `addProductToCart` | `productId` - _Optional._ Id of the product added to cart | Sends tracking of the `AddToCart` event to the [Empathy Tagging microservice](
|
|
311
|
+
| Function | Parameters | Description |
|
|
312
|
+
| ------------------ | ------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
313
|
+
| `init` | [snippet configuration params](#snippet-configuration) - _Required_. Initialization options | [Initializes Interface X on demand](#initializing-interface-x-project-on-demand). |
|
|
314
|
+
| `search` | `query` - _Optional_. Query to open Interface X | Executes Interface X and triggers a search with the given query. |
|
|
315
|
+
| `close` | none | Closes Interface X search layer. |
|
|
316
|
+
| `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. |
|
|
317
|
+
| `addProductToCart` | `productId` - _Optional._ Id of the product added to cart | Sends tracking of the `AddToCart` event to the [Empathy Tagging microservice](/develop-empathy-platform/capture-interaction-signals/tagging-api-guide.md) 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. |
|
|
318
318
|
|
|
319
319
|
### Dynamic query results preview
|
|
320
320
|
|
|
@@ -110,7 +110,7 @@ The `search-box` module contains these components:
|
|
|
110
110
|
::: interact
|
|
111
111
|
|
|
112
112
|
Learn more about the
|
|
113
|
-
[Search Box UI](/
|
|
113
|
+
[Search Box UI](/onboard-empathy-platform/experience-search-and-discovery/search-box.md)
|
|
114
114
|
|
|
115
115
|
:::
|
|
116
116
|
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
title: Design your search and discovery UI
|
|
3
3
|
meta_title: Search & discovery UI functional documentation
|
|
4
4
|
sidebar_title: Design search & discovery UI
|
|
5
|
+
redirect_from:
|
|
6
|
+
- /explore-empathy-platform/experience-search-and-discovery/
|
|
5
7
|
---
|
|
6
8
|
|
|
7
9
|
Search inevitably is key when people look for specific products in an online store. It's the door to
|
|
@@ -14,7 +16,6 @@ shoppers need a new dimension to **connect effortlessly** to the most relevant p
|
|
|
14
16
|
|
|
15
17
|
|
|
16
18
|
|
|
17
|
-
|
|
18
19
|
## Interface X and Interface X for Apps, the solution
|
|
19
20
|
|
|
20
21
|
Interface X and Interface X for Apps are a collection of libraries that lets you create a
|
|
@@ -1,15 +1,19 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: Design the Empathize UI experience
|
|
3
|
-
sidebar_title: Empathize UI
|
|
3
|
+
sidebar_title: Empathize UI
|
|
4
4
|
tags:
|
|
5
5
|
- predictive layer
|
|
6
6
|
- search box
|
|
7
|
+
redirect_from:
|
|
8
|
+
- /explore-empathy-platform/experience-search-and-discovery/empathize.html
|
|
9
|
+
- /explore-empathy-platform/experience-search-and-discovery/empathize
|
|
7
10
|
---
|
|
8
11
|
|
|
9
12
|
Empathize is a UI container, but not just any container. It’s the
|
|
10
|
-
**[predictive layer](/
|
|
11
|
-
experience that is usually displayed below the search box. Consider it the natural companion
|
|
12
|
-
**[search box](search-box.md)**,
|
|
13
|
+
**[predictive layer](/understand-empathy-platform/search-basics/predictive-layer.md)** for your
|
|
14
|
+
search experience that is usually displayed below the search box. Consider it the natural companion
|
|
15
|
+
of the **[search box](/onboard-empathy-platform/experience-search-and-discovery/search-box.md)**,
|
|
16
|
+
featuring search suggestions and recommendations.
|
|
13
17
|
|
|
14
18
|
|
|
15
19
|
|
|
@@ -25,12 +29,13 @@ Being the face of your predictive layer, Empathize comes into play before the se
|
|
|
25
29
|
and only makes sense when used with other components.
|
|
26
30
|
|
|
27
31
|
Thanks to the nature of Interface X Components, you can
|
|
28
|
-
[mix and match the components](/
|
|
32
|
+
[mix and match the components](/onboard-empathy-platform/experience-search-and-discovery/readme.md#mix-and-match-your-experience)
|
|
29
33
|
you use within Empathize. For example, provide shoppers with search ideas and use Empathize to
|
|
30
34
|
display popular search terms and trending products. Anticipate your shoppers’ intent with recent
|
|
31
35
|
searches and query suggestions. Or give shoppers access to their
|
|
32
|
-
[complete search history](my-history.md)
|
|
33
|
-
of handy possibilities that you might want
|
|
36
|
+
[complete search history](/onboard-empathy-platform/experience-search-and-discovery/my-history.md)
|
|
37
|
+
and let them control tracking search data. There are lots of handy possibilities that you might want
|
|
38
|
+
to place close to the search box.
|
|
34
39
|
|
|
35
40
|
**Combine Empathize with:**
|
|
36
41
|
|
|
@@ -3,6 +3,9 @@ title: Design the Facets and Filters UI experience
|
|
|
3
3
|
sidebar_title: Facets & Filters UI
|
|
4
4
|
tag:
|
|
5
5
|
- faceted
|
|
6
|
+
redirect_from:
|
|
7
|
+
- /explore-empathy-platform/experience-search-and-discovery/facets-and-filters.html
|
|
8
|
+
- /explore-empathy-platform/experience-search-and-discovery/facets-and-filters
|
|
6
9
|
---
|
|
7
10
|
|
|
8
11
|
Facets and Filters allow your shoppers to organize your product catalogue in different categories
|
|
@@ -28,7 +31,7 @@ having to search.-->
|
|
|
28
31
|
::: interact
|
|
29
32
|
|
|
30
33
|
Can't quite capture the concept? Learn more about
|
|
31
|
-
[Facets and Filters](
|
|
34
|
+
[Facets and Filters](/understand-empathy-platform/search-basics/facets-and-filters-overview.md).
|
|
32
35
|
|
|
33
36
|
:::
|
|
34
37
|
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: Design the History Queries UI experience
|
|
3
3
|
sidebar_title: History Queries UI
|
|
4
|
+
redirect_from:
|
|
5
|
+
- /explore-empathy-platform/experience-search-and-discovery/history-queries.html
|
|
6
|
+
- /explore-empathy-platform/experience-search-and-discovery/history-queries
|
|
4
7
|
---
|
|
5
8
|
|
|
6
9
|
The History Queries UI component displays the search history, allowing shoppers to check previous
|
|
@@ -11,7 +14,7 @@ searches and revisit products they’ve viewed before in a few clicks.
|
|
|
11
14
|
::: interact
|
|
12
15
|
|
|
13
16
|
Can't quite capture the concept? Learn more about
|
|
14
|
-
[History Queries](
|
|
17
|
+
[History Queries](/understand-empathy-platform/search-features/history-queries-overview.md).
|
|
15
18
|
|
|
16
19
|
:::
|
|
17
20
|
|
|
@@ -3,6 +3,9 @@ title: Design the ID Results UI experience
|
|
|
3
3
|
sidebar_title: ID Results UI
|
|
4
4
|
tags:
|
|
5
5
|
- identifier results
|
|
6
|
+
redirect_from:
|
|
7
|
+
- /explore-empathy-platform/experience-search-and-discovery/id-results.html
|
|
8
|
+
- /explore-empathy-platform/experience-search-and-discovery/id-results
|
|
6
9
|
---
|
|
7
10
|
|
|
8
11
|
The Identifier Results UI component presents a type of search results intended for product reference
|
|
@@ -22,7 +25,7 @@ correct performance, make sure that your current search service supports this ty
|
|
|
22
25
|
::: interact
|
|
23
26
|
|
|
24
27
|
Don't quite understand ID results? Learn more about
|
|
25
|
-
[ID Results](
|
|
28
|
+
[ID Results](/understand-empathy-platform/search-features/id-results-overview.md).
|
|
26
29
|
|
|
27
30
|
:::
|
|
28
31
|
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: Design the My History UI experience
|
|
3
3
|
sidebar_title: My History UI
|
|
4
|
+
redirect_from:
|
|
5
|
+
- /explore-empathy-platform/experience-search-and-discovery/my-history.html
|
|
6
|
+
- /explore-empathy-platform/experience-search-and-discovery/my-history
|
|
4
7
|
---
|
|
5
8
|
|
|
6
9
|
The My History UI component displays the complete list of history queries, allowing shoppers to
|
|
@@ -24,7 +27,7 @@ shoppers to enable or disable search history.
|
|
|
24
27
|
|
|
25
28
|
To show the complete list of history queries, My History component uses the history records saved on
|
|
26
29
|
the shopper’s browser local history. See
|
|
27
|
-
[Interface X data privacy and browser local storage](/
|
|
30
|
+
[Interface X data privacy and browser local storage](/onboard-empathy-platform/experience-search-and-discovery/web-local-storage.md)
|
|
28
31
|
to check out the information stored locally on the shopper’s device.
|
|
29
32
|
|
|
30
33
|
:::
|
|
@@ -4,6 +4,9 @@ sidebar_title: Next Queries UI
|
|
|
4
4
|
tags:
|
|
5
5
|
- popular next queries
|
|
6
6
|
- what's next
|
|
7
|
+
redirect_from:
|
|
8
|
+
- /explore-empathy-platform/experience-search-and-discovery/next-queries.html
|
|
9
|
+
- /explore-empathy-platform/experience-search-and-discovery/next-queries
|
|
7
10
|
---
|
|
8
11
|
|
|
9
12
|
The Next Queries UI component provides shoppers with ideas on what to search for next based on their
|
|
@@ -26,7 +29,8 @@ supports this feature.
|
|
|
26
29
|
|
|
27
30
|
::: interact
|
|
28
31
|
|
|
29
|
-
Can't quite capture the concept? Learn about
|
|
32
|
+
Can't quite capture the concept? Learn about
|
|
33
|
+
[Next Queries](/understand-empathy-platform/search-features/next-queries-overview.md).
|
|
30
34
|
|
|
31
35
|
:::
|
|
32
36
|
|
|
@@ -62,7 +66,7 @@ next queries that shoppers haven't already used in the session.
|
|
|
62
66
|
::: warning
|
|
63
67
|
|
|
64
68
|
To display only new next queries, the
|
|
65
|
-
[History Queries](/
|
|
66
|
-
implemented.
|
|
69
|
+
[History Queries](/understand-empathy-platform/search-features/history-queries-overview.md) feature
|
|
70
|
+
must be implemented.
|
|
67
71
|
|
|
68
72
|
:::
|
|
@@ -7,6 +7,9 @@ tags:
|
|
|
7
7
|
- search trends
|
|
8
8
|
- top queries
|
|
9
9
|
- trending
|
|
10
|
+
redirect_from:
|
|
11
|
+
- /explore-empathy-platform/experience-search-and-discovery/popular-searches.html
|
|
12
|
+
- /explore-empathy-platform/experience-search-and-discovery/popular-searches
|
|
10
13
|
---
|
|
11
14
|
|
|
12
15
|
The Popular Searches UI component displays what are the top search queries during a specific time.
|
|
@@ -26,7 +29,7 @@ feature.
|
|
|
26
29
|
::: interact
|
|
27
30
|
|
|
28
31
|
Can't quite capture the concept? Learn about
|
|
29
|
-
[Popular Searches](
|
|
32
|
+
[Popular Searches](/understand-empathy-platform/search-features/popular-searches-overview.md).
|
|
30
33
|
|
|
31
34
|
:::
|
|
32
35
|
|
|
@@ -3,6 +3,9 @@ title: Design the product results UI experience
|
|
|
3
3
|
sidebar_title: Product results UI
|
|
4
4
|
tags:
|
|
5
5
|
- results layout
|
|
6
|
+
redirect_from:
|
|
7
|
+
- /explore-empathy-platform/experience-search-and-discovery/product-results.html
|
|
8
|
+
- /explore-empathy-platform/experience-search-and-discovery/product-results
|
|
6
9
|
---
|
|
7
10
|
|
|
8
11
|
After launching a search, some shoppers may just want to take a quick look around, reviewing only
|
|
@@ -72,8 +75,8 @@ experience.
|
|
|
72
75
|
|
|
73
76
|
Traditionally, search results are displayed on the SERP after the query is launched or instantly as
|
|
74
77
|
you type. However, result data is also used by features such as
|
|
75
|
-
[Recommendations](/
|
|
76
|
-
[ID Results](/
|
|
78
|
+
[Recommendations](/onboard-empathy-platform/experience-search-and-discovery/recommendations.md) and
|
|
79
|
+
[ID Results](/onboard-empathy-platform/experience-search-and-discovery/id-results.md). You can
|
|
77
80
|
combine results-related components with these modules to get advanced display options. Include
|
|
78
81
|
additional product information in Recommendations and Identifier Results such as prices and pictures
|
|
79
82
|
for better recognition and understanding of the products displayed.
|
|
@@ -4,6 +4,9 @@ sidebar_title: Query Suggestions UI
|
|
|
4
4
|
tags:
|
|
5
5
|
- search suggestions
|
|
6
6
|
- search as you type
|
|
7
|
+
redirect_from:
|
|
8
|
+
- /explore-empathy-platform/experience-search-and-discovery/query-suggestions.html
|
|
9
|
+
- /explore-empathy-platform/experience-search-and-discovery/query-suggestions
|
|
7
10
|
---
|
|
8
11
|
|
|
9
12
|
The Query Suggestions UI component helps your shoppers with hints of what to look for to get
|
|
@@ -23,7 +26,7 @@ type of feature.
|
|
|
23
26
|
::: interact
|
|
24
27
|
|
|
25
28
|
Can't quite capture the concept? Learn more about
|
|
26
|
-
[Query Suggestions](
|
|
29
|
+
[Query Suggestions](/understand-empathy-platform/search-features/query-suggestions-overview.md).
|
|
27
30
|
|
|
28
31
|
:::
|
|
29
32
|
|
|
@@ -4,6 +4,9 @@ sidebar_title: Related Tags UI
|
|
|
4
4
|
tags:
|
|
5
5
|
- tags
|
|
6
6
|
- related keywords
|
|
7
|
+
redirect_from:
|
|
8
|
+
- /explore-empathy-platform/experience-search-and-discovery/related-tags.html
|
|
9
|
+
- /explore-empathy-platform/experience-search-and-discovery/related-tags
|
|
7
10
|
---
|
|
8
11
|
|
|
9
12
|
The Related Tags UI component helps your shoppers to refine a specific search query and find what
|
|
@@ -17,7 +20,7 @@ Platform Interface X supports displaying them anywhere on the SERP instead.
|
|
|
17
20
|
::: interact
|
|
18
21
|
|
|
19
22
|
Can't quite capture the concept? Learn more about
|
|
20
|
-
[Related Tags](
|
|
23
|
+
[Related Tags](/understand-empathy-platform/search-features/related-tags-overview.md).
|
|
21
24
|
|
|
22
25
|
:::
|
|
23
26
|
|
|
@@ -6,6 +6,9 @@ tags:
|
|
|
6
6
|
- search bar
|
|
7
7
|
- search field
|
|
8
8
|
- input
|
|
9
|
+
redirect_from:
|
|
10
|
+
- /explore-empathy-platform/experience-search-and-discovery/search-box.html
|
|
11
|
+
- /explore-empathy-platform/experience-search-and-discovery/search-box
|
|
9
12
|
---
|
|
10
13
|
|
|
11
14
|
The Search Box UI Component is the main entry point for search where shoppers can type what
|
|
@@ -16,7 +19,8 @@ button.
|
|
|
16
19
|
|
|
17
20
|
::: interact
|
|
18
21
|
|
|
19
|
-
Can't quite capture the concept? Learn more about
|
|
22
|
+
Can't quite capture the concept? Learn more about
|
|
23
|
+
[Search Box](/understand-empathy-platform/search-basics/search-box-overview.md).
|
|
20
24
|
|
|
21
25
|
:::
|
|
22
26
|
|
|
@@ -27,9 +31,10 @@ field to the selected suggestion and the search is launched.
|
|
|
27
31
|
|
|
28
32
|
::: warning
|
|
29
33
|
|
|
30
|
-
To modify the query syntax using
|
|
31
|
-
[
|
|
32
|
-
|
|
34
|
+
To modify the query syntax using
|
|
35
|
+
[Query Suggestions](/understand-empathy-platform/search-features/query-suggestions-overview.md) or
|
|
36
|
+
[Next Queries](/understand-empathy-platform/search-features/next-queries-overview.md), make sure
|
|
37
|
+
that your current search service supports this type of feature.
|
|
33
38
|
|
|
34
39
|
:::
|
|
35
40
|
|
|
@@ -5,6 +5,9 @@ tags:
|
|
|
5
5
|
- results layout
|
|
6
6
|
- grid
|
|
7
7
|
- results grid
|
|
8
|
+
redirect_from:
|
|
9
|
+
- /explore-empathy-platform/experience-search-and-discovery/serp-ui.html
|
|
10
|
+
- /explore-empathy-platform/experience-search-and-discovery/serp-ui
|
|
8
11
|
---
|
|
9
12
|
|
|
10
13
|
To handle and display search results, the layout of results and other related discovery features is
|
|
@@ -36,14 +39,14 @@ However, the grid is not the only element to consider when designing the SERP:
|
|
|
36
39
|
- Provide a **[sorting system](/explore-empathy-platform/overview/sorting-overview.md)** (D) so that
|
|
37
40
|
your shoppers can arrange results according to different criteria such as relevance, price,
|
|
38
41
|
alphabetical order…
|
|
39
|
-
- Include **[pagination](/
|
|
40
|
-
browse results throughout the different result pages available or apply infinite scroll
|
|
41
|
-
navigation.
|
|
42
|
+
- Include **[pagination](/understand-empathy-platform/search-basics/pagination-overview.md)**
|
|
43
|
+
options to browse results throughout the different result pages available or apply infinite scroll
|
|
44
|
+
to ease navigation.
|
|
42
45
|
- Apply **infinite scroll** to ease navigation and add a **scroll-to-top button** (E) to quickly
|
|
43
46
|
move to the top of the results page.
|
|
44
47
|
- Indicate your shoppers whether the
|
|
45
|
-
**[Spell Check](/
|
|
46
|
-
not.
|
|
48
|
+
**[Spell Check](/understand-empathy-platform/search-features/spellcheck-overview.md)** feature is
|
|
49
|
+
applied or not.
|
|
47
50
|
|
|
48
51
|
::: note
|
|
49
52
|
|
|
@@ -8,18 +8,23 @@ tags:
|
|
|
8
8
|
- local storage
|
|
9
9
|
- history queries
|
|
10
10
|
- cookieless
|
|
11
|
+
redirect_from:
|
|
12
|
+
- /explore-empathy-platform/experience-search-and-discovery/web-local-storage.html
|
|
13
|
+
- /explore-empathy-platform/experience-search-and-discovery/web-local-storage
|
|
14
|
+
- /explore-empathy-platform/experience-search-and-discovery/web-local-storage.html
|
|
11
15
|
---
|
|
12
16
|
|
|
13
17
|
Interface X for web **does not use cookies** for storing data. The
|
|
14
|
-
[Interface X Components](readme.md#interface-x-and-interface-x-for-apps-the-solution) use the web
|
|
15
|
-
|
|
16
|
-
|
|
18
|
+
[Interface X Components](readme.md#interface-x-and-interface-x-for-apps-the-solution) use the web
|
|
19
|
+
browser's local storage to save the technical data required to provide the services associated with
|
|
20
|
+
the search & discovery experience. The data remains in the shopper's device until the expiration
|
|
21
|
+
time is reached or the shopper chooses to delete it.
|
|
17
22
|
|
|
18
23
|
More specifically, Interface X Components store the following elements in the browser's
|
|
19
24
|
local storage:
|
|
20
25
|
|
|
21
|
-
| Key | Duration | Purpose
|
|
22
|
-
| ---------------------- | ---------------------------------------------------- |
|
|
26
|
+
| Key | Duration | Purpose |
|
|
27
|
+
| ---------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
23
28
|
| `x-session-id` | 30 minutes | Short-term session ID to be sent to the Tagging API. It identifies short sessions in a device. It does not identify individual shoppers in any way. It's required for [Analytics](/explore-empathy-platform/understand-data-privacy/), [Next Queries](/explore-empathy-platform/features/history-queries-overview.html), and [Related Tags](/explore-empathy-platform/features/related-tags-overview.html) features |
|
|
24
|
-
| `x-session-time-stamp` | 30 minutes | Timestamp for the current session ID
|
|
25
|
-
| `x-history-queries` | Stored until the shopper clears/disables the feature | List of the searches performed that the shopper has chosen to store, which are shown in different steps of the search journey.
|
|
29
|
+
| `x-session-time-stamp` | 30 minutes | Timestamp for the current session ID |
|
|
30
|
+
| `x-history-queries` | Stored until the shopper clears/disables the feature | List of the searches performed that the shopper has chosen to store, which are shown in different steps of the search journey. |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@empathyco/x-components",
|
|
3
|
-
"version": "3.0.1-alpha.
|
|
3
|
+
"version": "3.0.1-alpha.2",
|
|
4
4
|
"description": "Empathy X Components",
|
|
5
5
|
"author": "Empathy Systems Corporation S.L.",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -143,5 +143,5 @@
|
|
|
143
143
|
"access": "public",
|
|
144
144
|
"directory": "dist"
|
|
145
145
|
},
|
|
146
|
-
"gitHead": "
|
|
146
|
+
"gitHead": "0d4d18330bf0f971d2a1877a8978e5b2deae7cca"
|
|
147
147
|
}
|