@empathyco/x-components 3.0.1-alpha.0 → 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 +18 -0
- package/design-system/deprecated-full-theme.css +192 -192
- 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/js/x-modules/history-queries/store/actions/update-history-queries-with-search-response.action.js +24 -9
- package/js/x-modules/history-queries/store/actions/update-history-queries-with-search-response.action.js.map +1 -1
- package/package.json +2 -2
- package/types/x-modules/history-queries/store/actions/update-history-queries-with-search-response.action.d.ts.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,24 @@
|
|
|
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
|
+
|
|
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)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### Bug Fixes
|
|
19
|
+
|
|
20
|
+
* **history-queries:** map selected filters correctly when coming from Query Preview (#1325) ([61fdfd1](https://github.com/empathyco/x/commit/61fdfd1f4af0183952084abfd8a72ecdd76ee6ee))
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
6
24
|
## [3.0.1-alpha.0](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.425...@empathyco/x-components@3.0.1-alpha.0) (2023-10-24)
|
|
7
25
|
|
|
8
26
|
**Note:** Version bump only for package @empathyco/x-components
|
|
@@ -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;
|
|
@@ -3448,6 +3448,46 @@
|
|
|
3448
3448
|
--x-size-line-height-small: var(--x-size-line-height-base-s);
|
|
3449
3449
|
--x-string-text-decoration-small: none;
|
|
3450
3450
|
}
|
|
3451
|
+
:root {
|
|
3452
|
+
--x-font-family-base: "Montserrat", sans-serif;
|
|
3453
|
+
--x-size-font-base-xs: 12px;
|
|
3454
|
+
--x-size-font-base-s: 14px;
|
|
3455
|
+
--x-size-font-base-m: 16px;
|
|
3456
|
+
--x-size-font-base-l: 18px;
|
|
3457
|
+
--x-size-font-base-xl: 32px;
|
|
3458
|
+
--x-number-font-weight-base-light: 300;
|
|
3459
|
+
--x-number-font-weight-base-regular: 400;
|
|
3460
|
+
--x-number-font-weight-base-bold: 600;
|
|
3461
|
+
--x-size-line-height-base-s: 16px;
|
|
3462
|
+
--x-size-line-height-base-m: 24px;
|
|
3463
|
+
--x-size-line-height-base-l: 32px;
|
|
3464
|
+
--x-color-text-default: var(--x-color-base-neutral-10);
|
|
3465
|
+
--x-font-family-text: var(--x-font-family-base);
|
|
3466
|
+
--x-size-font-text: var(--x-size-font-base-s);
|
|
3467
|
+
--x-number-font-weight-text: var(--x-number-font-weight-base-regular);
|
|
3468
|
+
--x-size-line-height-text: var(--x-size-line-height-base-s);
|
|
3469
|
+
--x-string-text-decoration-text: none;
|
|
3470
|
+
--x-font-family-title1: var(--x-font-family-base);
|
|
3471
|
+
--x-size-font-title1: var(--x-size-font-base-xl);
|
|
3472
|
+
--x-number-font-weight-title1: var(--x-number-font-weight-base-regular);
|
|
3473
|
+
--x-size-line-height-title1: var(--x-size-line-height-base-l);
|
|
3474
|
+
--x-string-text-decoration-title1: none;
|
|
3475
|
+
--x-font-family-title2: var(--x-font-family-base);
|
|
3476
|
+
--x-size-font-title2: var(--x-size-font-base-l);
|
|
3477
|
+
--x-number-font-weight-title2: var(--x-number-font-weight-base-regular);
|
|
3478
|
+
--x-size-line-height-title2: var(--x-size-line-height-base-m);
|
|
3479
|
+
--x-string-text-decoration-title2: none;
|
|
3480
|
+
--x-font-family-title3: var(--x-font-family-base);
|
|
3481
|
+
--x-size-font-title3: var(--x-size-font-base-m);
|
|
3482
|
+
--x-number-font-weight-title3: var(--x-number-font-weight-base-regular);
|
|
3483
|
+
--x-size-line-height-title3: var(--x-size-line-height-base-m);
|
|
3484
|
+
--x-string-text-decoration-title3: none;
|
|
3485
|
+
--x-font-family-small: var(--x-font-family-base);
|
|
3486
|
+
--x-size-font-small: var(--x-size-font-base-xs);
|
|
3487
|
+
--x-number-font-weight-small: var(--x-number-font-weight-base-regular);
|
|
3488
|
+
--x-size-line-height-small: var(--x-size-line-height-base-s);
|
|
3489
|
+
--x-string-text-decoration-small: none;
|
|
3490
|
+
}
|
|
3451
3491
|
|
|
3452
3492
|
.x,
|
|
3453
3493
|
.x-text {
|
|
@@ -4637,6 +4677,134 @@
|
|
|
4637
4677
|
--x-size-span-row-item: 1;
|
|
4638
4678
|
--x-size-start-row-item: 0;
|
|
4639
4679
|
}
|
|
4680
|
+
:root {
|
|
4681
|
+
--x-size-gap-row: 0;
|
|
4682
|
+
--x-size-padding-row: 0;
|
|
4683
|
+
--x-size-justify-row: stretch;
|
|
4684
|
+
--x-size-align-row: center;
|
|
4685
|
+
--x-size-span-row-item: 1;
|
|
4686
|
+
--x-size-start-row-item: 0;
|
|
4687
|
+
}
|
|
4688
|
+
|
|
4689
|
+
.x-row {
|
|
4690
|
+
display: grid;
|
|
4691
|
+
grid-template-columns: repeat(12, 1fr);
|
|
4692
|
+
grid-template-rows: 1fr;
|
|
4693
|
+
justify-items: var(--x-size-justify-row);
|
|
4694
|
+
align-items: var(--x-size-align-row);
|
|
4695
|
+
padding: var(--x-size-padding-row);
|
|
4696
|
+
gap: var(--x-size-gap-row);
|
|
4697
|
+
margin: 0;
|
|
4698
|
+
}
|
|
4699
|
+
.x-row__item {
|
|
4700
|
+
grid-column-start: var(--x-size-start-row-item);
|
|
4701
|
+
grid-column-end: span var(--x-size-span-row-item);
|
|
4702
|
+
list-style: none;
|
|
4703
|
+
}
|
|
4704
|
+
.x-row__item--span-1 {
|
|
4705
|
+
--x-size-span-row-item: 1;
|
|
4706
|
+
}
|
|
4707
|
+
.x-row__item--span-2 {
|
|
4708
|
+
--x-size-span-row-item: 2;
|
|
4709
|
+
}
|
|
4710
|
+
.x-row__item--span-3 {
|
|
4711
|
+
--x-size-span-row-item: 3;
|
|
4712
|
+
}
|
|
4713
|
+
.x-row__item--span-4 {
|
|
4714
|
+
--x-size-span-row-item: 4;
|
|
4715
|
+
}
|
|
4716
|
+
.x-row__item--span-5 {
|
|
4717
|
+
--x-size-span-row-item: 5;
|
|
4718
|
+
}
|
|
4719
|
+
.x-row__item--span-6 {
|
|
4720
|
+
--x-size-span-row-item: 6;
|
|
4721
|
+
}
|
|
4722
|
+
.x-row__item--span-7 {
|
|
4723
|
+
--x-size-span-row-item: 7;
|
|
4724
|
+
}
|
|
4725
|
+
.x-row__item--span-8 {
|
|
4726
|
+
--x-size-span-row-item: 8;
|
|
4727
|
+
}
|
|
4728
|
+
.x-row__item--span-9 {
|
|
4729
|
+
--x-size-span-row-item: 9;
|
|
4730
|
+
}
|
|
4731
|
+
.x-row__item--span-10 {
|
|
4732
|
+
--x-size-span-row-item: 10;
|
|
4733
|
+
}
|
|
4734
|
+
.x-row__item--span-11 {
|
|
4735
|
+
--x-size-span-row-item: 11;
|
|
4736
|
+
}
|
|
4737
|
+
.x-row__item--span-12 {
|
|
4738
|
+
--x-size-span-row-item: 12;
|
|
4739
|
+
}
|
|
4740
|
+
.x-row__item--start-1 {
|
|
4741
|
+
--x-size-start-row-item: 1;
|
|
4742
|
+
}
|
|
4743
|
+
.x-row__item--start-2 {
|
|
4744
|
+
--x-size-start-row-item: 2;
|
|
4745
|
+
}
|
|
4746
|
+
.x-row__item--start-3 {
|
|
4747
|
+
--x-size-start-row-item: 3;
|
|
4748
|
+
}
|
|
4749
|
+
.x-row__item--start-4 {
|
|
4750
|
+
--x-size-start-row-item: 4;
|
|
4751
|
+
}
|
|
4752
|
+
.x-row__item--start-5 {
|
|
4753
|
+
--x-size-start-row-item: 5;
|
|
4754
|
+
}
|
|
4755
|
+
.x-row__item--start-6 {
|
|
4756
|
+
--x-size-start-row-item: 6;
|
|
4757
|
+
}
|
|
4758
|
+
.x-row__item--start-7 {
|
|
4759
|
+
--x-size-start-row-item: 7;
|
|
4760
|
+
}
|
|
4761
|
+
.x-row__item--start-8 {
|
|
4762
|
+
--x-size-start-row-item: 8;
|
|
4763
|
+
}
|
|
4764
|
+
.x-row__item--start-9 {
|
|
4765
|
+
--x-size-start-row-item: 9;
|
|
4766
|
+
}
|
|
4767
|
+
.x-row__item--start-10 {
|
|
4768
|
+
--x-size-start-row-item: 10;
|
|
4769
|
+
}
|
|
4770
|
+
.x-row__item--start-11 {
|
|
4771
|
+
--x-size-start-row-item: 11;
|
|
4772
|
+
}
|
|
4773
|
+
.x-row__item--start-12 {
|
|
4774
|
+
--x-size-start-row-item: 12;
|
|
4775
|
+
}
|
|
4776
|
+
|
|
4777
|
+
.x-row--justify-start {
|
|
4778
|
+
--x-size-justify-row: start;
|
|
4779
|
+
}
|
|
4780
|
+
|
|
4781
|
+
.x-row--align-start {
|
|
4782
|
+
--x-size-align-row: start;
|
|
4783
|
+
}
|
|
4784
|
+
|
|
4785
|
+
.x-row--justify-center {
|
|
4786
|
+
--x-size-justify-row: center;
|
|
4787
|
+
}
|
|
4788
|
+
|
|
4789
|
+
.x-row--align-center {
|
|
4790
|
+
--x-size-align-row: center;
|
|
4791
|
+
}
|
|
4792
|
+
|
|
4793
|
+
.x-row--justify-end {
|
|
4794
|
+
--x-size-justify-row: end;
|
|
4795
|
+
}
|
|
4796
|
+
|
|
4797
|
+
.x-row--align-end {
|
|
4798
|
+
--x-size-align-row: end;
|
|
4799
|
+
}
|
|
4800
|
+
|
|
4801
|
+
.x-row--justify-stretch {
|
|
4802
|
+
--x-size-justify-row: stretch;
|
|
4803
|
+
}
|
|
4804
|
+
|
|
4805
|
+
.x-row--align-stretch {
|
|
4806
|
+
--x-size-align-row: stretch;
|
|
4807
|
+
}
|
|
4640
4808
|
:root {
|
|
4641
4809
|
--x-color-border-result-default: var(--x-color-base-lead);
|
|
4642
4810
|
--x-color-border-result-overlay-default: var(--x-color-border-result-default);
|
|
@@ -8463,6 +8631,29 @@
|
|
|
8463
8631
|
--x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
|
|
8464
8632
|
--x-size-line-height-button-default: var(--x-size-line-height-text);
|
|
8465
8633
|
}
|
|
8634
|
+
:root {
|
|
8635
|
+
--x-color-background-button-default: var(--x-color-base-lead);
|
|
8636
|
+
--x-color-border-button-default: var(--x-color-background-button-default);
|
|
8637
|
+
--x-color-text-button-default: var(--x-color-base-neutral-100);
|
|
8638
|
+
--x-size-border-radius-button-default: var(--x-size-border-radius-base-none);
|
|
8639
|
+
--x-size-border-radius-top-left-button-default: var(--x-size-border-radius-button-default);
|
|
8640
|
+
--x-size-border-radius-top-right-button-default: var(--x-size-border-radius-button-default);
|
|
8641
|
+
--x-size-border-radius-bottom-right-button-default: var(--x-size-border-radius-button-default);
|
|
8642
|
+
--x-size-border-radius-bottom-left-button-default: var(--x-size-border-radius-button-default);
|
|
8643
|
+
--x-size-border-width-button-default: var(--x-size-border-width-base);
|
|
8644
|
+
--x-size-border-width-top-button-default: var(--x-size-border-width-button-default);
|
|
8645
|
+
--x-size-border-width-right-button-default: var(--x-size-border-width-button-default);
|
|
8646
|
+
--x-size-border-width-bottom-button-default: var(--x-size-border-width-button-default);
|
|
8647
|
+
--x-size-border-width-left-button-default: var(--x-size-border-width-button-default);
|
|
8648
|
+
--x-size-height-button-default: var(--x-size-base-08);
|
|
8649
|
+
--x-size-padding-right-button-default: var(--x-size-base-05);
|
|
8650
|
+
--x-size-padding-left-button-default: var(--x-size-base-05);
|
|
8651
|
+
--x-size-gap-button-default: var(--x-size-base-03);
|
|
8652
|
+
--x-font-family-button-default: var(--x-font-family-text);
|
|
8653
|
+
--x-size-font-button-default: var(--x-size-font-text);
|
|
8654
|
+
--x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
|
|
8655
|
+
--x-size-line-height-button-default: var(--x-size-line-height-text);
|
|
8656
|
+
}
|
|
8466
8657
|
|
|
8467
8658
|
[dir="ltr"] .x-button {
|
|
8468
8659
|
padding-right: var(--x-size-padding-right-button-default);
|
|
@@ -8654,195 +8845,4 @@
|
|
|
8654
8845
|
--x-size-border-radius-base-m: var(--x-size-base-06);
|
|
8655
8846
|
--x-size-border-radius-base-pill: 99999px;
|
|
8656
8847
|
--x-size-border-width-base: 1px;
|
|
8657
|
-
}
|
|
8658
|
-
:root {
|
|
8659
|
-
--x-color-background-button-default: var(--x-color-base-lead);
|
|
8660
|
-
--x-color-border-button-default: var(--x-color-background-button-default);
|
|
8661
|
-
--x-color-text-button-default: var(--x-color-base-neutral-100);
|
|
8662
|
-
--x-size-border-radius-button-default: var(--x-size-border-radius-base-none);
|
|
8663
|
-
--x-size-border-radius-top-left-button-default: var(--x-size-border-radius-button-default);
|
|
8664
|
-
--x-size-border-radius-top-right-button-default: var(--x-size-border-radius-button-default);
|
|
8665
|
-
--x-size-border-radius-bottom-right-button-default: var(--x-size-border-radius-button-default);
|
|
8666
|
-
--x-size-border-radius-bottom-left-button-default: var(--x-size-border-radius-button-default);
|
|
8667
|
-
--x-size-border-width-button-default: var(--x-size-border-width-base);
|
|
8668
|
-
--x-size-border-width-top-button-default: var(--x-size-border-width-button-default);
|
|
8669
|
-
--x-size-border-width-right-button-default: var(--x-size-border-width-button-default);
|
|
8670
|
-
--x-size-border-width-bottom-button-default: var(--x-size-border-width-button-default);
|
|
8671
|
-
--x-size-border-width-left-button-default: var(--x-size-border-width-button-default);
|
|
8672
|
-
--x-size-height-button-default: var(--x-size-base-08);
|
|
8673
|
-
--x-size-padding-right-button-default: var(--x-size-base-05);
|
|
8674
|
-
--x-size-padding-left-button-default: var(--x-size-base-05);
|
|
8675
|
-
--x-size-gap-button-default: var(--x-size-base-03);
|
|
8676
|
-
--x-font-family-button-default: var(--x-font-family-text);
|
|
8677
|
-
--x-size-font-button-default: var(--x-size-font-text);
|
|
8678
|
-
--x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
|
|
8679
|
-
--x-size-line-height-button-default: var(--x-size-line-height-text);
|
|
8680
|
-
}
|
|
8681
|
-
:root {
|
|
8682
|
-
--x-size-gap-row: 0;
|
|
8683
|
-
--x-size-padding-row: 0;
|
|
8684
|
-
--x-size-justify-row: stretch;
|
|
8685
|
-
--x-size-align-row: center;
|
|
8686
|
-
--x-size-span-row-item: 1;
|
|
8687
|
-
--x-size-start-row-item: 0;
|
|
8688
|
-
}
|
|
8689
|
-
|
|
8690
|
-
.x-row {
|
|
8691
|
-
display: grid;
|
|
8692
|
-
grid-template-columns: repeat(12, 1fr);
|
|
8693
|
-
grid-template-rows: 1fr;
|
|
8694
|
-
justify-items: var(--x-size-justify-row);
|
|
8695
|
-
align-items: var(--x-size-align-row);
|
|
8696
|
-
padding: var(--x-size-padding-row);
|
|
8697
|
-
gap: var(--x-size-gap-row);
|
|
8698
|
-
margin: 0;
|
|
8699
|
-
}
|
|
8700
|
-
.x-row__item {
|
|
8701
|
-
grid-column-start: var(--x-size-start-row-item);
|
|
8702
|
-
grid-column-end: span var(--x-size-span-row-item);
|
|
8703
|
-
list-style: none;
|
|
8704
|
-
}
|
|
8705
|
-
.x-row__item--span-1 {
|
|
8706
|
-
--x-size-span-row-item: 1;
|
|
8707
|
-
}
|
|
8708
|
-
.x-row__item--span-2 {
|
|
8709
|
-
--x-size-span-row-item: 2;
|
|
8710
|
-
}
|
|
8711
|
-
.x-row__item--span-3 {
|
|
8712
|
-
--x-size-span-row-item: 3;
|
|
8713
|
-
}
|
|
8714
|
-
.x-row__item--span-4 {
|
|
8715
|
-
--x-size-span-row-item: 4;
|
|
8716
|
-
}
|
|
8717
|
-
.x-row__item--span-5 {
|
|
8718
|
-
--x-size-span-row-item: 5;
|
|
8719
|
-
}
|
|
8720
|
-
.x-row__item--span-6 {
|
|
8721
|
-
--x-size-span-row-item: 6;
|
|
8722
|
-
}
|
|
8723
|
-
.x-row__item--span-7 {
|
|
8724
|
-
--x-size-span-row-item: 7;
|
|
8725
|
-
}
|
|
8726
|
-
.x-row__item--span-8 {
|
|
8727
|
-
--x-size-span-row-item: 8;
|
|
8728
|
-
}
|
|
8729
|
-
.x-row__item--span-9 {
|
|
8730
|
-
--x-size-span-row-item: 9;
|
|
8731
|
-
}
|
|
8732
|
-
.x-row__item--span-10 {
|
|
8733
|
-
--x-size-span-row-item: 10;
|
|
8734
|
-
}
|
|
8735
|
-
.x-row__item--span-11 {
|
|
8736
|
-
--x-size-span-row-item: 11;
|
|
8737
|
-
}
|
|
8738
|
-
.x-row__item--span-12 {
|
|
8739
|
-
--x-size-span-row-item: 12;
|
|
8740
|
-
}
|
|
8741
|
-
.x-row__item--start-1 {
|
|
8742
|
-
--x-size-start-row-item: 1;
|
|
8743
|
-
}
|
|
8744
|
-
.x-row__item--start-2 {
|
|
8745
|
-
--x-size-start-row-item: 2;
|
|
8746
|
-
}
|
|
8747
|
-
.x-row__item--start-3 {
|
|
8748
|
-
--x-size-start-row-item: 3;
|
|
8749
|
-
}
|
|
8750
|
-
.x-row__item--start-4 {
|
|
8751
|
-
--x-size-start-row-item: 4;
|
|
8752
|
-
}
|
|
8753
|
-
.x-row__item--start-5 {
|
|
8754
|
-
--x-size-start-row-item: 5;
|
|
8755
|
-
}
|
|
8756
|
-
.x-row__item--start-6 {
|
|
8757
|
-
--x-size-start-row-item: 6;
|
|
8758
|
-
}
|
|
8759
|
-
.x-row__item--start-7 {
|
|
8760
|
-
--x-size-start-row-item: 7;
|
|
8761
|
-
}
|
|
8762
|
-
.x-row__item--start-8 {
|
|
8763
|
-
--x-size-start-row-item: 8;
|
|
8764
|
-
}
|
|
8765
|
-
.x-row__item--start-9 {
|
|
8766
|
-
--x-size-start-row-item: 9;
|
|
8767
|
-
}
|
|
8768
|
-
.x-row__item--start-10 {
|
|
8769
|
-
--x-size-start-row-item: 10;
|
|
8770
|
-
}
|
|
8771
|
-
.x-row__item--start-11 {
|
|
8772
|
-
--x-size-start-row-item: 11;
|
|
8773
|
-
}
|
|
8774
|
-
.x-row__item--start-12 {
|
|
8775
|
-
--x-size-start-row-item: 12;
|
|
8776
|
-
}
|
|
8777
|
-
|
|
8778
|
-
.x-row--justify-start {
|
|
8779
|
-
--x-size-justify-row: start;
|
|
8780
|
-
}
|
|
8781
|
-
|
|
8782
|
-
.x-row--align-start {
|
|
8783
|
-
--x-size-align-row: start;
|
|
8784
|
-
}
|
|
8785
|
-
|
|
8786
|
-
.x-row--justify-center {
|
|
8787
|
-
--x-size-justify-row: center;
|
|
8788
|
-
}
|
|
8789
|
-
|
|
8790
|
-
.x-row--align-center {
|
|
8791
|
-
--x-size-align-row: center;
|
|
8792
|
-
}
|
|
8793
|
-
|
|
8794
|
-
.x-row--justify-end {
|
|
8795
|
-
--x-size-justify-row: end;
|
|
8796
|
-
}
|
|
8797
|
-
|
|
8798
|
-
.x-row--align-end {
|
|
8799
|
-
--x-size-align-row: end;
|
|
8800
|
-
}
|
|
8801
|
-
|
|
8802
|
-
.x-row--justify-stretch {
|
|
8803
|
-
--x-size-justify-row: stretch;
|
|
8804
|
-
}
|
|
8805
|
-
|
|
8806
|
-
.x-row--align-stretch {
|
|
8807
|
-
--x-size-align-row: stretch;
|
|
8808
|
-
}
|
|
8809
|
-
:root {
|
|
8810
|
-
--x-font-family-base: "Montserrat", sans-serif;
|
|
8811
|
-
--x-size-font-base-xs: 12px;
|
|
8812
|
-
--x-size-font-base-s: 14px;
|
|
8813
|
-
--x-size-font-base-m: 16px;
|
|
8814
|
-
--x-size-font-base-l: 18px;
|
|
8815
|
-
--x-size-font-base-xl: 32px;
|
|
8816
|
-
--x-number-font-weight-base-light: 300;
|
|
8817
|
-
--x-number-font-weight-base-regular: 400;
|
|
8818
|
-
--x-number-font-weight-base-bold: 600;
|
|
8819
|
-
--x-size-line-height-base-s: 16px;
|
|
8820
|
-
--x-size-line-height-base-m: 24px;
|
|
8821
|
-
--x-size-line-height-base-l: 32px;
|
|
8822
|
-
--x-color-text-default: var(--x-color-base-neutral-10);
|
|
8823
|
-
--x-font-family-text: var(--x-font-family-base);
|
|
8824
|
-
--x-size-font-text: var(--x-size-font-base-s);
|
|
8825
|
-
--x-number-font-weight-text: var(--x-number-font-weight-base-regular);
|
|
8826
|
-
--x-size-line-height-text: var(--x-size-line-height-base-s);
|
|
8827
|
-
--x-string-text-decoration-text: none;
|
|
8828
|
-
--x-font-family-title1: var(--x-font-family-base);
|
|
8829
|
-
--x-size-font-title1: var(--x-size-font-base-xl);
|
|
8830
|
-
--x-number-font-weight-title1: var(--x-number-font-weight-base-regular);
|
|
8831
|
-
--x-size-line-height-title1: var(--x-size-line-height-base-l);
|
|
8832
|
-
--x-string-text-decoration-title1: none;
|
|
8833
|
-
--x-font-family-title2: var(--x-font-family-base);
|
|
8834
|
-
--x-size-font-title2: var(--x-size-font-base-l);
|
|
8835
|
-
--x-number-font-weight-title2: var(--x-number-font-weight-base-regular);
|
|
8836
|
-
--x-size-line-height-title2: var(--x-size-line-height-base-m);
|
|
8837
|
-
--x-string-text-decoration-title2: none;
|
|
8838
|
-
--x-font-family-title3: var(--x-font-family-base);
|
|
8839
|
-
--x-size-font-title3: var(--x-size-font-base-m);
|
|
8840
|
-
--x-number-font-weight-title3: var(--x-number-font-weight-base-regular);
|
|
8841
|
-
--x-size-line-height-title3: var(--x-size-line-height-base-m);
|
|
8842
|
-
--x-string-text-decoration-title3: none;
|
|
8843
|
-
--x-font-family-small: var(--x-font-family-base);
|
|
8844
|
-
--x-size-font-small: var(--x-size-font-base-xs);
|
|
8845
|
-
--x-number-font-weight-small: var(--x-number-font-weight-base-regular);
|
|
8846
|
-
--x-size-line-height-small: var(--x-size-line-height-base-s);
|
|
8847
|
-
--x-string-text-decoration-small: none;
|
|
8848
8848
|
}
|
|
@@ -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. |
|
|
@@ -24,7 +24,7 @@ const updateHistoryQueriesWithSearchResponse = ({ state, dispatch }, searchRespo
|
|
|
24
24
|
const historyQuery = state.historyQueries[indexOfHistoryQuery];
|
|
25
25
|
const isCurrentSessionHistoryQuery = historyQuery.timestamp > state.sessionTimeStampInMs;
|
|
26
26
|
if (!isCurrentSessionHistoryQuery || historyQuery.totalResults == null || searchResponse) {
|
|
27
|
-
const filters =
|
|
27
|
+
const filters = getHistoryQueriesFiltersList(searchResponse.facets, searchResponse.request.filters);
|
|
28
28
|
const newHistoryQueries = state.historyQueries.slice();
|
|
29
29
|
newHistoryQueries[indexOfHistoryQuery] = {
|
|
30
30
|
...historyQuery,
|
|
@@ -37,20 +37,35 @@ const updateHistoryQueriesWithSearchResponse = ({ state, dispatch }, searchRespo
|
|
|
37
37
|
}
|
|
38
38
|
};
|
|
39
39
|
/**
|
|
40
|
-
*
|
|
40
|
+
* Creates a selected filters list by comparing request filters and response facets.
|
|
41
|
+
* Uses the 'filter.id' to match and merge the objects in a single one with all the keys.
|
|
41
42
|
*
|
|
43
|
+
* @param responseFacets - Facets from the response.
|
|
42
44
|
* @param requestFilters - Filters from the request.
|
|
43
45
|
*
|
|
44
46
|
* @returns A list of selected filters in the history query.
|
|
45
47
|
*
|
|
46
48
|
*/
|
|
47
|
-
function
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
49
|
+
function getHistoryQueriesFiltersList(responseFacets, requestFilters) {
|
|
50
|
+
if (!requestFilters || !responseFacets) {
|
|
51
|
+
return [];
|
|
52
|
+
}
|
|
53
|
+
else {
|
|
54
|
+
return Object.entries(requestFilters).flatMap(([facetId, facetFilters]) => {
|
|
55
|
+
const matchingFacet = facetId !== '__unknown__' ? responseFacets.find(facet => facet.id === facetId) : null;
|
|
56
|
+
return facetFilters.reduce((accFilters, requestFilter) => {
|
|
57
|
+
const matchingFilter = matchingFacet
|
|
58
|
+
? matchingFacet.filters.find(filter => filter.id === requestFilter.id)
|
|
59
|
+
: responseFacets
|
|
60
|
+
.flatMap(facet => facet.filters)
|
|
61
|
+
.find(filter => filter.id === requestFilter.id);
|
|
62
|
+
if (matchingFilter) {
|
|
63
|
+
accFilters.push({ ...matchingFilter, selected: requestFilter.selected });
|
|
64
|
+
}
|
|
65
|
+
return accFilters;
|
|
66
|
+
}, []);
|
|
67
|
+
});
|
|
68
|
+
}
|
|
54
69
|
}
|
|
55
70
|
|
|
56
71
|
export { updateHistoryQueriesWithSearchResponse };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"update-history-queries-with-search-response.action.js","sources":["../../../../../../src/x-modules/history-queries/store/actions/update-history-queries-with-search-response.action.ts"],"sourcesContent":["import { Filter } from '@empathyco/x-types';\nimport { HistoryQueriesXStoreModule } from '../types';\nimport { InternalSearchResponse } from '../../../search/index';\n\n/**\n * Default implementation for the\n * {@link HistoryQueriesActions.updateHistoryQueriesWithSearchResponse} action.\n *\n * The matching history query will only be updated on the following scenarios:\n * 1. If it is part of a previous session, not the current one.\n * 2. If its total results count has not been registered yet.\n * 3. If there is a new search response.\n *\n * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the actions,\n * provided by Vuex.\n *\n * @param searchResponse - The search response to update history queries with.\n *\n * @returns A `void` promise that resolves when the history query finishes updating.\n *\n * @public\n */\n// eslint-disable-next-line max-len\nexport const updateHistoryQueriesWithSearchResponse: HistoryQueriesXStoreModule['actions']['updateHistoryQueriesWithSearchResponse'] =\n ({ state, dispatch }, searchResponse) => {\n if (searchResponse.status === 'success') {\n const indexOfHistoryQuery = state.historyQueries.findIndex(\n ({ query }) => query === searchResponse.request.query\n );\n if (indexOfHistoryQuery >= 0) {\n const historyQuery = state.historyQueries[indexOfHistoryQuery];\n const isCurrentSessionHistoryQuery = historyQuery.timestamp > state.sessionTimeStampInMs;\n if (!isCurrentSessionHistoryQuery || historyQuery.totalResults == null || searchResponse) {\n const filters =
|
|
1
|
+
{"version":3,"file":"update-history-queries-with-search-response.action.js","sources":["../../../../../../src/x-modules/history-queries/store/actions/update-history-queries-with-search-response.action.ts"],"sourcesContent":["import { Filter } from '@empathyco/x-types';\nimport { HistoryQueriesXStoreModule } from '../types';\nimport { InternalSearchResponse } from '../../../search/index';\n\n/**\n * Default implementation for the\n * {@link HistoryQueriesActions.updateHistoryQueriesWithSearchResponse} action.\n *\n * The matching history query will only be updated on the following scenarios:\n * 1. If it is part of a previous session, not the current one.\n * 2. If its total results count has not been registered yet.\n * 3. If there is a new search response.\n *\n * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the actions,\n * provided by Vuex.\n *\n * @param searchResponse - The search response to update history queries with.\n *\n * @returns A `void` promise that resolves when the history query finishes updating.\n *\n * @public\n */\n// eslint-disable-next-line max-len\nexport const updateHistoryQueriesWithSearchResponse: HistoryQueriesXStoreModule['actions']['updateHistoryQueriesWithSearchResponse'] =\n ({ state, dispatch }, searchResponse) => {\n if (searchResponse.status === 'success') {\n const indexOfHistoryQuery = state.historyQueries.findIndex(\n ({ query }) => query === searchResponse.request.query\n );\n if (indexOfHistoryQuery >= 0) {\n const historyQuery = state.historyQueries[indexOfHistoryQuery];\n const isCurrentSessionHistoryQuery = historyQuery.timestamp > state.sessionTimeStampInMs;\n if (!isCurrentSessionHistoryQuery || historyQuery.totalResults == null || searchResponse) {\n const filters = getHistoryQueriesFiltersList(\n searchResponse.facets,\n searchResponse.request.filters\n );\n\n const newHistoryQueries = state.historyQueries.slice();\n newHistoryQueries[indexOfHistoryQuery] = {\n ...historyQuery,\n totalResults: searchResponse.totalResults,\n selectedFilters: filters\n };\n return dispatch('setHistoryQueries', newHistoryQueries);\n }\n }\n }\n };\n\n/**\n * Creates a selected filters list by comparing request filters and response facets.\n * Uses the 'filter.id' to match and merge the objects in a single one with all the keys.\n *\n * @param responseFacets - Facets from the response.\n * @param requestFilters - Filters from the request.\n *\n * @returns A list of selected filters in the history query.\n *\n */\nfunction getHistoryQueriesFiltersList(\n responseFacets: InternalSearchResponse['facets'],\n requestFilters: InternalSearchResponse['request']['filters']\n): Filter[] {\n if (!requestFilters || !responseFacets) {\n return [];\n } else {\n return Object.entries(requestFilters).flatMap(([facetId, facetFilters]) => {\n const matchingFacet =\n facetId !== '__unknown__' ? responseFacets.find(facet => facet.id === facetId) : null;\n\n return facetFilters.reduce<Filter[]>((accFilters, requestFilter) => {\n const matchingFilter = matchingFacet\n ? matchingFacet.filters.find(filter => filter.id === requestFilter.id)\n : responseFacets\n .flatMap(facet => facet.filters)\n .find(filter => filter.id === requestFilter.id);\n\n if (matchingFilter) {\n accFilters.push({ ...matchingFilter, selected: requestFilter.selected });\n }\n\n return accFilters;\n }, []);\n });\n }\n}\n"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;AAiBG;AACH;AACO,MAAM,sCAAsC,GACjD,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,cAAc,KAAI;AACtC,IAAA,IAAI,cAAc,CAAC,MAAM,KAAK,SAAS,EAAE;QACvC,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,SAAS,CACxD,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,KAAK,cAAc,CAAC,OAAO,CAAC,KAAK,CACtD,CAAC;QACF,IAAI,mBAAmB,IAAI,CAAC,EAAE;YAC5B,MAAM,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC,CAAC;YAC/D,MAAM,4BAA4B,GAAG,YAAY,CAAC,SAAS,GAAG,KAAK,CAAC,oBAAoB,CAAC;YACzF,IAAI,CAAC,4BAA4B,IAAI,YAAY,CAAC,YAAY,IAAI,IAAI,IAAI,cAAc,EAAE;AACxF,gBAAA,MAAM,OAAO,GAAG,4BAA4B,CAC1C,cAAc,CAAC,MAAM,EACrB,cAAc,CAAC,OAAO,CAAC,OAAO,CAC/B,CAAC;gBAEF,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC;gBACvD,iBAAiB,CAAC,mBAAmB,CAAC,GAAG;AACvC,oBAAA,GAAG,YAAY;oBACf,YAAY,EAAE,cAAc,CAAC,YAAY;AACzC,oBAAA,eAAe,EAAE,OAAO;iBACzB,CAAC;AACF,gBAAA,OAAO,QAAQ,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAC;AACzD,aAAA;AACF,SAAA;AACF,KAAA;AACH,EAAE;AAEJ;;;;;;;;;AASG;AACH,SAAS,4BAA4B,CACnC,cAAgD,EAChD,cAA4D,EAAA;AAE5D,IAAA,IAAI,CAAC,cAAc,IAAI,CAAC,cAAc,EAAE;AACtC,QAAA,OAAO,EAAE,CAAC;AACX,KAAA;AAAM,SAAA;AACL,QAAA,OAAO,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EAAE,YAAY,CAAC,KAAI;YACxE,MAAM,aAAa,GACjB,OAAO,KAAK,aAAa,GAAG,cAAc,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,EAAE,KAAK,OAAO,CAAC,GAAG,IAAI,CAAC;YAExF,OAAO,YAAY,CAAC,MAAM,CAAW,CAAC,UAAU,EAAE,aAAa,KAAI;gBACjE,MAAM,cAAc,GAAG,aAAa;AAClC,sBAAE,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,EAAE,KAAK,aAAa,CAAC,EAAE,CAAC;AACtE,sBAAE,cAAc;yBACX,OAAO,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC;AAC/B,yBAAA,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,EAAE,KAAK,aAAa,CAAC,EAAE,CAAC,CAAC;AAEtD,gBAAA,IAAI,cAAc,EAAE;AAClB,oBAAA,UAAU,CAAC,IAAI,CAAC,EAAE,GAAG,cAAc,EAAE,QAAQ,EAAE,aAAa,CAAC,QAAQ,EAAE,CAAC,CAAC;AAC1E,iBAAA;AAED,gBAAA,OAAO,UAAU,CAAC;aACnB,EAAE,EAAE,CAAC,CAAC;AACT,SAAC,CAAC,CAAC;AACJ,KAAA;AACH;;;;"}
|
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
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"update-history-queries-with-search-response.action.d.ts","sourceRoot":"","sources":["../../../../../../src/x-modules/history-queries/store/actions/update-history-queries-with-search-response.action.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAGtD;;;;;;;;;;;;;;;;;GAiBG;AAEH,eAAO,MAAM,sCAAsC,EAAE,0BAA0B,CAAC,SAAS,CAAC,CAAC,wCAAwC,
|
|
1
|
+
{"version":3,"file":"update-history-queries-with-search-response.action.d.ts","sourceRoot":"","sources":["../../../../../../src/x-modules/history-queries/store/actions/update-history-queries-with-search-response.action.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAGtD;;;;;;;;;;;;;;;;;GAiBG;AAEH,eAAO,MAAM,sCAAsC,EAAE,0BAA0B,CAAC,SAAS,CAAC,CAAC,wCAAwC,CAyBhI,CAAC"}
|