Skip to main content
For dev - How to add Pagination amount (App Lib V2)
Thomas Ta avatar
Written by Thomas Ta
Updated over 5 months ago

⚠️ 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:

<a href="https://d33v4339jhl8k0.cloudfront.net/docs/assets/590652f62c7d3a057f88b05d/images/5b0b83790428635ba8b2c785/file-CzLG6guSEs.png" target="_blank" rel="nofollow noopener noreferrer">https://d33v4339jhl8k0.cloudfront.net/docs/assets/590652f62c7d3a057f88b05d/images/5b0b83790428635ba8b2c785/file-CzLG6guSEs.png</a>


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

<a href="https://d33v4339jhl8k0.cloudfront.net/docs/assets/590652f62c7d3a057f88b05d/images/5b0b7c650428635ba8b2c77a/file-2sDxHP1oEl.png" target="_blank" rel="nofollow noopener noreferrer">https://d33v4339jhl8k0.cloudfront.net/docs/assets/590652f62c7d3a057f88b05d/images/5b0b7c650428635ba8b2c77a/file-2sDxHP1oEl.png</a>

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

If you have any questions or need further assistance, please do not hesitate to contact our dedicated support team at [email protected].

Did this answer your question?