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
1<script type="text/javascript">
2
3klevu.modifyRequest("landing,catnav", function(data, scope){
4 // Apply the selected page value from the current URL string
5 klevu.search.modules.addPaginationToURL.base.getAndUpdatePagination(data, scope);
6});
7
8klevu.afterTemplateRender("landing,catnav", function(data, scope){
9 // Add selected page value to the URL string
10 klevu.search.modules.addPaginationToURL.base.setPagination(data, scope);
11
12});
13
14</script>
15
16
17
18<script type="text/javascript">
19// addPaginationToURL module
20(function(klevu) {
21 klevu.extend(true, klevu.search.modules, {
22 addPaginationToURL: {
23 base: {
24 setPagination: function(data, scope, queryId) {
25 var hasPaginationEnabled = klevu.getSetting(klevu, "settings.theme.modules.pagination.searchResultsPage.enable");
26 if (hasPaginationEnabled === true) {
27 var activeQueryId = klevu.getObjectPath(data, "context.activeQueryId");
28 if (queryId && queryId.length) {
29 activeQueryId = queryId;
30 }
31 var paginationQueryParam = activeQueryId + "PgNo";
32 var activeQueryMeta = klevu.getObjectPath(data, "template.query." + activeQueryId + ".meta");
33 var paginationValuesQueryParam = 0;
34 if (activeQueryMeta) {
35 var productListLimit = activeQueryMeta.noOfResults;
36 paginationValuesQueryParam = Math.ceil(activeQueryMeta.offset / productListLimit) + 1;
37 }
38 var searchPath = window.location.search;
39 var updatedPath = klevu.dom.helpers.updateQueryStringParameter(searchPath, paginationQueryParam, paginationValuesQueryParam);
40 if (paginationValuesQueryParam === 0) {
41 updatedPath = updatedPath.replace("&" + paginationQueryParam + "=", "");
42 }
43 if ('undefined' !== typeof window.history && 'undefined' !== typeof window.history.replaceState) {
44 window.history.replaceState({}, "", updatedPath);
45 } else {
46 console.log("This browser does not have the support of window.history or window.history.replaceState");
47 }
48 }
49 },
50 getAndUpdatePagination: function(data, scope, queryId) {
51 var hasAlreadyTriggered = klevu.getObjectPath(scope.kScope, "element.kScope.getAndUpdatePaginationTriggered");
52 if (hasAlreadyTriggered === true) {
53 return;
54 }
55 var matchedQueryParamId = ""
56 , matchedQueryParamValue = "";
57 var recordQueries = klevu.getObjectPath(data, "request.current.recordQueries");
58 if (recordQueries && recordQueries.length) {
59 klevu.each(recordQueries, function(key, query) {
60 if (query.id) {
61 var paginationFromURL = klevu.dom.helpers.getQueryStringValue(query.id + "PgNo");
62 if (paginationFromURL && paginationFromURL.length) {
63 matchedQueryParamId = query.id;
64 matchedQueryParamValue = paginationFromURL;
65 }
66 }
67 })
68 }
69 klevu.setObjectPath(scope.kScope, "element.kScope.getAndUpdatePaginationTriggered", true);
70 var activeQueryId = klevu.getObjectPath(data, "context.activeQueryId");
71 if (queryId && queryId.length) {
72 activeQueryId = queryId;
73 } else if (matchedQueryParamId.length && matchedQueryParamValue.length) {
74 activeQueryId = matchedQueryParamId;
75 var storage = klevu.getSetting(scope.kScope.settings, "settings.storage");
76 if (storage.tabs) {
77 storage.tabs.setStorage("local");
78 storage.tabs.mergeFromGlobal();
79 storage.tabs.addElement("active", activeQueryId);
80 storage.tabs.mergeToGlobal();
81 }
82 }
83 var paginationQueryParam = activeQueryId + "PgNo";
84 var paginationFromURL = klevu.dom.helpers.getQueryStringValue(paginationQueryParam);
85 paginationFromURL = Number(paginationFromURL);
86 if (paginationFromURL && paginationFromURL > 1) {
87 var recordQueries = klevu.getObjectPath(data, "request.current.recordQueries");
88 if (recordQueries.length) {
89 klevu.each(recordQueries, function(key, recordQuery) {
90 if (recordQuery.id === activeQueryId) {
91 var limit = klevu.getObjectPath(recordQuery, "settings.limit");
92 limit = Number(limit);
93 if (limit > 0) {
94 var expectedOffset = (paginationFromURL - 1) * limit;
95 klevu.setObjectPath(data, "localOverrides.query." + activeQueryId + ".settings.offset", expectedOffset);
96 }
97 }
98 });
99 }
100 }
101 }
102 },
103 build: true
104 }
105 });
106}
107)(klevu);
108
109</script>
Updated 30 Oct 2023
Did this page help you?