How To Fake a Magento Subpage

Magento, an open-source PHP ecom­merce solu­tion, has a very com­pre­hen­sive fea­ture list. How­ever, its built-in CMS doesn’t sup­port hier­ar­chi­cal pages. You can fake it, though.

Let’s say you have a page with an SEF (search engine friendly) URL Iden­ti­fier of “foo”. You’d like to have a sub­page “bar” nested under foo. The CMS doesn’t let you cre­ate parent-child rela­tion­ships, but Magento will let you include for­ward slashes in the SEF URL Iden­ti­fier so that it is “foo/bar”.

That’s the good news. The bad news is if you want to use the bread­crumbs block, it won’t work out of the box. The Magento CMS is flat, so the default bread­crumbs will always look like “Home / My Page Title.” The opti­mal solu­tion is to over­ride the bread­crumbs mod­ule and parse the SEF URL Iden­ti­fier and con­struct the bread­crumbs from that. (I may write a post about it in the future so stay tuned.) The good news for those design­ers out there, you don’t have to dive into code.

Magento’s CMS has a fea­ture where each page has a way to over­ride its XML lay­out. When you’re edit­ing a page, go to the “Cus­tom Design” tab. There you’ll see a form field called “Lay­out Update XML”. This is the key. Here’s where you add XML to first unset the bread­crumbs block and then add it back in but with your spe­cific bread­crumbs. Here’s the code:

<reference name="root">
<action method="unsetChild"><alias>breadcrumbs</alias></action>
</reference>

<reference name="root">
<block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs">
    <action method="addCrumb">
        <crumbName>home</crumbName>
        <crumbInfo><label>Home</label><title>Go to Home Page</title><link>/</link></crumbInfo>
    </action>             
    <action method="addCrumb">
        <crumbName>foo</crumbName>
        <crumbInfo><label>Foo</label><title>Foo</title><link>/foo/</link></crumbInfo>
    </action>             
    <action method="addCrumb">
        <crumbName>cms_page</crumbName>
        <crumbInfo><label>Bar</label><title>Bar</title></crumbInfo>
    </action>                  
</block>
</reference>

The first ref­er­ence tells Magento to call the unset action on the root block to remove the orig­i­nal bread­crumbs. The sec­ond ref­er­ence tells Magento to add a new bread­crumbs block. Then within that block it tells Magento to add three new bread­crumbs, one for “home”, one for “foo”, and another for “bar”. crumb­Name is just a unique iden­ti­fier. Under crumbInfo, label is the link text, title is the hover text, and link is the URL. You need to include the root for­ward slash. The trail­ing slash is optional, but to be con­sis­tent with Magento you should include it.

And that’s all there is to it. If you have a Magento site with lots of CMS sub­pages or pages that are deeply nested, then this method can get tedious. That’s why I said the opti­mal solu­tion is to over­ride the bread­crumbs mod­ule in core as a local mod­i­fi­ca­tion. If you don’t have many CMS sub­pages and they’re only one-level deep, then this method is adequate.