1

Currently I have infinite scroll setup as below, but when changing the ordering of the entries, then loading more through the infinite scroll it's not loading in the order of the entries.

Set Sort Options

    {% set sortOptions = [
        {
            label: 'Name Z - A',
            value: 'title desc'
        },
        {
            label: 'Name A - Z',
            value: 'title asc'
        },
    ] %}

{% set selectedSortOption = craft.request.getParam('order', 'title asc') %}

Pagination Loop

{% paginate craft.categories.group('university').order(selectedSortOption).limit(1) as pageEntries %}
    <div id="university-widget-wrapper">

    {% for category in pageEntries %}
      <a class="university-widget w-inline-block" href="{{ category.url }}">
        <div class="university-widget-image"></div>
        <div class="university-widget-content">
          {% for asset in category.universityLogo %}
            <img class="university-widget-logo" src="{{ asset.url }}" height="40">
          {% endfor %}
          <p class="small-paragraph">{{ category.description }}</p>
        </div>
      </a>
    {% endfor %}
    </div>


    <div id="pagination">
      {% if paginate.prevUrl %}
          <a class="button left previous" href="{{ paginate.prevUrl }}?q={{ selectedSortOption }}">Previous</a>
      {% endif %}
      {% if paginate.nextUrl %}
          <a class="button right next" href="{{ paginate.nextUrl }}?q={{ selectedSortOption }}">Next</a>
      {% endif %}
    </div>

    {% endpaginate %}

Javascript Adding Query

{% set orderJs %}
  $(function(){

    $('#sortQuery').on("change", function(e){

     // Get the value from the select
     var filter = $(this).val();
     document.location.href = '{{ craft.request.getUrl() }}?order=' + filter;

   });

  });
{% endset %}
{% includeJs orderJs %}

Endless Scroll jQuery

<script>
  var ias = jQuery.ias({
    container:  '#university-widget-wrapper',
    item:       '.university-widget',
    pagination: '#pagination',
    next:       '.next'
  });

  ias.extension(new IASSpinnerExtension());            // shows a spinner (a.k.a. loader)
  ias.extension(new IASTriggerExtension({
    offset: 1,
    text: '<a class="button-positive w-button" href="#">Load More Results</a>'
  })); // shows a trigger after page 3
  ias.extension(new IASNoneLeftExtension({
    text: 'There are no more pages left to load.'      // override text when no pages left
  }));

</script>
0
2

You use q instead of order for the query param in the pagination URLs.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.