0

Es la primera vez que estoy haciendo esto, probando y con ayuda ya he conseguido que el filtrador de productos ya filtre, además coja varios rangos de filtros. Pero mi intención es quitar los resultado que cargo previamente a través de una consulta y cuando cargue la página actue el AJAX. Por otro lado la paginación no me funciona, cargar los resultados pero no sale la paginación.

Módulo donde saco los checkboxes

<div class="filtrador">
        <h3>Buscar</h3>
        <div class="dropdown-divider margb4"></div>
        <div style="position: relative;">
          <span class="simboloBuscar"><i class="fas fa-search"></i></span>
          <input type="text" id="search" class="form-control myinputs corrigeBuscador" autocomplete="off">
        </div>
        
        <h3>Categoría</h3>
        <div class="dropdown-divider margb4"></div>
        <div class="categorias">
          @foreach ($categorias as $cat)
            <div class="form-check">
              <input class="form-check-input pruebas" type="checkbox" name="categoria[]" id="categoria{{ $cat->id }}" value="{{ $cat->id }}">
              <label class="form-check-label" for="categoria{{ $cat->id }}">{{ $cat->name }}</label>
            </div> 
          @endforeach
        </div>

        <h3>Subcategoria</h3>
        <div class="dropdown-divider margb4"></div>
        <div class="categorias">
          <div class="row">
            @foreach ($subcategorias as $sub)
              <div class="form-check col-6">
                <input class="form-check-input pruebas" type="checkbox" name="subcategoria[]" id="subcategorias{{ $sub->id }}" value="{{ $sub->id }}">
                <label class="form-check-label" for="subcategorias{{ $sub->id }}">{{ $sub->name }}</label>
              </div> 
            @endforeach
          </div>
        </div>
        <h3>Marcas</h3>
        <div class="dropdown-divider margb4"></div>
        <div class="categorias">
          <div class="row">
            @foreach ($marcas as $marca)
              <div class="form-check col-6">
                <input class="form-check-input pruebas" type="checkbox" name="marcas[]" id="marcas{{ $marca->id }}" value="{{ $marca->id }}">
                <label class="form-check-label" for="marcas{{ $marca->id }}">{{ $marca->empresa }}</label>
              </div> 
            @endforeach
          </div>
        </div>
        <h3>Genero</h3>
        <div class="dropdown-divider margb4"></div>
        <div class="categorias">
          <div class="row">
            @foreach ($genero as $gen)
              <div class="form-check col-6">
                <input class="form-check-input pruebas" type="checkbox" name="genero[]" id="genero{{ $gen->id }}" value="{{ $gen->slug }}">
                <label class="form-check-label" for="genero{{ $gen->id }}">{{ $gen->termino }}</label>
              </div> 
            @endforeach
          </div>
        </div>
        <div class="dropdown-divider margb4"></div>
        <a href="" class="vaciarFiltros" id="vaciar">VACIAR FILTROS</a>
      </div>

Este es mi AJAX

window.onload=function() {
      $('[name="categoria[]"], [name="subcategoria[]"], [name="marcas[]"], [name="genero[]"], #search').bind('click keyup', function(event) {
        $value= $("#search").val();
        var categoria = $('[name="categoria[]"]:checked').map(function(){
          return this.value;
        }).get();
        var subcategoria = $('[name="subcategoria[]"]:checked').map(function(){
          return this.value;
        }).get();
        var marca = $('[name="marcas[]"]:checked').map(function(){
          return this.value;
        }).get();
        var genero = $('[name="genero[]"]:checked').map(function(){
          return this.value;
        }).get();
        
        var url = 'productos/filtros';
        $.ajax({
          headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
          type: "POST",
          url: url,
          data: {'categoria': categoria,
                'subcategoria': subcategoria,
                'marca' : marca,
                'genero' : genero,
                'search':$value },

                beforeSend: function(){
                  $("#filtrados").html("<div id='loader'></div>")
                },
                  timeout:500000,
                success: function (resultado){
                    setTimeout(function(){ $("#filtrados").html(resultado); }, 1000); 
                    //$("#filtrados").html(resultado);
                    //console.log(resultado);
                },
                error: function(e) { $("#filtrados").html("Sucedio un error!") }
        });
      
    });
    };

Mi controlador

