筛选多个类别的产品

Question

I'm building a product filter for a webshop. Currently there are 3 categories (product properties) but the quantity of categories can vary. I'm already a day in to this seamingly easy task but no solution that fits my need 100%. Searched SO but couldn't find an exact match for my problem.

Right now I've got some code working that only shows products that have the exact properties. The problem is that this is too limiting.

This is the code I have now to filter products, the filter doesn't need to get data from a server, all products are available and have the class of the filter values:

JS

 $('.choice_form').change(function(evt){

        var filter = $(':input:checked,select').map(function(index, el) {
            return "." + el.value;
        }).toArray().join("");

        $(".vis-products").hide().filter(filter).show();

    });

HTML:

<div class="categories default-text">
  <!-- choice help -->
  <div class="choicehelp-wrapper">
    <b class="black">Basisdeel</b><br><label class="noselect choicehelp_text"><input type="checkbox" name="choice_option[]" value="ft12" class="choice_form js" data-group="product" data-action="choicehelp" data-value="12" data-id="1" style="margin:6px 0px 6px 0px">&nbsp;&nbsp;Kunststof, zwart</label><br>
    <label class="noselect choicehelp_text"><input type="checkbox" name="choice_option[]" value="ft13" class="choice_form js" data-group="product" data-action="choicehelp" data-value="13" data-id="1" style="margin:6px 0px 6px 0px">&nbsp;&nbsp;Messing, nikkel</label><br><br><b class="black">Insteek</b><br>
    <label class="noselect choicehelp_text"><input type="checkbox" name="choice_option[]" value="ft11" class="choice_form js" data-group="product" data-action="choicehelp" data-value="11" data-id="2" style="margin:6px 0px 6px 0px">&nbsp;&nbsp;Knie insteek koppeling</label><br><label class="noselect choicehelp_text"><input type="checkbox" name="choice_option[]" value="ft9" class="choice_form js" data-group="product" data-action="choicehelp" data-value="9" data-id="2" style="margin:6px 0px 6px 0px">&nbsp;&nbsp;Rechte inschroef koppeling</label><br>
    <label class="noselect choicehelp_text"><input type="checkbox" name="choice_option[]" value="ft10" class="choice_form js" data-group="product" data-action="choicehelp" data-value="10" data-id="2" style="margin:6px 0px 6px 0px">&nbsp;&nbsp;T-inschroef koppeling</label><br><br><b class="black">Inschroef</b><br>
    <label class="noselect choicehelp_text"><input type="checkbox" name="choice_option[]" value="ft7" class="choice_form js" data-group="product" data-action="choicehelp" data-value="7" data-id="3" style="margin:6px 0px 6px 0px">&nbsp;&nbsp;M4 Diameter</label><br><label class="noselect choicehelp_text"><input type="checkbox" name="choice_option[]" value="ft4" class="choice_form js" data-group="product" data-action="choicehelp" data-value="4" data-id="3" style="margin:6px 0px 6px 0px">&nbsp;&nbsp;M5 Diameter</label><br>
    <label class="noselect choicehelp_text"><input type="checkbox" name="choice_option[]" value="ft6" class="choice_form js" data-group="product" data-action="choicehelp" data-value="6" data-id="3" style="margin:6px 0px 6px 0px">&nbsp;&nbsp;M8 Diameter</label><br><label class="noselect choicehelp_text"><input type="checkbox" name="choice_option[]" value="ft8" class="choice_form js" data-group="product" data-action="choicehelp" data-value="8" data-id="3" style="margin:6px 0px 6px 0px">&nbsp;&nbsp;M9 Diameter</label> </div>
</div>

And the product html:

<div class="visnav3 vis-products vis-catalog js ft11 ft12 filterOn" data-group="product" data-action="goto-details" data-id="111111" data-value="DEMO-2" style="">....</div>

The ftxx classess correspond with the checkbox values.

A bit too much too include, you can view it here: https://www.technicomponents.nl/nl/p/pneumatiek/insteekkoppelingen/knie-koppelingen/

It should do this:

Case 1. If you just click 1 filter, all products with that filter as a classname should be visible

Case 2. If you select for example 2 or more filters from 1 category, all products that have the selected filter as a class should be visible.

Case 3. If you select one or multiple values from multiple categories it should be something like:

WHERE

Category 1:
- Filter x OR
- Filter y OR
- Filter z OR

AND

Category 2:
- Filter x OR
- filter z OR

AND

Category 3:
- Filter y OR
- Filter z OR

The current code only works if you select 1 value (from one or multiple categories).

Answer 1

You would need a way to know which group an input belongs to, so you know when to apply the AND-logic, and when the OR-logic. It looks to me like you have such information in the data-id attribute. I will assume this attribute has an equal value for inputs that belong to the same group, and that it's different when the inputs are in a different group. (In case this is not right, just choose something that does make this distinction).

You can perform the OR-operation with the CSS comma. The AND operation could then be executed as consecutive calls of jQuery's filter method.

Here is a very much simplified demo of this idea:

 $("input").change(function () { var filters = {}; // key/value per group $(':input:checked,select').each(function(index, el) { var group = $(el).data("id"); // <-- something that identifies the group filters[group] = (filters[group] || []).concat("." + el.value); }); var $filtered = $(".vis-products").hide(); // Apply each filter on the result of the previous one: for (var group in filters) $filtered = $filtered.filter(filters[group].join(",")); $filtered.show(); });

 .filter { width: 100px; float: left; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div class="filter"> Cat 1:<br> <input type="checkbox" data-id="1" value="a">a<br> <input type="checkbox" data-id="1" value="b">b<br> Cat 2:<br> <input type="checkbox" data-id="2" value="i">i<br> <input type="checkbox" data-id="2" value="j">j<br> <input type="checkbox" data-id="2" value="k">k<br> Cat 1:<br> <input type="checkbox" data-id="3" value="x">x<br> <input type="checkbox" data-id="3" value="y">y<br> </div> Data:<br> <div class="vis-products aix">ai x</div> <div class="vis-products aiy">ai y</div> <div class="vis-products ajx">aj x</div> <div class="vis-products ajy">aj y</div> <div class="vis-products akx">ak x</div> <div class="vis-products aky">ak y</div> <div class="vis-products bix">bi x</div> <div class="vis-products biy">bi y</div> <div class="vis-products bjx">bj x</div> <div class="vis-products bjy">bj y</div> <div class="vis-products bkx">bk x</div> <div class="vis-products bky">bk y</div>