1

Estoy intentando hacer un filtro en el que el usuario pueda filtrar los productos por más de un parámetro si así lo quisiera, por ejemplo: si escoge filtrar por categorías la url quedaría así: http://localhost/tienda-poo/categoria/ver&id=1 (lo que esta en negrilla es lo que debería concatenar).

Si el usuro filtra por categorías y tallas la url debería ser así: http://localhost/tienda-poo/categoria/ver&id=1&id_talla=2.

Los valores de los checkbox seleccionados deberían ser enviados a la url cuando el usuario haga click en el botón de filtrar.

<div class="filter-menu">
<form>
    <div class="form-wrapper small">
        <div class="input-wrapper">
            <button class="navbar-button form-label" type="button" id="product-btn">TIPO DE PRODUCTO <span class="form-span"><i class="fas fa-caret-down"></span></i></button>

            <?php $categorias = Utils::showCategorias(); ?>
            <div class="product-wrapper" id="product-category">
                <?php while($cat = $categorias->fetch_object()): ?> 
                    <label class="label-wrapper" for="<?=$cat->id?>"><?=$cat->nombre?>
                        <input type="checkbox" name="<?=$cat->id?>" id="<?=$cat->id?>" value="<?=$cat->id?>">
                        <span class="checkmark"></span>
                    </label>
                <?php endwhile; ?> 
            </div>
        </div>

        <div class="input-wrapper">
            <button class="navbar-button form-label" type="button" id="size-btn">TALLA <span class="form-span"><i class="fas fa-caret-down"></span></i></button>

            <?php $tallas = UtilsTallas::showTallas(); ?>
            <div class="zise-wrapper" id="zise-category">
                <?php while($talla = $tallas->fetch_object()): ?> 
                    <label class="label-wrapper" for="<?=$talla->id?>"><?=$talla->nombre?>
                        <input type="checkbox" name="<?=$talla->id?>" id="<?=$talla->id?>" value="<?=$talla->id?>">
                        <span class="checkmark"></span>
                    </label>
                <?php endwhile; ?> 
            </div>
        </div>

        <div class="submit-wrapper"><button class="filter-submit" onclick="productsFilters()">Filtrar</button>
        </div>  
    </div>
</form>

1

3 respuestas 3

0

Una forma en la que puedes lograr la funcionalidad deseada, es que a cada checkbox le pongas una clase, digamos checkbox.

Despues al <button> que genere la url, dale el attributo onclick='' y asignalo a una función, la cual sera la que genere el url, digamos por ejemplo generarURL().

Ya en javascript, declara una variable con la url original, digamos var url = 'http:localhost/buy.php';. También declara una variable que contendra todos los checkbox con la clase que le diste anteriormente y que estén seleccionados. Esto lo puedes hacer con la función document.querySelectorAll('.checkbox:checked');, finalmente quedaría algo así var checkbox = document.querySelectorAll('.checkbox:checked');

Después itera sobre los checkbox, puedes usar .forEach(checkbox, index) {}, es importante en este ejemplo contar con el index. Ya que adentro del foreach compararas si el checkbox que se esta recorriendo en ese momento es el primero del Array o no. Si es el primero, a la variable url concatena ('?' + checkbox.name + '=' + checkbox.value), quedaría algo así: url += ('?' + checkbox.name + '=' + checkbox.value);, esto concatenara al url algo como '?producto=jabon'. Ahora si no es el primero que concatena ('&' + checkbox.name + '=' + checkbox.value), esto se vera algo parecido a '&tamano=grande'. Después del .forEach() tendrás la url ya generada. Es importante darle un valor al checkbox y un nombre, el nombre del checkbox sera el atributo que deseas concatenar a la url y el valor, pues el valor que le darás a ese atributo. Aquí tienes un ejemplo ejecutable para que lo entiendas mejor. Una vez lo entiendas podrás adaptarlo para usarlo en tu pagina.

Ejemplo:

function generarURL() {
      var url = 'http://localhost/buy.php';
      
      var checkboxs = document.querySelectorAll('.checkbox:checked');
      
      checkboxs.forEach((checkbox, index) => {
        if (index == 0) {
          url += ('?' + checkbox.name + '=' + checkbox.value);
        } else {
          url += ('&' + checkbox.name + '=' + checkbox.value);    
        }
      });
      
      console.log(url);
    }
<input type="checkbox" class="checkbox" name="producto" value="pequena"> Producto: Jabon<br>

<input type="checkbox" class="checkbox" name="tamano" value="mediana"> Tamaño: Mediana<br>

<input type="checkbox" class="checkbox" name="tamano" value="grande"> Tamaño: Grande<br>

<button onclick="generarURL()">Generar URL</button>

