@empathyco/x-components 6.0.0-alpha.17 → 6.0.0-alpha.171

package/docs/experience-search-and-discovery/history-queries.md

@@ -1,70 +0,0 @@
----
-title: Design the History Queries UI experience
-sidebar_title: History Queries UI
-redirect_from:
-  - /explore-empathy-platform/experience-search-and-discovery/history-queries.html
-  - /explore-empathy-platform/experience-search-and-discovery/history-queries
----
-
-The History Queries UI component displays the search history, allowing shoppers to check previous
-searches and revisit products they’ve viewed before in a few clicks.
-
-![History Queries](~@assets/x/interface/x-history-queries.gif)
-
-::: interact
-
-Can't quite capture the concept? Learn more about
-[History Queries](/understand-empathy-platform/search-features/history-queries-overview.md).
-
-:::
-
-## Tailor the web experience
-
-- Configure the position and place it wherever you prefer. Combine it with the
-  [Empathize](empathize.md) container to display suggestions under the search bar on shopper
-  interaction.
-- Show as many history suggestions as you want.
-- Choose the number of search records to store in the browser’s local storage to refresh the history
-  list.
-- Animate the display of History Queries at your ease.
-- Customize content. Show whatever you need: text, images, icons.
-- Display History Queries only from successful searches. No result, no search record stored. (Search
-  X module required.)
-- Configure clear buttons at your convenience. Let shoppers clear previous searches one-by-one,
-  all-at-once, or either way.
-- Display only the refined queries to match shopper intent. For example, if “dress” is the initial
-  search, and it’s narrowed down using “long dress”, the history queries list only displays “long
-  dress” since it represents the shopper’s real intention.
-
-::: interact
-
-Want to know more? Learn how to
-[configure](/develop-empathy-platform/ui-reference/components/history-queries/) your web experience.
-
-:::
-
-## Extend the performance
-
-You can extend search history performance by combining it with the [Next Queries](next-queries.md)
-component. All suggestions for shoppers about what to look next can be filtered against the
-shopper’s search history so that only those suggestions that haven’t been used before in that
-session will display.
-
-Combine History Queries with the
-[Search module](/develop-empathy-platform/ui-reference/components/search/) to ease shoppers'
-frustrations. That way, you can configure it to display only successful history searches.
-
-::: note Search history tracking
-
-Use the [My History](my-history.md) component to access and control search history. Shoppers can
-view a complete list of history queries and decide to stop saving search history. If search history
-is disabled, the History Queries list is cleared.
-
-:::
-
-::: interact
-
-To know more about which data is stored in the browser’s data storage, check out
-[Interface X data privacy and browser local storage](web-local-storage.md).
-
-:::

package/docs/experience-search-and-discovery/id-results.md

@@ -1,49 +0,0 @@
----
-title: Design the ID Results UI experience
-sidebar_title: ID Results UI
-tags:
-  - identifier results
-redirect_from:
-  - /explore-empathy-platform/experience-search-and-discovery/id-results.html
-  - /explore-empathy-platform/experience-search-and-discovery/id-results
----
-
-The Identifier Results UI component presents a type of search results intended for product reference
-codes. When shoppers start typing, a reference code query type is detected, and a list displays
-instantly with query-matching product results. When shoppers select an identifier result hint from
-the list, they go directly to the product detail page (PDP).
-
-![ID Results](~@assets/x/interface/x-id-results.gif)
-
-:::warning
-
-ID Results are generated using a Search service that searches the product catalogue by ID. For a
-correct performance, make sure that your current search service supports this type of feature.
-
-:::
-
-::: interact
-
-Don't quite understand ID results? Learn more about
-[ID Results](/understand-empathy-platform/search-features/id-results-overview.md).
-
-:::
-
-## Tailor the web experience
-
-- Configure the position and place it wherever you prefer. Combine it with the
-  [Empathize](empathize.md) container display the ID Results below the search bar on shopper
-  interaction.
-- Show as many ID Results as you want.
-- Animate the display of ID Results at your ease.
-- Customize content. Show whatever you need: text, images, icons.
-- Extend the performance with [results-related components](product-results-ui.md).
-- Meet your own code reference conventions and standards with multiple product reference patterns.
-
-::: interact
-
-Want to know more? Learn how to
-[configure](/develop-empathy-platform/ui-reference/components/identifier-results/) your web
-experience.
-
-:::

