Shoptify Ajax Product Collection

main.js 


/*** LOAD MORE **/
  $(document).on('click', '[data-pagination-link]', function(e) {
    e.preventDefault();
    const $button = $(this);
    const nextUrl = $button.attr('href');

    $button.text("Laden...");
    $button.prop('disabled', true);

    $.get(nextUrl, function(response) {
        const $tempDiv = $('<div>').html(response);
        const newProductsHtml = $tempDiv.find('#product-grid').html();
        const $newButton = $tempDiv.find('[data-pagination-link]');
        
        $('ul#product-grid').append(newProductsHtml);
        $button.closest('.show_more_btn').remove(); // remove old button wrapper

        if ($newButton.length) {
            $('ul#product-grid').after($newButton.closest('.show_more_btn')); // add new button wrapper
        }
    }).fail(function() {
        console.error('Error loading more products.');
        $button.text("Try again");
        $button.prop('disabled', false);
    });
});

/** LOAD MORE****/

main-collection-product-grid.liquid
line 188 
  {% if section.settings.pagination_type == 'default' %}
                {%- if paginate.pages > 1 -%}
                  {% render 'pagination', paginate: paginate, anchor: '' %}
                {%- endif -%} 
            {% elsif section.settings.pagination_type == 'inflating' %}
                <div class="show_more_btn text-center">
            {% if paginate.next %}
              <a data-pagination-link href="{{ paginate.next.url }}" class="button button--primary">
                {{ section.settings.btn_load }}
              </a>
            {% endif %}
          </div>
          {% endif %}
line 395  
 {
      "type": "header",
      "content": "Pagination Type"
    },
    {
      "type": "select",
      "id": "pagination_type",
      "options": [
        {
          "value": "default",
          "label": "Default Pagination"
        },
        {
          "value": "inflating",
          "label": "Inflating Pagination"
        }
      ],
      "default": "inflating",
      "label": "Pagination Type"
    },
    {
      "type": "text",
      "id": "btn_load",
      "label": "Button Load"
    },