How to add Pagination amount

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

https://d33v4339jhl8k0.cloudfront.net/docs/assets/590652f62c7d3a057f88b05d/images/5b0b83790428635ba8b2c785/file-CzLG6guSEs.png


Instruction

1
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>
2
Open the bc-sf-filter.js file
3
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

https://d33v4339jhl8k0.cloudfront.net/docs/assets/590652f62c7d3a057f88b05d/images/5b0b7c650428635ba8b2c77a/file-2sDxHP1oEl.png

4
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);
        }
    }
};
5
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());
    })
};