⚠️ This instruction is appropriate for App Lib V2 only. Please contact us for further assistance.
Overview
You can add a pagination amount. After that, this element will look like this:
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
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());
});
};