Product Filtering

Picks entities from the users utterance that can be used for example to adjust search filters.

Basic information

This configuration defines simple phrases from which the Speechly API will extract two types of entities: brand and color. These can be used in a downstream application in different ways. The Codepen demo related to this example uses the entities to change the values of two drop-down UI components, one for brand, another for color. These drop-downs could be further mapped to control for example a faceted search engine.

While this may seem trivial, this same general idea underlies our Fashion Demo. This example is just a simplified version of the configuration used there.

This demo supports utterances such as

  • brand is converse
  • color is blue
  • red sneakers by nike
  • new balance in green

Complete SAL sources

The design of this configuration is straightforward. We define two lists, one that contains values for the brand entity, and another that lists different colors. The utterances are defined by the four templates shown below the lists.

(The SAL syntax reference is good to keep handy as well.)

brands = [Adidas | Air Jordan | Asics | Converse | Fear of God | New Balance | Nike | Off White | Puma | Reebok | Vans | Yeezy]
colors = [Black | Blue | Cream | Gold | Green | Orange | Pink | Purple | Red | Silver | Tan | Teal | White | Yellow]

*select {brand {is}} $brands(brand)
*select {color {is}} $colors(color)
*select $brands(brand) {in} $colors(color)
*select $colors(color) {[sneakers | shoes] by} $brands(brand)

Try it yourself

  1. Log-in to the Speechly Dashboard
  2. Create a new application and select the “Product Filtering” template
  3. Click “Deploy” adn wait for the deployment to finish (the status indicator turns green)
  4. Copy the App ID from the header
  5. Run it locally or try it in CodePen

Run it locally

npx degit speechly/speechly/templates/product-filtering my-app
cd my-app
// Add your App ID into index.js
npm install
npm start

Try it in CodePen

Paste App ID into the CodePen

Last updated by Mathias Lindholm on March 17, 2022 at 15:02 +0200

Found an error on our documentation? Please file an issue or make a pull request