DidYouMean by vtex

DidYouMean is a component used to suggest a possible misspelling correction to the current query.

Before you begin

Make sure you have added the search app to your theme dependencies in the manifest.json as shown below:


_10  "dependencies": {
_10    "vtex.search": "2.x"
_10  }

Check the Search app documentation for more details on this step.

Usage

Add the did-you-mean block to the search-result-layout.desktop or search-result-layout.mobile. For example:


_10"search-result-layout.desktop": {
_10    "children": [
_10        "flex-layout.row#didyoumean",
_10    ],
_10    "flex-layout.row#didyoumean": {
_10        "children": ["did-you-mean"]
_10    }
_10}

Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
`didYouMeanPrefix`
`didYouMeanTerm`