Como transformar o priceRange em um dropdown

[Marcelo26]

Olá, estou adaptando o filtro para ficar todos com aspecto de dropdown, contudo no filtro já tem uma prop que deixa os itens do filtro inicialmente recolhidos, mas não está aplicando na faixa de preço.
Como chegar no resultado semelhante a imagem?

[ImediataDesign1]

Olá Marcelo, tudo bem ? Até onde eu sei, infelizmente o “initiallyCollapsed” só funciona mesmo para o itens de especificações e categorias.

Vou tentar explicar usando o css dessa Morena Rosa:

1. Primeiro você esconde a faixa de preço :

.vtex-search-result-3-x-filter__container–priceRange .vtex-search-result-3-x-filterTemplateOverflow–search-filter{
height: 0;
overflow: hidden; <---- aqui é onde está escondendo a faixa de preço
position: absolute;
}

2. Agora você faz ela ficar visivel quando aberta:

.vtex-search-result-3-x-filter__container–priceRange.filter-is-open .vtex-search-result-3-x-filterTemplateOverflow–search-filter{
overflow: visible; <---- aqui é onde está deixando visivel a faixa de preço
}

O problema aqui é que eles puxaram a classe por fora, essa filter-is-open.No caso é o melhor a ser feito, você pode tentar personalizar com CSS, mas pode não ser a melhor opção.

Algo do tipo:

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