vtex-apps / search-result

VTEX Search Result app

📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

Search Result

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

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

Configuration

To configure the VTEX Search Result, check the sections 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:

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

Now, you can use all the blocks exported by the search-result app. Check out the full list below:

search-result blocks

Block name	Description
search-result-layout	Enables you to build the search result page using its three children blocks: search-result-layout desktop, search-result-layout.mobile, and search-not-found-layout . It must be used in the store.search template since it uses the context provided by the VTEX Search API.
search-result-layout.customQuery	Used instead of search-result-layout in scenarios in which the search result will be 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	Builds the search result page structure for desktop mode.
search-result-layout.mobile	Builds the search result page structure for mobile mode. If the search-result-layout.mobile is not provided, the search-result-layout.desktop will be used instead.
search-layout-switcher	Enables mobile users to switch between the available layout modes.
search-not-found-layout	Builds the whole search result page structure for scenarios in which no result was fetched. It is rendered whenever users search for a term that doesn't return a product.
gallery	Displays the gallery with all the products found in the search.
gallery-layout-switcher	Logical block that allows users to switch between the available gallery's layouts. To know how to build your search results with multiple layouts, access the documentation.
gallery-layout-option	Defines how each layout option should be rendered for users. To know how to build your search results with multiple layouts, access the documentation.
not-found	Contains a text and a description for the page that was not found in the search. It must be declared as a child of search-not-found-layout.
search-content	Decides, behind the scenes, which block will be displayed: either the gallery block (if products are found) or the not-found block (if the selected filters lead to an empty search results page). This means that both gallery and not-found must be declared as search-content children.
store.not-found#search	When configured, it displays a 404 error message whenever the server cannot return what the browser request was or when it is configured not to handle that request.
search-products-count-per-page	Displays the total number of products being displayed on the search results page.
search-products-progress-bar	Displays a progress bar of products being displayed on the search results page.
order-by.v2	Allows users to choose the product ordination on the search results page.
filter-navigator.v3	Allows users to apply different filters to the search. On mobile, renders a button that, when clicked on, displays all available filters in a sidebar.
total-products.v2	Displays the total amount of products found for that search.
search-title.v2	Displays a title for the search that was done.
search-fetch-more	Displays the Show More button. This button is not rendered when the user is on the last page.
search-fetch-previous	Displays the Show Previous button. This button is not rendered when the user is on the first page.
sidebar-close-button	Displays an X button on the filter sidebar on mobile.

Adding the Search Result to page templates

The Search Result app data usually is displayed on search pages (store.search), but it can also be added on any other page.

When added to the search page, the block used must be the search-result-layout, since it fetches data provided by the template's current search context. If you want 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

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

On other pages

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

Defining how the search query data should be fetched

You need to define how the search results will be fetched before declaring the blocks into the search results layout.

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

If you use search-result-layout, the blocks will define the fetched data from the context. If what you are using is search-result-layout.customQuery, the props should be sent through the querySchema to configure the custom query.

Using search-result-layout:

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

Using search-result-layout.customQuery:

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

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

The context and querySchema props

