Skip to content

Instantly share code, notes, and snippets.

@toodooleedoo
Last active June 23, 2017 13:38
Show Gist options
  • Save toodooleedoo/b2d4ad04fc1bceb7c770 to your computer and use it in GitHub Desktop.
Save toodooleedoo/b2d4ad04fc1bceb7c770 to your computer and use it in GitHub Desktop.
#AEM #Sightly #SSJS Server Side JavaScript Use-API Breadcrumbs

###Description Retrieve a Page Object from all pages which are in the Site root then build a breadcrumb component and display the current pages title in a submenu.

###Use case Display a bar under eg a menu which displays the current pages title and functional breadcrumb components o the right.

##Requirements

  • Responsive and which works on all mobile devices and desktop.
  • Current pages title on the left
  • Breadcrumbs on the right
    • Separated by >
    • Previous pages are clickable

Using Bootstrap and some Business logic in here but can easily be transformed as needed. Page.html included as a sample of implementing this component.

<div class="breadcrumbsContainer" data-sly-use.jsutils="breadcrumbs.js">
<div class="col-xxs col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="pull-left">
<h1>${currentPage.title}</h1>
</div>
</div>
<!--.col-->
<div class="col-xxs col-xs-6 col-sm-6 col-md-6 col-lg-6 text-right">
<ul class="pull-right" data-sly-list="${jsutils.crumbs}">
<li data-sly-test.active="${currentPage.title == item.title}" class="active">${item.properties.navTitle || item.title}</li>
<li data-sly-test="${!active && item.title}"><a href="${item.path}.html">${item.properties.navTitle || item.title}</a></li>
</ul>
</div>
<!--.col-->
</div>
use(["/libs/wcm/foundation/components/utils/ResourceUtils.js",
"/libs/sightly/js/3rd-party/q.js"], function (ResourceUtils, Q) {
/*
* Returns a Breadcrumb to allow user to navigate backwards to homepage
* Author: Eric Soukenka
* Date: 24May2015
*
*/
/* Returns the path to homepage eg: /content/my-site/en.
* Typicall getAbsoluteParent however my site's have varying depths
*/
function getHomePagePath() {
var homepathPromise = Q.defer();
ResourceUtils.getContainingPage(granite.resource)
.then(function (pageResource) {
ResourceUtils.getInheritedPageProperty(pageResource, 'redirectTarget')
.then(function (homepath) {
homepathPromise.resolve(homepath);
})
.fail(function (error) {
homepathPromise.reject(new Error("Failure determining homepath"));
})
})
return homepathPromise.promise
}
var crumbsPromise = Q.defer();
getHomePagePath()
.then(function (homepath) {
var crumbs = [];
var childs = currentPage.path.replace(homepath, '');
crumbs[0] = pageManager.getPage(homepath)
childs.split('/').forEach(function (entry) {
if(entry.length()>0) crumbs[crumbs.length] = pageManager.getPage(homepath+'/'+entry)
});
crumbsPromise.resolve(crumbs)
})
return {
crumbs: crumbsPromise.promise
};
});
<div class="row breadcrumbs">
<div data-sly-resource="${ @path='breadcrumbs', resourceType='my-site/components/breadcrumbs'}"></div>
</div>
<!-- /.row -->
@Dhanusha0401
Copy link

How do I get output for this? When I am executing by creating a design dialog...it's not working

@rajeshkarka
Copy link

It's displaying only 2 levels of pages but what if I want to maintain some levels.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment