Breadcrumbs are a great way to navigate through any ecommerce site. Magento’s default theme has breadcrumbs (with microformats!) on product and category pages. This means that there is little work for you to do when setting up a site – as these are all autogenerated for you.
Missing Breadcrumbs
One thing missing however, is that Magento doesn’t have them on any page within the accounts section.
Luckily though, Magento’s extensible system offers an easy way to add breadcrumbs to the account area using a local.xml file. To complicate matters slightly, the account area does have multiple modules linked in to it, so we’ll need to add a number of layout updates in our local.xml file in order to cover the whole customer area.
Layout files resides under /app/design/frontend/your_interface/your_theme/layout/.
Steps to create the missing Breadcrumbs
Now that we know how to add breadcrumbs to the accounts area, we’re going to go ahead and create a local.xml file for our theme. Create the following file: /app/design/frontend/your_interface/your_theme/layout/local.xml – of course, if you already have one, we can simply add in the required information to the existing file.
An empty local.xml file will look something like this. it is, after all, an XML document:
|
1 2 3 |
< ?xml version="1.0"?> <layout version="0.1.0"> </layout> |
When thinking about the customer account area, we;re probably going to want to include some default breadcrumb elements on every page. Namely: “Home”, and “My Account”. So, we can add a generic rule in to allow us to do this. To do this, we use the customer_account namespace.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<customer_account translate="label"> <reference name="breadcrumbs"> <action method="addCrumb"> <crumbname>Home</crumbname> <crumbinfo> <label>Home</label> <title>Home</title> <link />/ </crumbinfo> </action> <action method="addCrumb"> <crumbname>My Account</crumbname> <crumbinfo> <label>My Account</label> <title>My Account</title> <link />/customer/account/ </crumbinfo> </action> </reference> </customer_account> |
If you go and refresh your cache, and log in to your account, you should now have a default breadcrumb on all of your customer account pages with “Home / My Account” displayed.
We can now go through and add the additional breadcrumbs for:
- Dashboard
- Address Book
- Add/Edit Address
- Account Information
- Product Review
- My Tags
- My Downloadable Items
- Wishlist
- Newsletter Management
- Order History
- Individual Order Item in History
We’re going to follow the exact same process, adding the reference, and then adding the breadcrumbs for each section. It’s really only the namespace that’s going to change.
Dashboard
|
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
Address Book
|
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
Add/Edit Address
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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/ </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> |
Account Information
|
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
Product Review
|
1 2 3 4 5 6 7 8 9 10 11 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
My Downloadable Items
|
1 2 3 4 5 6 7 8 9 10 11 |
<downloadable_customer_products translate="label"> <reference name="breadcrumbs"> <action method="addCrumb"> <crumbname>Downloadable Products</crumbname> <crumbinfo> <label>Downloadable Products</label> <title>Downloadable Products</title> </crumbinfo> </action> </reference> </downloadable_customer_products> |
Wishlist
|
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
Newsletter Management
|
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
Order History
|
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
Individual Order Item in History
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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/ </crumbinfo> </action> <action method="addCrumb"> <crumbname>Order View</crumbname> <crumbinfo> <label>Order View</label> <title>Order View</title> </crumbinfo> </action> </reference> </sales_order_view> |
And there we have it. If you combine all of these into a single local.xml document, you will have breadcrumbs throughout the whole customer account section.
Image Credit: Jörn Guy Süß
Comment or tweet @douglasradburn