For dev - How to add Pagination amount (App Lib V2)

You can add a pagination amount. After that, this element will look like this:

This instruction is appropriate for App Lib V2 only. The app lib V3 associated documents will be available soon. Please contact us for further assistance.

Instruction

Go to the collection-template.liquid or collection.liquid file to add the container of the element into a suitable place:

<div id="bc-sf-filter-top-show-limit"></div>

Open the bc-sf-filter.js file

Build a template of the "Pagination amount" element

For example, the element includes Label and Dropdown, then the template will be:

'showLimitHtml': '<label>Show</label><select>{{showLimitItems}}</select>'

with: {{showLimitItems}} is the list of values of the drop-down, such as 8, 24, 32, 48 and will be built in the next step

Build the initialization function

Place the following script into the end of the file bc-sf-filter.js

BCSfFilter.prototype.buildFilterShowLimit = function() {
    if (bcSfFilterTemplate.hasOwnProperty('showLimitHtml')) {
        jQ('#bc-sf-filter-top-show-limit').html('');


        var numberList = '12,24,32,48';
        if (numberList != '') {
            // Build content
            var showLimitItemsHtml = '';
            var arr = numberList.split(',');
            for (var k = 0; k < arr.length; k++) {
                var label = arr[k];
                showLimitItemsHtml += '<option value="' + arr[k] +'">' + label + '</option>';
            }
            var html = bcSfFilterTemplate.showLimitHtml.replace(/{{showLimitItems}}/g, showLimitItemsHtml);
            jQ('#bc-sf-filter-top-show-limit').html(html);


            // Set value
            jQ('#bc-sf-filter-top-show-limit select').val(this.queryParams.limit);
        }
    }
};

Build the event (optional)

If you want to customize the event of the drop-down, add the below script and customize it:

BCSfFilter.prototype.buildShowLimitEvent = function() {
    var _this = this;
    jQ('#bc-sf-filter-top-show-limit select').change(function(e) {
        onInteractWithToolbar(e, 'limit', _this.queryParams.limit, jQ(this).val());
    })
};