VTEX Search Result

Description

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

• Usage
  • Blocks API
    • Configuration
  • Styles API
    • CSS namespaces
• Troubleshooting
• Contributing
• Tests

Usage

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: {
    "vtex.search-result": "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": [
      "filter-navigator",
      "gallery",
      "not-found",
      "breadcrumb",
      "order-by",
      "total-products",
      "search-title"
    ],
    "props": {
      "querySchema": {
        "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": [
      "not-found",
      "breadcrumb",
      "filter-navigator",
      "total-products",
      "order-by",
      "search-title"
    ],
    "required": [
      "gallery"
    ],
    "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": [
      "product-summary"
    ],
    "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.)

Configuration

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

QuerySchema

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

HiddenFacets

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

SpecificationFilters

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"
  }

2. 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

Troubleshooting

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

Contributing

Check it out how to contribute with this project.

Tests

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