Buenas tardes estoy haciendo una web de venta de productos, tienen ahora mismo como unas 700 referencias. La parte de la web que contiene los productos se actualiza cada X segundos, ya que si una persona añade un producto al carrito a las otras le salen ese producto como reservado.
Ante esto lo que hice fue un simple función que cada X segundo el div que contiene los productos se actualicen.
Mi problema viene ahora, al ser muchos productos queria hacer un infinite scroll para ir haciendo la carga de 20 productos en 20 productos.
Pero claro si hago scroll y se actualiza el div, el scroll infinite me hace ir arriba de nuevo.
No se si existe otro modo de actualizar una zona que sea compatible con el infinite scroll o bien otra forma de hacer que cargue los productos de 20 en 20.
Mi función básica para ir recargando el div
(function($) {
var fnConsulta = function(){
$(".zona_productos").load(location.href + " .zona_productos");
};
fnConsulta();
timerConsulta = setInterval(function(){
fnConsulta();
}, 10000);
})(jQuery);
Otra idea que se me ocurre es que cuando actualice el div intentar mantener el scroll en la posición en la que esta antes de actualizar.
Public por ejemplo como puedo obtener los productos por AJAX y con infinite scroll. Pero de este modo no hay forma de hacer que si una persona reserva un producto le salga a otra en su navegador.
Controlador
$productos = Productos::with('etiqueta', 'subCat', 'categoria')->whereIn('estado', [1,2])->orderBy('created_at', 'asc')->paginate(10);
if($request->ajax()){
$view = view('data', compact('productos'))->render();
return response()->json(['html'=>$view]);
}
return view('index')->with(["categorias" => "productos" => $productos]);
En mi vista
<section class="zona_productos">
<div class="container">
<div class="row grid" id="mygrid">
@include('data') //En este include esta la iteración de cada producto
</div>
<div class="ajax-load" style="display: none;">Cargando productos</div>
</div>
</section>
function loadMoreData(page)
{
$.ajax({
url: '?page=' + page,
type: 'get',
beforeSend: function()
{
$('.ajax-load').show();
}
})
.done(function(data){
if(data.html == ""){
$('.ajax-load').html("No hay productos");
return;
}
$('.ajax-load').hide();
$('#mygrid').append(data.html);
})
.fail(function(jqXHR,ajaxOptions,thrownError){
alert("No respuesta");
});
}
var page = 1;
$(window).scroll(function(){
if($(window).scrollTop() + $(window).height() >= $(document).height()){
page++;
loadMoreData(page);
}
});