AEM Ajax Pagination using the Sightly List Component

This post shows how to change the Sightly List Component pagination behavior from refreshing the whole page to only refreshing the List Component section using Ajax.

This brings a better user experience without loading unnecessary scripts.

Create Your Own List Component

First, copy the List Component (/libs/wcm/foundation/components/list) to your application folder:



Now, change the property sling:resourceSuperType to wcm/foundation/components/list

In order to differentiate the two components (the native and ours) change the property jcr:title to List – Sightly – Pagination


list.js

We now need to change a little bit the back script list.js file (/apps/test/list/list.js).

Only replace the var _getPrevPage and _getNextPage values to:

var _getPrevPage = function(listConfig) {

var prevPage;

if (listConfig.pageStart > 0) {

var startPoint = listConfig.pageMax > 0 &&

pageStart > listConfig.pageMax ?

pageStart – listConfig.pageMax : 0;

prevPage = CONST.PARAM_PAGE_START + “=” + startPoint;

}

return prevPage;

};

var _getNextPage = function(listConfig, hasMore) {

var nextPage;

if (hasMore) {

var startPoint = listConfig.pageStart + listConfig.pageMax;

nextPage = CONST.PARAM_PAGE_START + “=” + startPoint;

}

return nextPage;

}

list.html
The following code is from the list.html file. It defines a new div tag with a specific id that we are going to use for changing the contained HTML via Ajax.

A workaround we have to do with Sightly in order to pass as parameter the component’s properties to JavaScript functions is to put <a> tags JavaScript functions @ context=’scriptString’

<div data-sly-unwrap=”${wcmmode.edit}” class=”cq-dd-pages”

data-sly-use.listComponent=”list.js”

data-slyuse.emptyRenderer=”emptylist.html”

data-sly-use.itemTemplate=”listitem.html”>

<div data-sly-call=”${emptyRenderer.emptylisttemplate @ list=listComponent}”

data-sly-unwrap>

</div>

<link data-sly-test=”${properties.feedEnabled}” rel=”alternate”

type=”application/atom+xml” title=”Atom 1.0 (List)”

href=”${resource.path}.feed” />

<div id=”listId_${currentNode.name}”>

<ul data-sly-element=”${listComponent.element}”

data-sly-list.listItem=”${listComponent.list}”

class=”foundation-ordered-list-container”>

<li data-sly-call=”${itemTemplate[listComponent.type] @

renderItem=listItem}”

class=”foundation-list-item”>

</li>

</ul>

<div data-sly-test=”${!listComponent.isEmpty &&

listComponent.isPaginating}” class=”pagination”>

<div data-sly-test=”${listComponent.previousLink}” class=”previous”>

<a onclick=”paginateAjax(

‘${currentNode.path @ context=’scriptString’}’,

‘${ listComponent.previousLink@ context=’scriptString’}’,

‘${currentNode.name @ context=’scriptString’}’ )”>

&laquo; Previous

</a>

</div>

<div data-sly-test=”${listComponent.nextLink}” class=”next”>

<a onclick=”paginateAjax(

‘${currentNode.path @ context=’scriptString’}’,

‘${ listComponent.nextLink@ context=’scriptString’}’,

‘${currentNode.name @ context=’scriptString’}’)” >

Next &raquo;

</a>

</div>

</div>

</div>

</div>

clientlibs
Let’s now create the clientlibs for the List Component. In order to make this post as short as possible, we are going to use the same name for categories that the Geometrixx template uses (apps.geometrixx-main):

js.txt
#base=js
list.js

list.js

function paginateAjax(path,link,nodeName){
$CQ.ajaxSetup({
xhrFields: {withCredentials: true}
});

$CQ.ajax(path+”.html?”+link).done(
function(data) {
$CQ(“#listId_”+nodeName).html($CQ(data));
});
}

Finally, drop the component to http://localhost:4502/cf#/content/geometrixx/en/toolbar.html and configure it:





The trick here is that if we put the following URL in a browser:
http://localhost:4502/content/geometrixx/en/toolbar/jcr:content/par/list.html?start=5 it shows us the component’s HTML that we need for the Ajax pagination.

Now you have the Sightly list component paginating via Ajax!