Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Shopify <li> loadmore (products)

Use Shopify pagination to trigger loadmore event

Markup

{% paginate collection.products by 16 %}
<div class="products__collection">
  <ul class="product collection__grid"">
    {% for product in collection.products %}
      {% assign prod_id = forloop.index | plus:paginate.current_offset %}
      {% include 'product-grid-item' with prod_id %}
    {% endfor %}

    {% if paginate.next %}
      <div id="more"><p>&darr; <a href="{{ paginate.next.url }}">More</a></p></div>
    {% endif %}
  </ul>

  <div id="product-list-foot"></div>
</div>
{% endpaginate %}

Note that items in {% include 'product-grid-item' with prod_id %} template should be <li> tags, given the <ul> wrapper. However, the structure can be altered as necessary.

JS

// Shortcircuit variable
let triggered = false;

function ScrollExecute() {
  // Locate loadmore button
  let moreButon = $('#more').last();
  
  // Get URL from the loadmore button
  let nextUrl = $(moreButon).find('a').attr("href");
  
  // Button position when AJAX call should be made one time
  if ((($(moreButon).offset().top - $(window).scrollTop()) < 800) && (triggered == false)) {
  
    // Trigger shortcircuit to ensure AJAX only fires once
    triggered = true;

    // Make ajax call to next page for load more data
    $.ajax({
      url: nextUrl,
      type: 'GET',
      beforeSend: function() {
        moreButon.remove();
      }
    })
    .done(function(data) {
      // Append data
      $('.product').append($(data).find('.product').html());

      // On success, reset shortcircuit
      triggered = false
    });
  }
}

$(document).ready(function () {
  $(window).scroll(function(){
    ScrollExecute();
  });
});
@curiouscrusher

This comment has been minimized.

Copy link

@curiouscrusher curiouscrusher commented Jan 11, 2018

Nice and clean, I noticed a typo in the liquid snippet right here: <ul class="product collection__grid"">, double quotes

Works great otherwise!

@karimtawficdeveloper

This comment has been minimized.

Copy link

@karimtawficdeveloper karimtawficdeveloper commented Jun 13, 2018

which file do you suggest to implement this code in?

@kevinhq

This comment has been minimized.

Copy link

@kevinhq kevinhq commented May 10, 2019

which file do you suggest to implement this code in?

Anywhere you like. But I put this on collection-template.liquid file. Quite straightforward when you read the codes.

@kevinhq

This comment has been minimized.

Copy link

@kevinhq kevinhq commented May 10, 2019

But this still needs much more refinements. However, thanks for clean direction!

@ymsstudios

This comment has been minimized.

Copy link

@ymsstudios ymsstudios commented May 22, 2019

Great snippet but only works once, how can I make this work for a collection that has 10 product pages?

@kevinhq

This comment has been minimized.

Copy link

@kevinhq kevinhq commented May 23, 2019

Great snippet but only works once, how can I make this work for a collection that has 10 product pages?

paginate collection.products by 16 , change it to 10 ?

@SUJIT-PARIHAR

This comment has been minimized.

Copy link

@SUJIT-PARIHAR SUJIT-PARIHAR commented Feb 21, 2020

Why collection product repeat. I want a solution

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment