How to turn the priceRange into a dropdown

VTEX in your native language 🌎 Portuguese
, ,
1

Hello, I’m adapting the filter to give everything a dropdown appearance, however the filter already has a prop that keeps the filter items initially collapsed, but it’s not being applied to the price range.
How can I achieve a result similar to the image?

image
image853×302 16.6 KB

2

Hi Marcelo, how’s it going? As far as I know, unfortunately initiallyCollapsed only works for specification and category items.

I’ll try to explain using the CSS from this Morena Rosa store:

  1. First, you hide the price range:
.vtex-search-result-3-x-filter__container--priceRange .vtex-search-result-3-x-filterTemplateOverflow--search-filter{
    height: 0;
    overflow: hidden;  <---- this is where the price range is being hidden
    position: absolute;
}
  1. Now you make it visible when open:
.vtex-search-result-3-x-filter__container--priceRange.filter-is-open .vtex-search-result-3-x-filterTemplateOverflow--search-filter{
    overflow: visible;  <---- this is where the price range is being made visible
}

The problem here is that they pulled the class from outside, that filter-is-open one. In this case, it’s the best approach available — you can try customizing with CSS, but it may not be the ideal solution.

Something like this:

:global(.vtex-search-result-3-x-filter__container--priceRange) :global(.vtex-search-result-3-x-filterTemplateOverflow){
    visibility: hidden !important;
    height: 0px !important;
    transition: ease-in-out 0.1s;
}

:global(.vtex-search-result-3-x-filter__container--priceRange):active :global(.vtex-search-result-3-x-filterTemplateOverflow),
:global(.vtex-search-result-3-x-filter__container--priceRange):hover :global(.vtex-search-result-3-x-filterTemplateOverflow){
    visibility: visible !important;
    height: 100px !important;
    transition: ease-in-out 0.1s;
}