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
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, sinsetTimeout
y, si algo salió mal, debería ir enerror: function(e) { /* Aquí el mensaje de error */ }
console.log(resultado);
dentro desuccess
. 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.echo "<p>$pro->referencia</p>";
está mal, debería ser:echo "<p>{$pro->referencia}</p>";