Question

I have implemented the Infinitescroll plugin in an eCommerce Website, to scroll down all product pages in two different type of views: list & grid (.classes).

Everything Is working as expected except a little issue I’m having after loading a bunch of products, let’s say the following page, and changing the view type. In that point items keep loading but the “loading div” containing the image and the text fadesIn with null valors.

An example: We start with list type -> scroll down -> load next page -> scroll up -> change to grid type -> scroll down -> null apears.

Here’s some code:

//Calling infiniteScroll
$('.product-grid.box-product, .product-list').infinitescroll({
      navSelector  : "div .links",            
      nextSelector : "div .links a",    
      itemSelector : "div .struct",
              loading: {finishedMsg: "<em>endmsg</em>",
                        img: "url",
                        msgText: "<em>loading...</em>"}          
    },function(elm){
      //item display-mode sorting function
    });

//How are divs sorted up
function display(view) {
if (view == 'list') {
    $('.product-grid').attr('class', 'product-list');
    $('.product-list > div').each(function(index, element) {
        //item display-mode sorting function
    });
    $.cookie('display', 'list'); 
} else {
    $('.product-list').attr('class', 'product-grid box-product');
    $('.product-grid > div').each(function(index, element) {
        //item display-mode sorting function
    });
    $.cookie('display', 'grid');
}
}

I have been researching a lot, even looking trough the plugin core code and I just can’t seem to figure this out.

I’d like to thank you in advance for your help.

Answer 1

I’ve kind of figured it out.

The problem was the following:

The products container div was chaning classes constantly so it kind of disoriented the plugin’s procedure. To solve this I’ve created a new div containing the chaning div:

//Before Call
$('.product-grid.box-product, .product-list').infinitescroll({

//After Call
$('#products').infinitescroll({

Working with a different container makes the plugin load new products in the wrong div so in the callback i used this:

$(elm).each(function(){
    if($.cookie('display') == 'grid'){
         $(this).appendTo('.product-grid');
    } else {
         $(this).appendTo('.product-list');
    }
});

After doing this in some cases products seemed to load with wrong display/css so I surfed trough the InfiniteScroll core code and inserted a function ( display() ) that changes the display/css of all products on the screen just after the ajax .load() function ends:

//Plugin core code
o.load(...,function(t){...;display(view);});
//Plugin core code

And that’s it! Plugin’s working very nice now!

I hope this helps if any of you got a similar issue. Cheers!