Load More / Infinite Scroll in Dawn 2.0 on Collection Pages

Collections on Dawn theme supports pagination, but this requires customer the load the entire page again to browse through collection pages.

You can override this functionality by replacing the pagination in collection with a load more button.

Add the button on main-collection-product-grid.liquid

{%- if paginate.pages > 1 -%}
<div style="width: 100%;text-align: center;">
  <button class="button load_more_btn" aria-label="">Load More</button>
</div>
{%- endif -%}

And adding this piece of JavaScript code.

jQuery(document).on('click','.load_more_btn', function(e){
    e.preventDefault();
    var url = jQuery('.next_page_url').text();
        jQuery.ajax({
            method:'get',
            url: location.origin+url, 
             dataType: 'html',
            success: function(result){
              var response = jQuery(result).find("#product-grid").html();
              var next_page_url = jQuery(result).find(".next_page_url").text();
              jQuery(".next_page_url").text(next_page_url);
              jQuery("#product-grid").append(response);
              if (!next_page_url) {
                jQuery('.load_more_btn').hide();
              }
          },
        });
  });