From d9047978b027227b9fb7f47aae3a4a3995f6f9e5 Mon Sep 17 00:00:00 2001 From: Dhaya <154633+dhayab@users.noreply.github.com> Date: Tue, 21 May 2024 12:47:20 +0200 Subject: [PATCH] feat(recommend): set up base CSS styles for `lookingSimilar` widget (#6210) --- bundlesize.config.json | 4 +- .../instantsearch.css/src/themes/algolia.scss | 3 + .../instantsearch.css/src/themes/reset.scss | 1 + .../src/themes/satellite.scss | 7 +- .../widgets/frequently-bought-together.md | 2 +- specs/src/pages/widgets/looking-similar.md | 68 +++++++++++++++++++ specs/src/pages/widgets/related-products.md | 2 +- specs/src/pages/widgets/trending-items.md | 2 +- 8 files changed, 83 insertions(+), 6 deletions(-) create mode 100644 specs/src/pages/widgets/looking-similar.md diff --git a/bundlesize.config.json b/bundlesize.config.json index e2dd563b99..571d82c6e2 100644 --- a/bundlesize.config.json +++ b/bundlesize.config.json @@ -58,11 +58,11 @@ }, { "path": "./packages/instantsearch.css/themes/satellite.css", - "maxSize": "4.60 kB" + "maxSize": "4.7 kB" }, { "path": "./packages/instantsearch.css/themes/satellite-min.css", - "maxSize": "4.25 kB" + "maxSize": "4.3 kB" } ] } diff --git a/packages/instantsearch.css/src/themes/algolia.scss b/packages/instantsearch.css/src/themes/algolia.scss index d99779587f..e13083b718 100644 --- a/packages/instantsearch.css/src/themes/algolia.scss +++ b/packages/instantsearch.css/src/themes/algolia.scss @@ -31,6 +31,7 @@ a[class^='ais-'] { .ais-ResultsPerPage, .ais-InfiniteHits, .ais-InfiniteResults, +.ais-LookingSimilar, .ais-Menu, .ais-MenuSelect, .ais-NumericMenu, @@ -290,6 +291,7 @@ a[class^='ais-'] { .ais-InfiniteResults-list, .ais-Hits-list, .ais-FrequentlyBoughtTogether-list, +.ais-LookingSimilar-list, .ais-RelatedProducts-list, .ais-TrendingItems-list, .ais-Results-list { @@ -307,6 +309,7 @@ a[class^='ais-'] { .ais-InfiniteResults-item, .ais-Hits-item, .ais-FrequentlyBoughtTogether-item, +.ais-LookingSimilar-item, .ais-RelatedProducts-item, .ais-TrendingItems-item, .ais-Results-item { diff --git a/packages/instantsearch.css/src/themes/reset.scss b/packages/instantsearch.css/src/themes/reset.scss index 4c714e7c4a..881b32eb54 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-LookingSimilar-list, .ais-RelatedProducts-list, .ais-TrendingItems-list, .ais-Results-list, diff --git a/packages/instantsearch.css/src/themes/satellite.scss b/packages/instantsearch.css/src/themes/satellite.scss index d7b0e23746..6ae4cdba00 100644 --- a/packages/instantsearch.css/src/themes/satellite.scss +++ b/packages/instantsearch.css/src/themes/satellite.scss @@ -605,12 +605,14 @@ $break-medium: 767px; } /** - * Hits, InfiniteHits, FrequentlyBoughtTogether, RelatedProducts and TrendingItems + * Hits, InfiniteHits, FrequentlyBoughtTogether, LookingSimilar, + * RelatedProducts and TrendingItems */ .ais-Hits-item, .ais-InfiniteHits-item, .ais-FrequentlyBoughtTogether-item, +.ais-LookingSimilar-item, .ais-RelatedProducts-item, .ais-TrendingItems-item { align-items: center; @@ -626,6 +628,7 @@ $break-medium: 767px; .ais-Hits-item:first-of-type, .ais-InfiniteHits-item:first-of-type, .ais-FrequentlyBoughtTogether-item:first-of-type, +.ais-LookingSimilar-item:first-of-type, .ais-RelatedProducts-item:first-of-type, .ais-TrendingItems-item:first-of-type { border-radius: 3px 3px 0 0; @@ -634,6 +637,7 @@ $break-medium: 767px; .ais-Hits-item:last-of-type, .ais-InfiniteHits-item:last-of-type, .ais-FrequentlyBoughtTogether-item:last-of-type, +.ais-LookingSimilar-item:last-of-type, .ais-RelatedProducts-item:last-of-type, .ais-TrendingItems-item:last-of-type { border-radius: 0 0 3px 3px; @@ -642,6 +646,7 @@ $break-medium: 767px; .ais-Hits-item:only-of-type, .ais-InfiniteHits-item:only-of-type, .ais-FrequentlyBoughtTogether-item:only-of-type, +.ais-LookingSimilar-item:only-of-type, .ais-RelatedProducts-item:only-of-type, .ais-TrendingItems-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 82291f1450..bf2b25b8f4 100644 --- a/specs/src/pages/widgets/frequently-bought-together.md +++ b/specs/src/pages/widgets/frequently-bought-together.md @@ -48,7 +48,7 @@ classes: options: - name: objectIDs description: objectIDs of the items to get the Frequently Bought Together items from - - name: maxRecommendations + - name: limit description: Number of recommendations to retrieve - name: queryParameters description: List of search parameters to send diff --git a/specs/src/pages/widgets/looking-similar.md b/specs/src/pages/widgets/looking-similar.md new file mode 100644 index 0000000000..44b55a4737 --- /dev/null +++ b/specs/src/pages/widgets/looking-similar.md @@ -0,0 +1,68 @@ +--- +layout: ../../layouts/WidgetLayout.astro +title: LookingSimilar +type: widget +html: | +
+

Looking Similar

+
+
    +
  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-LookingSimilar + description: the root div of the widget + - name: .ais-LookingSimilar-title + description: the title heading of the widget + - name: .ais-LookingSimilar-container + description: the container for the list of results + - name: .ais-LookingSimilar-list + description: the list of results + - name: .ais-LookingSimilar-item + description: the hit list item +options: + - name: objectIDs + description: objectIDs of the items to get the Looking Similar items from + - name: limit + 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: "Looking Similar" + description: The text for the header element + - name: sliderLabel + default: "Looking Similar" + description: The label for the horizontal slider +--- diff --git a/specs/src/pages/widgets/related-products.md b/specs/src/pages/widgets/related-products.md index 92f24b6fc4..a77ef74f0f 100644 --- a/specs/src/pages/widgets/related-products.md +++ b/specs/src/pages/widgets/related-products.md @@ -48,7 +48,7 @@ classes: options: - name: objectIDs description: objectIDs of the items to get the Related Products items from - - name: maxRecommendations + - name: limit 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. diff --git a/specs/src/pages/widgets/trending-items.md b/specs/src/pages/widgets/trending-items.md index 1c81489ad6..73acc83402 100644 --- a/specs/src/pages/widgets/trending-items.md +++ b/specs/src/pages/widgets/trending-items.md @@ -48,7 +48,7 @@ classes: options: - name: objectIDs description: objectIDs of the items to get the Trending Items from - - name: maxRecommendations + - name: limit 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.