Фильтр товаров по нескольким категориям

Question

Я создаю продуктовый фильтр для интернет-магазина. В настоящее время есть 3 категории (свойства продукта), но количество категорий может варьироваться. Я уже целый день занимаюсь этой невероятно простой задачей, но не могу найти решение, которое бы соответствовало моим потребностям на 100%. Искал SO, но не смог найти точного соответствия для моей проблемы.

Сейчас у меня работает некоторый код, который показывает только продукты с точными свойствами. Проблема в том, что это слишком ограничивает.

Это код, который я сейчас имею для фильтрации продуктов, фильтр не должен получать данные с сервера, все продукты доступны и имеют класс фильтразначения:

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>

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

Класс ftxx соответствует флажкузначения.

Слишком много, чтобы включить, вы можете просмотреть его здесь: https://www.technicomponents.nl/nl/p/pneumatiek/insteekkoppelingen/knie-koppelingen/

Это должно сделать это:

Случай 1. Если вы просто нажмете 1 фильтрвсе продукты с таким фильтром в качестве имени класса должны быть видны

Случай 2. Если вы выберете, например, 2 или более фильтров из 1 категории, все продукты, для которых выбран фильтр в качестве класса, должны быть видны.

Случай 3. Если вы выбираете одно или несколько значений из нескольких категорий, это должно быть что-то вроде:

ГДЕ

Категория 1:
- Фильтр x ИЛИ
-Фильтр y ИЛИ
- Фильтр z ИЛИ

И

Категория 2:
- Фильтр x ИЛИ
- Фильтр z ИЛИ

И

Категория 3:
- Фильтр y ИЛИ
- Фильтр z ИЛИ

Текущий кодработает только при выборе 1 значения (из одной или нескольких категорий).

Answer 1

Вам понадобится способ узнать, к какой группе принадлежит input, чтобы вы знали, когда применять логику И, а когда логику ИЛИ. Мне кажется, у вас есть такая информация в атрибуте data-id. Я предполагаю, что этот атрибут имеет одинаковое значение для входных данных, принадлежащих к одной и той же группе, и отличается, когда входные данные находятся в другой группе. (В случае, если это неправильно, просто выберите что-то, что делает это различие).

Вы можете выполнить операцию OR с запятой CSS. Операция AND затем может быть выполнена как последовательные вызовы метода jQuery filter.

Вот очень упрощенная демонстрация этой идеи:

$("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 a i x">a i x</div>
<div class="vis-products a i y">a i y</div>
<div class="vis-products a j x">a j x</div>
<div class="vis-products a j y">a j y</div>
<div class="vis-products a k x">a k x</div>
<div class="vis-products a k y">a k y</div>
<div class="vis-products b i x">b i x</div>
<div class="vis-products b i y">b i y</div>
<div class="vis-products b j x">b j x</div>
<div class="vis-products b j y">b j y</div>
<div class="vis-products b k x">b k x</div>
<div class="vis-products b k y">b k y</div>