How do implement lazy loading on product list page in Magento ?

posted by Muthupandi , on , 4 comments
Please follow the below steps :

1) Add the below script in the app/design/frontend/your theme/default/template/catalog/product/list/toolbar.phtml

<script>   
    jQuery(document).ready(function(){
        if(!jQuery('#current').length){
           
            jQuery("body").append('<input type="hidden" name="current"  id="current" value="1" />');
            jQuery("body").append('<input type="hidden" name="next"  id="final" value="<?php echo $this->getLastPageNum();  ?>" />');
           

            jQuery(window).scroll(function(event){
                setTimeout(function()
                {
                    var current_val=parseInt(jQuery("#current").val());
                    var final_val=parseInt(jQuery("#final").val());
                    var next_val=parseInt(current_val)+1;

                    if(final_val>current_val){
                        jQuery("#ajax-load").css("display","block");
                        jQuery.ajax({
                            url: "<?php echo $this->getPagerUrl(); ?>?p="+next_val,
                            async:false,
                            success: function(html){
                                var $result = jQuery(html).find('.products-grid').children();                   
                                jQuery(".products-grid").append($result);
                                jQuery("#ajax-load").css("display","none");
                                jQuery("#current").val(next_val);                               
                            }
                        });
                    }
                });
            });       
      }
               
    });
</script>

2) Add image tag to show ajax loader in the app/design/frontend/ultimo/default/template/catalog/product/list.phtml path

<div id="ajax-load" style="display:none"><img src="<?php echo $this->getSkinUrl('images/ajax-loader.gif', array('_secure'=>false)); ?>" /></div>

4 comments:

  1. Unknown25 January 2016 at 02:02

    Can u explain 2) Add image tag to show ajax loader in the this clearly

    ReplyDelete
  2. amiriqbalmcs12 June 2016 at 05:50

    i have a custom page where i am fetching products. how to do for custom page.?

    ReplyDelete
  3. vishal18 August 2016 at 23:14

    No working this solution.

    ReplyDelete
  4. Unknown3 January 2017 at 23:58

    Thanks for sharing!
    There is another quicker way is using an extension. Try this module Infinite Scroll for Magento 2. The extension has similar features with this above module, especially it is integrated with lazy image loader, which will absolutely prolong your customers's scrolling experience. Try it here: http://bsscommerce.com/magento-infinite-scroll-for-magento-2.html

    ReplyDelete