@empathyco/x-components 6.0.0-alpha.9 → 6.0.0-alpha.90

package/docs/build-search-ui/web-x-architecture.md

@@ -1,83 +0,0 @@
----
-title: How Interface X works
-tags:
-  - x components
-  - interface x
-  - x architecture
-  - architecture
----
-
-![Interface X architecture](~@assets/x/interface/x-architecture.svg)
-
-<FootNote>
-
-Data journey: The frontend components collect user interactions or events. The wiring orchestrates
-the UI events by emitting actions for the client API through the adapter. The API returns the
-required data, travelling to the Vuex store through actions that can modify the app data state in
-the Vuex store with mutation objects. The UI components are bound to the data state, so that they
-render the new state to the user.
-
-</FootNote>
-
-## Understand how the pieces work together
-
-The Interface&nbsp;X architecture is designed into separate tiers and elements:
-
-1.  **Presentation tier**. Mainly represented by the UI **components**, responsible for determining
-    how to display the data. It not only presents data in an understandable manner to users, but
-    also monitors user interactions, emitting events to the Interface&nbsp;X application.
-
-    Components can be customised according to client requirements, even allowing custom CSS styles.
-
-2.  **Orchestration tier**. The x-factor in charge of orchestrating all the event wiring. When an
-    event is emitted, other components are listening to it to react. This behavioural connection
-    between components through events is the **wiring**. Then, the wiring decides what happens when
-    an event is emitted in the Presentation layer.
-
-    The wiring is customisable and flexible to meet client requirements. The behaviour can change
-    without modifying the entire application. The event-driven operators in charge of the wiring
-    routing logic enable different wiring configurations per event.
-
-3.  **Business logic tier**. The heart of the app in charge of keeping all the data processing,
-    where:
-    - UI events emit **actions** for the client API. These actions can modify the state of the
-      store.
-    - The **store** holds all the app data that should be presented to the user at any given time.
-      It acts as a single source of truth, providing great performance and reactivity.
-
-The Interface&nbsp;X app needs an **adapter** to handle all client API communications. The API
-adapter mainly translates the related app data and use models to the client API and vice versa,
-solving any incompatibility issues. It is the entry point for all external data into the
-application.
-
-The API adapter can be customised and extended to meet the client requirements. It’s a plug-in
-element that can be changed and adjusted to the specific client API, even when using other search
-services not based on the Empathy search API.
-
-::: note Architecture patterns
-
-If you’re already experienced in the Vue universe, you’ll find the Interface&nbsp;X architecture
-somewhat familiar. Although the [ViewModel layer](https://012.vuejs.org/guide/#Introduction) of the
-**MVVM pattern** sprinkles traces all over the presentation tier, the Interface X architecture is
-basically inspired by the
-[**Flux pattern**](https://vuex.vuejs.org/#what-is-a-state-management-pattern) behind the state. As
-the X&nbsp;Components emit events that dispatch actions in the business logic tier, these actions
-can commit mutations to modify the state of the store. To sum up, the design of Interface&nbsp;X
-takes advantage of the MVVM and Flux patterns to design, develop, and configure each tier separately
-and independently.
-
-:::
-
-## Technical stack
-
-- [Vue.js](https://vuejs.org/) framework
-- JavaScript + [TypeScript](https://www.typescriptlang.org/) languages
-- [RxJS](https://rxjs.dev/) for the wiring configuration logic
-
-::: develop
-
-Interface&nbsp;X can potentially be integrated in commerce shops built with React. In any case,
-Interface&nbsp;X can be used in any webpage, as long as it is integrated as an isolated search
-layer.
-
-:::

package/docs/build-search-ui/web-x-components-development-guide.md

@@ -1,157 +0,0 @@
----
-title: Develop using the Interface X Components library
-meta_title: Develop a search UI with the Interface X Components library
-tags:
-  - integration
-  - interface x components integration
-  - web integration
-  - x integration
-  - interface x
-  - x components library
----
-
-In this tutorial, you’ll learn the basics to integrate the Interface X Components library
-in your own project to craft enticing Vue search experiences for your commerce store in a matter of
-minutes.
-
-::: interact
-
-If you are looking to use the ready-to-go project Interface X Archetype as your starting
-point, see **[Develop using Interface X Archetype](web-archetype-development-guide.md)**.
-
-:::
-
-For this tutorial, the Empathy Search API is used, but you can use any search API. This step-by-step
-guide requires a knowledge of **JavaScript** and **Vue.js**.
-
-You can find the X Components library in the
-[Interface X open source project in GitHub](https://github.com/empathyco/x).
-
-::: note Before you begin
-
-To integrate the X Components in a frontend UI, you need:
-
-- **Empathy Search API** to retrieve search data (or any other search API)
-- A **search adapter** to communicate with the search API.
-- Your commerce store built on a **Vue** project, or on a **React** project using the
-  [React Wrapper](https://github.com/empathyco/x/tree/main/packages/react-wrapper).
-
-:::
-
-##### Steps to integrate the X Components in your project:
-
-1. Install **project dependencies**.
-2. Configure the **search adapter**.
-3. Configure the **xPlugin**.
-4. Install and **initialize the xPlugin**.
-
-<VideoReference videoId="x-components-action" customDescription="Watch how to integrate the Interface X Components in a project from scratch."/>
-
-## Installing the dependencies
-
-To build your search and discovery UI, the following project dependencies are required:
-
-- **x-components** library
-  ([`@empathyco/x-components`](https://github.com/empathyco/x/tree/main/packages/x-components)):
-  Interface&nbsp;X&nbsp;Components Vue.js library to implement out-of-the-box search UI components
-  in a couple of minutes.
-
-- **x-adapter-platform**
-  ([`@empathyco/x-adapter-platform`](https://github.com/empathyco/x/tree/main/packages/x-adapter-platform)):
-  A search adapter connector that tells the app how to communicate with the Empathy Search API
-  you’re using, translating the response into understandable information for X&nbsp;Components. If
-  you are not using the Empathy Search API, you need to build your own search adapter. In order to
-  build your own search adapter, you can either extend the **x-adapter-platform** or create a new
-  one from scratch using the
-  [`@empathyco/x-adapter`](https://github.com/empathyco/x/tree/main/packages/x-adapter) package.
-
-- **x-types** ([`@empathyco/x-types`](https://github.com/empathyco/x/tree/main/packages/x-types)):
-  The data model used in the X&nbsp;Components to define types.
-
-Install the project dependencies via `npm` as follows:
-
-```batch
-//Install the dependencies via npm.
-npm install --save @empathyco/x-components @empathyco/x-types @empathyco/x-adapter-platform
-```
-
-## Configuring the search adapter
-
-You will need the search adapter in the [xPlugin configuration](#3-configure-the-plugin).
-
-There are two libraries for making it easier to consume search APIs. The
-[`@empathyco/x-adapter`](https://github.com/empathyco/x/tree/main/packages/x-adapter), which is the
-interface you can use to build your own adapter for other APIs, and the
-[`@empathyco/x-adapter-platform`](https://github.com/empathyco/x/tree/main/packages/x-adapter-platform),
-which is the implementation to consume the Empathy Search Platform API, and it can be extended in
-case your search API is similar to it.
-
-::: warning
-
-If you do not use the Empathy Search API, you need to build your own adapter.
-
-:::
-
-For more information, see the
-[Empathy Search Adapter](https://github.com/empathyco/x/tree/main/packages/x-adapter) and
-[Empathy Platform Search Adapter](https://github.com/empathyco/x/tree/main/packages/x-adapter-platform)
-libraries.
-
-## Configuring the plugin
-
-Plugins are self-contained code that usually add global-level functionality to Vue projects. They’re
-specifically objects that expose an `install` method, allowing you to keep your components clear and
-small.
-
-The xPlugin is designed to connect the X&nbsp;Components to the Vue components in your project.
-
-**Import** the xPlugin in your Vue instance.
-
-```typescript
-import Vue from 'vue';
-import { xPlugin } from '@empathyco/x-components';
-import { adapter } from './my-adapter';
-import { store } from './my-store';
-```
-
-Then, **configure** the xPlugin. It has two key options you need to configure:
-
-1. **Adapter**: A search adapter is required to connect and communicate with the search API. Here
-   you’re using the `XAdapterPlatform` to communicate specifically with the Empathy Search Platform
-   API. If you are not using the Empathy Search Platform API, you need to build your own adapter.
-   See [Configure the search adapter](#2-configure-the-search-adapter).
-
-2. **Store**: The Vuex store. If you use a store for Vuex, you need to provide the store you’re
-   currently using for your project to the Vue instance.
-
-   ::: warning
-
-   If you don’t provide any parameters for the `store`, a default store is created automatically.
-   Leave the `store` blank **only if you’re not using any store** for Vuex.
-
-   :::
-
-## Installing and initializing the plugin
-
-Finally, the last step is to install and initialize the xPlugin. You need to do this in the
-`main.ts` or `main.js file` of the project.
-
-```typescript
-//Initialize the plugin. Pass the search adapter and the store you use as parameters.
-Vue.use(xPlugin, { adapter, store });
-```
-
-::: develop Next steps
-
-Once you have integrated the Interface&nbsp;X&nbsp;Components in your project, you're ready to start
-building your search and discovery UI:
-
-- Change the **configuration of the [X Components](web-how-to-use-x-components-guide.md)** or create
-  new ones.
-- Adapt the
-  **[design system](https://github.com/empathyco/x/blob/main/packages/x-components/contributing/design-system.md)**
-  to your branding.
-
-:::
-
-<!-- Manage [internationalization options](https://github.com/empathyco/x/tree/main/packages/x-translations) to support different languages.-->

package/docs/experience-search-and-discovery/README.md

@@ -1,132 +0,0 @@
----
-title: Design your search and discovery UI
-meta_title: Search & discovery UI functional documentation
-sidebar_title: Design search & discovery UI
-redirect_from:
-  - /explore-empathy-platform/experience-search-and-discovery/
----
-
-Search inevitably is key when people look for specific products in an online store. It's the door to
-the entire product catalogue, so having an outstanding, well-structured, and optimized search UI is
-a must.
-
-However, it’s not enough. With the advanced features provided by some well-known search engines,
-shoppers need a new dimension to **connect effortlessly** to the most relevant products, enjoy a
-**smooth user experience**, and take advantage of **outstanding search and discovery capabilities**.
-
-![Design search and discovery](~@assets/x/interface/experience-search-intro.svg)
-
-## Interface X and Interface X for Apps, the solution
-
-Interface X and Interface X for Apps are a collection of libraries that lets you create a
-smooth, personalized search and discovery experience, while significantly minimizing development
-time. Interface X, and its version for native apps, will renew your search experience interface
-layer, rendering the magic of search and delighting your shoppers with all experiences in one:
-**user**, **search**, **navigation**, and **product discovery**.
-
-There are many things to think about when designing a UI for search and discovery to provide a
-consistent user experience and look-and-feel: every little design element, the layout structure,
-animation, component, configuration, and behavior count. Interface X and Interface X for
-Apps cover everything and even go beyond, thanks to their standalone, configurable building blocks
-that allow you to quickly construct the search UI for your store:
-**Interface X Components** and **Interface X Components for Apps**.
-
-### Mix and match your experience
-
-Each Interface X Component represents a graphical part of the UI, with its own unique view
-and behavior. They’ve been smartly designed to **work together yet independently**, so a single
-component adds real value to your UI by itself. The more components you add and combine, the more
-functionality you get.
-
-You can craft your own **UI bundle with the right components for your store**. There are numerous
-X Components to choose from, and the catalogue evolves quickly with new experiences.
-
-To help you discover the components and leverage the UI design process, most of the
-X Components are distributed into **modules** which are intended for different purposes:
-functional experience, interface design and behavior, web and design standardization… Just pick and
-choose the modules and components that best suit your needs.
-
-::: details What does X mean?
-
-- Lightweight libraries
-- Developer friendly. Quick & easy to install and configure
-- Standalone. Work individually or together
-- Out-of-the-box. Ready to go!
-- In your pocket. Multiple components at your disposal
-- Mix & match. Customize to satisfy any design or behavior requirement
-- Mobile-ready. Designed both for web and native apps
-- Adapt to different search services
-- Easy-to-use. Intuitive search and discovery
-
-:::
-
-#### Discover Interface X Components for web
-
-Check out these X Components for Vue.js applications. They’ll certainly come in handy if you
-want to make the difference!
-
-<CardCarousel :cards="[
-    'x_popular_searches',
-    'x_history_queries',
-    'x_my_history',
-    'x_id_results',
-    'x_search_box',
-    'x_query_suggestions',
-    'x_related_tags',
-    'x_next_queries',
-    'x_recommendations',
-    'x_empathize',
-    'x_results',
-    'x_facets']"
-/>
-
-::: interact
-
-Check out the **Interface X for web [open-source project](https://github.com/empathyco/x)** on
-GitHub!
-
-:::
-
-#### Discover Interface X Components for Apps
-
-Check out the X&nbsp;Components available for Interface&nbsp;X for Apps, that can help you create
-your native app search solution.
-
-<CardCarousel :cards="[
-    'x_popular_searches',
-    'x_history_queries',
-    'x_my_history',
-    'x_id_results',
-    'x_search_box',
-    'x_query_suggestions',
-    'x_related_tags',
-    'x_next_queries',
-    'x_empathize',
-    'x_results',]"
-/>
-
-::: warning
-
-Some X&nbsp;Components are supported by Empathy Platform search and discovery features. If you’re
-using a different search engine, make sure it supports all the functionalities you need.
-
-:::
-
-## Try X Components to…
-
-- Surprise your shoppers by **rendering shopping-aimed search and discovery features** that
-  intuitively guide and inspire them with trends, suggestions, and recommendations, based on your
-  shoppers’ behavior.
-- Add a **predictive layer** to your search UI that gathers all search functionalities in one, from
-  autocomplete and autosuggest to ideas of what to look for next.
-- Delight your shoppers with an **elegant and multi-configurable SERP** to help them discover what
-  they’re exactly looking for.
-- Enhance the shopping experience by adding **additional features to the SERP**, such as add-to-cart
-  buttons or product rating information.
-
-::: interact
-
-Explore the Empathy Platform [interactive map](/explore-empathy-platform/diagram/interface/) for a
-sneak peak of the X&nbsp;Components available!
-
-:::

package/docs/experience-search-and-discovery/empathize.md

@@ -1,119 +0,0 @@
----
-title: Design the Empathize UI experience
-sidebar_title: Empathize UI
-tags:
-  - predictive layer
-  - search box
-redirect_from:
-  - /explore-empathy-platform/experience-search-and-discovery/empathize.html
-  - /explore-empathy-platform/experience-search-and-discovery/empathize
----
-
-Empathize is a UI container, but not just any container. It’s the
-**[predictive layer](/understand-empathy-platform/search-basics/predictive-layer.md)** for your
-search experience that is usually displayed below the search box. Consider it the natural companion
-of the **[search box](/onboard-empathy-platform/experience-search-and-discovery/search-box.md)**,
-featuring search suggestions and recommendations.
-
-![Empathize](~@assets/x/interface/x-empathize.gif)
-
-One of the characteristics of Interface X Components is that you can place them wherever
-you want. However, you know that the placement of the search box in your shop matters. So, why have
-search suggestions and recommendations spread all over the page, far away from the search box? The
-Empathize container brings everything together so that your shoppers perceive a smooth, effortless
-search experience.
-
-## Use Empathize with...
-
-Being the face of your predictive layer, Empathize comes into play before the search process starts
-and only makes sense when used with other components.
-
-Thanks to the nature of Interface X Components, you can
-[mix and match the components](/onboard-empathy-platform/experience-search-and-discovery/readme.md#mix-and-match-your-experience)
-you use within Empathize. For example, provide shoppers with search ideas and use Empathize to
-display popular search terms and trending products. Anticipate your shoppers’ intent with recent
-searches and query suggestions. Or give shoppers access to their
-[complete search history](/onboard-empathy-platform/experience-search-and-discovery/my-history.md)
-and let them control tracking search data. There are lots of handy possibilities that you might want
-to place close to the search box.
-
-**Combine Empathize with:**
-
-- [Popular Searches](popular-searches.md)
-- [Recommendations](recommendations.md)
-- [History Queries](history-queries.md)
-- [Query Suggestions](query-suggestions.md)
-- [Next Queries](next-queries.md)
-- [ID Results](id-results.md)
-
-## How it works...
-
-Empathize is an event-driven component. It's determined by events that make it react to shoppers'
-actions, such as clicks or keystrokes. That is the Empathize magic; the component listens by default
-to some events to expand the container and others to collapse it. However, this behavior is
-configurable.
-
-The Empathize container expands when:
-
-- The search box is focused.
-- The shopper clicks on the input field.
-- A query is being typed.
-
-Likewise, the Empathize closes when:
-
-- The shopper closes the Empathize layer.
-- A query suggestion is selected.
-- The shopper presses Enter.
-- The search box loses focus.
-
-Also, it can listen to scroll events to expand and collapse the layer when shoppers scroll up or
-down.
-
-### Extend the performance
-
-The Empathize container is collapsible so that it expands and collapses on shopper interaction. By
-default, this behaviour matches the search input focus: clicking the search input expands the
-Empathize container. Likewise, if the search input loses focus, e.g. the shopper clicks on a
-suggestion and launches the search, the Empathize container disappears.
-
-Alternatively, combine Empathize with one of the scroll components to make it react to scroll in
-addition to or replacing the search box focus. You may prefer to make it more accessible with the
-Keyboard Navigation component. Your shoppers can navigate the components in Empathize with the
-keyboard arrow keys.
-
-**Enhance Empathize usability with...**
-
-- Keyboard scroll
-- Keyboard navigation
-
-::: interact
-
-Learn more on how to improve the usability of the Empathize UI component using the
-[Base Scroll](/develop-empathy-platform/ui-reference/components/base-components/scroll/x-components.base-scroll.md)
-and
-[Base Keyboard Navigation](/develop-empathy-platform/ui-reference/components/base-components/x-components.base-keyboard-navigation.md)
-components in the X Components UI Reference.
-
-:::
-
-## Spot the difference
-
-Here, Empathize is the **predictive layer** holding the advanced search capabilities built in the
-back. However, in backend terms, Empathize is an Empathy Platform service, fed by a **batch
-application**, that uses the interaction data collected by the
-[Tagging microservices](/explore-empathy-platform/capture-shopper-interaction/) to build advanced
-search capabilities, such as Query Suggestions and Popular Searches. Don’t get confused!
-
-## Tailor the web experience
-
-- Customize content. Display whatever search-related suggestion components you need.
-- Determine when Empathize appears and disappears.
-- Animate how the component opens and closes.
-
-::: interact
-
-Want to know more? Learn how to
-[configure](/develop-empathy-platform/ui-reference/components/empathize/x-components.empathize.md)
-your web experience.
-
-:::

package/docs/experience-search-and-discovery/facets-and-filters.md

@@ -1,154 +0,0 @@
----
-title: Design the Facets and Filters UI experience
-sidebar_title: Facets & Filters UI
-tag:
-  - faceted
-redirect_from:
-  - /explore-empathy-platform/experience-search-and-discovery/facets-and-filters.html
-  - /explore-empathy-platform/experience-search-and-discovery/facets-and-filters
----
-
-Facets and Filters allow your shoppers to organize your product catalogue in different categories
-and narrow the search results to better find what they are looking for. Shoppers can set filters
-according to the categories or facets defined in the faceted menu, which is usually located on the
-left or upper side of the search engine results page or product listing page.
-
-![Facets](~@assets/x/interface/x-facets.gif)
-
-X Components for facets present how you have categorized your products, displaying the
-different aspects available (brand, price, color…), while the filter-related components render the
-values for those aspects that shoppers can use to filter by ("Nestlé", "Kellogg’s" for _brand_;
-“€0 - €10”, “€10 - €50” for _price_; “blue”, “black”, “white” for _color_), allowing you to
-determine how to display them.
-
-<!--Originally, the X&nbsp;Components for facets and filters were designed for **search**. However,
-since they can precisely organize and filter your product catalogue to bring out the products that
-best fit your shoppers’ needs, you can also use them for **catalogue navigation** and **product
-discovery**. You can guide shoppers through your product catalogue faster, allowing them to navigate
-and browse different product classifications directly from the faceted menu in your shop, without
-having to search.-->
-
-::: interact
-
-Can't quite capture the concept? Learn more about
-[Facets and Filters](/understand-empathy-platform/search-basics/facets-and-filters-overview.md).
-
-:::
-
-## Build a faceted experience with X Components
-
-There is no need to reinvent the wheel to design a good faceting experience, but rather it’s better
-to understand the shopper’s journey and the frontend options available.
-
-Facets and filters can display as different UI element types (select list, search, range…) using the
-numerous X&nbsp;Components available. Flexibly combine X&nbsp;Components to build the connection
-with the product attributes in your catalogue. **Guide** shoppers towards relevant results in record
-time, giving them the opportunity to establish a **dialogue** with your product catalogue and easily
-decide what results to display by adding and clearing filters, or make information on product
-results **clearer and more accessible**, meeting different types of faceting layouts.
-
-![Facets](~@assets/x/interface/x-facets.svg)
-
-::: details Rendering facets and filters
-
-X&nbsp;Components for facets and filters not only enhances your shoppers’ experience by supporting
-and rendering faceted search and navigation, but also provides different ways to display a faceted
-experience:
-
-</br>
-
-- **Standard facets**: a single-select list that offers a way to describe a product attribute,
-  together with the values available to filter by. For example, a _Color_ facet can include values
-  such as “red”, “blue”, “white”, “black”, or “green”.
-- **Hierarchical facets**: present filter values organized hierarchically, providing a parent-child
-  filtering relationship. Shoppers can filter using the parent subfacet or choose the child subfacet
-  as a more precise filter. For example, the _Category_ facet in a jewellery store can display
-  “Button”, “Short”, and “Long” as child filters for the “Earrings” parent filter.
-- **Number range facets**: allow shoppers to select a range of numerical values and narrow the
-  results within those ranges. Intended for price or size facets that have numeric value type
-  attributes. For example, the _Price_ facet in a grocery store can display “< €0.99”, “€1 – €4.99”,
-  “€5 – €9.99”, or “€10 – €19.99”. Implement **editable number range facets** and let your shoppers
-  define the numerical ranges they want to filter by. Shoppers can type the desired price range to
-  filter by in the _From_ - _To_ or _Min_ - _Max_ input fields available.
-
-:::
-
-::: details Extending facets and filters UI
-
-Apart from the main X&nbsp;Components for facets and filters that render product categories and
-their corresponding attributes in different ways, there are components available offering advanced
-options to enhance the faceted experience.
-
-</br>
-
-- **Collapse & expand** to initially display facets collapsed on page load with a predetermined
-  number of filter values. Use a Show more button to expand the full list.
-- **Search box** to perform a text-based search on the filter values so that shoppers quickly find
-  the filters to apply to the results set.
-- **Selected filters list** to keep track of the shopper’s selection and understand the results
-  displayed. Selected filters can be displayed together under the same list or be organized by
-  facets. Shoppers can deselect any of the previously applied filters or clear all at once to try
-  different filtering values.
-- **Selected filters first** to change the order in which filters are initially displayed within a
-  facet so that the selected filters come first in the list. Note that the order of facets and
-  filters is determined by your Search microservice, usually showing the filters with the highest
-  number of products.
-- **Product count** to display the number of matches or occurrences next to the facet filter.
-  Shoppers can instantly see how many products each filter contains, offering a valuable insight on
-  your product catalog.
-- **Zero count** to only display filter values for those filters that **match a product result**,
-  omitting all those filters that have zero occurrences. For example, the query “skirts” in a retail
-  shop returns a large number of results for women and kids, but none for men. In this case, the
-  _Category_ facet only displays the filters “Woman”, “Girl”, and “Baby”.
-
-</br>
-
-Besides, you can use X&nbsp;Components to customize other attributes and behaviors. Transform a
-value returned from the Search microservice of “20 - 50” into “€20 - €50” or turn a numerical value
-into icons or images such as stars for average rating-based filtering, for example.
-
-</br>
-
-You can also change the default single-select behavior and activate **multi-select** controls so
-that shoppers can select more than one filter value at a time from the same facet to expand results.
-
-:::
-
-## Tailor the web experience
-
-**Layout, location, and display**:
-
-- Place the facets menu wherever you prefer. However, facets are commonly positioned in the left
-  sidebar or as top horizontal facets.
-- Hide or show the facets & filter menu when search results are displayed. Display facets and
-  filters as collapsed lists at first.
-- Animate the display of different elements: facets, filters, and related lists (e.g. selected
-  filters list).
-- Build the layout of facets and filters at your ease: from dropdowns and checkboxes to switches,
-  tags, and sliders.
-
-**Data and content**:
-
-- Select which facets defined in your product catalogue you want to display according to your
-  business strategy or your shoppers’ needs.
-- Configure the content of filters. Allow shoppers to filter results using text, icons, or
-  checkboxes.
-- Configure the content of related buttons (e.g. Show more button). Show whatever you need: text or
-  icons.
-- Customize labels in the facets and filters list. Add a custom title for facets, filters, and
-  related lists (e.g. selected filters list).
-- Customize facet data at your ease. You can opt to render facets defined in your product catalogue
-  automatically, display custom facets, or even render a mix of them.
-
-::: warning
-
-Make sure your current Search microservice is compatible with this kind of configuration.
-
-:::
-
-::: interact
-
-Want to know more? Learn how to
-[configure](/develop-empathy-platform/ui-reference/components/facets/) your web experience.
-
-:::