Merge branch 'main' into release

empathyco · Oct 24, 2023 · 2f5fb0c · 2f5fb0c
2 parents 6f2c098 + 9f8c6fd
commit 2f5fb0c
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 3 deletions.
diff --git a/packages/x-components/CHANGELOG.md b/packages/x-components/CHANGELOG.md
@@ -7,6 +7,15 @@ All notable changes to this project will be documented in this file. See
 
 **Note:** Version bump only for package @empathyco/x-components
 
+## [3.0.0-alpha.425](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2023-10-23)
+
+
+### Documentation
+
+* **integration:** update integration documentation for query preview with filters (#1336) ([b6d6b70](https://github.com/empathyco/x/commit/b6d6b70a6dff5fa22beac9980026e837aded8f8a))
+
+
+
 ## [3.0.0-alpha.424](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2023-10-23)
 
 ### Bug Fixes

diff --git a/...ges/x-components/static-docs/build-search-ui/web-archetype-integration-guide.md b/...ges/x-components/static-docs/build-search-ui/web-archetype-integration-guide.md
@@ -319,9 +319,14 @@ functions to integrate Interface&nbsp;X in your website. You can access these fu
 ### Dynamic query results preview
 
 The `queriesPreview` parameter settings can be changed to dynamically preview product results from
-the queries you define according to your brand's strategy. Use the `setSnippetConfig` function in
-the [`X API`](#x-api) object to determine the queries to be previewed dynamically depending on the
-section the shopper is visiting in your commerce store, for instance, or any other scenario.
+the queries you define according to your brand's strategy.
+
+You may set the `queriesPreview` in two ways:
+
+- In the initialization object as parameter.
+- Later on , using the `setSnippetConfig` function in the [`X API`](#x-api) object to determine the
+  queries to be previewed dynamically depending on the section the shopper is visiting in your
+  commerce store, for instance, or any other scenario.
 
 The following example shows you how to change dynamically the preview of query results in the _kids_
 and _adult_ sections:
@@ -353,3 +358,50 @@ and _adult_ sections:
   }
 </script>
 ```
+
+#### Adding filters
+
+The `queriesPreview` accept additional parameters that allow to filter the result set. See the
+following example:
+
+```html
+<script>
+  InterfaceX.setSnippetConfig({
+    queriesPreview: [
+      {
+        query: 'backpack',
+        title: 'Back to School!',
+        filters: ['brand:acme', 'collection:summer']
+      }
+    ]
+  });
+</script>
+```
+
+::: note
+
+The syntax to each filter is the same one as the one sent to the search request when selecting a
+filter in the interface.
+
+:::
+
+#### Adding extra params
+
+On top of that, extra parameters can be added to the search request of the `queriesPreview`, for
+instance:
+
+```html
+<script>
+  InterfaceX.setSnippetConfig({
+    queriesPreview: [
+      {
+        query: 'backpack',
+        title: 'Back to School!',
+        extraParams: {
+          sort: 'price desc'
+        }
+      }
+    ]
+  });
+</script>
+```