0

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

1 respuesta 1

1
/*  recorres todo los padres de tu componenete con each()  */
    $('.jet-list-tree__children').each(function( index ) {
       $(this).children('.jet-radio-list__row').each( function( index ) {
           // Aquí puedes recorrer los hijos de cada padre
           
            var radio_input_activated = $(this)
           .children('.jet-radio-list__item')
           .children('.jet-radio-list__input');

           if( radio_input_activated.is(':checked') ) {
               
              /* En este punto el check del radio esta activo y manipulas lo demás en el árbol en base a si es - o si es +  */

           }
       })
    })
2
  • Gracias Nelson, pero no me funciono.
    – Angel Diaz
    Commented el 31 ago. 2021 a las 22:31
  • Te explico el código, primero recorres los elementos $('.jet-list-tree__children'), cada uno puede tener dentro 1>=elementos, ósea que habría que dentro de cada uno de los elementos $('.jet-list-tree__children') pueden haber múltiples elementos $('.jet-radio-list__row'), dentro de estos es donde están tus radio buttons, en base a los mismo puedes tomar tus decisiones de si esta encendido + o si esta apagado -, lo cual hace el condicional if() dentro del código que te di arriba Commented el 1 sept. 2021 a las 2:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.