Jump to content

Custom class for body depending on category

XatuCans

By XatuCans
in Core developers

 Share

Recommended Posts

XatuCans Newbie

XatuCans

Posted
Posted

Hi there, I'd like to assign custom class to the body tag depending on category, but I need to assign the same class to the parent category page, its subcategories pages and all the products belonging to them, for example: I have CAT_01. CAT_01 has two subcategories CAT_01-sub1 and CAT_02-sub2, I'd like to assign the same body class to CAT_01, CAT_01-sub1 and CAT_01-sub2, and to all the products inside of any of those categories-subcategories. 
 
For this purpose I've insert this code in header.tpl document:

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}{if $smarty.get.id_category} class="cat{$smarty.get.id_category}"{elseif $product->id_category_default} class="cat{$product->id_category_default}"{/if}> 

 

 

It works correctly, it assign a body class to the parent category page, CAT_01, with its id number and the same class is assigned to all products inside this category. Until here all is perfect, but when a subcategory (CAT_01-sub1 or CAT_01-sub2) page is loaded, the body class assigned has the id number of the subcategory and I'd like to assign the id of the parent category, I mind, CAT_01's id number.

 

Thanks

 

Link to comment
Share on other sites
Emzed Newbie

Emzed

Posted
Posted

I don't know how robust this is across different versions of PS1.5.x but there is a native function in the category class called getParentsCategories() you can assign to obtain the entire chain of parent categories. In my Prestashop setup (v 1.5.4.1) it appears the default category is automatically fetched for a product page and there's no need to call $product->id_category_default in your header.tpl nor extract any smarty GET variables (unlike v1.4.x where the header.tpl was fetched separately and new category instances needed to be created).

 

Within CategoryController.php's initContent() function you can add something like

'parent_category_chain' => $this->category->getParentsCategories(),

to the "$this->context->smarty->assign(array(" smarty assignment.

 

Then in your header.tpl you can use a foreach loop to only add a category id number where the level_depth of categories is equal to 2 (which would all have a parent category of "home" respectively).

 

Using your example, you could have something like 

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}{if $category->id}{if $category->level_depth eq 2} class="cat{$category->id}"{elseif $category->level_depth > 2}{foreach $parent_category_chain as $parent_category_node}{if $parent_category_node.level_depth eq 2} class="cat{$parent_category_node.id_category}"{/if}{/foreach}{/if}{/if}>

Now you only need to create CSS variations for your top-level-category cat# classes.

 

Cheers

  • Like 2
Link to comment
Share on other sites
  • 6 months later...
  • 2 years later...
Gomlers Newbie

Gomlers

Posted
Posted

I don't know how robust this is across different versions of PS1.5.x but there is a native function in the category class called getParentsCategories() you can assign to obtain the entire chain of parent categories. In my Prestashop setup (v 1.5.4.1) it appears the default category is automatically fetched for a product page and there's no need to call $product->id_category_default in your header.tpl nor extract any smarty GET variables (unlike v1.4.x where the header.tpl was fetched separately and new category instances needed to be created).

 

Within CategoryController.php's initContent() function you can add something like

'parent_category_chain' => $this->category->getParentsCategories(),

to the "$this->context->smarty->assign(array(" smarty assignment.

 

Then in your header.tpl you can use a foreach loop to only add a category id number where the level_depth of categories is equal to 2 (which would all have a parent category of "home" respectively).

 

Using your example, you could have something like 

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}{if $category->id}{if $category->level_depth eq 2} class="cat{$category->id}"{elseif $category->level_depth > 2}{foreach $parent_category_chain as $parent_category_node}{if $parent_category_node.level_depth eq 2} class="cat{$parent_category_node.id_category}"{/if}{/foreach}{/if}{/if}>

Now you only need to create CSS variations for your top-level-category cat# classes.

 

Cheers

 

This is awesome. Just what I need! Unfortunately I don't fully understand what to do in CategoryController.php

 

Anyone want to help me?

Link to comment
Share on other sites
Gomlers Newbie

Gomlers

Posted
Posted (edited)

Hi, 

 

Attached is a module I did for this a while back. The classes are added to the body via jQuery so no core modifications are required. 

 

Let me know if you have any issues.

Wow! Thank you :) :) :)

 

Just added e.g to the category.css:

.cat_185 h4.m_cat_title_block {

 

}

 

It worked JUST the way I was hoping for, with every subcategories of 185 too!

 

Perfect!

Edited by Gomlers (see edit history)
Link to comment
Share on other sites
  • 3 years later...
AstralVoodoo Newbie

AstralVoodoo

Posted
Posted
On 11/30/2016 at 6:43 AM, w3bsolutions said:

Hi, 

 

Attached is a module I did for this a while back. The classes are added to the body via jQuery so no core modifications are required. 

 

Let me know if you have any issues.

addcatclass.zip 9.82 kB · 34 downloads

Hi. And by chance, is there a version for 1.7 version? I installed module, i see in page source <script type="text/javascript"> $(document).ready(function(){ $('body').addClass('cat_1 cat_2 cat_98 cat_44 '); }); </script>, but when i try trigger class in css: 

.cat_1 .cat_2 .cat_98 .cat_44  ~ .show.block{
display: block;
}

it does not work. And there extra space, after cat_44

Link to comment
Share on other sites
w3bsolutions Collaborator

w3bsolutions

Posted
Posted
On 7/23/2020 at 7:38 PM, AstralVoodoo said:

Hi. And by chance, is there a version for 1.7 version? I installed module, i see in page source <script type="text/javascript"> $(document).ready(function(){ $('body').addClass('cat_1 cat_2 cat_98 cat_44 '); }); </script>, but when i try trigger class in css: 


.cat_1 .cat_2 .cat_98 .cat_44  ~ .show.block{
display: block;
}

it does not work. And there extra space, after cat_44

The module should work with PS 1.7 too. If you <body> tag has the CSS classes "cat_1 cat_2 cat_98 cat_44" and you want to refer to all of them in one CSS style declaration, then they have to be together (no spaces in between), so something like this:  

body.cat_1.cat_2.cat_98.cat_44 .show.block {
  display: block;
}

would target elements inside your <body> tag in that category which have the CSS classes "show block" (both of them). 

Link to comment
Share on other sites
AstralVoodoo Newbie

AstralVoodoo

Posted
Posted

Thx for reply. But  does not work for me. I added in html block on products pages, and want to hide some text, except for certain categories, I added a class in a tag in html, and I thought the module would help to do this. That when the product from certain category have class .body.cat_1.cat_2.cat_98.cat_45 will be called another class .showblock.

I added the code to css: 

.body.cat_1.cat_2.cat_98.cat_45 ~ .showblock{
  display: none;
}

But no changes on the page, the block is not hiding...

Link to comment
Share on other sites
w3bsolutions Collaborator

w3bsolutions

Posted
Posted
2 minutes ago, AstralVoodoo said:

Thx for reply. But  does not work for me. I added in html block on products pages, and want to hide some text, except for certain categories, I added a class in a tag in html, and I thought the module would help to do this. That when the product from certain category have class .body.cat_1.cat_2.cat_98.cat_45 will be called another class .showblock.

I added the code to css: 


.body.cat_1.cat_2.cat_98.cat_45 ~ .showblock{
  display: none;
}

But no changes on the page, the block is not hiding...

That's wrong, not the code I posted. 

.body doesn't make any sense, body is the tag, not a css class. 

~ refers to general siblings, get rid of that, I don't think your element is a sibling on the body tag. 

 

Link to comment
Share on other sites
w3bsolutions Collaborator

w3bsolutions

Posted
Posted (edited)
2 hours ago, AstralVoodoo said:

tried your code
  


body.cat_1.cat_2.cat_98.cat_44 .show.block {

display: block;

}

but all the same, text is not hiding on page.

Don't look at cat_44 and cat_45 in code,  i check in both categories

If you want proper help please post a link to the URL where you want the changes done, and a screenshot of what you are trying to achieve exactly on that link. 

If what you want is to hide, then try this: 

body.cat_1.cat_2.cat_98.cat_45 .showblock {
  display: none;
}

Still you should consider a better naming for the class "showblock" if you are hiding it at this point. 

Edited by w3bsolutions (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...