Skip to content

Instantly share code, notes, and snippets.

@dnordby
Last active December 29, 2021 18:03
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save dnordby/3febab2de1314fedae8baee6984cea2c to your computer and use it in GitHub Desktop.
Save dnordby/3febab2de1314fedae8baee6984cea2c to your computer and use it in GitHub Desktop.
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();
  });
});
@SUJIT-PARIHAR
Copy link

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