Adding breadcrumbs to Products

Products differ from both Pages and Categories. A Product may be associated with zero or more categories, and therefore may belong to zero or more hierarchies. The <ev:breadcrumbs> tag automates the rendering of Product breadcrumbs based on the first hierarchy found, but this may not always be desirable.

Automated breadcrumbs

You can automate the rendering of breadcrumbs in your product template using the <ev:breadcrumbs> tag.

<ev:breadcrumbs />

Building your own breadcrumbs

You may choose to render your own custom breadcrumbs. You may do this by accessing the Product's categories.

<?ev
    if (product.categories.length) {
    	var breadcrumbsCategory = product.categories[0];
    	var breadcrumbTrail = breadcrumbsCategory.parents().reverse();
		breadcrumbTrail.push(breadcrumbsCategory);
?>
<ul>
<?ev for (breadcrumb of breadcrumbTrail) { ?>
	<li><a href="{{ breadcrumb.url }}">{{ breadcrumb }}</a></li>
<?ev } ?>
</ul>
<?ev } ?>

Working with Recently Viewed categories

When products are assigned to more than one category you may decide to show the most relevant based on the user's recently viewed categories. We can do this using the RecentlyViewed object.

<?ev
	if (product.categories.length) {
		var breadcrumbsCategory = null;
		for (var category of product.categories) {
			if (recentlyViewed.categories.length) {
				for (var recentCategory of recentlyViewed.categories) {
					if (recentCategory.id == category.id) {
						breadcrumbsCategory = recentCategory;
						break;
					}
				}
			} else {
				breadcrumbsCategory = category;
				break;
			}
		}
		if (breadcrumbsCategory) {
			?>
			<ul>
			<?ev
			var breadcrumbTrail = breadcrumbsCategory.parents().reverse();
			breadcrumbTrail.push(breadcrumbsCategory);
			for (breadcrumb of breadcrumbTrail) {
				?>
				<li><a href="{{ breadcrumb.url }}">{{ breadcrumb }}</a></li>
			<?ev } ?>
			</ul>
			<?ev
		}
	}
?>

Further reading