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
    Commented el 25 sept. 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
    Commented el 25 sept. 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
    Commented el 25 sept. 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
    Commented el 25 sept. 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
    Commented el 25 sept. 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

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.