The VTEX Search app is responsible for handling the new VTEX Intelligent Search solution in IO stores by providing new UI components that enhance the search experience, such as the autocomplete feature.

The proper functioning of the Search app components relies on having already installed apps vtex.admin-search@1.x and vtex.search-resolver@1.x in your store. For more on this, access our VTEX Intelligent Search track.

To configure the Search app, check the sections below.

Add the search app to your theme's dependencies in the manifest.json as showed below:

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

You are now able to use all of the blocks exported by the search app. Check the full list below:

The blocks search-banner, did-you-mean and search-suggestions require you to have Search Result app version 3.x or higher installed in your theme.

First, declare the autocomplete-result-list.v2 block as a child block of the search-bar block, exported by the Store Components app, for example:

{
  "search-bar": {
    "blocks": ["autocomplete-result-list.v2"],
    "props": {
      "openAutocompleteOnFocus": true
    }
  }
}

The autocomplete-result-list.v2 props

The customBreakpoints object

The md, lg and xlg objects

The autocomplete-result-list.v2 block also allows you to add a list of child blocks onto it. You can declare a theme block of your choosing and have it rendered among the autocomplete features, for example:

{
  "autocomplete-result-list.v2": {
    "blocks": ["product-summary"]
  }
}

Now, you can add the last three search blocks: search-banner, did-you-mean and search-suggestions.

Those blocks, differently from autocomplete-result-list.v2, need to be added under the search-result-layout.desktop or the search-result-layout.mobile blocks, according to the Search Results block hierarchy.

Once added, these can be declared using their respective props for their configuration, for example:

{
  "search-result-layout.desktop": {
    "children": [
      "flex-layout.row#did-you-mean",
      "flex-layout.row#suggestion",
      "flex-layout.row#banner-one",
      "flex-layout.row#result"
    ],
    "props": {
      "pagination": "show-more",
      "preventRouteChange": true,
      "mobileLayout": {
        "mode1": "small",
        "mode2": "normal"
      }
    }
  },

  "flex-layout.row#did-you-mean": {
    "children": ["did-you-mean"]
  },
  "flex-layout.row#suggestion": {
    "children": ["search-suggestions"]
  },
  "flex-layout.row#banner-one": {
    "children": ["search-banner#one"]
  },

  "search-banner#one": {
    "props": {
      "area": "one",
      "blockClass": "myBanner",
      "horizontalAlignment": "center"
    }
  }
}

The search-banner props

The Search app is responsible for offering blocks that when rendered as components will improve the user's search experience in stores where the VTEX Intelligent Search engine is already supported.

These components use _q as the query-string for the search term, meaning that if you wish to track the searches of your users in these components you'll need to add the _q query-string to the store's Google Analytics.

Find out how to do this by accessing our Google Analytics search tracking documentation.

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.