How To
Add Pagination To URL
3min
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 11 Jul 2023
Did this page help you?