This page is about version 1.0.8 of the app, which is not the most recent version. The latest stable version is 2.18.1.
The VTEX Search is an app that handles the result of the new VTEX Intelligent Search, used to provide a more complete search experience, by providing new functionality, components and a centralized hub for everything related to Search!
:loudspeaker: Disclaimer: Don't fork this project; use, contribute, or open issue with your feature request.
Table of Contents
Usage
The first step to start using VTEX Intelligent Search is to install our suite of apps, that includes:
vtex.admin-search, responsible for the VTEX Admin experience for VTEX Intelligent Search. :computer:vtex.search-resolver, the underlying implementation of our search engine. :nerd_face:
You can do this easily by running:
_10vtex install vtex.admin-search vtex.search-resolver@1.x
The app you're reading the documentation right now, vtex.search, became the house of new UI components closely
related to the Search experience, it's not necessary to install it in your workspace and will be covered in UI Components.
:loudspeaker: Important: After installation, all navigation and search pages will be delivered by the new VTEX Search.
Confirm that the Indexing Process step has been completed successfully before promoting the app to
master.
Indexing Process
After installing our suite of apps, your workspace is ready to begin it's Search journey, but first we need to index your account's catalog in our Search Engine.
Go to your Admin page and click on the menu Search > Integration Settings and start the Indexing Process.
UI Components
If you want to use our UI components you need import this app in your dependencies on the manifest.json.
_10{_10 "dependencies": {_10 "vtex.search": "1.x"_10 }_10}
This app provides the following blocks:
Autocomplete
We provide a customized autocomplete with new features. It includes:
- Top Searches.
- Search History.
- Product Suggestions.
- Term Suggestions.
You can read a detailed explanation of Autocomplete and it's features here.
To use our autocomplete, first, you need to declare a block for it in your store/blocks.json.
_10{_10 "autocomplete-result-list.v2": {_10 "blocks": ["product-summary"]_10 }_10}
Finally, append this block to your Search Bar. To improve the client experience, we also recommend to add the openAutocompleteOnFocus prop.
_10{_10 "search-bar": {_10 "blocks": ["autocomplete-result-list.v2"],_10 "props": {_10 "openAutocompleteOnFocus": true_10 }_10 }_10}
A full documentation of our custom autocomplete can be found here.
Search Result Complements
:loudspeaker: Important: These improvements work only in version 3.x of search-result
This app provides three new components to improve the search result experience. They are:
did-you-mean. A possible misspelling correction for the current query.search-suggestion. A list of search terms similar to the query.search-banner. A banner that can be configured by query.
Add any of these components into the search-result-layout.desktop or the search-result-layout.mobile block.
_36{_36 "search-result-layout.desktop": {_36 "children": [_36 "flex-layout.row#did-you-mean",_36 "flex-layout.row#suggestion",_36 "flex-layout.row#banner-one",_36 "flex-layout.row#result"_36 ],_36 "props": {_36 "pagination": "show-more",_36 "preventRouteChange": true,_36 "mobileLayout": {_36 "mode1": "small",_36 "mode2": "normal"_36 }_36 }_36 },_36_36 "flex-layout.row#did-you-mean": {_36 "children": ["did-you-mean"]_36 },_36 "flex-layout.row#suggestion": {_36 "children": ["search-suggestions"]_36 },_36 "flex-layout.row#banner-one": {_36 "children": ["search-banner#one"]_36 },_36_36 "search-banner#one": {_36 "props": {_36 "area": "one",_36 "blockClass": "myBanner",_36 "horizontalAlignment": "center"_36 }_36 }_36}
Google Analytics Configuration
Our search engine uses _q as the querystring for the search term. If you want to track the search in your Google Analytics you need to register it.
Check the correct configuration for Google Analytics using this documentation.
Troubleshooting
You can check if others are passing through similar issues here. Also, feel free to open issues or contribute with pull requests.
Contributing
Check it out how to contribute with this project.