How To
Add Pagination To URL
2min
There are times when it is beneficial to have the users selected pagination captured and stored as part of the URL.
For Example :
- Allow for consistent tracking of the selected page of results.
- Reusable 'landing page' links
- SEO
To accomplish this we will add in a custom override module that will:
- Intercept the outgoing query
- Analyze the existing URL string
- Update the localstorage of selected page value
- Apply the page offset to the outgoing query
- Update the existing URL string
See : Custom Overrides for details on preparing for Klevu JS overriding
Add the supporting module addPaginationToURL and apply it to the landing page override.
Note : the same addPaginationToURL module can be used on Category pages by applying the override to the catnav scope as well.
Full Example
JavaScript
<script type="text/javascript">
klevu.modifyRequest("landing,catnav", function(data, scope){
// Apply the selected page value from the current URL string
klevu.search.modules.addPaginationToURL.base.getAndUpdatePagination(data, scope);
});
klevu.afterTemplateRender("landing,catnav", function(data, scope){
// Add selected page value to the URL string
klevu.search.modules.addPaginationToURL.base.setPagination(data, scope);
});
</script>
<script type="text/javascript">
// addPaginationToURL module
(function(klevu) {
klevu.extend(true, klevu.search.modules, {
addPaginationToURL: {
base: {
setPagination: function(data, scope, queryId) {
var hasPaginationEnabled = klevu.getSetting(klevu, "settings.theme.modules.pagination.searchResultsPage.enable");
if (hasPaginationEnabled === true) {
var activeQueryId = klevu.getObjectPath(data, "context.activeQueryId");
if (queryId && queryId.length) {
activeQueryId = queryId;
}
var paginationQueryParam = activeQueryId + "PgNo";
var activeQueryMeta = klevu.getObjectPath(data, "template.query." + activeQueryId + ".meta");
var paginationValuesQueryParam = 0;
if (activeQueryMeta) {
var productListLimit = activeQueryMeta.noOfResults;
paginationValuesQueryParam = Math.ceil(activeQueryMeta.offset / productListLimit) + 1;
}
var searchPath = window.location.search;
var updatedPath = klevu.dom.helpers.updateQueryStringParameter(searchPath, paginationQueryParam, paginationValuesQueryParam);
if (paginationValuesQueryParam === 0) {
updatedPath = updatedPath.replace("&" + paginationQueryParam + "=", "");
}
if ('undefined' !== typeof window.history && 'undefined' !== typeof window.history.replaceState) {
window.history.replaceState({}, "", updatedPath);
} else {
console.log("This browser does not have the support of window.history or window.history.replaceState");
}
}
},
getAndUpdatePagination: function(data, scope, queryId) {
var hasAlreadyTriggered = klevu.getObjectPath(scope.kScope, "element.kScope.getAndUpdatePaginationTriggered");
if (hasAlreadyTriggered === true) {
return;
}
var matchedQueryParamId = ""
, matchedQueryParamValue = "";
var recordQueries = klevu.getObjectPath(data, "request.current.recordQueries");
if (recordQueries && recordQueries.length) {
klevu.each(recordQueries, function(key, query) {
if (query.id) {
var paginationFromURL = klevu.dom.helpers.getQueryStringValue(query.id + "PgNo");
if (paginationFromURL && paginationFromURL.length) {
matchedQueryParamId = query.id;
matchedQueryParamValue = paginationFromURL;
}
}
})
}
klevu.setObjectPath(scope.kScope, "element.kScope.getAndUpdatePaginationTriggered", true);
var activeQueryId = klevu.getObjectPath(data, "context.activeQueryId");
if (queryId && queryId.length) {
activeQueryId = queryId;
} else if (matchedQueryParamId.length && matchedQueryParamValue.length) {
activeQueryId = matchedQueryParamId;
var storage = klevu.getSetting(scope.kScope.settings, "settings.storage");
if (storage.tabs) {
storage.tabs.setStorage("local");
storage.tabs.mergeFromGlobal();
storage.tabs.addElement("active", activeQueryId);
storage.tabs.mergeToGlobal();
}
}
var paginationQueryParam = activeQueryId + "PgNo";
var paginationFromURL = klevu.dom.helpers.getQueryStringValue(paginationQueryParam);
paginationFromURL = Number(paginationFromURL);
if (paginationFromURL && paginationFromURL > 1) {
var recordQueries = klevu.getObjectPath(data, "request.current.recordQueries");
if (recordQueries.length) {
klevu.each(recordQueries, function(key, recordQuery) {
if (recordQuery.id === activeQueryId) {
var limit = klevu.getObjectPath(recordQuery, "settings.limit");
limit = Number(limit);
if (limit > 0) {
var expectedOffset = (paginationFromURL - 1) * limit;
klevu.setObjectPath(data, "localOverrides.query." + activeQueryId + ".settings.offset", expectedOffset);
}
}
});
}
}
}
},
build: true
}
});
}
)(klevu);
</script>
Updated 30 Oct 2023
Did this page help you?