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
    el 29 abr. 2019 a las 23:16
  • @jmz Que valor le asignaste a la variable url? el 29 abr. 2019 a las 23:20
  • var url = 'localhost/tienda-poo/categoria/ver';
    – jmz
    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? 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
    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
    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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.