public function filtros(Request $request)
    {
        $data = $request->only("categoria", "subcategoria", "marca", "search", 'genero');
        
        $filtrador = Product::with('variaciones')
                ->join('categories', 'products.categoria', '=', 'categories.id')
                ->join('subcategories', 'products.subcategoria', '=', 'subcategories.id')
                ->join('marcas', 'products.proveedor', '=', 'marcas.id')
                ->select('products.*', 'categories.name as nameCategoria', 'subcategories.name as nameSubcategoria', 'marcas.empresa as proveedor');

                //verificamos que exista y contenga almenos 1 dato
                if(isset($data["categoria"]) && count($data["categoria"])){
                    $filtrador = $filtrador->whereIn('products.categoria', $data["categoria"]);
                }

                //verificamos que exista y contenga almenos 1 dato
                if(isset($data["subcategoria"]) && count($data["subcategoria"])){
                    $filtrador = $filtrador->whereIn('products.subcategoria', $data["subcategoria"]);
                }

                if(isset($data["marca"]) && count($data["marca"])){
                    $filtrador = $filtrador->whereIn('products.proveedor', $data["marca"]);
                }

                if($request->ajax()){
                    $filtrador = $filtrador->where('products.name', 'LIKE','%'.$request->search."%");
                }

                //solo como ejemplo, en caso de obtener el ultimo
                $last = "";
                if($last){
                $filtrador = $filtrador->latest('id');
                }else{
                //o devolver la lista
                $filtrador = $filtrador->paginate(6);
                }
                
                $filtradorHtml = "";
                
                foreach($filtrador as $pro){
                    $filtradorHtml .= "<div class=\"col-4\">
                    <div class=\"cardProduct\">
                      <div>
                        <div style=\"position: relative\">";
                          if ($pro->foto == null){
                            $filtradorHtml .= "<img src=\"images/no-foto.jpg\"  class=\"imgProduct\">";
                          }else{
                            $filtradorHtml .= "<img src=\"$pro->foto\"  class=\"imgProduct\">";  
                          }
          
                    $filtradorHtml .= " 
                        <div class=\"etiqueta3estados\">";
                            if ($pro->estado == 1){
                                $filtradorHtml .= "<span class=\"publicado\">Publicado</span>"; 
                            }elseif ($pro->estado == 2){   
                                $filtradorHtml .= "<span class=\"noPubli\">No publicado</span>";
                            }elseif ($pro->estado == 3){
                                $filtradorHtml .= " <span class=\"borrador\">Borrador</span>";
                            }
                    $filtradorHtml .= " 
                        </div>
                          <div class=\"posicionPapelera\" id=\"posicionPapelera\">
                            <a href=\"\"><i class=\"far fa-edit eyeProduct\"></i></a>
                            <a href=\"\"><i class=\"far fa-trash-alt eyeProduct\"></i></a>
                          </div>
                        </div>        
                        <div class=\"mgTop9\">
                          <div class=\"marcaDiv\">
                             $pro->proveedor
                            <span class=\"pull-right refeProduct\"> $pro->referencia </span>
                          </div>
                          
                          <div class=\"productTitle\"> $pro->name </div>
                          <div class=\"cardpProduct\"> $pro->descripcion</div>
                          <div class=\"dropdown-divider margb4\"></div>
                          <div class=\"row targCate\">
                              <div class=\"col-6\">
                                  <h5>Categoría</h5>
                                  <span> $pro->nameCategoria </span>
                              </div>
                              <div class=\"col-6\">
                                  <h5>Subcategoria</h5>
                                  <span> $pro->nameSubcategoria </span>
                              </div>
                          </div>
                          <div class=\"dropdown-divider margb4\"></div>
                          <a href=\"\" class=\"btn btnGuardar corrigeBtNverproducto\">Ver producto</a>
                        </div>
                      </div>
                    </div>
                  </div>";
                }
                
                if($filtradorHtml == '') { $filtradorHtml = 'No hay productos, o el mensaje que quieras que aparezca'; }

                $filtradorHtml .= " <div class=\"container center margBlog1 pull-right\" style=\"padding: 0;\">";
                    echo $filtrador->links();
                $filtradorHtml .= "</div>";

        return $filtradorHtml;
    }

Como veis construyo la respuesta en php y la devuelvo al AJAX, pero ni me muestra la paginación, ni me carga al abrir la pagina con el window.onload=function() he incluso si no hay resultado puse un else que tampoco está haciendo nada.