package/docs/experience-search-and-discovery/my-history.md

@@ -1,60 +0,0 @@
----
-title: Design the My History UI experience
-sidebar_title: My History UI
-redirect_from:
-  - /explore-empathy-platform/experience-search-and-discovery/my-history.html
-  - /explore-empathy-platform/experience-search-and-discovery/my-history
----
-
-The My History UI component displays the complete list of history queries, allowing shoppers to
-reuse previously searched queries.
-
-![My History](~@assets/x/features/overview-my-history.svg)
-
-::: interact
-
-Can't quite capture the concept? Learn more about
-[My History](/explore-empathy-platform/features/my-history-overview.md).
-
-:::
-
-From the frontend perspective, My History is a UI component that specifically manages the display of
-a list of history search suggestions. To display a dashboard featuring shoppers' data privacy and
-control, My History is combined with other UI elements and components, such as a toggle switch for
-shoppers to enable or disable search history.
-
-::: note Search data storage
-
-To show the complete list of history queries, My History component uses the history records saved on
-the shopper’s browser local history. See
-[Interface X data privacy and browser local storage](/onboard-empathy-platform/experience-search-and-discovery/web-local-storage.md)
-to check out the information stored locally on the shopper’s device.
-
-:::
-
-## Tailor the web experience
-
-- Configure the position and place it wherever you prefer.
-- Layout the list of history queries as you want.
-- Customize date and time format.
-- Animate the display of My History dashboard at your ease.
-- Customize content. Show whatever you need: text, images, icons...
-
-::: note
-
-Configuration options here only apply to tailor the My History component, which provides a way to
-display the full list of history queries. Other UI elements that comprise the My History feature can
-be configured as well. Check a complete list of UI components in the
-[Interface X Components UI Reference](/develop-empathy-platform/ui-reference/).
-
-:::
-
-::: interact
-
-Want to know more? Learn how to
-[configure](/develop-empathy-platform/ui-reference/components/history-queries/x-components.my-history)
-your search history experience.
-
-:::
-
-<!--Include link to twitch session here: Watch how XXX uses the My History UI component in a real project. -->

package/docs/experience-search-and-discovery/next-queries.md

