Breadcrumbs in Hybris

Breadcrumbs are the common website navigation elements which allows a customer to see their journey in the website, and track backwards through the website to earlier pages.

We can also say it as a list of breadcrumbs which takes the user to the current page.

Each link to a previous page should be rendered as a link.

The first link is always ‘Home’ and always goes to the Homepage.

The current page should be rendered as a label.

ResourceBreadcrumbBuilder : Builds a list of breadcrumbs based on a resource key

How to add breadcrumb to our current page

Step 1

Define below spring bean for breadcrumb builder, its already done by Hybris

<!-- spring bean for breadcrumb builder  -->

<bean id="simpleBreadcrumbBuilder" class="de.hybris.platform.acceleratorstorefrontcommons.breadcrumb.impl.DefaultResourceBreadcrumbBuilder" >
		<property name="i18nService" ref="i18nService" />
</bean>

Step 2

We need to inject above ResourceBreadcrumbBuilder bean in our controller where we are returning our view page

@Resource(name = "simpleBreadcrumbBuilder ")
private ResourceBreadcrumbBuilder resourceBreadcrumbBuilder;

Step 3

Get the List< Breadcrumb > by calling resourceBreadcrumbBuilder.getBreadcrumbs(“resourceKey”);

Where,resourceKey – is the key for the label to display in jsp(kept in the property file)

Example : For cart, we can keep it as
breadcrumb.cart = Cart in base_en.properties file and in this case, we can pass breadcrumb.cart as resourceKey.

Step 4

Add breadcrumbs as key and List returned from Step 3 as value in model attribute

model.addAttribute(“breadcrumbs”, resourceBreadcrumbBuilder.getBreadcrumbs("resourceKey "));

Step 5

Access the breadcrumb in our jsp page by iterating the breadcrumbs list

This is already done by Hybris, we just need to add below lines in our jsp

<%@ taglib prefix="breadcrumb"
	tagdir="/WEB-INF/tags/responsive/nav/breadcrumb"%>
<breadcrumb:breadcrumb breadcrumbs="${breadcrumbs}" />

This is the hybris custom tag which iterates the breadcrumbs list and provides href tag with breadcrumb url and name.

Adding multiple breadcrumb objects for the same page

If we want multiple breadcrumb to be displayed in our page then we have to add multiple Breadcrumb objects with correct breadcrumb url and resource key in the Breadcrumb list.

We can do it as below

final List<Breadcrumb> breadcrumbs = resourceBreadcrumbBuilder.getBreadcrumbs(null);
		breadcrumbs.add(new Breadcrumb(“/url”, getMessageSource().getMessage(“resourceKey1”, null,
				getI18nService().getCurrentLocale()), null));
		breadcrumbs.add(new Breadcrumb("#", getMessageSource().getMessage("“resourceKey2”, null,
				getI18nService().getCurrentLocale()), null));

model.addAttribute(“breadcrumbs”, breadcrumbs);

where resourceKey1 and resourceKey2 are labels defined as keys in properties file.

/url – valid url for resourceKey1
# – indicates current page

base_en.properties

resourceKey1 = Previous page
resourceKey2 = Current page

Raj

Founder of javainsimpleway.com
I love Java and open source technologies and very much passionate about software development.
I like to share my knowledge with others especially on technology 🙂
I have given all the examples as simple as possible to understand for the beginners.
All the code posted on my blog is developed,compiled and tested in my development environment.
If you find any mistakes or bugs, Please drop an email to kb.knowledge.sharing@gmail.com

Connect with me on Facebook for more updates