WooCommerce Ajax Filter mit Kontrollkästchen

Question

I-Struktur haben wie diese

Marke

1. Google
2. Apple-
3. Microsoft

Werkstoff

012.351.

1. Holz
2. Metall
3. Plastik

Grundsätzlich Marke & Material - sind Woocommerce Attribute und der Rest sind Variablen.

Ich arbeite an Ajax-Filter jetzt und ich brauche wie diese

http://example.com/shop?filter_brand=122,123&filter_material=134,45 aussehen url.

Hier ist, was ich habe, so weit diese code

HTML

<ul class="dd" data-termik="men"> 
    <li> 
     <label for="">Men</label> 
     <input class="ajax-checkbox" data-term="men" data-id="31" type="checkbox"> 
    </li> 
    <li> 
     <label for="">Boys</label> 
     <input class="ajax-checkbox" data-term="men" data-id="54" type="checkbox"> 
    </li> 
    <li> 
     <label for="">Robots</label> 
     <input class="ajax-checkbox" data-term="men" data-id="76" type="checkbox"> 
    </li> 
</ul> 

<hr> 

<ul class="dd" data-termik="women"> 
    <li> 
     <label for="">Women</label> 
     <input class="ajax-checkbox" data-term="women" data-id="12" type="checkbox"> 
    </li> 
    <li> 
     <label for="">Girls</label> 
     <input class="ajax-checkbox" data-term="women" data-id="38" type="checkbox"> 
    </li> 
    <li> 
     <label for="">Barbies</label> 
     <input class="ajax-checkbox" data-term="women" data-id="19" type="checkbox"> 
    </li> 
</ul> 

JS

$(document).on('change', '.ajax-checkbox', function(e) { 

    var str = $(".ajax-checkbox:checked").map(function() { 
     var term = $(this).data('term'); 

     var term_ids = []; 
     $('.ajax-checkbox:checked').each(function(index, value) { 
      var term_id = $(this).data('id'); 
      term_ids.push(term_id); 
     }); 
     term_ids_unique = $.unique(term_ids); 

     return term + '=' + term_ids_unique; 

    }).get(); 

    var uniqueArray = str.filter(function(elem, pos) { 
     return str.indexOf(elem) == pos; 
    }); 


    // FINAL URL 
    var final_url = uniqueArray; 
    console.log(final_url); 

}); 

aber es funktioniert nicht richtig funktionieren.

Answer 1

Endlich funktioniert das. DEMO

JS

$(document).on('change', '.ajax-checkbox', function(e) { 
    var final_url = '', uniqueArray, selected = {}; 
    $('.ajax-checkbox:checked').each(function(index,value) { 
    var data = $(this).data(); 
    if (typeof selected[data.term] === "undefined") { 
     selected[data.term] = []; 
    } 
    selected[data['term']].push(data.id); 
    }); 
    for (prop in selected) { 
    if (final_url) { 
     final_url += '&'; 
    } 
    final_url += prop + '='; 
    final_url += selected[prop].join(','); 
    } 

    console.log(final_url); 

});