Development: Add breadcrumbs on a page via XML layout

The following article may be useful for front-end developers, it describes how to add breadcrumbs on the page (where it is not supposed to be by default) using layout XML and minimal PHP programming. It describes adding of 2-levels breadcrumbs (i.e. “Home / Some page”) which is needed in most cases.

In this article we will add breadcrumbs to Contact us page. There is no breadcrumbs by default.

Step 1

Modify corresponding XML file, in our case it is contacts.xml. You need to add the following code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<contacts_index_index translate="label"> ....             <reference name="breadcrumbs">                     <action method="addCrumb">                             <name>home</name>                             <params helper="arrowhitech_mod/getHomeUrl" />                     </action>                     <action method="addCrumb">                             <name>contact</name>                             <params>                                     <label>Contact Us</label>                                     <title>Contact Us</title>                                     <link/>                             </params>                     </action>             </reference> </contacts_index_index>

As you see we operating with breadcrumbs block via XML. We added 2 breadcrumbs:
- One for homepage (with a link to homepage).
- One for the current page.

The interesting point here is the assigning of the link to first breadcrumb:

1 2 3 4

<action method="addCrumb">     <name>home</name>     <params helper="arrowhitech_mod/getHomeUrl" /> </action>

As you see, we call method getHomeUrl() from helper arrowhitech_mod which insert the link to homepage into breadcrumb. This is our custom helper, lets create it in “Step 2″.

Step 2

First of all, we need to create our own module (Note: If you don’t know how to create your own module in Magento don’t read further).

In below example the module is located in app/code/community/Arrowhitech/Mod/, but you can use any other location you like.

In the /etc/config.xml file of the module we need to define our helper:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<?xml version="1.0"?> <config>     <modules>         <Arrowhitech_Mod>             <version>0.0.1</version>         </Arrowhitech_Mod>     </modules>     <global>         <helpers>             <arrowhitech_mod>                 <class>Arrowhitech_Mod_Helper</class>             </arrowhitech_mod>         </helpers>     </global> </config>

Finally, we need to create a helper file app/code/community/Arrowhitech/Mod/Helper/Data.php:

1 2 3 4 5 6 7 8 9 10 11 12

<?php class Arrowhitech_Mod_Helper_Data extends Mage_Core_Helper_Abstract {     public function getHomeUrl() {         return array(             "label" => $this->__('Home'),             "title" => $this->__('Home Page'),             "link" => Mage::getUrl('')         );     } } ?>

That’s all. If you did everything right you will see the breadcrumbs on the Contact us page.

http://www.arrowhitech.com, http://www.mage-shop.com