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.