9
  • hola gracias por tu respuesta, tengo cierto problema y es que cuando hago click en el botón filtrar la url queda asi: localhost/tienda-poo/?id=1. Sospecho que tiene que ver con el .htacces el cual funciona sobreescribiendo dos variables en la url, una la cual es el controlador (en este caso categoría) y la otra es el método (en este caso ver). tal vez estén generando un conflicto y entonces el .htacces lo que hace es cargar el controlador (index) que es que esta por defecto en caso de no haber un controlador y método valido y le concatena el id del checkbox seleccionado.
    – jmz
    Commented el 29 abr. 2019 a las 23:16
  • @jmz Que valor le asignaste a la variable url? Commented el 29 abr. 2019 a las 23:20
  • var url = 'localhost/tienda-poo/categoria/ver';
    – jmz
    Commented el 29 abr. 2019 a las 23:25
  • @jmz 'ver' es un directorio/folder o un archivo? Si es un archivo que pasa si le pones la extension; ejemplo: ver.php? Commented el 29 abr. 2019 a las 23:30
  • es un método de la clase categoría. Luego de que el método se ejecute debería cargar una vista llamada ver.php. PD: agregar .php al final no tiene ningun efecto.
    – jmz
    Commented el 29 abr. 2019 a las 23:41
0

Te envío un ejemplo que cree:

https://codepen.io/niko20/pen/eoojxp?editors=1011

function filter(eve) {
   eve.preventDefault();
   const params = {};
   const category = document.getElementById('category');
   const sizeProduct = document.getElementById('size');

   if (category.value != '0') {
      params.category = category.value;
   }
   if (sizeProduct.value != '0') {
      params.size = sizeProduct.value;
   }
   if ( Object.keys(params).length > 0 ) {
      const urlBase = 'http://localhost/tienda-poo/categoria/ver?';
      const paramsQuery = encodeQueryData(params);
      console.log(urlBase + paramsQuery); 
   } else {
      console.log('http://localhost/tienda-poo/categoria/ver');
   }
}

function encodeQueryData(data) {
   const ret = [];
   for (let d in data) {
      ret.push(encodeURIComponent(d) + '=' + encodeURIComponent(data[d])); 
   }
   return ret.join('&');
}
<form>
  <select id="category">
     <option value="0" selected>Sin Categoría</option>
     <option value="1">Pantalon</option>
     <option value="2">Polera</option>
     <option value="3">Zapatilla</option>
     <option value="4">Zapatilla</option>
   </select>
   <select id="size">
      <option value="0" selected>Sin Talla</option>
      <option value="1">Small</option>
      <option value="2">Medium</option>
      <option value="3">Large</option>
      <option value="4">Extra Large</option>
   </select>
   <button onclick="filter(event)">Filtrar</button>
</form>

Saludos

1
  • 1
    SO en español te permite ejecutar códigos CSS, JS Y HTML en la plataforma; por favor lee esto y agrega tu código aquí ya que los enlaces se corre el riesgo de que dejen de ser funcionales con el tiempo
    – user75901
    Commented el 29 abr. 2019 a las 22:22
0

Según lo que te entendí, y teniendo en cuenta que son sólo dos checkbox, te propondré un ejemplo con Jquery, espero te ayude en algo:

var url = "http://localhost/tienda-poo/categoria/ver";

$('#js-Button').on('click', () => {

  //Obtenemos los checkbox
  let check1 = $('#id1');
  let check2 = $('#id2');

  //Inicializamos variable para guardar los parámetros por url
  var paramUrl;

  //Evaluamos si todos los checkbox están marcados
  if (check1.prop('checked') && check2.prop('checked'))
    paramUrl = "?&primero=" + check1.attr('id') + "&segundo=" + check2.attr('id');
  //Evaluamos si el primer check está marcado
  else if (check1.prop('checked') == true && check2.prop('checked') == false)
    paramUrl = "?&primero=" + check1.attr('id');
  //Evaluamos si el segundo check está marcado
  else if (check1.prop('checked') == false && check2.prop('checked') == true)
    paramUrl = "?&segundo=" + check2.attr('id');
  //Ningún check está marcado
  else
    paramUrl = "";

  alert(url + paramUrl);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" name="id1" id="id1" value="id1">Parametro 1<br>
<input type="checkbox" name="id2" id="id2" value="id2">Parámetro 2
<br>
<button id="js-Button">Enviar</button>

También te propongo otro ejemplo más optimizado, siguiendo como ejemplo la excelente respuesta de Alex García, nuevamente, por si lo necesitas con Jquery:

$('#js-Button').on('click', () => {
  var url = "http://localhost/tienda-poo/categoria/ver";

  $("input:checkbox:checked").each(function(index) {
    if (index == 0)
      url += '?' + $(this).attr('id') + '=' + $(this).val();
    else
      url += '&' + $(this).attr('id') + '=' + $(this).val();
  });
  alert(url);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" name="check1" id="id" value="id1">Parametro 1<br>
<input type="checkbox" name="check2" id="id_talla" value="id2">Parámetro 2
<br>
<button id="js-Button">Enviar</button>

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.