Question

I’m still stuck on this so sorry for this overlapping question.
I’m trying to create a product page which loads products from the first page. When user scrolls down products from the second page needs to be loaded. I’ve searched this Q&A site and numerous tutorials, but I can’t get this to work.

The products from shop.com/category/page1.ajax are loaded correctly, but when I scroll down I don’t know why the products from shop.com/category/page2.ajax and so on aren’t loaded.

A plugin like infinite scroll is not an option.

Any help greatly appreciated.

The JSON/Ajax string (minified because of the length):

{
"page": 1,
"pages": 7,
"count": 42,
"url": "http:\/\/meules1.webshopapp.com\/woonkamer-en-keuken\/",
"products": [
    {
        "id": 1750137,
        "vid": 2765003,
        "image": "http:\/\/cdn.webshopapp.com\/i\/z1faly\/50x50x2\/newc.jpg",
        "image_id": 2156769,
        "brand": false,
        "code": "40-95407",
        "ean": "40-95407",
        "sku": "",
        "score": false,
        "price": {
            "price": 65,
            "price_money": "\u20ac65,00",
            "price_money_with_currency": "\u20ac65,00 EUR",
            "price_money_without_currency": "65,00",
            "price_excl": 54.6218,
            "price_excl_money": "\u20ac54,62",
            "price_excl_money_with_currency": "\u20ac54,62 EUR",
            "price_excl_money_without_currency": "54,62",
            "price_incl": 65,
            "price_incl_money": "\u20ac65,00",
            "price_incl_money_with_currency": "\u20ac65,00 EUR",
            "price_incl_money_without_currency": "65,00",
            "price_old": 109,
            "price_old_money": "\u20ac109,00",
            "price_old_money_with_currency": "\u20ac109,00 EUR",
            "price_old_money_without_currency": "109,00",
            "price_old_excl": 91.5966,
            "price_old_excl_money": "\u20ac91,60",
            "price_old_excl_money_with_currency": "\u20ac91,60 EUR",
            "price_old_excl_money_without_currency": "91,60",
            "price_old_incl": 109,
            "price_old_incl_money": "\u20ac109,00",
            "price_old_incl_money_with_currency": "\u20ac109,00 EUR",
            "price_old_incl_money_without_currency": "109,00"
        },
        "available": true,
        "url": "http:\/\/meules1.webshopapp.com\/newc.html",
        "title": "Newc",
        "fulltitle": "Newc",
        "variant": "",
        "description": "In de serie Newcastle bieden wij nu ook dit TV meubel \/ salontafel aan. Deze",
        "data_01": ""
    },
    {
        "id": 1750135,
        "vid": 2765001,
        "image": "http:\/\/cdn.webshopapp.com\/i\/z1falp\/50x50x2\/utrecht.jpg",
        "image_id": 2156760,
        "brand": false,
        "code": "nov-89",
        "ean": "nov-89",
        "sku": "",
        "score": false,
        "price": {
            "price": 47.5,
            "price_money": "\u20ac47,50",
            "price_money_with_currency": "\u20ac47,50 EUR",
            "price_money_without_currency": "47,50",
            "price_excl": 39.916,
            "price_excl_money": "\u20ac39,92",
            "price_excl_money_with_currency": "\u20ac39,92 EUR",
            "price_excl_money_without_currency": "39,92",
            "price_incl": 47.5,
            "price_incl_money": "\u20ac47,50",
            "price_incl_money_with_currency": "\u20ac47,50 EUR",
            "price_incl_money_without_currency": "47,50",
            "price_old": 65,
            "price_old_money": "\u20ac65,00",
            "price_old_money_with_currency": "\u20ac65,00 EUR",
            "price_old_money_without_currency": "65,00",
            "price_old_excl": 54.6218,
            "price_old_excl_money": "\u20ac54,62",
            "price_old_excl_money_with_currency": "\u20ac54,62 }

The jquery:

<script type="text/javascript">
$(document).ready(function(){

// var pageSize = {{ collection.limit }};
var currentPage = {{ collection.page }};
var collectionPages = {{ collection.pages }};
var category = '{{ collection.internal.url }}';

// Appends the new product to the UI
var appendProduct = function(product, id) {
$('<div class="product"></div>')
.html(product)
 .appendTo($(".productsGrid"));
};

// Load the next products
var loadProducts = function() {

var url = "http://shop.com/"+category+"/page"+currentPage+".ajax";

$.getJSON(url,function(data) {

  console.log(data);
  $.each(data.products, function(index, product) {
    appendProduct('<a href="'+product.url+'" title="'+product.fulltitle+'">' +
                  '<img src="'+product.image+'" width="180" height="150" alt="'+product.fulltitle+'" title="'+product.fulltitle+'"'+'</a>' +
                  '<div class="info"><h3><a href="'+product.url+'" title="'+product.fulltitle+'">'+product.fulltitle+''+'</a></h3>' +
                  '<div class="price">'+product.price.price_money+''+'</div>' +
                  '<div class="gridAddToCart"><a class="button grey" href="'+product.url+'" title="'+product.fulltitle+'" rel="nofollow">'+'<span>{{ 'Details' | t }}</span></a>' +
                  '<div style="margin-top:2px;"></div>' +
                  '<a class="opener button blue" href="http://shop.com/cart/add/'+product.vid+'" title="'+product.fulltitle+'" rel="nofollow"><span>{{ 'Add to cart' | t }}</span></a>'
                 + '<div class="clear"></div>' +
                  '</div><div class="clear"></div></div>'      
    );
  });

  // We're done loading the products, so hide the overlay and update the UI
  $("#overlay").fadeOut();
});
 };

 // First time, directly load the products
 loadProducts();

 // Append a scroll event handler to the container
 $(".productsGrid").scroll(function() {
// We check if we're at the bottom of the scrollcontainer
if ($(this)[0].scrollHeight - $(this).scrollTop() == $(this).outerHeight()) {
  // If we're at the bottom, show the overlay and retrieve the next page

    currentPage++;

  $("#overlay").fadeIn();
  loadProducts();
}
});

});
</script>

Answer 1

Maybe the scroll function isn’t firing for that selected element productsGrid. Would you check that with an alert? Does productsGrid have a scrollbar or is it just part of the whole page? You can try a more general approach for the whole document:

In getJSON,

 // We're done loading the products, so hide the overlay and update the UI
      $("#overlay").fadeOut();
      $(window).scroll(function() { update(); });  // <-- ADD THIS LINE
    });
  };

// First time, directly load the products
loadProducts();

var update = function() {  // <-- NAME THIS AS FUNCTION
  // activate loadProducts when scrollbar reaches 150 pixels or less from the
  // bottom, instead of having scrolled exactly all the way to the end.
  if($(window).height() + $(window).scrollTop() >= $(document).height() - 150) {

    if(currentPage < collectionPages) {
      // If we're at the bottom, show the overlay and retrieve the next page    
      currentPage++;
      $("#overlay").fadeIn();
      $(window).unbind('scroll');  // <-- ADD THIS LINE
      loadProducts();
    }
  }
};

$(window).scroll(function() { update(); } ); // <-- ADD THIS LINE