Magento updates the body class declaration on almost every page. If you look at the source code, the body class varies according to where you are on the website. This can be very useful if you wish to style different pages.
However, I was asked to produce different body backgrounds depending on the category the user was viewing. By default Magento adds body classes for categories based on the category name. So, you get something like the following for a parent category (caravan-motorhome-lighting):
<body class=” catalog-category-view categorypath-caravan-motorhome-lighting-html category-caravan-motorhome-lighting”>
and the following for a child category (mr16-leds):
<body class=” catalog-category-view categorypath-caravan-motorhome-lighting-mr16-leds-html category-mr16-leds”>
This makes styling a parent category & its child categories very difficult – since the class attributes change every time the user navigates to a child category. What was needed was a way of assigning a single class to a parent category and its children – say, ‘caravan-motorhome-lighting’.
I looked around for a solution but didn’t want to go to the bother of overriding any Mage classes, nor could I figure out how to achieve this using Magento’s layout.xml files. Then I thought about what category parameters or attributes I could add from the Admin ‘Manage Categories’ interface. This is when I lucked on the solution.
Within the Category ‘Custom Design’ is the ability to inherit or override the ‘Parent Category Settings’. If this is set to ‘No’, you can then apply a ‘Custom Layout Update’ – which is essentially an xml snippet of the kind usually found in Magento’s layout.xml files.
By adding the following:
<reference name=”root”><action method=”addBodyClass”><className>caravan-motorhome-lighting</className></action></reference>
to the parent category, and then making each child category inherit or ‘Use Parent Category Settings’, I get the body class ‘caravan-motorhome-lighting’ added to every category/sub-category page for that category & its children.
Here we have set this parent category not to ‘Use Parent Category Settings’ & have added the layout update.
Now we set the sub category to ‘Use Parent Category Settings’, & it therefore gets the same body class attribute as its parent category.
The net result is now that parent and child categories share the same body class & I can then set a common background image for all of them to share. So the parent has this body class declaration:
<body class=” catalog-category-view caravan-motorhome-lighting categorypath-caravan-motorhome-lighting-htmlcaravan-motorhome-lighting”>
while its child categories have the following:
<body class=” catalog-category-view caravan-motorhome-lighting categorypath-caravan-motorhome-lighting-mr16-leds-html category-mr16-leds”>
So that both parent and child categories share a common class attribute of ‘caravan-motorhome-lighting’. Meaning I can style all these categories in the same way, while adding different background images for other categories.
You can see the technique in operation at the Aten Lighting website. If you looking for a Leicestershire magento developer, please get in contact.
Thanks Eddie to share this tip…
was just what i was looking for
Hi Eduardo,
Thanks – glad I could help.
Cheers,
Thanks Eddie, I was looking for that. Unfortunathely it doesn’t allow to save XML Code there now. It just doesn’t save it 🙁
Can this be a problem of the newest version 1.6.1.0 ?
Ah sorry, it works now. Something was wrong with the quote. Anyway thanks for sharing your know how here.
Hi Oliver,
Glad to see that you’ve got it working. XML is very unforgiving regarding mismatched quotes, elements, etc. Sometimes I copy the xml into a code editor (netbeans is good for this), edit there & check the syntax, before pasting it back into the CMS page editor within Magento.
Season’s Greetings, Eddie
Hi Eddie, yes thanks. Have a good 2012!!
Everytime I try to paste this in, it just says INVALID XML
Hi Jay,
This probably means that you have mismatched tags somewhere in your layout xml.
1st thing to resolve, however, is exactly what is it that you’re trying to “paste this in”?
Cheers,
Eddie
Hello,
for a reason I dont understand, it is working well on CMS pages, but not in catalog pages.
Someone has an idea? I’ve been looking for hours 🙁
Thkx
Hi Sylvain,
Are you sure that you have set the parent category to “not inherit” & then its children to inherit parent settings?
Regards
Hello Eddie,
yes, the settings are good. What I find strange is that is it working great on “pages”, like homepage.
For ex: on my homepage, the class is: “cms-index-index cms-home mybackground” . On cat pages, the “mybackground” is not added.
I am starting to think I may have an issue with the code that generates the category pages.. don’t know!? I did try with the default Magento theme and get the same issue. Im using EE 1.9.x.
Hi,mybackground
Sorry, but I have to ask – have you added that class into the category where this background is meant to display?
Go into the category custom design, custom layout update & ensure that that something like this is there:
Please be aware that I’ve only done this on CE – never touched EE before, altho’ I’d doubt they work differently at that level? What does the page class look like on a category page? Could it be a css specificity issue?
Cheers,
Eddie
Hello,
I have place the appropriate settings and code on the category where I want a different background (body) 🙂
The page class in the category looks like:
” catalog-category-view categorypath-summer-html category-summer”
I have also noticed the same trouble when I use a Custom Layout Update directly on the product page in the Admin. At the opposite, on cms pages the class is:
” cms- index-index cms-home mybackground” (working!!). I think the issue is more related to a code problem than a css thing.
Anyway, I will have to live with it until I upgrade to newer EE version. Thanks for your help! 🙂
Hello again,
just to let you know my problems were caused by a bug with Enterprise edition in category/product controllers. I dont know if it has been fixed with the recent release, but EE users can get a patch from the Magento Support.
Thank you so much 🙂
Great news & thanks for the update.
Regards,
Eddie
Thank you so much for sharing these tips 🙂
It helped me a lot. Thank you
Eddie – you are a star – Thanks.
Also, if you want it to work all the way down to product level make sure that the option:
Apply to products is set to Yes…
Result!
Thanks, Alistair
Hi Alistair,
Thanks for dropping by & I’m glad it worked for you. Thanks too for the tip re: apply to all products.
Cheers,
In case anyone else comes across this and finds it doesn’t work if you copy and paste the code directly, be warned that the double quotes are not the “right ones” for xml. Delete and replace them with “proper” quotes and it’ll work perfectly. Thanks for the simple explanation Eddie.
Hi,
Thanks for the feedback – I think the incorrect double quotes are from cut ‘n’ paste. Glad it worked for you.
Regards,
Eddie
How do you handle non-category product links?
In various places (search results, new products, etc) products will be linked by their non-category url (domain.com/product-name) – and then the body category class is not added.
That gives me a real headache. Any ideas?
Hi Tony,
Is it not possible to add some layout updates in local.xml? Look at searchresults.xml layout file
catalogsearch_result_index– copy that handler into local.xml & that should enable you to add a body class. It should just be a case of repeating for similar scenarios.Good luck,
Eddie