Description

Autocomplete is an alternative for the default VTEX autocomplete. It includes:

  • Top Searches.
  • Search History.
  • Product Suggestions.
  • Term Suggestions.

You can read a detailed explanation of Autocomplete and it's features here.

Usage

Add autocomplete-result-list.v2 into the blocks of a search-bar. We also recommend to set openAutocompleteOnFocus as shown.

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

Props

Prop nameTypeDescriptionDefault value
maxTopSearchesNumberMaximum number of terms in the top searches list10
maxHistoryNumberMaximum number of terms in the search history list5
maxSuggestedProductsNumberMaximum number of suggested products3
maxSuggestedTermsNumberMaximum number of suggested terms3
autocompleteWidthNumberAutocomplete width. Number between 0 and 100-
productLayoutProductLayoutEnumDefines the product layout in the suggested products list-
hideTitlesBooleanIf true, all the titles will be hiddenfalse
historyFirstBooleanIf true, the history list will be prioritizedfalse
customBreakpointsCustomBreakpointsPropDefines a maximum number of suggested products by breakpoints-
__unstableProductOriginVtexBooleanYou can use this property as true if any of your product-summary props come with a null value. This is because some product information does not come by default in the Search.false
simulationBehavior"skip" or "default"If you want faster searches and do not care about most up to date prices and promotions, use "skip" value.default
customPagestringDefines a custom page to the autocomplete links. Example: store.search.customstore.search
orderByenumDecides which order products must follow when displayed. The possible values are named after the order type: OrderByTopSaleDESC, OrderByReleaseDateDESC, OrderByBestDiscountDESC, OrderByPriceDESC, OrderByPriceASC, OrderByNameASC, OrderByNameDESC or OrderByScoreDESC (relevance Score). ASC and DESC stand for ascending order and descending order, respectively.OrderByScoreDESC

ProductLayoutEnum

Enum nameEnum value
HorizontalHORIZONTAL
VerticalVERTICAL

CustomBreakpointsProp

Prop nameTypeDescriptionDefault value
mdBreakpointPropDefines the options for the md breakpoint-
lgBreakpointPropDefines the options for the lg breakpoint-
xlgBreakpointPropDefines the options for the xlg breakpoint-

BreakpointProp

Prop nameTypeDescriptionDefault value
widthNumberMinimum width for the breakpoint-
maxSuggestedProductsNumberMaximum number of suggested products for the breakpoint-

Did this page help you?