feat: set up base CSS styles for frequentlyBoughtTogether widget (#…

…6118)
algolia · Apr 19, 2024 · 3121f7a · 3121f7a
1 parent b53fc2a
commit 3121f7a
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 6 deletions.
diff --git a/bundlesize.config.json b/bundlesize.config.json
@@ -58,7 +58,7 @@
     },
     {
       "path": "./packages/instantsearch.css/themes/satellite.css",
-      "maxSize": "4.5 kB"
+      "maxSize": "4.55 kB"
     },
     {
       "path": "./packages/instantsearch.css/themes/satellite-min.css",

diff --git a/packages/instantsearch.css/src/themes/algolia.scss b/packages/instantsearch.css/src/themes/algolia.scss
@@ -25,6 +25,7 @@ a[class^='ais-'] {
 .ais-GeoSearch,
 .ais-HierarchicalMenu,
 .ais-Hits,
+.ais-FrequentlyBoughtTogether,
 .ais-Results,
 .ais-HitsPerPage,
 .ais-ResultsPerPage,
@@ -286,6 +287,7 @@ a[class^='ais-'] {
 .ais-InfiniteHits-list,
 .ais-InfiniteResults-list,
 .ais-Hits-list,
+.ais-FrequentlyBoughtTogether-list,
 .ais-Results-list {
   margin-top: -1rem;
   margin-left: -1rem;
@@ -300,6 +302,7 @@ a[class^='ais-'] {
 .ais-InfiniteHits-item,
 .ais-InfiniteResults-item,
 .ais-Hits-item,
+.ais-FrequentlyBoughtTogether-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
@@ -4,6 +4,7 @@
 .ais-CurrentRefinements-list,
 .ais-HierarchicalMenu-list,
 .ais-Hits-list,
+.ais-FrequentlyBoughtTogether-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
@@ -605,11 +605,13 @@ $break-medium: 767px;
 }
 
 /**
- * Hits
+ * Hits and InfiniteHits
+ * FrequentlyBoughtTogether
  */
 
 .ais-Hits-item,
-.ais-InfiniteHits-item {
+.ais-InfiniteHits-item,
+.ais-FrequentlyBoughtTogether-item {
   align-items: center;
   background: $white;
   box-shadow: 0 0 0 1px rgba($grey900, 0.05), 0 1px 3px 0 rgba($grey900, 0.15);
@@ -621,17 +623,20 @@ $break-medium: 767px;
 }
 
 .ais-Hits-item:first-of-type,
-.ais-InfiniteHits-item:first-of-type {
+.ais-InfiniteHits-item:first-of-type,
+.ais-FrequentlyBoughtTogether-item:first-of-type {
   border-radius: 3px 3px 0 0;
 }
 
 .ais-Hits-item:last-of-type,
-.ais-InfiniteHits-item:last-of-type {
+.ais-InfiniteHits-item:last-of-type,
+.ais-FrequentlyBoughtTogether-item:last-of-type {
   border-radius: 0 0 3px 3px;
 }
 
 .ais-Hits-item:only-of-type,
-.ais-InfiniteHits-item:only-of-type {
+.ais-InfiniteHits-item:only-of-type,
+.ais-FrequentlyBoughtTogether-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
@@ -0,0 +1,66 @@
+---
+layout: ../../layouts/WidgetLayout.astro
+title: FrequentlyBoughtTogether
+type: widget
+html: |
+  <div class="ais-FrequentlyBoughtTogether">
+    <h3 class="ais-FrequentlyBoughtTogether-title">Frequently bought together</h3>
+    <div class="ais-FrequentlyBoughtTogether-container">
+      <ol class="ais-FrequentlyBoughtTogether-list">
+        <li class="ais-FrequentlyBoughtTogether-item">
+          Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black
+        </li>
+        <li class="ais-FrequentlyBoughtTogether-item">
+          Hit 4397400: Google - Chromecast - Black
+        </li>
+        <li class="ais-FrequentlyBoughtTogether-item">
+          Hit 4397400: Google - Chromecast - Black
+        </li>
+        <li class="ais-FrequentlyBoughtTogether-item">
+          Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black
+        </li>
+        <li class="ais-FrequentlyBoughtTogether-item">
+          Hit 4397400: Google - Chromecast - Black
+        </li>
+        <li class="ais-FrequentlyBoughtTogether-item">
+          Hit 4397400: Google - Chromecast - Black
+        </li>
+        <li class="ais-FrequentlyBoughtTogether-item">
+          Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black
+        </li>
+        <li class="ais-FrequentlyBoughtTogether-item">
+          Hit 4397400: Google - Chromecast - Black
+        </li>
+      </ol>
+    </div>
+  </div>
+classes:
+  - name: .ais-FrequentlyBoughtTogether
+    description: the root div of the widget
+  - name: .ais-FrequentlyBoughtTogether-title
+    description: the title heading of the widget
+  - name: .ais-FrequentlyBoughtTogether-container
+    description: the container for the list of results
+  - name: .ais-FrequentlyBoughtTogether-list
+    description: the list of results
+  - 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: maxRecommendations
+    description: Number of recommendations to retrieve
+  - 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: "Frequently bought together"
+    description: The text for the header element
+  - name: sliderLabel
+    default: "Frequently bought together products"
+    description: The label for the horizontal slider
+---