@@ -1,72 +0,0 @@
----
-title: Design the Next Queries UI experience
-sidebar_title: Next Queries UI
-tags:
-  - popular next queries
-  - what's next
-redirect_from:
-  - /explore-empathy-platform/experience-search-and-discovery/next-queries.html
-  - /explore-empathy-platform/experience-search-and-discovery/next-queries
----
-
-The Next Queries UI component provides shoppers with ideas on what to search for next based on their
-last search. Since next queries are related to the last query, they appear after performing a first
-search.
-
-![Next Queries](~@assets/x/interface/x-next-queries.gif)
-
-Next queries can be **organic**, using information on the most common searches that are performed
-successively or within a same session by shoppers, or **curated**, created manually by the
-merchandiser in the Empathy Platform Playboard.
-
-::: warning
-
-Organic next queries are generated using collective shopper behavior to identify query pairs that
-have been used together. For a correct performance, make sure that your current search service
-supports this feature.
-
-:::
-
-::: interact
-
-Can't quite capture the concept? Learn about
-[Next Queries](/understand-empathy-platform/search-features/next-queries-overview.md).
-
-:::
-
-## Tailor the web experience
-
-- Configure the position and place it wherever you prefer, although next queries usually display
-  below the search bar after the initial search.
-- Show as many next queries as you want.
-- Animate the display of next queries at your ease.
-- Customize content. Show whatever you need: text, images, icons.
-- Display curated next queries differently to organic next queries.
-
-::: interact
-
-Want to know more? Learn how to
-[configure](/develop-empathy-platform/ui-reference/components/next-queries) your web experience.
-
-:::
-
-::: design
-
-Read how Empathy UX designer, Marlety García, designed the Next Queries experience for one of our
-customers in the post
-[Popular Next Queries: Towards a conversational search](https://empathy.co/blog/popular-next-searches/).
-
-:::
-
-## Extend the performance
-
-You can combine Next Queries with the [History Queries](history-queries.md) component to display
-next queries that shoppers haven't already used in the session.
-
-::: warning
-
-To display only new next queries, the
-[History Queries](/understand-empathy-platform/search-features/history-queries-overview.md) feature
-must be implemented.
-
-:::

package/docs/experience-search-and-discovery/popular-searches.md

@@ -1,50 +0,0 @@
----
-title: Design the Popular Searches UI experience
-sidebar_title: Popular Searches UI
-tags:
-  - top searches
-  - top terms
-  - search trends
-  - top queries
-  - trending
-redirect_from:
-  - /explore-empathy-platform/experience-search-and-discovery/popular-searches.html
-  - /explore-empathy-platform/experience-search-and-discovery/popular-searches
----
-
-The Popular Searches UI component displays what are the top search queries during a specific time.
-This type of suggestion can show up even before shoppers have started entering a query or when there
-are no search results to show.
-
-![Popular Searches](~@assets/x/interface/x-popular-searches.gif)
-
-::: warning
-
-Popular Searches are generated using shopper behavior to determine the top searches for a given
-period. For a correct performance, make sure that your current search service supports this type of
-feature.
-
-:::
-
-::: interact
-
-Can't quite capture the concept? Learn about
-[Popular Searches](/understand-empathy-platform/search-features/popular-searches-overview.md).
-
-:::
-
-## Tailor the web experience
-
-- Configure the position and place it wherever you prefer. Combine it with the
-  [Empathize](empathize.md) container to display Popular Searches below the search bar on shopper
-  interaction.
-- Show as many popular search terms results as you want.
-- Animate the display of Popular Searches at your ease.
-- Customize content. Show whatever you need: text, images, icons.
-
-::: interact
-
-Want to know more? Learn how to
-[configure](/develop-empathy-platform/ui-reference/components/popular-searches) your web experience.
-
-:::

package/docs/experience-search-and-discovery/product-results-ui.md

@@ -1,82 +0,0 @@
----
-title: Design the product results UI experience
-sidebar_title: Product results UI
-tags:
-  - results layout
-redirect_from:
-  - /explore-empathy-platform/experience-search-and-discovery/product-results.html
-  - /explore-empathy-platform/experience-search-and-discovery/product-results
----
-
-After launching a search, some shoppers may just want to take a quick look around, reviewing only
-product thumbnails and quick info on the SERP. While others will prefer to have a more detailed
-overview of the product results with large and multiple images. That’s why the display of results is
-really issue.
-
-Results are rendered thanks to the combination of different X Components. This way, you can
-tailor the display to create the best product discovery experience for your shoppers. Decide the
-elements and product-related information you want to include when displaying product results such as
-the price, a picture, or even an add-to-cart button.
-
-![X Components for results display](~@assets/x/features/overview-product-results-card.svg)
-
-<FootNote>
-
-**X&nbsp;Components for results display** <br/> (A) Image, (B) Product information, (C) Price, (D)
-PDP Link, (E) Rating, (F) Add to cart
-
-</FootNote>
-
-::: interact
-
-To learn more about the display of results, see
-[Product results](/explore-empathy-platform/overview/product-results-overview.md).
-
-:::
-
-**A bunch of components for comprehensive product information** Decide whether you want to include
-the description for the resulting product, a picture, or even rating information:
-
-- **Image**. Include a picture of the product for better product recognition.&nbsp;(A)
-- **Result data and product variants**. Retrieve the information to display about the product –name,
-  description, reference, brand, category, season, colors, types, sizes, or any data from your
-  catalogue.&nbsp;(B)
-- **Pricing**. Indicate the original price of the product, discounts, and special prices.&nbsp;(C)
-- **Product details**. Link your shoppers to the product detail page (PDP).&nbsp;(D)
-- **Rating**. Show how valued a product is among your shoppers.&nbsp;(E)
-- **Add to cart**. Allow your shoppers to add a product to the cart from the search engine results
-  page (SERP), without going through the PDP.&nbsp;(F)
-
-:::warning
-
-To include rating and add-to-cart options in results, rating and add-to-cart features must be
-implemented in your product catalogue.
-
-:::
-
-## Tailor the web experience
-
-- Customize content. Choose and display the product-related information available in your catalogue.
-- Add a PDP link to the product name or description, the picture, or to the entire product result.
-- Format the price of products with integers and decimals. Decide the length of decimals or whether
-  decimals should be rendered or not.
-- Select the desired currency for prices.
-- Customize the default rendering behavior of pictures when loading or broken.
-- Animate the display of product results.
-
-::: interact
-
-Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/) your web
-experience.
-
-:::
-
-## Extend the performance
-
-Traditionally, search results are displayed on the SERP after the query is launched or instantly as
-you type. However, result data is also used by features such as
-[Recommendations](/onboard-empathy-platform/experience-search-and-discovery/recommendations.md) and
-[ID Results](/onboard-empathy-platform/experience-search-and-discovery/id-results.md). You can
-combine results-related components with these modules to get advanced display options. Include
-additional product information in Recommendations and Identifier Results such as prices and pictures
-for better recognition and understanding of the products displayed.

