This page is about version 2.17.0 of the app, which is not the most recent version. The latest stable version is 2.18.1.
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 |