3

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);
    }
});
10
  • Creo que el problema que tienes es que usas load para recargar el div, si en lugar de eso usas ajax, el div no se cargará de nuevo, solo tendrás que añadir manualmente los nuevos productos y si no me equivoco, no te hará el scroll.
    – track3r
    Commented el 17 dic. 2022 a las 22:16
  • probaste usando intersection observer? Disculpa que no pueda darte una respuesta mejor, necesitamos que agregues el codigo faltante asi podemos probar tu error y ver como solucionarlo. Commented el 18 dic. 2022 a las 0:05
  • Muy buenas @track3r y eso como seria sustituir el load por un ajax?? En su momento probe un infiniti scroll cargando los productos por ajax, pero se me subia el scroll
    – Miguel
    Commented el 18 dic. 2022 a las 14:23
  • Buenas @ElFuturoLlego voy a buscar información sobre eso que comentas, no he podido poner más código, no tengo más por el momento
    – Miguel
    Commented el 18 dic. 2022 a las 14:24
  • La tecnología AJAX es muy compleja de explicar en un comentario, mejor busca ayuda de cómo funciona o replantea tu pregunta o haz una nueva al respecto.
    – track3r
    Commented el 18 dic. 2022 a las 15:09

1 respuesta 1

0

Te pongo una respuesta para compartir mi código de ejemplo, pero no es una buena respuesta y habría que eliminarla una vez hayas visto el resultado.

<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
        $("button#add").on("click", function() {
            $("#products").append("<li id='15'>Producto 15</li>");
        });
        $("button#modificar").on("click", function() {
            $("#products > #1").html("<li id='1'>producto 1 (mod.)</li>");
        });
   });
</script>
</head>
<body>
    <button id="add">Añadir</button>
    <button id="modificar">Modificar</button>
   <div style="max-height: 200px; overflow: scroll; width: 150px;">
    <ul id="products">
        <li id="1">producto 1</li>
        <li id="2">producto 2</li>
        <li id="3">producto 3</li>
        <li id="4">producto 4</li>
        <li id="5">producto 5</li>
        <li id="6">producto 6</li>
        <li id="7">producto 7</li>
        <li id="8">producto 8</li>
        <li id="9">producto 9</li>
        <li id="10">producto 10</li>
        <li id="11">producto 11</li>
        <li id="12">producto 12</li>
        <li id="13">producto 13</li>
        <li id="14">producto 14</li>
    </ul>
   </div>
</body>
</html>

Como ves, puedes hacer scroll y cuando añades, o modificas, el scroll no se modifica. Ahora solo tienes que cambiar la función Añadir o Modificar con el contenido devuelto por ajax.

9
  • Buenas @track3r pero eso solo pasaria en un ordenador, piensa que si yo reservo un producto en mi ordenador, en tu ordenador tiene que cambiar sin necesidad de actualizar.
    – Miguel
    Commented el 20 dic. 2022 a las 12:19
  • Para ello debes usar un timmer, la idea es la misma, en este ejemplo solo te muestro cómo añadir filas o modificarlas sin que se cambie el scroll, que era lo que buscas en tu pregunta, si no es eso, cámbiala con tu nueva necesidad
    – track3r
    Commented el 20 dic. 2022 a las 12:38
  • Y en mi pregunta, tengo una función con la que obtengo los productos en AJAX, se puede poner un timer a eso?
    – Miguel
    Commented el 20 dic. 2022 a las 13:30
  • claro! el timmer se hace en javascript, lo que hagas dentro de esa función puede ser cualquier cosa, incluso una llamada ajax. En tu caso puedes llamar loadMoreData() sin problemas
    – track3r
    Commented el 20 dic. 2022 a las 15:24
  • 2
    Por eso en mi ejemplo hay append y html para modificar, según el id del producto y si existe o no, toca modificar o añadir, y modificar no hace falta a no ser que cambie algo de lo que se muestra, es decir, si existe lo saltas y añades solo cuando no existe ya.
    – track3r
    Commented el 21 dic. 2022 a las 15:26

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.