package/docs/experience-search-and-discovery/query-suggestions.md

@@ -1,48 +0,0 @@
----
-title: Design the Query Suggestions UI experience
-sidebar_title: Query Suggestions UI
-tags:
-  - search suggestions
-  - search as you type
-redirect_from:
-  - /explore-empathy-platform/experience-search-and-discovery/query-suggestions.html
-  - /explore-empathy-platform/experience-search-and-discovery/query-suggestions
----
-
-The Query Suggestions UI component helps your shoppers with hints of what to look for to get
-relevant results. They complete and nail down the query as shoppers type without needing to keep
-typing.
-
-![Query Suggestions](~@assets/x/interface/x-query-suggestions.gif)
-
-::: warning
-
-Query Suggestions are generated using collective shopper behavior, extracting the keywords used on a
-specific query. For a correct performance, make sure that your current search service supports this
-type of feature.
-
-:::
-
-::: interact
-
-Can't quite capture the concept? Learn more about
-[Query Suggestions](/understand-empathy-platform/search-features/query-suggestions-overview.md).
-
-:::
-
-## Tailor the web experience
-
-- Configure the position and place it wherever you prefer. Combine it with the
-  [Empathize](empathize.md) container to display suggestions below the search bar on shopper
-  interaction.
-- Show as many suggestions as you want.
-- Animate the display of Query Suggestions at your ease.
-- Customize content. Show whatever you need: text, images, icons.
-
-::: interact
-
-Want to know more? Learn how to
-[configure](/develop-empathy-platform/ui-reference/components/query-suggestions/) your web
-experience.
-
-:::

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

