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.

Important Note

We ask for users, from now on, to use the filter-navigator.v2 block if you want to keep updated with the most up to date Filter Navigator in your search-result.

The correct way to use it is setting it in your blocks.json like:

json
"search-result": {
    "blocks": [
      "filter-navigator.v2",
      "gallery",
      "not-found",
      "breadcrumb",
      "order-by",
      "total-products"
    ],
  }

Or via Storefront.

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.

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.v2",
      "gallery",
      "not-found",
      "breadcrumb",
      "order-by",
      "total-products",
      "search-title"
    ],
    "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": [
      "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

Layout API

These properties can be changed in the blocks.json file of your theme.

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`
`mobileLayout`	`MobileLayout`	Control mobile layout	N/A
`showFacetQuantity`	`Boolean`	If quantity of items filtered by facet should appear besides its name on `filter-navigator`	`false`
`blockClass`	`String`	Unique class name to be appended to block classes	`""`

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`
`hideUnavailableItems`	`Boolean`	Set if unavailable items should show on search	`false`

HiddenFacets

Prop name	Type	Description	Default value
`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(HiddenFilterUnit)`	Array of specifications filters that should be hidden	N/A

HiddenFilterUnit

Prop name	Type	Description	Default value
`name`	`String!`	Name of Hidden specification filter	`""`

MobileLayout

Prop name	Type	Description	Default value
`mode1`	`Enum`	Layout mode of the switcher (values: 'normal', 'small' or 'inline')	`normal`
`mode2`	`Enum`	Layout mode of the switcher 2 (values: 'normal', 'small' or 'inline')	`small`

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.

Add the styles builder to your manifest.json:

  "builders": {
    "styles": "1.x"
  }

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
`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
`filterItem`	Checkbox and label for Filters (desktop only)	SearchFilter
`selectedFilterItem`	Checkbox and label for selected Filters (desktop only)	SelectedFilters

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

Name		Name	Last commit message	Last commit date
Latest commit History 1,054 Commits
.github		.github
messages		messages
react		react
store		store
.gitignore		.gitignore
.prettierrc		.prettierrc
.stylelintrc		.stylelintrc
.travis.yml		.travis.yml
.vtexignore		.vtexignore
CHANGELOG.md		CHANGELOG.md
README.md		README.md
manifest.json		manifest.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

VTEX Search Result

Description

Important Note

Release schedule

Table of Contents

Usage

Blocks API

Configuration

Layout API

Styles API

CSS namespaces

Troubleshooting

Contributing

Tests

About

Releases

Packages

Languages

biggylabs/search-result

Folders and files

Latest commit

History

Repository files navigation

VTEX Search Result

Description

Important Note

Release schedule

Table of Contents

Usage

Blocks API

Configuration

Layout API

Styles API

CSS namespaces

Troubleshooting

Contributing

Tests

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages