From ad8328260c0f1190603ff6c92aa6f04c0db84eb8 Mon Sep 17 00:00:00 2001 From: Dhaya <154633+dhayab@users.noreply.github.com> Date: Fri, 19 Apr 2024 15:22:47 +0200 Subject: [PATCH 1/3] feat(styles): set up base CSS styles for `relatedProducts` widget --- .../instantsearch.css/src/themes/algolia.scss | 3 + .../instantsearch.css/src/themes/reset.scss | 1 + .../src/themes/satellite.scss | 14 ++-- .../widgets/frequently-bought-together.md | 4 +- specs/src/pages/widgets/related-products.md | 68 +++++++++++++++++++ 5 files changed, 83 insertions(+), 7 deletions(-) create mode 100644 specs/src/pages/widgets/related-products.md diff --git a/packages/instantsearch.css/src/themes/algolia.scss b/packages/instantsearch.css/src/themes/algolia.scss index 6ef4c31330..781ac4e54e 100644 --- a/packages/instantsearch.css/src/themes/algolia.scss +++ b/packages/instantsearch.css/src/themes/algolia.scss @@ -26,6 +26,7 @@ a[class^='ais-'] { .ais-HierarchicalMenu, .ais-Hits, .ais-FrequentlyBoughtTogether, +.ais-RelatedProducts, .ais-Results, .ais-HitsPerPage, .ais-ResultsPerPage, @@ -288,6 +289,7 @@ a[class^='ais-'] { .ais-InfiniteResults-list, .ais-Hits-list, .ais-FrequentlyBoughtTogether-list, +.ais-RelatedProducts-list, .ais-Results-list { margin-top: -1rem; margin-left: -1rem; @@ -303,6 +305,7 @@ a[class^='ais-'] { .ais-InfiniteResults-item, .ais-Hits-item, .ais-FrequentlyBoughtTogether-item, +.ais-RelatedProducts-item, .ais-Results-item { margin-top: 1rem; margin-left: 1rem; diff --git a/packages/instantsearch.css/src/themes/reset.scss b/packages/instantsearch.css/src/themes/reset.scss index cc308d004d..621c7da9c2 100644 --- a/packages/instantsearch.css/src/themes/reset.scss +++ b/packages/instantsearch.css/src/themes/reset.scss @@ -5,6 +5,7 @@ .ais-HierarchicalMenu-list, .ais-Hits-list, .ais-FrequentlyBoughtTogether-list, +.ais-RelatedProducts-list, .ais-Results-list, .ais-InfiniteHits-list, .ais-InfiniteResults-list, diff --git a/packages/instantsearch.css/src/themes/satellite.scss b/packages/instantsearch.css/src/themes/satellite.scss index 55b5abf8c1..8bcb6afa28 100644 --- a/packages/instantsearch.css/src/themes/satellite.scss +++ b/packages/instantsearch.css/src/themes/satellite.scss @@ -606,12 +606,13 @@ $break-medium: 767px; /** * Hits and InfiniteHits - * FrequentlyBoughtTogether + * FrequentlyBoughtTogether and RelatedProducts */ .ais-Hits-item, .ais-InfiniteHits-item, -.ais-FrequentlyBoughtTogether-item { +.ais-FrequentlyBoughtTogether-item, +.ais-RelatedProducts-item { align-items: center; background: $white; box-shadow: 0 0 0 1px rgba($grey900, 0.05), 0 1px 3px 0 rgba($grey900, 0.15); @@ -624,19 +625,22 @@ $break-medium: 767px; .ais-Hits-item:first-of-type, .ais-InfiniteHits-item:first-of-type, -.ais-FrequentlyBoughtTogether-item:first-of-type { +.ais-FrequentlyBoughtTogether-item:first-of-type, +.ais-RelatedProducts-item:first-of-type { border-radius: 3px 3px 0 0; } .ais-Hits-item:last-of-type, .ais-InfiniteHits-item:last-of-type, -.ais-FrequentlyBoughtTogether-item:last-of-type { +.ais-FrequentlyBoughtTogether-item:last-of-type, +.ais-RelatedProducts-item:last-of-type { border-radius: 0 0 3px 3px; } .ais-Hits-item:only-of-type, .ais-InfiniteHits-item:only-of-type, -.ais-FrequentlyBoughtTogether-item:only-of-type { +.ais-FrequentlyBoughtTogether-item:only-of-type, +.ais-RelatedProducts-item:only-of-type { border-radius: 3px; } diff --git a/specs/src/pages/widgets/frequently-bought-together.md b/specs/src/pages/widgets/frequently-bought-together.md index 8d0ae14dc4..cdd5d838f0 100644 --- a/specs/src/pages/widgets/frequently-bought-together.md +++ b/specs/src/pages/widgets/frequently-bought-together.md @@ -46,8 +46,8 @@ classes: - name: .ais-FrequentlyBoughtTogether-item description: the hit list item options: - - name: objectID - description: objectID of the item to get the frequently bought together items from + - name: objectIDs + description: objectIDs of the items to get the frequently bought together items from - name: maxRecommendations description: Number of recommendations to retrieve - name: queryParameters diff --git a/specs/src/pages/widgets/related-products.md b/specs/src/pages/widgets/related-products.md new file mode 100644 index 0000000000..5a75983353 --- /dev/null +++ b/specs/src/pages/widgets/related-products.md @@ -0,0 +1,68 @@ +--- +layout: ../../layouts/WidgetLayout.astro +title: RelatedProducts +type: widget +html: | +
+

Related products

+
+
    +
  1. + Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black +
    2. +
  2. + Hit 4397400: Google - Chromecast - Black +
    3. +
  3. + Hit 4397400: Google - Chromecast - Black +
    4. +
  4. + Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black +
    5. +
  5. + Hit 4397400: Google - Chromecast - Black +
    6. +
  6. + Hit 4397400: Google - Chromecast - Black +
    7. +
  7. + Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black +
    8. +
  8. + Hit 4397400: Google - Chromecast - Black +
    9. +
+
+
+classes: + - name: .ais-RelatedProducts + description: the root div of the widget + - name: .ais-RelatedProducts-title + description: the title heading of the widget + - name: .ais-RelatedProducts-container + description: the container for the list of results + - name: .ais-RelatedProducts-list + description: the list of results + - name: .ais-RelatedProducts-item + description: the hit list item +options: + - name: objectIDs + description: objectIDs of the items to get the frequently bought together items from + - name: maxRecommendations + description: Number of recommendations to retrieve + - name: fallbackParameters + description: List of search parameters to send as additional filters to use as fallback when there aren't enough recommendations. + - name: queryParameters + description: List of search parameters to send + - name: threshold + description: Threshold for the recommendations confidence score (between 0 and 100) + - name: transformItems + description: Function which receives the items, which will be called before displaying them. Should return a new array with the same shape as the original array. Useful for mapping over the items to transform, remove or reorder them +translations: + - name: title + default: "Related products" + description: The text for the header element + - name: sliderLabel + default: "Related products" + description: The label for the horizontal slider +--- From c6d3e8062616b2e0e6674b6acfa370db96b581d4 Mon Sep 17 00:00:00 2001 From: Dhaya <154633+dhayab@users.noreply.github.com> Date: Fri, 19 Apr 2024 15:44:29 +0200 Subject: [PATCH 2/3] bump bundlesize --- bundlesize.config.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bundlesize.config.json b/bundlesize.config.json index eec62d983d..03643a0fe8 100644 --- a/bundlesize.config.json +++ b/bundlesize.config.json @@ -58,7 +58,7 @@ }, { "path": "./packages/instantsearch.css/themes/satellite.css", - "maxSize": "4.55 kB" + "maxSize": "4.60 kB" }, { "path": "./packages/instantsearch.css/themes/satellite-min.css", From e752c0abbcd45672daf3102e1cc321aa1354756c Mon Sep 17 00:00:00 2001 From: Dhaya <154633+dhayab@users.noreply.github.com> Date: Mon, 22 Apr 2024 16:02:53 +0200 Subject: [PATCH 3/3] Apply suggestions from code review Co-authored-by: Sarah Dayan <5370675+sarahdayan@users.noreply.github.com> --- specs/src/pages/widgets/frequently-bought-together.md | 2 +- specs/src/pages/widgets/related-products.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/specs/src/pages/widgets/frequently-bought-together.md b/specs/src/pages/widgets/frequently-bought-together.md index cdd5d838f0..82291f1450 100644 --- a/specs/src/pages/widgets/frequently-bought-together.md +++ b/specs/src/pages/widgets/frequently-bought-together.md @@ -47,7 +47,7 @@ classes: description: the hit list item options: - name: objectIDs - description: objectIDs of the items to get the frequently bought together items from + description: objectIDs of the items to get the Frequently Bought Together items from - name: maxRecommendations description: Number of recommendations to retrieve - name: queryParameters diff --git a/specs/src/pages/widgets/related-products.md b/specs/src/pages/widgets/related-products.md index 5a75983353..92f24b6fc4 100644 --- a/specs/src/pages/widgets/related-products.md +++ b/specs/src/pages/widgets/related-products.md @@ -47,7 +47,7 @@ classes: description: the hit list item options: - name: objectIDs - description: objectIDs of the items to get the frequently bought together items from + description: objectIDs of the items to get the Related Products items from - name: maxRecommendations description: Number of recommendations to retrieve - name: fallbackParameters