Magento – Add breadcrumbs on customer account area pages

Breadcrumbs are really good way to navigate through the site and provide links back to each previous page the user navigated through to get to the current page. Magento’s default themes does not offer breadcrums in the customer account area. Adding breadcrumbs in the account area may be an added advantage for the users and will help them in navigation. It will give an visual aid to the website as well. Breadcrumbs can be added easily in the customer account area using the local.xml file. Each layout is associated to a module and customer area have multiple modules linked, so in order to add breadcrumbs in all the pages in customer account section, we need add multiple layout updates in out local.xml file.

Magento themes are fully managed by the layout.xml files. Layouts are created per module basis. These files control the structure and behavior of the theme. Layout files resides under app/design/frontend/your_interface/your_theme/layout/. Look and feel of the theme can be easily changed by just modifying the layout.xml files even without touching the .phtml templates. And here comes the power of local.xml layout file. After preparing the layout configuration of all the layout files, its local.xml thats merged at the end of the layout configuration. Local.xml can be used to modify any of the layout section of modules.

Steps to add Breadcrumbs in the Customer Account Area

1. First of all create a local.xml file inside your themes, layout directory. The path of the local.xml will be app/design/frontend/your_interface/your_theme/layout/local.xml. If you already have a local.xml layout file in your layout directory than use the existing file. Alternatively download the Local.xml from here.

Local.xml have the standard layout tag under which all the layout modifications will be defined. Add the following in your empty local.xml file.

<?xml version="1.0"?>
<layout version="0.1.0">

</layout>

Default crumbs on every page in customer account

Now we are going to add default crumbs – Home and My Account which will be displayed on all the pages. Open the file app/design/frontend/your_interface/your_theme/layout/local.xml

Now inside <layout version="0.1.0"> tag add the below given code. Local.xml will look like this now.

<?xml version="1.0"?>
<layout version="0.1.0">

    <!--
    add default crumbs to display in all the customer account pages
    this will add Home / My Account crubms.
    -->
    <customer_account translate="label">
        <reference name="breadcrumbs">
            <action method="addCrumb"><crumbName>Home</crumbName><crumbInfo><label>Home</label><title>Home</title><link>/home</link></crumbInfo></action>
              <action method="addCrumb"><crumbName>My Account</crumbName><crumbInfo><label>My Account</label><title>My Account</title><link>/customer/account/</link></crumbInfo></action>
        </reference>
    </customer_account>

</layout>

Refresh the magento cache. This code will add the default breadcrumbs “Home / My Account” on every page in customer account area.

Add “Home / My Account / Dashboard” crumb on Account Dasboard page.

Open the file app/design/frontend/your_interface/your_theme/layout/local.xml and after the </customer_account> and add this code.

    <!--Add Dashboard crumb on My Dashboard page-->
    <customer_account_index translate="label">
        <reference name="breadcrumbs">
            <action method="addCrumb"><crumbName>Dashboard</crumbName><crumbInfo><label>Dashboard</label><title>Dashboard</title></crumbInfo></action>
        </reference>
    </customer_account_index>

Here we only added a single crumb Dashboard which will automatically be added with the default breadcrumbs.

Complete Local.xml file for Customer Account Breadcrumbs

As you have seen, we need to add layout updates for every page one by one. So rather illustrating each layout update individually, i am giving the complete code of the local.xml. Just copy the whole code as is and put in your local.xml file. Refresh the magento cache and its ready. Download the ready to go Local.xml file.

