hoy estoy atascado con un pequeña modificación que no trae el Pluging de Crocoblock Jet Smart Filters. Tengo un conjunto de categorías de productos y he construido un filtro con Jet Smart Filters del tipo Radio Button. Lo que necesito es colapsar todas las categorias por su elemento padre ya que hay categorias y subcategorías, y colocar un Toggle tipo "+" para indicar que se expande que al hacer clic expanda ese ítem del árbol construido y cambie a "-".
He conseguido alguna docu aqui: https://element.how/crocoblock-jetsmartfilters-toggle/ y he realizado la siguiente prueba la que me arroga un error ya que no se muestra el "-" cuando esta expandido el elemento y esta abriendo / expandiendo todas las categorias "padres" que tengan hijos.
Yo necesito poder presentar el árbol con todas las categorias padres colapsadas ya que son muchas y que se expanda cuando se hace clic en una y se contraiga/colapse las que no esten activas.
Mi código:
<style>
.jet-list-tree__parent:after{
content: "+";/* modify this to change the down arrow icon */
float: right;
margin-right: 10px;
}
.jet-list-tree__children.noicon:after{
content: "";
}
.jet-list-tree__children {
cursor: pointer;
}
.jet-list-tree__children.noicon {
cursor: default;
}
.jet-list-tree__parent.minus{
content: "-";
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.jet-list-tree__parent').slice(0,1).slideDown();
$('.jet-list-tree__children').slice(0,1).addClass('noicon');
$('.jet-list-tree__parent').click(function(){
$(this).next().slideToggle().addClass('minus');
});
});
});
</script>
El código original del template construido por woocommerce es el siguiente:
<div class="jet-list-tree__children noicon minus" style="">
<div class="jet-radio-list__row jet-filter-row jet-list-tree__parent">
<label class="jet-radio-list__item">
<input type="radio" class="jet-radio-list__input" name="product_cat" value="1685" data-label="Accesorios para Piscina">
<div class="jet-radio-list__button">
<span class="jet-radio-list__decorator"><i class="jet-radio-list__checked-icon fa fa-check"></i></span>
<span class="jet-radio-list__label">Accesorios para Piscina</span>
<span class="jet-filters-counter"><span class="counter-prefix">(</span><span class="value">7</span><span class="counter-suffix">)</span></span> </div>
</label>
</div> <div class="jet-list-tree__children minus" style="">
<div class="jet-radio-list__row jet-filter-row">
<label class="jet-radio-list__item">
<input type="radio" class="jet-radio-list__input" name="product_cat" value="1686" data-label="Boyas">
<div class="jet-radio-list__button">
<span class="jet-radio-list__decorator"><i class="jet-radio-list__checked-icon fa fa-check"></i></span>
<span class="jet-radio-list__label">Boyas</span>
<span class="jet-filters-counter"><span class="counter-prefix">(</span><span class="value">2</span><span class="counter-suffix">)</span></span> </div>
</label>
</div><div class="jet-radio-list__row jet-filter-row">
<label class="jet-radio-list__item">
<input type="radio" class="jet-radio-list__input" name="product_cat" value="1843" data-label="Cascadas">
<div class="jet-radio-list__button">
<span class="jet-radio-list__decorator"><i class="jet-radio-list__checked-icon fa fa-check"></i></span>
<span class="jet-radio-list__label">Cascadas</span>
<span class="jet-filters-counter"><span class="counter-prefix">(</span><span class="value">4</span><span class="counter-suffix">)</span></span> </div>
</label>
</div><div class="jet-radio-list__row jet-filter-row">
<label class="jet-radio-list__item">
<input type="radio" class="jet-radio-list__input" name="product_cat" value="1687" data-label="Pastilla de Cloro">
<div class="jet-radio-list__button">
<span class="jet-radio-list__decorator"><i class="jet-radio-list__checked-icon fa fa-check"></i></span>
<span class="jet-radio-list__label">Pastilla de Cloro</span>
<span class="jet-filters-counter"><span class="counter-prefix">(</span><span class="value">1</span><span class="counter-suffix">)</span></span> </div>
</label>
</div> </div>
No se que mas hacer. Help me!!!