Parte de código editada para el mensaje de no obtuvo resultado

beforeSend: function(){
  $("#filtrados").html("<div id='loader'></div>")
 },
  success: function (resultado){ 
  $("#filtrados").html(resultado);
    console.log(resultado);
  },
  error: function(e) { $("#filtrados").html("Sucedio un error!") }

El console log cuando no hay resultado me imprime una nueva linea vacia en la consola

10
  • En success no deberías evaluar !resultado.success, porque se supone que ya pasó ese filtro y estás recibiendo código HTML y, de ser el caso, sobra el !. Intenta primero asignar el resultado directamente, sin setTimeout y, si algo salió mal, debería ir en error: function(e) { /* Aquí el mensaje de error */ }
    – Triby
    el 25 sep. 2020 a las 18:10
  • Haz los cambios, agregando también console.log(resultado); dentro de success. Prueba nuevamente y edita la pregunta para colocar código y resultado actualizados. Nota: Al menos en el código que proporcionas, no se ve que estés generando enlaces de paginación.
    – Triby
    el 25 sep. 2020 a las 18:11
  • Hola gracias por tu respuesta @Triby ya te actualice la pregunta con lo que sucede. Inserta una linea vacia cuando no existe nada
    – Miguel
    el 25 sep. 2020 a las 18:18
  • En PHP, cuando vas a incluir objetos (o arreglos) dentro de una cadena, debes encerrarlos entre llaves, por ejemplo: echo "<p>$pro->referencia</p>"; está mal, debería ser: echo "<p>{$pro->referencia}</p>";
    – Triby
    el 25 sep. 2020 a las 18:25
  • Cuando dices Inserta una linea vacia cuando no existe nada ¿Qué debería aparecer? y quiero suponer que ya aparecen productos en peticiones donde sí hay resultados.
    – Triby
    el 25 sep. 2020 a las 18:26

1 respuesta 1

1

No ejecuta la petición AJAX al cargar la página porque está dentro de una función anónima y solo se ejecuta por los eventos a los que fue asignada. Necesitas:

  • Definir la función aparte
  • Al cargar el DOM:
    • Asignar el evento a los checkboxes, pero ejecutando la función
    • Ejecutar la función para obtener productos desde que carga la página
  • Para la paginación:
    • Crear variable global para la página que se debe mostrar
    • Incluir la página en la petición
    • Delegar evento onclick en enlaces de paginación
// Variable global para asignar página
let curPage = 1;

// Ejecutar hasta que se haya cargado el DOM
$(function() {
    // Asignar evento a checkboxes
    $('[name="categoria[]"], [name="subcategoria[]"], [name="marcas[]"], [name="genero[]"], #search').bind('click keyup', function(event) {
        cargarProductos();
    });
    // Delegar evento onclick para enlaces de paginación
    $('#filtrados').on('click', '.page-link', function(e) {
        // Evitar comportamiento normal de enlace
        e.preventDefault();
        // Actualizar página que se debe mostrar
        curPage = $(this).text();
        // Ejecutar petición AJAX
        cargarProductos();
    });
    // Ejecutar cuando carga el DOM
    cargarProductos();
});

// Función para petición AJAX
function cargarProductos() {
        $value= $("#search").val();
        var categoria = $('[name="categoria[]"]:checked').map(function(){
          return this.value;
        }).get();
        var subcategoria = $('[name="subcategoria[]"]:checked').map(function(){
          return this.value;
        }).get();
        var marca = $('[name="marcas[]"]:checked').map(function(){
          return this.value;
        }).get();
        var genero = $('[name="genero[]"]:checked').map(function(){
          return this.value;
        }).get();
        
        var url = 'productos/filtros';
        $.ajax({
          headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
          type: "POST",
          url: url,
          data: {'categoria': categoria,
                'subcategoria': subcategoria,
                'marca': marca,
                'genero': genero,
                'search': $value,
                // Incluir número de página que se va a cargar
                'page': curPage
                },

                beforeSend: function(){
                  $("#filtrados").html("<div id='loader'></div>")
                },
                  timeout:500000,
                success: function (resultado){
                    setTimeout(function(){
                        // Asignar contenido HTML
                        $("#filtrados").html(resultado);
                    }, 1000); 
                },
                error: function(e) { $("#filtrados").html("Sucedió un error!") }
        });
};

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.