Estoy creando un filtro de producto para una tienda web. Actualmente hay 3 categorías (propiedades del producto) pero la cantidad de categorías puede variar. Ya llevo un día en esta tarea increíblemente fácil, pero no hay una solución que se ajuste al 100% a mis necesidades. Busqué SO pero no pude encontrar una coincidencia exacta para mi problema.

En este momento tengo un código funcionando que solo muestra productos que tienen las propiedades exactas. El problema es que esto es demasiado limitante.

Este es el código que tengo ahora para filtrar productos, el filtro no necesita obtener datos de un servidor, todos los productos están disponibles y tienen la clase de los valores de filtro:

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>

Y el producto 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>

Las clases de fixx se corresponden con los valores de las casillas de verificación.

Demasiado incluido, puedes verlo aquí: https://www.technicomponents.nl/nl/p/pneumatiek / insteekkoppelingen / knie-koppelingen /

Debería hacer esto:

Caso 1. Si solo hace clic en 1 filtro, todos los productos con ese filtro como nombre de clase deberían estar visibles

Caso 2. Si selecciona, por ejemplo, 2 o más filtros de 1 categoría, todos los productos que tienen el filtro seleccionado como clase deberían estar visibles.

Caso 3. Si selecciona uno o varios valores de varias categorías, debería ser algo como:

DÓNDE

Categoría 1:
- Filtrar x O
- Filtrar y O
- Filtro z O

Y

Categoría 2:
- Filtrar x O
- filtro z O

Y

Categoría 3:
- Filtrar y O
- Filtro z O

El código actual solo funciona si selecciona 1 valor (de una o varias categorías).

0
Ralph 28 oct. 2019 a las 17:03

1 respuesta

La mejor respuesta

Necesitaría una forma de saber a qué grupo pertenece un input, para saber cuándo aplicar la lógica Y y cuándo la lógica OR. Me parece que tiene esa información en el atributo data-id. Asumiré que este atributo tiene el mismo valor para las entradas que pertenecen al mismo grupo y que es diferente cuando las entradas están en un grupo diferente. (En caso de que esto no sea correcto, simplemente elija algo que haga esta distinción).

Puede realizar la operación OR con la coma CSS. La operación AND podría ejecutarse como llamadas consecutivas del método filter de jQuery.

Aquí hay una demostración muy simplificada de esta 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 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>
1
trincot 28 oct. 2019 a las 15:14