@@ -1,134 +0,0 @@
----
-title: Design the Recommendations UI experience
-sidebar_title: Recommendations UI
-tags:
-  - top clicked
-  - top searched
-  - trending
-  - trending products
-  - top products
-  - popular
-redirect_from:
-  - /explore-empathy-platform/experience-search-and-discovery/recommendations.html
-  - /explore-empathy-platform/experience-search-and-discovery/recommendations
----
-
-Product recommendations, such as Top Products, Brand Recommendations, Next Products, and Vectorized
-Recommendations, help your shoppers explore your product catalogue, guiding them to specific
-products without the need to launch any queries.
-
-<!-- ![Recommendations](~@assets/x/interface/x-recommendations.gif) -->
-
-![Recommendations](~@assets/x/interface/x-recommendations.svg)
-
-::: interact  
-Can't quite capture the concept? Learn more about
-[Recommendations](/explore-empathy-platform/features/recommendations-overview.md). :::
-
-## Product recommendation modules and components
-
-The Interface X Components library includes the following modules and components to layout multiple
-experiences to show product recommendations in your search UI:
-
-<CardCarousel :cards="[
-    'ui_ref/recommendations',
-    'ui_ref/semantics',
-    'ui_ref/preview',
-    'ui_ref/nq'
-    ]"
-/>
-
-::: warning
-
-For correct performance, make sure that your current search service supports this type of features.
-
-:::
-
-## Tailor the web experience
-
-Based on your business strategy and your shoppers’ needs, the Interface X Components library offers
-the following configuration options and properties:
-
-::: details Top Products UI experience Use the Recommendations module to configure the layout of Top
-Products in your commerce search UI. You can:
-
-- Configure the position and place it wherever you prefer, although it commonly appears in the
-  results grid when low results are retrieved or in the no results layout after no matches are
-  found.
-- Show as many product recommendations as you want.
-- Animate the display of the component at your ease.
-- Customize content. Show whatever you need: text, images, icons.
-- Extend the performance with result-related components.
-
-:::
-
-::: details Vectorized Recommendations UI experience
-
-Use the Semantics Queries module to configure the layout of Vectorized Recommendations in your
-commerce search UI. You can:
-
-- Configure the position and place it wherever you prefer, although it usually appears on the SERP,
-  among the product results.
-- Show as many product recommendations as you want. Display the total number of recommendations
-  shown.
-- Use different layouts: carousel, list, grid. Although, a carousel or horizontal slider panel is
-  the preferred layout.
-- Animate the display of the component at your ease.
-- Customize content. Although, the name of product recommendations is shown by default.
-- Extend the performance with query preview-related components to display related content, such as
-  the suggested query, product result images, and links.
-
-:::
-
-::: details Brand Recommendations UI experience
-
-Use the Queries Preview module to configure the layout of Brand Recommendations in your commerce
-search UI. You can:
-
-- Configure the position and place it wherever you prefer, although it usually appears at the
-  pre-search stage.
-- Display the suggested queries and the total number of recommendations shown.
-- Use different layouts: carousel, list, grid. Although, a carousel or horizontal slider panel is
-  the preferred layout.
-- Animate the display of the component at your ease.
-- Customize content. Although, the name of product recommendations is shown by default.
-- Customize the Result Cards by combining result data and result components as images or links to
-  match the SERP or create a different component for this use case.
-
-:::
-
-::: details Next Products UI experience
-
-Use the Next Query Preview component to configure the layout of Next Products in your commerce
-search UI. You can:
-
-- Configure the position and place it wherever you prefer, although it usually appears on the SERP,
-  among the product results.
-- Show as many product recommendations as you want. Display the total number of recommendations
-  shown.
-- Use different layouts: carousel, list, grid. Although, a carousel or horizontal slider panel is
-  the preferred layout.
-- Customize content. Although, the suggested query and the name of product recommendations are shown
-  by default.
-- Extend the performance with result-related components to display related content, such as product
-  result images and links.
-
-:::
-
-Note that the Interface X modules and components help you build a configurable UI experience. Even
-though the UI layout for product recommendations may be similar, sharing multiple configuration
-options, the source of data differs from one to another:
-
-| Type of product recommendation | X Components                                                                                                                      | Source of data                                                                                                                                                                                               |
-| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **Top Products**               | [Recommendations](/develop-empathy-platform/ui-reference/components/recommendations/x-components.recommendations.md) component    | [Search API](/develop-empathy-platform/api-reference/search-api.md) - Top Clicked endpoint                                                                                                                   |
-| **Vectorized Recommendations** | [Semantic Queries](/develop-empathy-platform/ui-reference/components/semantic-queries/) module                                    | Semantics API                                                                                                                                                                                                |
-| **Brand Recommendations**      | [Queries Preview](/develop-empathy-platform/ui-reference/components/queries-preview/) module                                      | [Snippet configuration](/develop-empathy-platform/build-search-ui/web-archetype-integration-guide.md#snippet-configuration) - Initialization options (\*Manually configured by merchants and brand managers) |
-| **Next Products**              | [Next Query Preview](/develop-empathy-platform/ui-reference/components/next-queries/x-components.next-query-preview.md) component | Next Queries endpoint from the [Beacon API](/develop-empathy-platform/api-reference/beacon-api.md)                                                                                                           |
-
-::: interact
-
-Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/) your web
-experience.
-
-:::

