Suggestions is a component used to suggest search terms similar 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 search-suggestions 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#suggestion",_10 ],_10 "flex-layout.row#suggestion": {_10 "children": ["search-suggestions"]_10 }_10}
Props
| Prop name | Type | Description | Default value |
|---|---|---|---|
customPage | string | Defines a custom page to the link of a suggestion. Example: store.search.custom. | store.search |
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 |
|---|
suggestionsList |
suggestionsListPrefix |
suggestionsListLink |
suggestionsListItem |