How to add the Pagination amount

This element will look like this:

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

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

2. Open the file "bc-sf-filter.js".

3. Build 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

- Place the template into the variable "bcSfFilterTemplate" as below:

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