package/docs/experience-search-and-discovery/related-tags.md

@@ -1,66 +0,0 @@
----
-title: Design the Related Tags UI experience
-sidebar_title: Related Tags UI
-tags:
-  - tags
-  - related keywords
-redirect_from:
-  - /explore-empathy-platform/experience-search-and-discovery/related-tags.html
-  - /explore-empathy-platform/experience-search-and-discovery/related-tags
----
-
-The Related Tags UI component helps your shoppers to refine a specific search query and find what
-they’re looking for with just one click. They only appear after the search process is completed, and
-the results appear to fine-tune the search with extra information and get highly relevant results.
-They are shown as labels usually at the top of the search engine results page (SERP), but Empathy
-Platform Interface X supports displaying them anywhere on the SERP instead.
-
-![Related Tags](~@assets/x/interface/x-related-tags.gif)
-
-::: interact
-
-Can't quite capture the concept? Learn more about
-[Related Tags](/understand-empathy-platform/search-features/related-tags-overview.md).
-
-:::
-
-Related Tags can be **organic**, using information on the terms most used by shoppers to refine a
-query. Otherwise, you can create manually **curated** related tags, based on your business needs, by
-using the Related Tags management tool in the Empathy Platform Playboard.
-
-::: warning
-
-Related Tags are generated organically using collective shopper behavior to identify associated
-terms used to refine a search query. For a correct performance, make sure that your current search
-service supports this type of feature.
-
-:::
-
-::: interact
-
-Wondering how to create curated related tags in the Empathy Platform Playboard? Check out
-[Manage Related Tags](/explore-empathy-platform/fine-tune-search-and-discovery/manage-related-tags.md).
-
-:::
-
-<!-- You can configure the behavior of Related Tags and decide whether they’re selectable or not. If Related Tags aren’t selectable, they modify the initial query syntax by adding the related-search keywords to the query term initially typed in the search bar. Otherwise, the initial query syntax will still remain so that shoppers can select or deselect Related Tags at their ease, exploring different options and combinations. -->
-
-## Tailor the web experience
-
-- Configure the position and place it wherever you prefer, although Related Tags usually appear
-  below the search bar after completing the search.
-- Show as many Related Tags as you want.
-- Animate the display of Related Tags at your ease.
-- Customize content. Show whatever you need: text, images, icons.
-- Display curated related tags differently to organic related tags for shoppers to clearly identify
-  which of them have been willfully created as a sign of transparency.
-
-<!-- - Choose if Related Tags are selectable or change the syntax of the initial query in the search box. -->
-
-::: interact
-
-Want to know more? Learn how to
-[configure](/develop-empathy-platform/ui-reference/components/related-tags/) your web experience
-using the X Components available for Related Tags.
-
-:::