The search-bar component shows a search bar with autocomplete options and displays the matching products as well. This component can be imported and used by any VTEX App.

search-barsearch-bar

Configuration

  1. Import the vtex.store-components app to your theme's dependencies in the manifest.json file as in the following example:
 "dependencies": {
    "vtex.store-components": "3.x"
  }
  1. Add the search-bar block into the header component. For example:
  "header.full": {
    "blocks": [
      "login",
      "minicart",
      "logo",
+     "search-bar",
      "menu-link",
      "telemarketing",
      "category-menu"
    ]
  },
  1. Then, declare the search-bar block using the props stated in the Props table. For example:

Props

Prop nameTypeDescriptionDefault value
attemptPageTypeSearchBooleanIf true when clicked on result link of brand, department or category will link to the corresponding brand, department or category page. When false will always go to a full text search page.false
autocompleteAlignmentHorizontalAlignmentAutocomplete Horizontal alignment. Possible values are: left, center, right.left
autocompleteFullWidthBooleanIf true, the autocomplete will fill the whole window horizontally.false
autoFocusBooleanDefine if the search input should autofocus or not-
blurOnSubmitBooleanDefine if input should blur on submit.false
classesCustomCSSClassesOverrides default CSS handles. To better understand how this prop works, check this document. Note that this is only helpful if you're using this block as a React component.undefined
containerModeenumDefines how the autocomplete component should be displayed. Possible values are: overlay (suggestions overlapping other components) and container (displays the suggestion within a container).overlay
compactModeBooleanDefine when to use the compact version of the component-
customSearchPageUrlstringTemplate for a custom url. It can have a substring ${term} used as placeholder to interpolate the searched term. (e.g. /search?query=${term})-
disableBlurAndTouchEndHandlerBooleanThe autocomplete can have touchable/clickable components. Interacting with those components may trigger blur and touch events that will close the autocomplete. When set to true, this prop will disable those handlers.false
displayModeDisplayModeDefine the component display mode, such as which buttons should be visible.clear-button
emptyPlaceholderString!Shows a placeholder when the ResultList hasn't results to displayed-
hasIconLeftBooleanDefine if the search icon is on left or right position-
iconClassesStringDEPRECATEDDEPRECATED Custom classes for the search icon. Use the CSS handle searchBarIcon.-
inputTypeenumDefines the value for the type HTML attribute (from the <input> field). Possible values are: search and text. We strongly recommend you to use search as it fixes some iOS issues. The text value is only kept as default for backwards compatibility.text
maxWidthNumber | StringMax width of the search bar-
minSearchTermLengthNumberIf defined, it will block searches where the term length is lesser than minSearchTermLength.-
openAutocompleteOnFocusBooleanDefines if autocomplete should be open on input focus or not.false
placeholderString!Placeholder to be used on the input-
submitOnIconClickBooleanDEPRECATEDDEPRECATED Defines if search icon should submit on click. Use the displayMode prop instead.false

DisplayMode

Enum nameEnum valueEmpty stateFilled state
clear-button'clear-button'clear-button-emptyclear-button-emptyclear-button-filledclear-button-filled
search-and-clear-buttons'search-and-clear-buttons'search-and-clear-buttons-emptysearch-and-clear-buttons-emptysearch-and-clear-buttons-filledsearch-and-clear-buttons-filled
search-button'search-button'search-button-emptysearch-button-emptysearch-button-filledsearch-button-filled

Using SearchBar with Intelligent Search

To improve the search experience usign the SearchBar component, such as the autocomplete option, you must use the component within Search app responsible for handling the Intelligent Search (IS) solution in IO stores.

The IS communicates with the autocomplete-result-list.v2 block exported by the Search app, and the block displays previous search results based on current and previous searches.

Follow the Search documentation to add the Search app to your store.

Customization

To apply CSS customizations in this and other blocks, follow the Using CSS handles for store customization guide.

CSS Handles
compactMode
externalSearchButtonWrapper
paddingInput
searchBarContainer
searchBarInnerContainer--opened
searchBarInnerContainer--filled
searchBarIcon
searchBarIcon--clear
searchBarIcon--external-search
searchBarIcon--prefix
searchBarIcon--search
suffixWrapper

Did this page help you?