Prop name	Type	Description	Default value
queryField	string	Query string of the search URL that defines the results that should be fetched in the custom query. For example: Blue. This prop only works if the mapField prop is declared as well.	undefined.
mapField	string	Search URL's map parameter to define which results should be fetched in the custom query, for example specificationFilter_100. This prop only works if the queryField prop is declared as well.	undefined
maxItemsPerPage	number	Maximum 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
orderByField	enum	Determines which order products must follow when displayed. The 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. The last option (OrderByTopSaleDESC) considers the number of sold units of the product in the past 90 days, taking into account only ecommerce orders (no physical stores orders) from order-placed events (e.g. without checking if the payment was approved). If the store has an app, it is possible to consider the events from the app as long as they are implemented on the store's side, they aren't implemented by default. In case 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.	""
hideUnavailableItems	boolean	Determines 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
facetsBehavior	string	Defines the filters' behavior. When set to Dynamic, it restricts the results according to the filters that the user has already selected. If set to Static, all filters will continue to be displayed to the user, even if there are no results.	Static
skusFilter	enum	Refines the SKUs returned for each product in the query. The fewer returned SKUs, the more performant your shelf query will be. Available value options: FIRST_AVAILABLE (returns only the first available SKU), ALL_AVAILABLE (returns all available SKUs), and ALL (returns all product's SKUs).	ALL_AVAILABLE
simulationBehavior	enum	Defines whether the search data will be up-to-date (default) or fetched using the Cache (skip). You should only use the last option if you prefer faster queries than the most up-to-date prices or inventory.	default
installmentCriteria	enum	Defines which price should be displayed when different installments are available. Possible values are: MAX_WITHOUT_INTEREST (displays the maximum installment option with no interest attached to it) or MAX_WITH_INTEREST (displays the maximum installment option whether it has interest attached to it or not).	"MAX_WITHOUT_INTEREST"
excludedPaymentSystems	string	List of payment systems that should not be considered when displaying the installment options to users. This prop configuration only works if the installmentCriteria prop was also declared. In case it was not, all available payment systems will be displayed regardless.	undefined
includedPaymentSystems	string	List of payment systems that should be considered when displaying the installment options to users. This prop configuration only works if the installmentCriteria prop was also declared. In case it was not, all available payment systems will be displayed regardless.	undefined

ℹ️ Pagination does not display results after page 50. You can configure it to display more products per page using the prop maxItemsPerPage by increasing the quantity of products on each page.

⚠️ 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 since the cache storage changes according to user interaction in each page.

You must define the query for the following search pages:

• Brand
• Department
• Category
• Subcategory

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

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

Defining your search results page's layout and behavior

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

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:

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

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

Prop name	Type	Description	Default value
hiddenFacets	object	Indicates which filters should be hidden. The possible values are in this table.	undefined
showFacetQuantity	boolean	Determines whether the resulting amount in each filter should appear beside its name on the filter-navigator.v3 block as (true) or (false)	false
showFacetTitle	boolean	Whether the facet title should appear on selected filters section on the filter-navigator.v3 block as (true) or (false)	false
blockClass	string	Unique block ID to be used in CSS customization	undefined
trackingId	string	ID to be used in Google Analytics to track store metrics based on the Search Result block.	Search result
mobileLayout	object	Controls how the search results page will be displayed to users using the mobile layout. The possible values are in this table.	undefined
defaultGalleryLayout	string	Name of the gallery layout to be used by default in the search results page. This prop is required when several layouts are explicitly defined by the gallery block. This prop's value must match the layout name defined in the name prop from layouts object.	undefined
thresholdForFacetSearch	number	The minimum number of facets must be displayed on the interface for a search bar to be displayed. If you declare 0, the search bar will always be displayed.	undefined
preventRouteChange	boolean	Keeps page customizations even when the user applies new filters. This prop will only change the URL’s query string rather than the entire URL, preventing a full page reload whenever filters are applied.	false

The mobileLayout object

Prop name	Type	Description	Default value
mode1	enum	Defines the default layout for the mobile search results page. Possible values are: normal, small or inline.	normal
mode2	enum	Defines which layout will be set for the mobile search results page when users click on the layout selector button. Possible values also are normal, small, or inline.	small

The hiddenFacets object

Prop name	Type	Description	Default value
brands	boolean	Determines whether Brand filters should be hidden (true) or not (false).	false
categories	boolean	Determines whether Category filters should be hidden (true) or not (false).	false
priceRange	boolean	Determines whether Price filters should be hidden (true) or not (false).	false
specificationFilters	object	Indicates which specification filters should be hidden. The possible values are in this table.	undefined

The specificationFilters object

Prop name	Type	Description	Default value
hideAll	boolean	Determines whether specification filters should be hidden (true) or not (false).	false
hiddenFilters	object	Object array of specification filters that should be hidden. The possible values are in this table.	undefined

The hiddenFilters object

Prop name	Type	Description	Default value
name	string	Name of the specification filter that you want to hide.	undefined

Using the Flex Layout to build your search results page

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

Find below the available blocks to build your store's search results page and their existing props as well.

The gallery block

The gallery block defines how fetched items should be displayed 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, it is possible to use the layouts prop to provide several layouts to the page, allowing your store to have different arrangements of items according to what best fits 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.

To understand how to build your search results with multiple layouts using the layouts prop, access the documentation.

The gallery-layout-switcher props

Prop name	Type	Description	Default value
layouts	object	List of layouts used to arrange and display the items on the search results page. If no value is provided, the gallery block must receive a product-summary-shelf block instead as a child. Check this table for props of this block.	undefined
undefined	block	Defines which blocks should be rendered 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 be rendered in that specific layout.	undefined
customSummaryInterval	number	Defines the item interval at which the Gallery should render a custom product-summary block. For example, declaring 5 would render a custom block at every four items rendered, as shown on this image. It is important to know that this prop doesn't support layouts yet.	undefined
CustomSummary	block	Defines a block to be rendered according to the interval defined by the customSummaryInterval prop.	undefined
preferredSKU	PreferredSKUEnum	Controls which SKU will be initially selected in the product summary.	"FIRST_AVAILABLE"

For PreferredSKUEnum:

Name	Value	Description
First Available	FIRST_AVAILABLE	First available SKU in stock found or first SKU without stock.
Last Available	LAST_AVAILABLE	Last available SKU in stock found or last SKU without stock.
Cheapest	PRICE_ASC	Cheapest SKU in stock found or first SKU without stock.
Most Expensive	PRICE_DESC	Most expensive SKU in stock found or first SKU without stock.

⚠️ There's a way to select which SKU should take preference over this prop. You can create a product specification (field) and per product assign the value of the desired SKU to be initially selected. Keep in mind that if the specification doesn't exist or if the value is empty, it will use the preferredSKU prop as fallback. You can read more about it, and how to implement it in Recipes

The layouts object

Prop name	Type	Description	Default value
name	string	Layout name. This value must be unique i.e. not equal to other layout names declared in the gallery block.	undefined
component	string	Names the undefined prop from the gallery block, which is responsible for declaring the block to be rendered in this layout. This prop's value can be any of your choosing as long as it is PascalCased i.e. has the first letter of each word in its name 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 in order to understand the underlying logic behind this prop.	undefined
itemsPerRow	number / object	Number of items to be displayed in each row of this layout. This prop works with responsive values, therefore it also accepts an object with different numbers for desktop, tablet or phone screen sizes (see the table below).	undefined

The itemsPerRow object

Prop name	Type	Description	Default value
desktop	number	Number of slides to be shown on desktop devices.	undefined
tablet	number	Number of slides to be shown on tablet devices.	undefined
phone	number	Number of slides to be shown on phone devices.	undefined

Example of a gallery block

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

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. It's essential to define the options in the same order as the layouts so that the accessibility features can work properly.

The gallery-layout-option block

This block defines how each layout option should be rendered for users.

Prop name	Type	Description	Default value
name	string	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

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

filter-navigator.v3 block

This block renders a filter selector for the fetched results.

Prop name	Type	Description	Default value
categoryFiltersMode	enum	Determines whether the category filters should use the href attribute with the category pages' URLs (href) or not (default). By default, the filters use HTML divs with role="link". You may change this behavior by setting this prop's value to href, thereby creating a link building to improve the SEO ranking of your category pages.	default
layout	enum	Determines whether the Filter Navigator layout should be responsive (responsive) or not (desktop). You may use desktop when the Filter Navigator is configured to display in a drawer.	responsive
maxItemsDepartment	number	Maximum number of departments to be displayed before the See More button is triggered.	8
maxItemsCategory	number	Maximum number of category items to be displayed before the See More button is triggered.	8
initiallyCollapsed	boolean	Makes the search filters start out collapsed (true) or open (false).	false
openFiltersMode	enum	Defines how many filters can be opened simultaneously on the Filter Navigator component. The possible values are many (more than one filter can be opened simultaneously) and one (only one filter can be opened). Notice that if one is declared, all filters will collapse before user interaction, regardless of the value passed to the initiallyCollapsed prop.	many
filtersTitleHtmlTag	string	HTML tag for the filter's title.	h5
scrollToTop	enum	Scrolls the page to the top (auto or smooth) or not (none) when selecting a facet.	none
truncateFilters	boolean	Determines whether a filter selector with more than 10 filter options should shorten the list and display a See more button (true) or not (false).	false
closeOnOutsideClick	boolean	Determines whether the Filter Navigator component should be closed when users click outside of it (true) or not (false). This prop only works if the openFiltersMode prop is set as one.	false
appliedFiltersOverview	enum	Determines whether an overview of the applied filters should be displayed (show) or not (hide).	hide
totalProductsOnMobile	enum	Determines whether the Filter Navigator should display the total number of products on mobile devices (show) or not (hide).	hide
fullWidthOnMobile	boolean	Determines whether the filter-navigator.v3 will be rendered on mobile using the full screen width (true) or not (false).	false
navigationTypeOnMobile	enum	Defines how mobile users should navigate on the filter selector component. The 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
updateOnFilterSelectionOnMobile	boolean	Determines whether the search results on mobile should be updated according to filter selection (true) or not (false). This prop only works if the preventRouteChange prop is declared as true.	false
drawerDirectionMobile	Enum	Determines whether the search filters on mobile opens to the left (drawerLeft) or to the right (drawerRight)	drawerLeft
showClearByFilter	boolean	Determines whether a clear button (responsible for erasing all filter options selected by the user) should be displayed alongside the filter name (true) or not (false).	false
showClearAllFiltersOnDesktop	boolean	Determines whether a clear button should be displayed (true) or not (false). This button will reset all selected filters.	false
priceRangeLayout	enum	Determines whether a text field enters the desired price range should be displayed (inputAndSlider) or not (slider).	slider
facetOrdering	array	Array of objects (see below) that applies custom sorting rules for filters. The default behavior sorts the items by quantity, in descending order.	undefined
showQuantityBadgeOnMobile	boolean	Displays a badge for mobile users indicating how many active filters there are.	false

• facetOrdering object:

Prop name	Type	Description	Default value
key	string	Facet key that will be sorted. Possible values are category-1, category-2, category-3 (for department, category and subcategory), brand or a product specification name.	undefined
orderBy	enum	Field from facets that should be used when sorting the entries. Possible values are name and quantity.	undefined
order	enum	Determines whether the filter should be sorted by ascending (ASC) or descending (DESC) order.	ASC

For example:

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

⚠️ The facetOrdering prop will conflict with the enableFiltersFetchOptimization flag on vtex.store, since it returns only the top filter values ordered by count. In order to achieve the desired outcome with facetOrdering, it is necessary to set enableFiltersFetchOptimization as false on vtex.store Admin settings.

The order-by block

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

The order-by props

Prop name	Type	Description	Default value
specificationOptions	[object]	Indicates which sorting options by specification will be displayed. This only works for stores using [email protected]	undefined
hiddenOptions	[string]	Indicates which sorting options will be hidden. (e.g. ["OrderByNameASC", "OrderByNameDESC"])	undefined
showOrderTitle	boolean	Determines whether the selected order value (e.g. Relevance) will be displayed (true) or not (false).	true

• specificationOptions Object:

  Prop name	Type	Description	Default value
  value	string	Value that will be sent for sorting in the API. It must be in the format {specification key}:{asc/desc}. For example: "size:desc" or "priceByUnit:asc".	undefined
  label	string	Label that will be displayed in the sorting options. E.g.: "Price by unit, ascending"	undefined

Sorting options for the order-by block

Sorting option	Value
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 used to load the results of the next search results page. Check the block props in the table below.

ℹ️ This block is not rendered if there is no next page.

The search-fetch-more prop

Prop name	Type	Description	Default value
htmlElementForButton	enum	Which HTML element will be displayed for Show more button component. Possible values are: 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 used to load the results of the previous search results page.

ℹ️ This block is not rendered if there is no previous page.

The search-fetch-previous prop

Prop name	Type	Description	Default value
htmlElementForButton	enum	Which HTML element will be displayed for Show previous button component. Possible values are: 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. This block does not need any prop when declared.

The search-products-progress-bar block

The search-products-progress-bar block shows a progress bar of search results. This block does not need any prop when declared.

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 name	Type	Description	Default value
size	number	Size of the button icon.	30
type	string	Type 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

Contributors ✨

Thanks goes out to these wonderful people (emoji key):

grupo-exito-ecommerce 💻

Ygor Neves 💻

Marcos André Suarez Ewbank 💻

Beatriz Miranda 💻

felipeireslan 💻

Julio Moreira 💻

Antonio Cervelione 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

search-result's Issues

Add to Category and Brand Page

SearchResult must work in the Category and Brand page.

Suggestion:

• Pass a prop page to ExtensionPoint container
• Add treatment based on the page param to the function getPagesArgs

Filters issue

Describe the bug

On the product listing page, if there are more than 36 products per page, there is a display issue. We have set to display 36 products per page. After changing the page, if you return to that page with the same filters, all previous products are displayed, instead of only 36 products.

To Reproduce
Steps to reproduce the behavior:

1. Go to www.distinctive.ro
2. Click on Femei > Imbracaminte
3. Filter Subcategorie > Geci & Jachete
4. Scroll down and click on "Arata mai multe". Scroll down and you will see this message "Ai vazut 63 articole din 63"
5. Now click on the logo and follow again the first 3 steps

Instead of displaying 36 products, all 63 are displayed. In addition, there is the "Show more" button that displays the products on page 2, although it is already displayed.

This problem persists on all devices
If you perform a full refresh everything it's ok.

is there a way to customize the page title?

I'm developing a theme and I would like to customize the page title for every kind of result also in other pages, I was wondering if it's possible to customize it.

The image above shows the search on the title follows by -undefined.
Thanks in advance.

Change Collapse behavior so that only one filter is open

Is your feature request related to a problem? Please describe.
When we click on a filter that has a Collapse, we see that it is possible to open several at the same time

• When we open several filters at the same time, depending on the layout to be followed, the filters are overlapping
  Example: https://www.awesomescreenshot.com/video/298755?key=30bdada05f19cc03a0c708d218f20971

Describe the solution you'd like
A solution would be a property that can be passed to the filter, or a change in the way the component's state is being managed: FilterOptionTemplate, adding some kind of context to the filters

Additional context
Example of how it would look:
https://www.tokstok.com.br/acessorios

See that only one filter is currently open

Order by BestDiscount not working

Describe the bug
If you select to sort products by Discount, they are not displayed properly.
https://distinctive.myvtex.com/Femei?order=OrderByBestDiscountDESC

To Reproduce
Steps to reproduce the behavior:

1. Go to Femei/Barbati/etc
2. Click on 'Sorteaza'
3. Select 'Discount'
4. See results

Expected behavior
Products should be displayed from the highest discount to the lowest

Filter Selection on Mobile Does not allow for seperate styling of the product name and the product price

Describe the bug
On Desktop, you are able to style the product name and price independently because they are represented by two html elements.
You cannot style the product name and price independently on mobile as they are represented by two html nodes

Expected behavior
I would like the product price and product name to have seperate html elements so I can style them independently

Screenshots
Desktop:

Mobile

Additional context
Filter navigator configuration

  "filter-navigator.v3#search-result": {
    "blocks": ["sidebar-close-button"],
    "props": {
      "blockClass": "searchResult",
      "truncateFilters": true,
      "showClearByFilter": false,
      "fullWidthOnMobile": false,
      "navigationTypeOnMobile": "collapsible",
      "appliedFiltersOverview": "show",
      "totalProductsOnMobile": "show",
      "updateOnFilterSelectionOnMobile": true,
      "priceRangeLayout": "slider",
      "initiallyCollapsed": true
    }
  }

Change OrdeBy default option via Site Editor

What are you trying to accomplish? Please describe.
I want to set and change default orderBy option via site editor, something like we do inside store.search context props called orderByField

What have you tried so far?

I've tried to change using that field, but looking into code this looks like something to set a "title" inside sort by option

I also see this option: https://help.vtex.com/tutorial/can-i-put-my-products-in-an-order-which-i-choose--qfWKX2ZekoEoayiyo0uuA but this needs to be hardcoded inside url, is something like this, but defined via site editor.

Allow multiple filters in a same selector

Search Result must allows the filtering by many categories, departments or specification filters.

Add current page and total pages on Pagination Button

Expected Behavior

We need to be able to show the customer which page he is on and which page is the last.

Current Behavior

Only 'Load More' appears

Possible Solution

Add these numbers using the records filtered.

Search by attribute?

I can't configure the application to search for attributes. We have books on the site with Author attribute. If I try to search by the author's name, it partially returns to me products (out of 20 books in total written by that author, it shows me only 10 for example) and others that have nothing to do with the author or the search word.

Clear filters button

Expected Behavior

A custom button on the top of the side filters in search results to clear all filters selected

Current Behavior

There's no button or action that allow us to do that.

Possible Solution

A button that will be displayed on the top of side filters that clear all filters selected when clicked

Some examples below for different types

Category Products are not Supported in IE 11

Expected Behavior

Products will display in category pages and are able to be clicked on.

Current Behavior

Page is not displayed and products cannot be clicked on.

Possible Solution

Steps to Reproduce (for bugs)

Open an workspace with a browser that is running IE 11 and navigate to a category page. You can use this link as an example:
http://ecowaterqa.myvtex.com/

Context

A client is using IE11 internally and are not able to view products and categories

Your Environment

• Link to your project:
  http://ecowaterqa.myvtex.com/

Show Available Category Filters in a Separate Section with Images

The store owner can show available category filters in the left panel (this would be the default behavior), or above the product gallery as shelves along with images.

Expected Behavior

There will be a configuration option to choose between the two display modes. The default mode will be the existing one. The new mode will show the category tree itself by listing top-level ones, and displaying the children of each with the relevant images.

Current Behavior

As of now, the category filters are shown in the left panel.

Possible Solution

We can introduce a new component to render this layout. The logic for filtering has to be reusable by this component. We have to use the category tree to get the children of each category, and reject the categories which are not available in the filtered categories returned by the above logic. The CategoriesHighlights from vtex.store-components can be used to render the categories with images.

Context

Buyers are often more interested in categories rather than brands and specifications. They usually first look for a category, and then go for brands and specifications. It can be beneficial for a customer to do a faster search by highlighting category filters in the search results.

Sort Issues ( Best Discount & Price )

Describe the bug
Hello. We have 2 problems with sorting on the website https://distinctive.ro

1. Order by Price DESC
Everything works correctly on the category page (ex: https://www.distinctive.ro/Femei/Incaltaminte?order=OrderByPriceDESC). The ordering is done accordingly, according to the final price.

If we select a filter (Brand> Sketchers), the sorting is done according to the initial price.
URL: https://www.distinctive.ro/femei/incaltaminte/skechers?initialMap=c,c&initialQuery=femei/incaltaminte&map=category-1,category-2,brand&order=OrderByPriceDESC

2. Order By Best Discount

It also works properly on the category page
URL: https://www.distinctive.ro/Femei/Incaltaminte?order=OrderByBestDiscountDESC

If we select a filter (Brand> Sketchers), there are products that have no discount among the discount products.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://www.distinctive.ro/
2. Select Femei > Incaltaminte
3. Click on "Sorteaza" and select "Discount" or "Cel mai mare pret"
4. See the results ( all good here )
5. Select "Brand > Skechers" from filters
6. See the results

Screenshot -> OrderByBestDiscount

Screenshot -> OrderByPriceDESC

Collections - Page title issue

Describe the bug
On the product listing page, when you filter by a collection, the title of the collection is displayed in the page title, instead of its name.

https://www.distinctive.ro/184?map=productClusterIds&order=OrderByScoreDESC

To Reproduce
Steps to reproduce the behavior:

1. Go to distinctive.ro
2. Click on Femei/Barbati/Fete/Baieti/Casa & Deco in menu
3. Click on Outlet
4. See the page title

Expected behavior
The collections name should appear as page title.

Classname indetifier to active filters

Expected Behavior

We need to be able to identify which filters are active in user filtering.

Current Behavior

There is no namespace to distinguish this behavior.

Possible Solution

Add in the filter span a nameSpace activeFilter

Add content loader to the filters

Replace `useShouldResetPage` to a reducer state model

Describe the solution you'd like
Create a reducer state model to replace the useShouldResetPage hook. Then you can just dispatch the reset action when needed.

include sku attribute "IsKit"

we need to visualize the attribute "isKit" to determine if a product is or not, if possible we could also see "KitItems"

currently we cannot distinguish between a product kit from one that is not

the link to the project is: https://aguabendita.myvtex.com

Prop 'updateOnFilterSelectionOnMobile: false' not works with "layout":"desktop"

I use filter-navigator.v3 on mobile having props layout set as desktop and updateOnFilterSelectionOnMobile set as false.
Filters are applied immediately after they are selected.

My related code:
...
"filter-navigator.v3#mobile":{
"props":{
"layout":"desktop",
"initiallyColapsed": false,
"preventRouteChange":true,
"fullWidthOnMobile": true,
"updateOnFilterSelectionOnMobile":false
}
},
...

Undefined Variables into index.js causes Rendering Errors

Describe the bug

When access the department, category or search page, in some cases, the categories variable is undefined and its cause a rendering error. The error occours in most the case on annonimous mode of browser. I belive that error happens when the GraphQL Query doesn't load the information of CategoriesTrees in time and the data doesn't cached.

Possible Solution

Add a condition to blocks execution of the script, e.g typeof categoriesTrees === "undefined" ? /* Loading / : / Execute */

Screenshots

Steps to Reproduce (for bugs)

1. Go to https://shop.eicom.org a online store using StoreBuilder and all of store-theme App components
2. Go to a department or category page.
3. Open the DevTools (Inspect the page) and check the "console" tab to verify any errors
4. This error can be more viewed in a Safari Browser.

Your Environment

• OS: Mac Mojave, Mac High Sierra, Windows 10.
• Browser: Safari 12, Safari 11.1, Chrome 75

Sort by price with price list

Describe the bug

If I have a different price list, which also includes discounts, sorting by price does not work properly. This is done according to the initial price, not according to the discount.

Missing CSS handler for price range slider

Describe the bug
The active range pill is missing a CSS handler. It's the div nested into vtex-slider__base

Screenshots

Page overflow doesn't reset when sorting is selected

Expected Behavior

On mobile viewports, when I tap on "Ordenar", the body class vtex-filter-popup-open is added to body, to prevent scrolling the page. When that same button is tapped again, that same class is removed, as expected. And when an option on the popup is tapped, that same class should be removed. The same behavior can be seen on "Filtros", which is working correctly.

Current Behavior

When a sorting option is selected, the popup closes but the vtex-filter-popup-open class is not removed from the body, thus locking the user on that page without being able to scroll down.

Possible Solution

Handle the adding and removing of body classes together with the function that handles opening and closing the popup, insted of it being on a specific button click handler.

Steps to Reproduce (for bugs)

On a mobile device (or desktop browser emulating a mobile screen)

1. Go to any search page.
2. Tap on "Ordenar", popup opens and body class is added.
3. Tap on "Ordenar" again, popup closes and body class is removed, as expected.
4. Tap on "Ordenar", but this time choose one of the options. Popup closes but the body class stays.

Context

That locks the user on the page completely preventing scrolling, thus impacting negatively on UX. The only way to get out of that is to navigate to another page, if the user is lucky to have a navigable link on the limited view it has of the page, or by using the browser backwards navigation feature.

Your Environment

• Version used: 2.4.1
• Environment name and version (e.g. Chrome 39, node.js 5.4): Version 70.0.3538.110 (Official Build) (64-bit), emulating a mobile device
• Operating System and version (desktop or mobile): macOS High Sierra
• Link to your project: https://penseavantitestes.myvtex.com/roupas/d

Use pagination from cache instead of react state

Is your feature request related to a problem? Please describe.

• Go to https://master--storecomponents.myvtex.com/apparel---accessories/
• Click on show more
• Click on the Home & Decor category
• Click on the Apparel & Accessories
• Click on show more again. You will notice that the paginated products are duplicated

Describe the solution you'd like
This bug is happening because the apollo client is caching the paginated result. In other words, when you navigate to the Apparel & Accessories` again, the react apollo returns the page 1 and 2.

To solve this problem, we need to save the pagination on the cache instead of using the pageState

The step by step to solve this is:

1. Add from and to to the productSearch schema
2. Return the proper from and to on all search resolvers
3. Add from and to to the searchResultV3
4. Change the search-result to use the from and to from the query instead of the pageState

Sort By options container opened by default

It's not an issue but for a better look and feel for the client's layout, have a prop to be able to set the sort by options containers to load opened by default.

maxItemsPerPage doesn't work on StoreFront and blocks.

Expected Behavior

Ao tentar passar as props pelo blocks tanto dentro do objeto querySchema quanto fora o componente parece não respeitar esse número, possuí o mesmo comportamento no StoreFront.

Side filter option collapsed

Is there a possibility that we configure the collapsed side filter by default?

Ex:

"specificationFilters": { "closedFilters": true }

OBS: closedFilters by default is false

bug on v3.125 or later

Describe the bug
Trying to link v 3.125 or v3.126 there is an error going on, but going back to v3.124 it works:

video:
https://drive.google.com/file/d/1n9x1uwZQ-P48VxPmdVhghGo5baQ7e0FL/view

I already opened on vtex support: #896532

Search result doesnt display products when category name is used for searching

What are you trying to accomplish? Please describe.
We want to display products under a specific category in the search results page when user enters category name in the search bar.
What have you tried so far?

1. Added 'vtex.search-result' as dependency in manifest.json.
2. Added the Search Result to page templates.
   "store.search": {
   "blocks": ["search-result-layout"]
   }
3. Defined how the search query data should be fetched
   "store.search#category": {
   "blocks": ["search-result-layout"],
   "props": {
   "context": {
   "skusFilter": "FIRST_AVAILABLE",
   "simulationBehavior": "skip"
   }
   }
   },
4. Followed all the steps in https://vtex.io/docs/components/all/[email protected]/

Additional info
Code Sample (flex-layout.row#category-content-block", "flex-layout.row#recommended-category-heading", "flex-layout.row#recommended-category-block" are custom blocks):

{
"store.search": {
"blocks": ["search-result-layout", "back-to-top-button"],
"props": {
"context": {
"skusFilter": "ALL",
"simulationBehavior": "skip"
}
}
},

"store.search#brand": {
"blocks": ["search-result-layout"],
"props": {
"context": {
"orderByField": "OrderByReleaseDateDESC",
"hideUnavailableItems": true,
"maxItemsPerPage": 10,
"skusFilter": "ALL",
"simulationBehavior": "skip"
}
}
},

"store.search#department": {
"blocks": ["search-result-layout"],
"props": {
"context": {
"skusFilter": "ALL",
"simulationBehavior": "skip"
}
}
},

"store.search#category": {
"blocks": ["search-result-layout", "flex-layout.row#category-content-block", "flex-layout.row#recommended-category-heading", "flex-layout.row#recommended-category-block", "back-to-top-button"],
"props": {
"context": {
"skusFilter": "ALL",
"simulationBehavior": "skip"
}
}
},

"store.search#subcategory": {
"blocks": ["search-result-layout", "flex-layout.row#category-content-block", "flex-layout.row#recommended-category-heading", "flex-layout.row#recommended-category-block", "back-to-top-button"],
"props": {
"context": {
"skusFilter": "ALL",
"simulationBehavior": "skip"
}
}
},

"flex-layout.row#recommended-category-heading": {
"children": ["rich-text#recommended-category-heading"],
"props": {
"blockClass": "recommended-category-heading"
}
},

"rich-text#recommended-category-heading": {
"props": {
"text": "Other categories you may also like",
"blockClass": "recommended-category-head-text"
}
},

"search-result-layout": {
"blocks": [
"search-result-layout.desktop",
"search-result-layout.mobile",
"search-not-found-layout"
]
},

"search-result-layout.desktop": {
"children": [
"flex-layout.row#searchbread",
"flex-layout.row#searchtitle",
"flex-layout.row#result",
"search-blog-articles-list.wordpress"
],
"props": {
"pagination": "show-more",
"preventRouteChange": false,
"defaultGalleryLayout": "grid"
}
},
"flex-layout.row#searchbread": {
"children": ["breadcrumb.search"],
"props": {
"preserveLayoutOnMobile": true,
"fullWidth": true,
"blockClass": "breadcrumb"
}
},
"flex-layout.row#searchtitle": {
"children": ["search-title.v2"],
"props": {
"blockClass": "search-title"
}
},
"flex-layout.row#result": {
"children": [
"flex-layout.col#filter",
"flex-layout.col#content"
],
"props": {
"preventHorizontalStretch": true,
"fullWidth": true,
"blockClass": "search-result"
}
},
"flex-layout.col#filter": {
"children": ["filter-navigator.v3"],
"props": {
"blockClass": "filterCol"
}
},
"flex-layout.col#content": {
"children": [
"flex-layout.row#searchinfo",
"flex-layout.row#fetchprevious",
"flex-layout.row#products",
"flex-layout.row#fetchmore"
],
"props": {
"width": "grow",
"preventVerticalStretch": true,
"blockClass": "right-content"
}
},
"flex-layout.row#searchinfo": {
"children": ["flex-layout.col#productCount", "flex-layout.col#orderByAndSwitcher"],
"props": {
"blockClass": "orderByAndSwitcher"
}
},
"flex-layout.col#orderByAndSwitcher": {
"children": ["order-by.v2", "gallery-layout-switcher"],
"props": {
"horizontalAlign": "right",
"preventHorizontalStretch": true,
"blockClass": "orderByAndSwitcher",
"colGap": 3
}
},
"flex-layout.col#order": {
"children": ["order-by.v2"],
"props": {
"blockClass": "orderBy"
}
},
"flex-layout.col#switcher": {
"children": ["gallery-layout-switcher"],
"props": {
"blockClass": "Switcher"
}
},
"flex-layout.col#productCount": {
"children": ["total-products.v2"],
"props": {
"blockClass": "productCountCol"
}
},
"flex-layout.row#fetchprevious": {
"props": {
"marginBottom": 3
},
"children": ["search-fetch-previous"]
},
"flex-layout.row#fetchmore": {
"props": {
"marginTop": 3
},
"children": ["search-fetch-more"]
},
"flex-layout.row#products": {
"children": ["search-content"]
},
"search-content": {
"blocks": ["gallery", "not-found"]
},

"search-result-layout.mobile": {
"children": [
"flex-layout.row#searchbread",
"flex-layout.row#searchinfomobile",
"flex-layout.row#productCountMobile",
"flex-layout.row#fetchprevious",
"flex-layout.row#contentmobile",
"flex-layout.row#fetchmore"
],
"props": {
"pagination": "show-more",
"mobileLayout": {
"mode1": "small",
"mode2": "normal"
},
"defaultGalleryLayout": "grid"
}
},
"flex-layout.row#contentmobile": {
"children": ["search-content"],
"props": {
"preserveLayoutOnMobile": true
}
},

"flex-layout.row#searchinfomobile": {
"children": [
"flex-layout.row#searchtitle",
"flex-layout.col#orderByMobile",
"flex-layout.col#filterMobile"
],
"props": {
"preserveLayoutOnMobile": true,
"colSizing": "auto",
"colJustify": "around",
"blockClass": "searchinfomobile"
}
},

"flex-layout.col#orderByMobile": {
"children": ["order-by.v2"],
"props": {
"blockClass": "orderByMobileCol"
}
},

"flex-layout.row#productCountMobile": {
"children": ["total-products.v2", "flex-layout.col#switcherMobile"],
"props": {
"blockClass": "productCountMobileRow"
}
},

"flex-layout.col#filterMobile": {
"children": ["filter-navigator.v3"],
"props": {
"blockClass": "filterMobileCol"
}
},
"flex-layout.col#switcherMobile": {
"children": ["gallery-layout-switcher"],
"props": {
"verticalAlign": "middle"
}
},
"search-not-found-layout": {
"children": ["flex-layout.row#searchbread", "flex-layout.row#notfound-searchblocks"]
},

"flex-layout.row#notfound": {
"children": ["not-found"],
"props": {
"fullWidth": true
}
},
"flex-layout.row#notfound-searchblocks": {
"children": ["rich-text#search-not-found", "rich-text#search-again", "flex-layout.row#searchbarnotfound", "rich-text#suggestions_heading", "rich-text#suggestions"],
"props": {
"blockClass": "notfound-searchblocks"
}
},
"flex-layout.row#searchbarnotfound": {
"children": ["search-bar"],
"props": {
"blockClass": "no-result-searchbar"
}
},
"rich-text#search-not-found": {
"props": {
"text": "Sorry, no results found",
"textPosition": "CENTER",
"textAlignment": "CENTER",
"font": "t-heading-3",
"blockClass": "no-result-heading"
}
},
"rich-text#search-again": {
"props": {
"text": "Search Again",
"textPosition": "CENTER",
"textAlignment": "CENTER",
"font": "t-heading-6",
"blockClass": "search-again-heading"
}
},
"rich-text#suggestions_heading": {
"props": {
"text": "Suggestions",
"textPosition": "CENTER",
"textAlignment": "CENTER",
"font": "t-heading-6",
"blockClass": "suggestions-heading"
}
},
"rich-text#suggestions": {
"props": {
"text": "- Make sure all words are spelled correctly.\n- Try different keywords.\n- Try more general keywords.",
"textPosition": "CENTER",
"textAlignment": "CENTER",
"font": "t-heading-6",
"blockClass": "suggestion-list"
}
},
"breadcrumb": {
"props": {
"showOnMobile": true,
"homeIconSize": 20,
"caretIconSize": 10
}
},
"breadcrumb.search": {
"props": {
"showOnMobile": true,
"homeIconSize": 20,
"caretIconSize": 10
}
},

"gallery": {
"props": {
"layouts": [
{
"name": "grid",
"component": "GridSummary",
"itemsPerRow": {
"(min-width:1300px)": 4,
"desktop": 4,
"tablet": 3,
"phone": 2
}
},
{
"name": "list",
"component": "ListSummary",
"itemsPerRow": 1
}
],
"ListSummary": "product-summary.shelf#listLayout",
"GridSummary": "product-summary.shelf"
}
},
"gallery-layout-switcher": {
"children": [
/*
* For accessbility to work properly,
* It's important to define the options in the same order as the layouts
*/
// "gallery-layout-option#grid",
// "gallery-layout-option#list"
]
},
"gallery-layout-option#grid": {
"props": {
"name": "grid"
},
"children": [
"icon-grid",
"responsive-layout.desktop#textOptionGrid"
]
},
"gallery-layout-option#list": {
"props": {
"name": "list"
},
"children": [
"icon-inline-grid",
"responsive-layout.desktop#textOptionList"
]
},
"responsive-layout.desktop#textOptionGrid": {
"children": [
"rich-text#option-grid"
]
},
"responsive-layout.desktop#textOptionList": {
"children": [
"rich-text#option-list"
]
},
"rich-text#option-grid": {
"props": {
"text": "Grid",
"textColor": "c-auto",
"blockClass": "layout-option"
}
},
"rich-text#option-list": {
"props": {
"text": "List",
"textColor": "c-auto",
"blockClass": "layout-option"
}
},
"flex-layout.row#category-content-block": {
"children": ["flex-layout.col#category-content-block"],
"props": {
"blockClass": "category-content-block"
}
}
}

Department page side menu error v1

Department page side menu error

When the category has hifen as " sala de estar" the side filter does not work properly it does not make the search

it seems that when it has hifen it of some error in the assembly of the side menu

Possible Solution

Steps to Reproduce (for bugs)

Context

Your Environment

• Version used:
• Environment name and version (e.g. Chrome 39, node.js 5.4):
• Operating System and version (desktop or mobile): desktop
• Link to your project: https://avantiprojetos2503--madesa.myvtex.com/cozinha

Filter items in alphabetical order

Is your feature request related to a problem? Please describe.
Yes, many clients requests this, it will be easier for customers to see filter items in order.

Describe the solution you'd like
Filter items in Filter Navigator to be displayed in alphabetical order.

Support to PriceRange filter

Price Range on Mobile Navigator to not be inside of an accordion

Is your feature request related to a problem? Please describe.
On desktop, the price range selector in the filter navigator is not an accordion. But on mobile the price range selector is in an accordion, this is a worse user experience.

Describe the solution you'd like
I would like the price range selector of the filter navigator on mobile to not be within an accordion

Additional context
Current Desktop Implementation:

Current Mobile Implementation:

Filter Navigator Configuration:

"filter-navigator.v3#search-result": {
    "blocks": ["sidebar-close-button"],
    "props": {
      "blockClass": "searchResult",
      "truncateFilters": true,
      "showClearByFilter": false,
      "fullWidthOnMobile": false,
      "navigationTypeOnMobile": "collapsible",
      "appliedFiltersOverview": "show",
      "totalProductsOnMobile": "show",
      "updateOnFilterSelectionOnMobile": true,
      "priceRangeLayout": "slider",
      "initiallyCollapsed": true
    }
  }

Filter name identifier

Expected Behavior

A identifier class name or data name in each filter type in filter navigator

Current Behavior

All filters are rendered without any type of identifier don't allowing us to have different customization over then.

Possible Solution

Since filters are Product fields and SKUs I would say to concat the name of the SKU/Product Fields in the wrapper.

hideUnavailableItems not working

Describe the bug
Although the prop is used in the search context, unavailable items are still showing.

To Reproduce
Steps to reproduce the behavior:

Use following code:

"store.search#category": { "blocks": ["search-result-layout"], "props": { "context": { "maxItemsPerPage": 36, "skusFilter": "ALL", "simulationBehavior": "skip", "__unstableProductOriginVtex":true, "hideUnavailableItems":true } } },
Prop is added to all interfaces (category, department, brand, subcategory)

Test url: https://supermercato.myvtex.com/produse-de-cur%C4%83%C8%9Benie (see row 4, column 3, product "Degresant Chanteclair Universal Marsiglia 5L"

Expected behavior
Unavailable items should be hidden from search-results.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop environment:

System:
OS: macOS 10.15.6
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Memory: 2.72 GB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.15.0 - /usr/local/bin/node
Yarn: 1.22.4 - ~/.yarn/bin/yarn
npm: 6.13.4 - /usr/local/bin/npm
Browsers:
Chrome: 85.0.4183.102
Firefox: 76.0.1
Safari: 13.1.2

Thank you!

Clear filters & Apply redirects to homepage

Describe the bug
If I open the filters on the listing page on mobile and I press "Clear filters" button and "Apply", it redirects me to homepage with the following parameters ?fuzzy=0&operator=and

To Reproduce

1. Go to distinctive.myvtex.com/Femei/Imbracaminte
2. Click on 'Filtreaza'
3. Click on 'Sterge Filtre'
4. Click on 'Aplica'

Expected behavior
Refresh the page without any active filters.

Add an option to display the SKU that corresponds to the search filters as the first option

Please add an option to display the sku that corresponds to the search filters as the first option.

Currently, the sku-selector always shows the same sku regardless of the selected filter

Query value seems to be ignored

Expected Behavior

The app should respect the options provided to StoreFront, like "Query" and "Other Query Strings".

Current Behavior

If I go to StoreFront and type a valid query on the input, when I access the URL that I created a configuration for, it does not load the results with the query that was filled on storefront.
The prop does show up on ReactDevTools when inspecting the SearchResultQueryLoader component, inside props.querySchema as queryField and restField.

Doing the same exact query on the API works, example /api/catalog_system/pub/products/search/whatever?map=ft&fq=productClusterIds:137

Possible Solution

N/A

Steps to Reproduce (for bugs)

1. Create a collection on CMS and get it's ID
2. On StoreFront, access a search term that would otherwise be empty, like "carnaval"
3. Create a configuration, choose "Apply configuration for:" "This URL"
4. On either "Query" or "Other Query Strings" fields, input a valid filter that works on the API, like fq=productClusterIds:{{cluster id}}
5. Save and access that same search page on the dreamstore frontend, it will still show up as an empty search.

Context

I'm trying to create an URL that loads an specific collection, like it is possible to do on CMS, by creating the URL and attributing a product cluster to it

Your Environment

• Version used: 1.x
• Environment name and version (e.g. Chrome 39, node.js 5.4): Chrome 71
• Operating System and version (desktop or mobile): macOS High Sierra
• Link to your project: N/A

Page scrollable when accordionFilters is open

Describe the bug
On the search page, Mobile device, when you click on "filter", the drawer with the filters appears. It adds the class "overflow-hidden-ns" to the body (which is correct) but the class is not defined. Because of this, you can scroll the page when the filter drawer is open, but you cannot scroll the filters.

To Reproduce
Steps to reproduce the behavior:

1. Go to category page (mobile)
2. Click on "filter"
3. Try to scroll the filter area

Expected behavior
Class overflow-hidden-ns should be defined with overflow:hidden and height 100vh to prevent the page scroll while the filters are visible

Screenshots

Press filter while on mobile in this workspace: https://develop--dacris.myvtex.com/articole-de-birou/organizare-si-arhivare/bibliorafturi

Is it valid to add a new way of filtering?

Expected Behavior

Be able to see results for more than one filter selected in any type of filter.

Current Behavior

Nowadays when I have multiple items of models, if I select one of then, the page reloads and excludes its siblings, not being able to select another one.
E.g:
Shoes Store:
Normally people want to be able to select more than one size due the difference of sizes between brands that usually occurs.

Context

Would be great if you guys could make this like an extra option of the filter functionality, allowing to be controlled by blocks. (Opt 1, Opt2).
Also this issue is related with checkboxes. Being possible to have this functionality, we're gonna need checkboxes to see what options is selected.

Discounted Products

Is there any way I can display only discounted products?

Thank you.

Missing CSS handle to target div inside of the drawer menu of the mobile filter navigator of the search-result app Version 3

Describe the bug
CSS handle Missing for accordionFilterOpen to style the padding at the front of the component on mobile.

Expected behavior
I expected to be able to target the div with the padding using the :global(.vtex-{rest of classname}) directive

Screenshots

Desktop environment:
System:
OS: macOS 12.0.1
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Memory: 240.05 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.17.3 - /usr/local/bin/node
Yarn: 1.22.11 - /usr/local/bin/yarn
npm: 7.21.0 - /usr/local/bin/npm
Browsers:
Chrome: 96.0.4664.55
Edge: 95.0.1020.53
Firefox: 91.0
Safari: 15.1
--->

Additional Context

App: "vtex.search-result": "3.x",

Block Configuration:

"filter-navigator.v3#search-result": {
    "blocks": ["sidebar-close-button"],
    "props": {
      "blockClass": "searchResult",
      "truncateFilters": true,
      "showClearByFilter": false,
      "fullWidthOnMobile": false,
      "navigationTypeOnMobile": "collapsible",
      "appliedFiltersOverview": "show",
      "totalProductsOnMobile": "show",
      "updateOnFilterSelectionOnMobile": true,
      "priceRangeLayout": "slider",
      "initiallyCollapsed": true
    }

}

Add feature of infinite scroll

SearchResult App must provide two options of scrolling: a normal pagination with buttons (already exists) and a infinite scrolling like this (http://www.boticario.com.br/feminino/maquiagem-e-esmalte)

Price shown on summary differs from the one used by the PriceRange component

Describe the bug
The price range is not respecting the maximum value, when setting this value prices with values above the maximum value are returned

To Reproduce
Steps to reproduce the behavior:

1. Go to the department page
2. Add a maximum price in the price range
3. then check that no price above the filter value was displayed

Expected behavior

When selecting a maximum price, they should not bring values higher than it

Screenshots

Desktop environment:

https://homologoutletespacohering.myvtex.com/calcas

Cannot read property "term" of undefined

When you enter a category page, like "https://{{account}}.myvtex.com/department/category", if the category isn't created yet, the page breaks and returns the error of the title while in dev workspace, when it should be returning the "Oops, not found" page. The error does not occur if you access only the department.

I think maybe the "params" from the useSearchPage context is returned as undefined for some reason, and the code can't destructure "term" from "undefined", giving the error.