<?xml version="1.0"?>
<layout version="0.1.0">

    <!--
    ///////////////////////////////////////////////////////
    ///////  BREADCRUMBS IN CUSTOMER ACCOUNT AREA  ////////
    ///////////////////////////////////////////////////////
    add default crumbs to display in all the customer account pages
    this will add Home / My Account crubms.
    -->
    <customer_account translate="label">
        <reference name="breadcrumbs">
            <action method="addCrumb"><crumbName>Home</crumbName><crumbInfo><label>Home</label><title>Home</title><link>/home</link></crumbInfo></action>
              <action method="addCrumb"><crumbName>My Account</crumbName><crumbInfo><label>My Account</label><title>My Account</title><link>/customer/account/</link></crumbInfo></action>
        </reference>
    </customer_account>

    <!-- ACCOUNT SECTIONS -->
    <!--Add Dashboard crumb on My Dashboard page-->
    <customer_account_index translate="label">
        <reference name="breadcrumbs">
            <action method="addCrumb"><crumbName>Dashboard</crumbName><crumbInfo><label>Dashboard</label><title>Dashboard</title></crumbInfo></action>
        </reference>
    </customer_account_index>

    <!--Add Account Information crumb on Account Information page-->
    <customer_account_edit translate="label">
        <reference name="breadcrumbs">
            <action method="addCrumb"><crumbName>Account Information</crumbName><crumbInfo><label>Account Information</label><title>Account Information</title></crumbInfo></action>
        </reference>
    </customer_account_edit>

    <!-- ADDRESS BOOK -->
    <customer_address_index translate="label">
        <reference name="breadcrumbs">
            <action method="addCrumb"><crumbName>Address Book</crumbName><crumbInfo><label>Address Book</label><title>Address Book</title></crumbInfo></action>
        </reference>
    </customer_address_index>

    <customer_address_form translate="label">
        <reference name="breadcrumbs">
            <action method="addCrumb"><crumbName>Address Book</crumbName><crumbInfo><label>Address Book</label><title>Address Book</title><link>/customer/address/</link></crumbInfo></action>
            <action method="addCrumb"><crumbName>Add/Edit Address</crumbName><crumbInfo><label>Add/Edit Address</label><title>Add/Edit Address</title></crumbInfo></action>
        </reference>
    </customer_address_form>

    <!-- MY ORDERS -->
    <sales_order_history translate="label">
        <reference name="breadcrumbs">
            <action method="addCrumb"><crumbName>My Orders</crumbName><crumbInfo><label>My Orders</label><title>My Orders</title></crumbInfo></action>
        </reference>
    </sales_order_history>

    <sales_order_view translate="label">
        <reference name="breadcrumbs">
            <action method="addCrumb"><crumbName>My Orders</crumbName><crumbInfo><label>My Orders</label><title>My Orders</title><link>/sales/order/history/</link></crumbInfo></action>
            <action method="addCrumb"><crumbName>Order View</crumbName><crumbInfo><label>Order View</label><title>Order View</title></crumbInfo></action>
        </reference>
    </sales_order_view>

    <!-- BILING AGREEMENT -->
    <sales_billing_agreement_index>
        <reference name="breadcrumbs">
            <action method="addCrumb"><crumbName>Billing Agreements</crumbName><crumbInfo><label>Billing Agreements</label><title>Billing Agreements</title></crumbInfo></action>
        </reference>
    </sales_billing_agreement_index>

    <sales_recurring_profile_index>
        <reference name="breadcrumbs">
            <action method="addCrumb"><crumbName>Recurring Profiles</crumbName><crumbInfo><label>Recurring Profiles</label><title>Recurring Profiles</title></crumbInfo></action>
        </reference>
    </sales_recurring_profile_index>

    <!-- PRODUCT REVIEW -->
    <review_customer_index translate="label">
        <reference name="breadcrumbs">
            <action method="addCrumb"><crumbName>My Product Reviews</crumbName><crumbInfo><label>My Product Reviews</label><title>My Product Reviews</title></crumbInfo></action>
        </reference>
    </review_customer_index>

    <!-- MY TAGS -->
    <tag_customer_index translate="label">
        <reference name="breadcrumbs">
            <action method="addCrumb"><crumbName>My Tags</crumbName><crumbInfo><label>My Tags</label><title>My Tags</title></crumbInfo></action>
        </reference>
    </tag_customer_index>

    <wishlist_index_index translate="label">
        <reference name="breadcrumbs">
            <action method="addCrumb"><crumbName>My Wishlist</crumbName><crumbInfo><label>My Wishlist</label><title>My Wishlist</title></crumbInfo></action>
        </reference>
    </wishlist_index_index>

    <downloadable_customer_products translate="label">
        <reference name="breadcrumbs">
            <action method="addCrumb"><crumbName>Downloadable Customer Products</crumbName><crumbInfo><label>Downloadable Customer Products</label><title>Downloadable Customer Products</title></crumbInfo></action>
        </reference>
    </downloadable_customer_products>

    <newsletter_manage_index translate="label">
        <reference name="breadcrumbs">
            <action method="addCrumb"><crumbName>Newsletter Manage</crumbName><crumbInfo><label>Newsletter Manage</label><title>Newsletter Manage</title></crumbInfo></action>
        </reference>
    </newsletter_manage_index>
</layout>

As you have notices that after adding default crumbs “Home / My Account“, its all just common code used to create the current active crumb. Url of the page can indicates which module tag need to be updated. For example url http://www.sitename.com/newsletter/manage/ indicates that <newsletter_manage_index translate="label"> tag will be updated.