vtex-apps / search-result Goto Github PK

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.

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

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.

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.

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

Is there any way I can display only discounted products?

Thank you.

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.

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

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.

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/

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.

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.

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

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.

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.

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

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

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!

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

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.

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 Result must allows the filtering by many categories, departments or specification filters.

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

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

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.

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

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.

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

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
}
},
...

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
    }

}

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

Ex:

"specificationFilters": { "closedFilters": true }

OBS: closedFilters by default is false

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

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.

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

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

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

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)

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

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

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

Screenshots

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

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.

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.

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