Skip to content
VTEX Search Result app
Branch: master
Clone or download
klzns Merge pull request #179 from vtex-apps/fix/resize-detector
 Avoid flickering triggered by resize of height in ReactResizeDetector
Latest commit 6bddc93 May 24, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Fix pr requests May 9, 2018
messages Revert change in this file May 23, 2019
.gitignore Move eslint config to use vtex-react v4 Apr 26, 2019
.prettierrc Setup react-testing-library and snapshot tests Feb 28, 2019
.stylelintrc Move filter logic into separate component Aug 22, 2018
.travis.yml Setup react-testing-library and snapshot tests Feb 28, 2019
.vtexignore Update .vtexignore Feb 28, 2019 Updated the context in the props May 17, 2019
manifest.json Release v3.19.2 May 24, 2019

VTEX Search Result

Build Status


The VTEX Search Result app is a store component that handles with the result of our Search API, and this app is used by store theme.

📢 Disclaimer: Don't fork this project; use, contribute, or open issue with your feature request.

Release schedule

Release Status Initial Release Maintenance LTS Start End-of-life Store Compatibility
[3.x] Current Release 2018-12-01 2.x
[2.x] Maintenance LTS 2018-10-02 2018-12-01 March 2019 1.x

See our LTS policy for more information.

Table of Contents


This app uses our store builder with the blocks architecture. To know more about Store Builder click here.

We add the search-result as a block in our Store.

To configure or customize this app, you need to import it in your dependencies in manifest.json.

  dependencies: {
    "": "3.x"

Then, add search-result block into your app theme as we do in our Store theme app.

Now, you can change the behavior of the search result block that is in the store header. See an example of how to configure:

  "search-result#department": {
    "blocks": [
    "props": {
      "context": {
        "maxItemsPerPage": 2,
        "orderByField": "OrderByReleaseDateDESC"
      "hiddenFacets": {
        "layoutMode1": "normal",
        "layoutMode2": "small",
        "specificationFilters": {
          "hiddenFilters": []
      "pagination": "show-more"

Blocks API

When implementing this app as a block, various inner blocks may be available. The following interface lists the available blocks within search result and describes if they are required or optional.

"search-result": {
    "allowed": [
    "required": [
    "component": "index"

The search-result has as a required block the gallery. So, any search-result block implementation created must add a gallery as a block that is inside of search-result. Similarly, gallery has its own inner block structure that can be configured that you can see below.

 "gallery": {
    "required": [
    "component": "Gallery"

The gallery has as a required block the product-summary. So, any gallery block implementation created must add a product-summary as a block that is inside of gallery. (Similarly, product-summary has its own inner block structure that can be configured. There is a link to its API in the next section.)


Through the Storefront, you can change the search-result behavior and interface. However, you also can make in your theme app, as Dreamstore does.

Prop name Type Description Default value
querySchema QuerySchema Query made when there's no context N/A
hiddenFacets HiddenFacets Indicates which facets will be hidden N/A
pagination Enum Pagination type (values: 'show-more' or 'infinite-scroll') infinity-scroll


Prop name Type Description Default value
maxItemsPerPage Number Maximum number of items per search page 10
queryField String Query field N/A
mapField String Map field N/A
restField String Other Query Strings N/A
orderByField Enum Order by field (values: 'OrderByTopSaleDESC', 'OrderByReleaseDateDESC', 'OrderByBestDiscountDESC', 'OrderByPriceDESC', 'OrderByPriceASC', 'OrderByNameASC' or 'OrderByNameDESC') OrderByReleaseDateDESC


Prop name Type Description Default value
layoutMode1 Enum Layout mode of the switcher (values: 'normal', 'small' or 'inline') normal
layoutMode2 Enum Layout mode of the switcher 2 (values: 'normal', 'small' or 'inline') small
brands Boolean Hide Brands filter false
categories Boolean Hide Categories filter false
priceRange Boolean Hide Price filter false
specificationFilters SpecificationFilters Hide Specifications filters N/A


Prop name Type Description Default value
hideAll Boolean Hide specifications filters false
hiddenFilters Array(String) Array of specifications filters that should be hidden N/A

Also, you can configure the product summary that is defined on search-result. See here the Product Summary API.

Styles API

This app provides some CSS classes as an API for style customization.

To use this CSS API, you must add the styles builder and create an app styling CSS file.

  1. Add the styles builder to your manifest.json:
  "builders": {
    "styles": "1.x"
  1. Create a file called vtex.searchResult.css inside the styles/css folder. Add your custom styles:
.container {
  margin-top: 10px;

CSS namespaces

Below, we describe the namespaces that are defined in the search-result.

Token name Description Component Source
container The main container of search-result SearchResult
buttonShowMore Show the see more button ShowMoreLoaderResult
switch Layout mode switcher container SearchResult
breadcrumb Breadcrumb container SearchResult
filter Filter option container FilterOptionTemplate
resultGallery Gallery result container SearchResult
border Order by container border SearchResult
gallery The main container of gallery Gallery
filterPopupButton Filter pop-up button FilterSideBar
accordionFilter Accordion filter container AccordionFilterContainer
filterAccordionItemBox Accordion filter item container AccordionFilterItem
filterAccordionBreadcrumbs Filter accordion breadcrumbs container AccordionFilterContainer
filterButtonsBox Filter buttons container FilterSidebar
filterPopupFooter Filter pop-up footer container Popup
accordionFilterItemOptions Accordion filter item options container AccordionFilterItem
dropdownMobile The main container of drop-down on mobile SelectionListOrderBy
accordionFilterItemActive Container of the accordion filter item when it is active AccordionFilterItem
totalProducts The main container of total-products TotalProducts
orderBy The main container of order-by OrderBy
accordionFilterItemHidden Accordion filter item container when it is hidden AccordionFilterItem
accordionFilterItem Accordion filter item container AccordionFilterItem
accordionFilterItemBox Accordion filter item box AccordionFilterItem
accordionFilterItemTitle Accordion filter item title container AccordionFilterItem
accordionFilterItemIcon Accordion filter item icon container AccordionFilterItem
filterAvailable Filter option template main container when it is available FilterOptionTemplate
filterSelected Filter option template main container when it is selected FilterOptionTemplate
filterPopupTitle Filter pop-up title label FilterSidebar
filterPopupArrowIcon Filter pop-up arrow icon container FilterSidebar
footerButton Footer button FooterButton
layoutSwitcher Layout mode switcher container LayoutModeSwitcher
filterPopup Main container of filter pop-up FilterPopup
filterPopupOpen Main container of filter pop-up when it is open FilterPopup
filterPopupContent Filter pop-up content Popup
filterPopupContentContainer Filter pop-up content container Popup
filterPopupContentContainerOpen Filter pop-up content container when it is open Popup
selectedFilterCheckbox Selected filter check-box SelectedFilters
galleryItem Gallery item container Gallery
searchNotFound Main container of Search Not Found NotFoundSearch
filterTitle Filter title container FilterOptionTemplate
filterIcon Filter icon container FilterOptionTemplate
galleryTitle Category name or search term title Title


You can check if others are experiencing similar issues here. Also feel free to open issues.


Check it out how to contribute with this project.


To execute our tests go to react/ folder and run npm test

You can’t perform that action at this time.