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.

9 Responses to “How To Fake a Magento Subpage”

  1. pizzafan said on July 5th, 2009 at 9:35 am:

    Finally found the info I needed thanks to your great blog, thanks! ^^

  2. dl_mj12 said on September 1st, 2009 at 3:15 am:

    Leg­end, thanks for sharing…

  3. Silvio said on September 4th, 2009 at 9:57 am:

    Man many thanks! you make my Day!

  4. dfrick said on September 9th, 2009 at 4:24 pm:

    Thanks a lot. This is very helpful.

  5. David H said on February 19th, 2010 at 10:09 pm:

    That’s exactly what I needed. Thank you.

  6. Ross said on June 17th, 2011 at 7:12 am:

    Thanks for the help­ful tip.
    Cheers,
    Ross.

  7. Matt said on June 22nd, 2011 at 7:36 pm:

    Awe­some tip and easy instruc­tions. Had it work­ing in a cou­ple of min­utes. I’m afraid of alter­ing core files and all that, so I will put up with the tedious­ness! Thanks a ton.

  8. Andrew said on August 10th, 2011 at 11:06 am:

    Great. Very help­ful. Was work­ing in 5 minutes

  9. Online Gitarre lernen said on August 18th, 2011 at 4:33 am:

    Thank you so much for this great tip. I didn’t know that you could include slashes in the URL iden­ti­fier — genius! Although with your neat bread­crumb work-around you can fake sub pages very well, I’m still unhappy with Magento CE lack­ing more CMS func­tion­al­ity (appar­ently you get a feature-rich solu­tion in the Enter­prise Edi­tion). May it’s worth a try to inte­grate Magento with WordPress.

Subscribe to this post/thread