Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Basic components
Search Result
Official extension
Version: 3.138.2
Latest version: 3.138.2

{"base64":"  ","img":{"width":110,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/all_contributors-7-orange.svg?style=flat-square"}}

The Search Result app handles the results returned by the VTEX Search API and displays them to users.

The app exports all store blocks expected on a search results page, such as the filters and the product gallery.

{"base64":"  ","img":{"width":2878,"height":1578,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":746685,"url":"https://user-images.githubusercontent.com/52087100/77557721-d96b6580-6e98-11ea-9178-77c8c4a6408e.png"}}

Configuration

To configure the VTEX Search Result, follow the instructions below.

Adding the Search Result app to your theme's dependencies

In your theme's manifest.json, add the Search Result app as a dependency:


_10
"dependencies": {
_10
"vtex.search-result": "3.x"
_10
}

Now, you can use all the blocks exported by the search-result app. See the complete list below:

search-result blocks

Block nameDescription
search-result-layout
{"base64":"  ","img":{"width":69,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Mandatory-red"}}
Builds the search result page using its three children blocks: search-result-layout desktop, search-result-layout.mobile, and search-not-found-layout. Use it in the store.search template, as it uses context from the VTEX Search API.
search-result-layout.customQuery
{"base64":"  ","img":{"width":69,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Mandatory-red"}}
Use this block instead of search-result-layout when the search result is declared in a template that doesn't fetch Search context, such as Home. It accepts a querySchema prop that executes search custom queries. It also supports three children blocks: search-result-layout.desktop, search-result-layout.mobile and search-not-found-layout.
search-result-layout.desktop
{"base64":"  ","img":{"width":69,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Mandatory-red"}}
Builds the search result page structure for desktop mode.
search-result-layout.mobileBuilds the search result page structure for mobile mode. If search-result-layout.mobile isn't provided, search-result-layout.desktop is used.
search-layout-switcherEnables mobile users to switch between layout modes.
search-not-found-layoutBuilds the entire search results page structure for scenarios where no result was found. It renders when users search for a term that doesn't return a product.
gallery
{"base64":"  ","img":{"width":69,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Mandatory-red"}}
Displays the gallery with all the products found in the search.
gallery-layout-switcherAllows users to switch between available gallery layouts. Learn more in the guide Building a search results page with multiple layouts.
gallery-layout-optionDefines how each layout option renders for users. Learn more in the guide Building a search results page with multiple layouts.
not-foundContains text and a description for a page not found in the search. Declare it as a child of search-not-found-layout.
search-content
{"base64":"  ","img":{"width":69,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Mandatory-red"}}
Decides, behind the scenes, which block to display: either the gallery block (if products are found) or the not-found (if selected filters lead to an empty search results page). This means both gallery and not-found must be declared search-content children.
store.not-found#searchWhen configured, it displays a 404 error message when the server cannot return what the browser's request is, or is not configured to handle that request.
search-products-count-per-pageDisplays the total number of products on the search results page.
search-products-progress-barDisplays a progress bar of products on the search results page.
order-by.v2Allows users to choose the product order on the search results page.
filter-navigator.v3Allows users to apply different filters to the search. On mobile, it renders a button that, when clicked on, displays all available filters in a sidebar.
total-products.v2Displays the total number of products found for that search.
search-title.v2Displays a title for the done search.
search-fetch-moreDisplays the Show More button. This button doesn't render when the user is on the last page.
search-fetch-previousDisplays the Show Previous button. This button doesn't render when the user is on the first page.
sidebar-close-buttonDisplays an X button on the filter sidebar on mobile.

Adding the Search Result to page templates

Search Result app data usually displays on search pages (store.search), but you can add it to any other page.

When adding to the search page, use the search-result-layout, which fetches data from the template's current search context. To add the app to another page, use the search-result-layout.customQuery block.

On the desired store page, add the search-result-layout block or the search-result-layout.customQuery to the correct template blocks list. Check both codes below as examples.

On search pages:


_10
"store.search": {
_10
"blocks": ["search-result-layout"]
_10
}

On other pages:


_10
"store.home": {
_10
"blocks": [
_10
"carousel#home",
_10
"shelf#home",
_10
+ "search-result-layout.customQuery#home"
_10
]
_10
}

Defining how the search query data should be fetched

Before declaring the blocks into the search results layout, define how the search results will be fetched.

You should define these results through a custom query on the home page. On the search template, use the already provided context.

If you use search-result-layout, the blocks define the fetched data from the context. If you use search-result-layout.customQuery, send the props through the querySchema to configure the custom query.

Using search-result-layout:


_11
{
_11
"store.search": {
_11
"blocks": ["search-result-layout"],
_11
"props": {
_11
"context": {
_11
"skusFilter": "FIRST_AVAILABLE",
_11
"simulationBehavior": "default"
_11
}
_11
}
_11
}
_11
}

Using search-result-layout.customQuery:


_17
{
_17
"store.home": {
_17
"blocks": [
_17
"carousel#home",
_17
"shelf#home",
_17
"search-result-layout.customQuery#home"
_17
]
_17
},
_17
"search-result-layout.customQuery#home": {
_17
"props": {
_17
"querySchema": {
_17
"skusFilter": "FIRST_AVAILABLE",
_17
"simulationBehavior": "default"
_17
}
_17
}
_17
}
_17
}

Check all props to configure your search data in the table below.

The context and querySchema props

Prop nameTypeDescriptionDefault value
queryFieldstring
{"base64":"  ","img":{"width":69,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Mandatory-red"}}
Query string of the search URL that defines the results to fetch in the custom query. Example: Blue. This prop only works if mapField is also declared.
undefined
mapFieldstring
{"base64":"  ","img":{"width":69,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Mandatory-red"}}
Search URL's map parameter to define which results to fetch in the custom query. Example: specificationFilter_100. This prop only works if the queryField prop is also declared.
undefined
maxItemsPerPagenumberMaximum number of items per search page. The maximum value of this prop is 50. If a higher number is added, the query will fail.10
orderByFieldenumDetermines the order products follow when displayed. Possible values are named after the sorting type: OrderByReleaseDateDESC, OrderByBestDiscountDESC, OrderByPriceDESC, OrderByPriceASC, OrderByNameASC, OrderByNameDESC, or OrderByTopSaleDESC. ASC and DESC stand for ascending order and descending order, respectively, based on the position of each value's corresponding code in the ASCII table. OrderByTopSaleDESC considers the number of units sold for the product in the past 90 days, taking into account only ecommerce orders (no physical store orders) from order-placed events (Example: Without checking if the payment was approved). If the store has an app, it's possible to consider events from the app as long as they're implemented on the store's side; they aren't implemented by default. If the shopper has an ad-blocking extension or a browser restriction that disables sending events, their navigation will not be counted.If not set to any of the mentioned values, the fallback behavior is sorting by relevance settings. OrderByScoreDESC is not a valid value for this prop.""
hideUnavailableItemsbooleanDetermines whether the search result should hide unavailable items (true) or not (false). This prop only hides items that are unavailable according to indexed information, without taking into account simulationBehavior.false
facetsBehaviorstringDefines the filters' behavior. When set to Dynamic, it restricts results according to the filters the user has selected. If set to Static, all filters continue to display to the user, even if there are no results.Static
skusFilterenumRefines the SKUs returned for each product in the query. Fewer returned SKUs result in a more performant shelf query. Available value: FIRST_AVAILABLE (returns only the first available SKU), ALL_AVAILABLE (returns all available SKUs), and ALL (returns all product SKUs).ALL_AVAILABLE
simulationBehaviorenumDefines whether the search data will be up-to-date (default) or fetched using the cache (skip). Use the last option only if you prefer faster queries over the most up-to-date prices or inventory.default
installmentCriteriaenumDefines which price to display when different installments are available. Possible values: MAX_WITHOUT_INTEREST (displays the maximum installment option with no interest attached) or ´MAX_WITH_INTEREST` (displays the maximum installment option, whether it has interest attached or not)."MAX_WITHOUT_INTEREST"
excludedPaymentSystemsstringList of payment systems not to consider when displaying installment options to users. This prop works only if installmentCriteria is also declared. Otherwise, all available payment systems display regardless.undefined
includedPaymentSystemsstringList of payment systems to consider when displaying installment options to users. This prop works only if installmentCriteria is also declared. Otherwise, all available payment systems display regardless.undefined

Pagination doesn't display results after page 50. You can configure it to display more products per page by increasing the quantity of products on each page using the maxItemsPerPage prop.

When the simulationBehavior prop is set as skip, it defines that the search data should only be fetched using the store's cache. This may impact the content displayed on store pages, as cache storage changes according to user interaction on each page.

You must define the query for the following search pages:

  • Brand
  • Department
  • Category
  • Subcategory

This allows you to define custom behaviors for your store's search pages. For example:


_47
{
_47
"store.search": {
_47
"blocks": ["search-result-layout"],
_47
"props": {
_47
"context": {
_47
"skusFilter": "FIRST_AVAILABLE",
_47
"simulationBehavior": "default"
_47
}
_47
}
_47
},
_47
"store.search#category": {
_47
"blocks": ["search-result-layout"],
_47
"props": {
_47
"context": {
_47
"skusFilter": "FIRST_AVAILABLE",
_47
"simulationBehavior": "default"
_47
}
_47
}
_47
},
_47
"store.search#brand": {
_47
"blocks": ["search-result-layout"],
_47
"props": {
_47
"context": {
_47
"skusFilter": "FIRST_AVAILABLE",
_47
"simulationBehavior": "default"
_47
}
_47
}
_47
},
_47
"store.search#department": {
_47
"blocks": ["search-result-layout"],
_47
"props": {
_47
"context": {
_47
"skusFilter": "FIRST_AVAILABLE",
_47
"simulationBehavior": "default"
_47
}
_47
}
_47
},
_47
"store.search#subcategory": {
_47
"blocks": ["search-result-layout"],
_47
"props": {
_47
"context": {
_47
"skusFilter": "FIRST_AVAILABLE",
_47
"simulationBehavior": "default"
_47
}
_47
}
_47
}
_47
}

Defining your search results page's layout and behavior

Now you can structure the search-result-layout or the search-result-layout.customQuery blocks. Both require the search-result-layout.desktop as a child. You can also provide props to other children, such as search-result-layout.mobile and search-not-found-layout.

According to your store's scenario, structure the search-result-layout or the search-result-layout.customQuery by declaring their children and then configuring them using the Flex Layout blocks and their props. For example:


_19
{
_19
"search-result-layout": {
_19
"blocks": [
_19
"search-result-layout.desktop",
_19
"search-result-layout.mobile",
_19
"search-not-found-layout"
_19
]
_19
},
_19
"search-result-layout.desktop": {
_19
"children": [
_19
"flex-layout.row#searchbread",
_19
"flex-layout.row#searchtitle",
_19
"flex-layout.row#result"
_19
],
_19
"props": {
_19
"preventRouteChange": true
_19
}
_19
}
_19
}

The search-result-layout.desktop, search-result-layout.mobile, and search-not-found-layout props

Prop nameTypeDescriptionDefault value
hiddenFacetsobjectIndicates which filters should be hidden. The possible values are in this table.undefined
showFacetQuantitybooleanDetermines whether the resulting amount in each filter should appear beside its name on the filter-navigator.v3 block (true) or not (false).false
showFacetTitlebooleanDetermines whether the facet title should appear on the selected filters section on the filter-navigator.v3 block (true) or not (false).false
blockClassstringUnique block ID for CSS customization.undefined
trackingIdstringID for Google Analytics to track store metrics based on the Search Result block.Search result
mobileLayoutobjectControls how the search results page displays to users using the mobile layout. Possible values are in this table.undefined
defaultGalleryLayoutstringDetermines the default name of the gallery layout on the search results page. This prop is required when the gallery block explicitly defines several layouts. This prop's value must match the layout name defined in the name prop from layouts object.undefined
thresholdForFacetSearchnumberSpecifies the minimum number of facets that must be displayed for the search bar to appear. If you declare 0, the search bar always displays.undefined
preventRouteChangebooleanKeeps page customizations even when the user applies new filters. This prop only changes the URL's query string rather than the entire URL, preventing a full page reload when filters are applied.false
showShippingFacetbooleanDetermines whether Shipping filters should display (true) or not (false).false

The mobileLayout object

Prop nameTypeDescriptionDefault value
mode1enumDefines the default layout for the mobile search results page. Possible values: normal, small, or inline.normal
mode2enumDefines which layout sets for the mobile search results page when users click the layout selector button. Possible values are also normal, small, or inline.small

The hiddenFacets object

Prop nameTypeDescriptionDefault value
brandsbooleanDetermines whether Brand filters should be hidden (true) or not (false).false
categoriesbooleanDetermines whether Category filters should be hidden (true) or not (false).false
priceRangebooleanDetermines whether Price filters should be hidden (true) or not (false).false
specificationFiltersobjectIndicates which specification filters should be hidden. Possible values are in this table.undefined

The specificationFilters object

Prop nameTypeDescriptionDefault value
hideAllbooleanDetermines whether specification filters should be hidden (true) or not (false).false
hiddenFiltersobjectObject array of specification filters that should be hidden. Possible values are in this table.undefined

The hiddenFilters object

Prop nameTypeDescriptionDefault value
namestringDefines the name of the specification filter that you want to hide.undefined

Using the Flex Layout to build your search results page

You can build your search results page with the Flex Layout app and the other blocks exported by the Search Results app, such as the gallery.

Below are the available blocks to build your store's search results page and their existing props.

The gallery block

The gallery block defines how fetched items display on the store's search results page.

When declared with no props, it expects the product-summary.shelf as a child and consequently the block structure inherited from it.

However, you can use the layouts prop to provide several layouts for the page, allowing your store to arrange items that best fit your users' needs.

In a scenario where multiple layouts are provided, your store users will be able to shift between them according to their needs using the gallery-layout-switcher block, described in the table below. The gallery will then render the component provided by the currently selected layout.

Learn more in Building a search results page with multiple layouts.

The gallery-layout-switcher props
Prop nameTypeDescriptionDefault value
layoutsobjectArranges and displays items on the search results page. If no value is provided, the gallery block must receive a product-summary-shelf block as a child. Check this table for props of this block.undefined
undefinedblockDefines which blocks should reder per layout. The prop name is not undefined, you must include the value passed on the component prop. This prop's value must match the block name of your choosing to render in that specific layout.undefined
customSummaryIntervalnumberDefines the item interval at which the Gallery should render a custom product-summary block. For example, declaring 5 renders a custom block at every four items rendered, as shown on this image. This prop doesn't support layouts yet.undefined
CustomSummaryblockDefines a block to render according to the interval defined by the customSummaryInterval prop.undefined
preferredSKUPreferredSKUEnumControls which SKU will initially be selected in the product summary."FIRST_AVAILABLE"

For PreferredSKUEnum:

NameValueDescription
First AvailableFIRST_AVAILABLEFirst available SKU in stock found or first SKU without stock.
Last AvailableLAST_AVAILABLELast available SKU in stock found or last SKU without stock.
CheapestPRICE_ASCCheapest SKU in stock found or first SKU without stock.
Most ExpensivePRICE_DESCMost expensive SKU in stock found or first SKU without stock.

To select which SKU should take preference over this prop, you can create a product specification (field) and, for each product, assign the value of the desired SKU to be initially selected. If the specification doesn't exist or the value is empty, it will use the preferredSKU prop as a fallback. Learn more in Recipes.

The layouts object
Prop nameTypeDescriptionDefault value
namestring
{"base64":"  ","img":{"width":69,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Mandatory-red"}}
Specifies the layout name. This value must be unique. For example, not equal to other layout names declared in the gallery block.
undefined
componentstring
{"base64":"  ","img":{"width":69,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Mandatory-red"}}
Names the undefined prop from the gallery block, which is responsible for declaring the block to render in this layout. This prop's value can be any of your choosing as long as it's PascalCased, meaning that the first letter of each word in its name is capitalized. Caution: For this to work, the chosen value must be named after the gallery block's undefined prop. Do not use the component prop's value to directly pass the desired block name itself. Check out the example below to understand the underlying logic behind this prop.
undefined
itemsPerRownumber / object
{"base64":"  ","img":{"width":69,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Mandatory-red"}}
Specifies the number of items to display in each row of this layout. This prop works with responsive values, so it also accepts an object with different numbers for desktop, tablet, or phone screen sizes (see the table below).
undefined
The itemsPerRow object
Prop nameTypeDescriptionDefault value
desktopnumberNumber of slides to show on desktop devices.undefined
tabletnumberNumber of slides to show on tablet devices.undefined
phonenumberNumber of slides to show on phone devices.undefined
Example of a gallery block

_28
{
_28
"gallery": {
_28
"props": {
_28
"layouts": [
_28
{
_28
"name": "whole",
_28
"component": "OneOrTwoLineSummary",
_28
"itemsPerRow": 1
_28
},
_28
{
_28
"name": "two",
_28
"component": "OneOrTwoLineSummary",
_28
"itemsPerRow": 2
_28
},
_28
{
_28
"name": "many",
_28
"component": "ManyByLineSummary",
_28
"itemsPerRow": {
_28
"desktop": 5,
_28
"mobile": 1
_28
}
_28
}
_28
],
_28
"OneOrTwoLineSummary": "product-summary.shelf",
_28
"ManyByLineSummary": "product-summary.shelf"
_28
}
_28
}
_28
}

The gallery-layout-switcher block

The gallery-layout-switcher block is a logical block that allows users to switch between the available gallery layouts.

It receives no props and expects the gallery-layout-option block as a child. For the accessibility features to work correctly, define the options in the same order as the layouts.

The gallery-layout-option block

This block defines how each layout option renders for users.

Prop nameTypeDescriptionDefault value
namestring
{"base64":"  ","img":{"width":69,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Mandatory-red"}}
Specifies the name of the layout option. This prop's value must match the one passed to the name prop.
undefined
Example of the gallery-layout-switcher and the gallery-layout-option blocks

_28
{
_28
"gallery-layout-switcher": {
_28
"children": [
_28
//It follows the same whole -> two -> many order
_28
"gallery-layout-option#whole",
_28
"gallery-layout-option#two",
_28
"gallery-layout-option#many"
_28
]
_28
},
_28
"gallery-layout-option#whole": {
_28
"props": {
_28
"name": "whole"
_28
},
_28
"children": ["icon-single-grid", "rich-text#option-whole"]
_28
},
_28
"gallery-layout-option#two": {
_28
"props": {
_28
"name": "two"
_28
},
_28
"children": ["icon-inline-grid", "rich-text#option-two"]
_28
},
_28
"gallery-layout-option#many": {
_28
"props": {
_28
"name": "many"
_28
},
_28
"children": ["icon-menu", "rich-text#option-many"]
_28
}
_28
}

filter-navigator.v3 block

This block renders a filter selector for the fetched results.

Prop nameTypeDescriptionDefault value
categoryFiltersModeenumDetermines whether the category filters use the href attribute with category page URLs (href) or not (default). By default, the filters use HTML divs with role="link". Setting this prop's value to href creates a link, which can improve the SEO ranking of your category pages.default
layoutenumDetermines whether the Filter Navigator layout is responsive (responsive) or not (desktop). You can use desktop when the Filter Navigator is configured to display in a drawer.responsive
maxItemsDepartmentnumberSpecifies the maximum number of departments to display before the See More button triggers.8
maxItemsCategorynumberSpecifies the maximum number of category items to display before the See More button triggers.8
initiallyCollapsedbooleanMakes the search filters start collapsed (true) or open (false).false
openFiltersModeenumDefines how many filters can open simultaneously on the Filter Navigator component. Possible values are many (more than one filter can open simultaneously) and one (only one filter can open). If one is declared, all filters collapse before user interaction, regardless of the initiallyCollapsed prop's value.many
filtersTitleHtmlTagstringSpecifies the HTML tag for the filter's title.h5
scrollToTopenumScrolls the page to the top (auto or smooth) or not (none) when selecting a facet.none
truncateFiltersbooleanDetermines whether a filter selector with more than 10 filter options shortens the list and displays a See More button (true) or not (false).false
closeOnOutsideClickbooleanDetermines whether the Filter Navigator component closes when users click outside of it (true) or not (false). This prop only works if the openFiltersMode prop is set to one.false
appliedFiltersOverviewenumDetermines whether an overview of the applied filters displays (show) or not (hide).hide
totalProductsOnMobileenumDetermines whether the Filter Navigator displays the total number of products on mobile devices (show) or not (hide).hide
fullWidthOnMobilebooleanDetermines whether the filter-navigator.v3 renders on mobile using the full screen width (true) or not (false).false
navigationTypeOnMobileenumDefines how mobile users should navigate on the filter selector component. Possible values are page (only one list of options can be seen at a time) or collapsible (all lists of options can be seen simultaneously).page
updateOnFilterSelectionOnMobilebooleanDetermines whether search results on mobile update according to filter selection (true) or not (false). This prop only works if the preventRouteChange prop is declared as true.false
drawerDirectionMobileEnumDetermines whether search filters on mobile open to the left (drawerLeft) or to the right (drawerRight).drawerLeft
showClearByFilterbooleanDetermines whether a clear button (which erases all selected filter options) displays alongside the filter name (true) or not (false).false
showClearAllFiltersOnDesktopbooleanDetermines whether a clear button displays (true) or not (false). This button resets all selected filters.false
priceRangeLayoutenumDetermines whether a text field for entering the desired price range displays (inputAndSlider) or not (slider).slider
facetOrderingarrayApplies custom sorting rules for filters. The default behavior sorts items by quantity, in descending order.undefined
showQuantityBadgeOnMobilebooleanDisplays a badge for mobile users indicating how many active filters there are.false
  • facetOrdering object:
Prop nameTypeDescriptionDefault value
keystringSpecifies the facet key to sort. Possible values are category-1, category-2, category-3 (for department, category, and subcategory), brand, or a product specification name.undefined
orderByenumSpecifies the field from facets to use when sorting entries. Possible values are name and quantity.undefined
orderenumDetermines whether the filter should sort by ascending (ASC) or descending (DESC) order.ASC

For example:


_13
{
_13
"filter-navigator.v3": {
_13
"props": {
_13
"facetOrdering": [
_13
{
_13
"key": "brand",
_13
"orderBy": "name",
_13
"order": "ASC"
_13
}
_13
]
_13
}
_13
}
_13
}

The facetOrdering prop conflicts with the enableFiltersFetchOptimization flag on vtex.store, as it returns only the top filter values ordered by count. To achieve the desired outcome with facetOrdering, set enableFiltersFetchOptimization as false in your vtex.store Admin settings.

The order-by block

The order-by block renders a dropdown button with sorting options to display the fetched results. See the block props in the table below.

The order-by props
Prop nameTypeDescriptionDefault value
specificationOptions[object]Indicates which sorting options by specification will be displayed. This only works for stores using vtex.search-resolver@1.xundefined
hiddenOptions[string]Indicates which sorting options will be hidden. Example: ["OrderByNameASC", "OrderByNameDESC"]undefined
showOrderTitlebooleanDetermines whether the selected order value (example: Relevance) displays (true) or not (false).true
  • specificationOptions Object:

    Prop nameTypeDescriptionDefault value
    valuestringValue sent for sorting in the API. It must be in the format {specification key}:{asc/desc}. Example: "size:desc" or "priceByUnit:asc".undefined
    labelstringLabel that displays in the sorting options. Example: "Price by unit, ascending"undefined
Sorting options for the order-by block
Sorting optionValue
Relevance""
Top Sales Descending"OrderByTopSaleDESC"
Release Date Descending"OrderByReleaseDateDESC"
Best Discount Descending"OrderByBestDiscountDESC"
Price Descending"OrderByPriceDESC"
Price Ascending"OrderByPriceASC"
Name Ascending"OrderByNameASC"
Name Descending"OrderByNameDESC"
Collection"OrderByCollection"

The search-fetch-more block

The search-fetch-more block renders a Show More button that loads the following search results page. See the block props in the table below.

This block doesn't render if there is no next page.

The search-fetch-more prop
Prop nameTypeDescriptionDefault value
htmlElementForButtonenumSpecifies which HTML element displays for the Show more button component. Possible values: a (displays a <a> element with href and rel attributes) or button (displays a <button> element without href and rel attributes).button

The search-fetch-previous block

The search-fetch-previous block renders a Show Previous button that loads the previous search results page. See the block props in the table below.

This block doesn't render if there is no previous page.

The search-fetch-previous prop
Prop nameTypeDescriptionDefault value
htmlElementForButtonenumSpecifies which HTML element displays for Show previous button component. Possible values: a (displays a <a> element with href and rel attributes) or button (displays a <button> element without href and rel attributes).button

The search-products-count-per-page block

The search-products-count-per-page block shows the product count per search page. When declared, this block doesn't need any props.

The search-products-progress-bar block

The search-products-progress-bar block shows a progress bar of search results. When declared, this block doesn't need any props.

The sidebar-close-button block

The sidebar-close-button block is the Close button rendered on the top right of the mobile filter sidebar.

The sidebar-close-button props
Prop nameTypeDescriptionDefault value
sizenumberSize of the button icon.30
typestringType of the button icon.line

Customization

To apply CSS customization in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS handles
accordionFilter
accordionFilterContainer
accordionFilterContent
accordionFilterItemActive
accordionFilterItemBox
accordionFilterItemHidden
accordionFilterItemIcon
accordionFilterItemOptions
accordionFilterItemTitle
accordionFilterItem
accordionFilterOpen
accordionSelectedFilters
border
breadcrumb
buttonShowMore
categoriesContainer
categoryGroup
categoryParent
clearAllFilters
container
dropdownMobile
filter
filterAccordionBreadcrumbs
filterBreadcrumbsContent
filterBreadcrumbsText
filterBreadcrumbsItem
filterBreadcrumbsItemName
filterAccordionItemBox--{facetValue}
filterApplyButtonWrapper
filterAvailable
filterIsOpen
filterButtonsBox
filterClearButtonWrapper
filterContainer--{facetType}
filterContainer--b
filterContainer--c
filterContainer--priceRange
filterContainer--{selectedFilters}
filterContainer--{title}
filterContainer
filterIcon
filterItem--{facetValue}
filterItem--selected
filterItem
filterMessage
filterPopup
filterPopupArrowIcon
filterPopupButton
filterPopupContent
filterPopupContentContainer
filterPopupContentContainerOpen
filterPopupFooter
filterPopupOpen
filterPopupTitle
filterSelected
filterSelectedFilters
filterTotalProducts
filtersWrapper
filtersWrapperMobile
filterTemplateOverflow
filterTitle
filterTitleSpan
footerButton
galleryItem
galleryItem--custom
galleryItem--{displayMode}
galleryTitle
gallery
galleryLayoutSwitcher
galleryLayoutOptionButton
layoutSwitcher
loadingOverlay
loadingSpinnerInnerContainer
loadingSpinnerOuterContainer
orderByButton
orderByDropdown
orderByOptionItem
orderByOptionItem--selected
orderByOptionsContainer
orderByText
orderBy
productCount
progressBarContainer
progressBar
progressBarFiller
resultGallery
searchNotFoundInfo
searchNotFoundOops
searchNotFoundTerm
searchNotFoundTextListLine
searchNotFoundWhatDoIDo
searchNotFoundWhatToDoDotsContainer
searchNotFoundWhatToDoDots
searchNotFound
searchResultContainer
seeMoreButton
selectedFilterItem
showingProductsContainer
showingProductsCount
showingProducts
switch
totalProductsMessage
totalProducts
See also
VTEX App Store
VTEX IO Apps