Thursday 24 September 2020

Infinite scroll on collection page in Shopify

 Hello, Collection page structure is as followed

{% paginate collection.products by 48 %}

<div class="collection-content">

<ul class="product-list">

  {% if product.available != false and product.featured_image != blank %}

      {% include 'product-item' %}

    {% endif %}

</ul>

</div>

{% if paginate.next %}

      <a href="{{ paginate.next.url }}" class="load-more" data-load-more style="display:none">Load More</a>

{% endif %}


 <div class="load_more" data-loadmore-image style="text-align: center;display:none;">

        <img

             class="lazyload"

             src="https://cdn.shopify.com/s/files/1/1385/4017/files/Spin-1s-200px_1.gif?v=1600964630"

             width="100px"

             alt="Contemporary and Modern Custom Clothing"

             />

      </div>

  {% endpaginate %}


JS script is as follows

Before adding below script, make sure you have added jQuery library in your code

function ScrollExecute(){

  //     let triggered = false;

  let moreButon = $('[data-load-more]').last();

  let nextUrl = $(moreButon).attr("href");

  let totalPaginatePages = parseInt($('[data-paginate-pages]').val());

  console.log(nextUrl);


  var detachMoreButton; 

  console.log('moreButon', moreButon);


  //     if ((($(moreButon).offset().top - $(window).scrollTop()) < 800) && (triggered == false)) {

  //       triggered = true;

  $.ajax({

    url: nextUrl,

    type: 'GET',

    beforeSend: function() {

      detachMoreButton = moreButon.detach();

      $('[data-loadmore-image]').show();

    }

  })

  .done(function(data) {

    console.log('data', data);

    $('.product-list').append($(data).find('.product-list').html());

    $('[data-loadmore-image]').hide();

    //         triggered = false;


    var oldUrl = $(detachMoreButton).attr('href').split('?');

    var colUrl = oldUrl[0].replace(',','');

    var splittedOldUrl = oldUrl[1].split('&');

    var extraUrlParameters= '';

    if(typeof splittedOldUrl[1] != "undefined"){

      extraUrlParameters = '&'+splittedOldUrl[1].replace(',','');

    }

    var nextPage = parseInt(splittedOldUrl[0].replace('page=',''))+1;

    //         console.log(nextPage);


    setTimeout(function(){ 

      $(detachMoreButton).attr('href', colUrl+'?page='+nextPage+extraUrlParameters);

      console.log($(detachMoreButton).attr('href'))

      $('main.content').append(detachMoreButton);

    }, 200);

  });

  //     } 

}


$(window).scroll({ passive: true }, function() {

  //     if($(document).height() - 800 < ($(document).scrollTop() + $(window).height())) {

  $('[data-loadmore-image]').trigger('click');

  //     }

});



$(document).ready(function(){

  $('[data-loadmore-image]').click(function() {

    var temp = $(".collection-content").offset();

    var productBottom = $(".collection-content").height() + temp.top;

    var windowScroll = $(window).scrollTop() + $(window).height();


    //       if (windowScroll > productBottom) {

    if ($('[data-load-more]').length > 0)

      ScrollExecute();

    //       }

  });

})


$(window).scroll({ passive: true }, function() {

  //     if($(document).height() - 800 < ($(document).scrollTop() + $(window).height())) {

  $('[data-loadmore-image]').trigger('click');

  //     }

});


Thanks


No comments:

Post a Comment

Infinite scroll on collection page in Shopify

 Hello, Collection page structure is as followed {% paginate collection.products by 48 %} <div class="collection-content"> ...