Jump to content
ezakimak

multiple css for the site depending on selected category

Recommended Posts

Hi everyone! I was wondering how dificult it would be ( if it could be done ) to use different css on the FO depending on the category selected by a customer, i dont know if i am expressing my thought correctly, but you could give a look at this site so understand better what i am asking here.

http://www.csszengarden.com/

We were wondering if we could do thinks like that ( shown in that site ) in our store, set the entire appearance of our shop depending on the categories selected by the customer

best regards

Share this post


Link to post
Share on other sites

There are a couple of ways you could do this, depending on how different the themes are. If there are only minor differences like a different background and some elements with different colours, I suggest that you change line 40 of header.tpl (in PrestaShop v1.3.1) from:

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>



to:

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



Then you can use code like the following in css/global.css in your theme's directory to specify a different background for each category:

body.cat1 { background-image: url(../img/cat1.jpg) }
body.cat2 { background-image: url(../img/cat2.jpg) }



If the themes will be completely different, you could create a separate theme for each category and change line 4 of config/settings.inc.php from:

define('_THEME_NAME_', 'yourtheme');



to:

define('_THEME_NAME_', 'yourtheme' . (isset($_GET['id_category']) ? $_GET['id_category'] : ''));



This will change the theme directory that is used based on the current category ID. You'd need to create a separate theme for each category called yourtheme1, yourtheme2, etc and yourtheme would be used for any non-category pages.

  • Like 2

Share this post


Link to post
Share on other sites

waw cool information Rocky, you are my favorite moderator :D

may i ask something here? Could i use the same code for different colour for each category. so each category have a different colour.
(both top menu hor and block categories)

thank you

Share this post


Link to post
Share on other sites

Sure, just use my first option above and then prefix your existing styles with the body.cat1 or the ID of whichever category you want to change. For example:

body.cat2 div#categories_block_left ul.tree a { color: #000 }



This would override the default colour of the links in the category block for category 2 only.

You could modify modules/jbx_menu/css/superfish-modified.css in a similar way:

body.cat2 .sf-contener { background: #000 }

  • Like 1

Share this post


Link to post
Share on other sites

Very nice rocky thanks for the share... Any themes available for download with these examples in them already?

Share this post


Link to post
Share on other sites

Unfortunately, no. I'm not aware of any themes you can download that let you choose a different background for each category.

Share this post


Link to post
Share on other sites

what about the products in that categoty?

I want to display the category background also to all the products in the category.

I know I can get all the product ID'd the same way, but I can't add a CSS style to every product...

So I need to get the products's parent category I.

Thanks.

Share this post


Link to post
Share on other sites

Try the following:

<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}>

Share this post


Link to post
Share on other sites

The
$product->id_category_default doesn't work for the products. I'm using ver 1.2.5, does it suppose to work on that version? If not, where can I change the code so it will work?

Does all products have 'id_category_default' value?

Thanks

Share this post


Link to post
Share on other sites

I forgot. The $product variable is only accessible in product.tpl, not header.tpl. I'll need to think harder to find a solution.

Share this post


Link to post
Share on other sites

You'll need to edit header.php and add the following code before the $smarty->display to get the default category of the product:

if ($page_name == 'product' AND isset($_GET['id_product']))
{
   $product = new Product(intval($_GET['id_product']));
   if (Validate::isLoadedObject($product))
       $smarty->assign('default_category', $product->id_category_default);
}



Then use the following in header.tpl:

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

Share this post


Link to post
Share on other sites

I did something similar, and it worked.

at the init.php I added:

if (isset($_GET['id_product'])){
  $product = new Product($_GET['id_product']);
  $smarty->assign('id_category_default', $product->id_category_default);
}



and the rest...

Thanks a lot, you really helped!

Share this post


Link to post
Share on other sites

all those things above is working when I tried ini my theme, until I got this trouble:

Current theme unavailable. Please check your theme directory name and permissions.

when I opened the subcategory.

anyone? thank you

Share this post


Link to post
Share on other sites

Hi to everyone :-)
I've already edited header.php and header.tpl like this:

You'll need to edit header.php and add the following code before the $smarty->display to get the default category of the product:

if ($page_name == 'product' AND isset($_GET['id_product']))
{
   $product = new Product($_GET['id_product']);
   $smarty->assign('default_category', $product->id_category_default);
}



Then use the following in header.tpl:

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



And it worked perfectly for a single category and for its products.
My question is: is there a way to make it work with subcategories too?

Share this post


Link to post
Share on other sites

I've updated my code above to make it more robust.

The code should already work with subcategories. You just have to include all the subcategory IDs when applying the CSS.

Share this post


Link to post
Share on other sites
There are a couple of ways you could do this, depending on how different the themes are. If there are only minor differences like a different background and some elements with different colours, I suggest that you change line 40 of header.tpl (in PrestaShop v1.3.1) from:

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>



to:

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



Then you can use code like the following in css/global.css in your theme's directory to specify a different background for each category:

body.cat1 { background-image: url(../img/cat1.jpg) }
body.cat2 { background-image: url(../img/cat2.jpg) }



If the themes will be completely different, you could create a separate theme for each category and change line 4 of config/settings.inc.php from:

define('_THEME_NAME_', 'yourtheme');



to:

define('_THEME_NAME_', 'yourtheme' . (isset($_GET['id_category']) ? $_GET['id_category'] : ''));



This will change the theme directory that is used based on the current category ID. You'd need to create a separate theme for each category called yourtheme1, yourtheme2, etc and yourtheme would be used for any non-category pages.



Hi Rocky.

I am trying to see what you are doing here.

I am a new user, love prestashop and trying to learn here.

The header.tpl is ok, but were in globale.css do you make the changes.

body.cat1 { background-image: url(../img/cat1.jpg) }
body.cat2 { background-image: url(../img/cat2.jpg) }

and how do you do it?
and what to write exactly in the css

hope you can help me.

Share this post


Link to post
Share on other sites

Anywhere in global.css will do. It will simply replace the image defined in the body tag with a different one with each category. The change in header.tpl adds a class with the category ID to allow this. Simply upload all the category images into the img directory inside your theme.

Share this post


Link to post
Share on other sites
/*
   PrestaShop CSS
   18 used colors: 
   10 grays: #374853 #595a5e #5d717e #76839b white #bdc2c9 #d0d1d5 #d0d3d8 #e5e6e7 #f1f2f4
   4 fushias: #f6dce8 #dd2a81 #971d58 #5d0630
   2 yellows: #f8e1a0 #f9e400
   1 green: #488c40
   1 red: #da0f00
*/

body.cat1 { background-image: url(../img2/back2.png) }
body.cat2 { background-image: url(../img2/back3.png) }

* {
   padding: 0;
   margin: 0
}
body {
   background-image:url(../img2/back1.png);
   background-color: black;



Did it like this and didnt work, am I making a mistake here?

Hope you got time for a newcommer :)

Have to tell you that i use PS 1.4

Share this post


Link to post
Share on other sites

Looks fine to me, though with that code, your images will need to be in the themes//img2 directory instead of the img directory.

Share this post


Link to post
Share on other sites

they are :)

But still not working :(
When I check in firebug it looks fine, and the id on the link is ok too.
guess its not working in PS 1.4 then

Share this post


Link to post
Share on other sites

Rocky, please, help me, brother! I have a body with blue color, but I want body with red color at category pages and products from the category. I have Prestashop version 1.4.2. What I do:

1. At FrontController.php I paste this code before self::$smarty->display(_PS_THEME_DIR_.'header.tpl');

  if ($page_name == 'product' AND isset($_GET['id_product']))
{
   $product = new Product(intval($_GET['id_product']));
   if (Validate::isLoadedObject($product))
       $smarty->assign('default_category', $product->id_category_default);
}



2. Then I create body.red with red color at global.css.

3. Then I paste this code at header.tpl after

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}



    {if $smarty.get.id_category} class="red"
    {elseif $default_category} class="red"{/if}>



And the red color at category is work but not work at product pages. Rocky, please help!
P.S. Sorry for my bad English.

Share this post


Link to post
Share on other sites

Try:

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}{if $page_name == 'category' OR $page_name == 'product'} class="red"{/if}

Share this post


Link to post
Share on other sites

Rocky, thanks, it works but if I want to do also not only red but yellow and green colors for different categories and their products?

Share this post


Link to post
Share on other sites

I suggest using the following code in FrontController.php so that you have a single $id_category variable on both category and product pages:

if ($page_name == 'category' AND isset($_GET['id_category']))
   $smarty->assign('id_category', intval($_GET['id_category']));
elseif ($page_name == 'product' AND isset($_GET['id_product'])){
   $product = new Product(intval($_GET['id_product']));
   if (Validate::isLoadedObject($product))
       $smarty->assign('id_category', $product->id_category_default);
} 



Then use an if-else statement in the TPL file:

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}{if isset($id_category)} class="{if $id_category == 1 OR $id_category == 2}red{elseif $id_category == 3 OR $id_category == 4}green{else}blue{/if}"{/if}



This will make category 1 and 2 red and category 3 and 4 green and all other categories blue. Add more categories as necessary. This should work, unless you have hundreds or more categories, in which case it might become unmanageable.

Share this post


Link to post
Share on other sites

Is the class being added? Did you add CSS like the following?

body.red { background: url(../img/red.jpg) }
body.green { background: url(../img/green.jpg) }
body.blue { background: url(../img/blue.jpg) }

Share this post


Link to post
Share on other sites

Rocky, course I did it. It is really strange... I copied your code above and paste it and at a FrontController.php and at header.tpl but there are no colors red, etc. even at categories...

Share this post


Link to post
Share on other sites

Can you view the source of your website and check that class="red" or any other colour is in the HTML code on the <body> tag?

EDIT: I forgot an intval in my code above. I've updated it.

Share this post


Link to post
Share on other sites

Rocky, sorry I don't exactly understand what I have to do:) I see that you forgot something at your code above, ok I'll try it.

Share this post


Link to post
Share on other sites

Try changing your code in FrontController.php to the code at here. If that doesn't work, go to a category that should have a colour, then right-click on the page and click "View source". Scroll down to the <body> tag and check whether it has class="red" or whatever colour it's supposed to be.

Share this post


Link to post
Share on other sites

Rocky, I paste the codes at header.php before self::$smarty->display(_PS_THEME_DIR_.'header.tpl'); and at header.tpl and now my shop does not loading - mistake of server:(

Share this post


Link to post
Share on other sites

Oops. I put one too many ( in there. I've fixed it. Try copying it again.

Share this post


Link to post
Share on other sites

Rocky, that doesn’t work and I there is a source at the category at the <body> tag: <body id="category"
>



As you can see there are no body class...

Share this post


Link to post
Share on other sites

Check to make sure that "Force compile" is set to "Yes" on the Preferences > Performance tab, to make sure that the modified header.tpl file has been recompiled. If that doesn't work, then {if isset($id_category)} must be returning false, which means the FrontController.php code isn't assigning the variable properly. I'm not sure why exactly.

Share this post


Link to post
Share on other sites

Rocky, I always clear files at compile directory after changing .tpl files...You said I have to {if isset($id_category)} returning false?

Share this post


Link to post
Share on other sites

That's right. If the class="blue" isn't being displayed, then isset($id_category) must be returning false. If it wasn't, you'd have class="blue" even if all the other if statements returned false. That means $id_category doesn't exist, but you set it in FrontController.php, so it should exist. That's why I'm confused. I'm not sure how to help.

EDIT: Perhaps this link will help.

Share this post


Link to post
Share on other sites

Ok, Rocky maybe it will be better to use differend css files with different colors for body?
For example {if $smarty.get.id_category == 5} <link href="red" rel="stylesheet" type="text/css" media="{$media}"
{elseif $smarty.get.id_category == 6} <link href="green" rel="stylesheet" type="text/css" media="{$media}"{/if}>?

Share this post


Link to post
Share on other sites

Yes, that could work, though it means more duplication of CSS that must be redownloaded.

Share this post


Link to post
Share on other sites

It means it will take longer to load each different-coloured page, and you will need to remember to change CSS code in three places, which is error-prone. It's a bad design, but it will work. It is better to use one CSS file and different classes, but it isn't working for you for some reason.

Share this post


Link to post
Share on other sites

Rocky, hello. I am trying to input another css for category with color red for body but there are nothing changes...(
{if $smarty.get.id_category 5} <link href="../themes/mytheme/red.css" rel="stylesheet" type="text/css" media="{$media}"

Share this post


Link to post
Share on other sites

Rocky, hi! I have input another css yo different categories but there are still only for categories and not for their products. Rocky, but why your code do not work for me but so many people are solved the problem like mine?

Share this post


Link to post
Share on other sites

I've been using this to some success, but I've been unable to get this to work at the product level. This seems to be a problem in the core of Prestashop, as I've noticed the module Advanced Top Menu is also unable to determine the top level category of a product.

However, I'm not certain it's impossible to determine at a product level, because the information is available to the breadcrumbs section, where it displays a link to the top level category, right after the home link?

Share this post


Link to post
Share on other sites

Here is еhe solution:
At the header.tpl for the <body> tag:
replace this -

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}


for this -

{assign var="prd" value=Product::getIndexedCategories($smarty.get.id_product)}
        <body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}


Then

class="
       {foreach from=Category::getChildren(5, $cookie->id_lang) item=category} 
       {if $smarty.get.id_category == 5 || $smarty.get.id_category == $category.id_category || $prd.0.id_category == $category.id_category}YOURCLASS1{/if} 
       {/foreach}
       {foreach from=Category::getChildren(32, $cookie->id_lang) item=category} 
       {if $smarty.get.id_category == 32 || $smarty.get.id_category == $category.id_category || $prd.0.id_category == $category.id_category}YOURCLASS2{/if} 
       {/foreach}


etc.
Best regards!

Share this post


Link to post
Share on other sites

Damn, for some reason that's not working out for me. I think I'll need to add a function to the product class to return the top level category id for a given product id.

Share this post


Link to post
Share on other sites

Yes, I set up a couple of classes to test but I found that it worked in a different way to the code I already had.

I found with this solution that it created a mess in my [body... class=""]

I guess what I'd really like to know is how to get the default_category_id for any page other than the homepage... category, subcategory or product. I'm certain it is possible as the breadcrumbs class seems to be able to do it.

Share this post


Link to post
Share on other sites

I am trying to make this work for my theme. So far I can get the body class or id to updated depending where you are in the shop, EXCEPT to indicate the default category of the currently displayed product.

 

It would be wonderful to be able to show the current category in the menu when you are on a product page. Then the menu could indicate the category link with css making it current.

 

What I need to do is add some category id or class for the <body> tag so that each product shows its parent category. It would also have to work with the Superfish menu so that menu can indicate the current page or parent category with a css class like .current or something like that.

 

So when you're on the contact page the "Contact Us" list link in the superfish menu has an added class of current, and when you're on a product page the parent category link in the superfish menu has an added class of current. Then you could apply one specific css style to the current page or parent category!

 

Is this possible?

Share this post


Link to post
Share on other sites

Hi all,

 

I have this working on category level, anyone knows how to make it work with products also in ver. 1.4.7.3

 

I´ve tried to edit my header.php but there´s no $smarty->display on it

 

Thx in advance

Share this post


Link to post
Share on other sites

Hi, I'm trying to use this for changing css layout for some of my categories:

 

If the themes will be completely different, you could create a separate theme for each category and change line 4 of config/settings.inc.php from:

 

define('_THEME_NAME_', 'yourtheme');

 

to:

 

define('_THEME_NAME_', 'yourtheme' . (isset($_GET['id_category']) ? $_GET['id_category'] : ''));

 

This will change the theme directory that is used based on the current category ID. You'd need to create a separate theme for each category called yourtheme1, yourtheme2, etc and yourtheme would be used for any non-category pages.

 

Problems:

  1. Can Subcategories and product pages be included? (i.e. Cat A and all of its subcats and product pages = blue, Cat B and all of its subcats and product pages = red)
  2. How can I have different header logos for each theme?

Thanks for any help, tried the other solution Rocky provided but this does not work for me.

Share this post


Link to post
Share on other sites

Thanks to Slieptsov for the solution! This worked for me too in 1.4:

 

{assign var="prd" value=Product::getIndexedCategories($smarty.get.id_product)}

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}

class="

{foreach from=Category::getChildren(13, $cookie->id_lang) item=category}

{if $smarty.get.id_category == 13 || $smarty.get.id_category == $category.id_category || $prd.0.id_category == $category.id_category}cat13{/if}

{/foreach}">

 

and for the logo:

 

{assign var="prd" value=Product::getIndexedCategories($smarty.get.id_product)}

<a id="header_logo" href="{$link->getPageLink('index.php')}" title="{$shop_name|escape:'htmlall':'UTF-8'}">

<img class="logo" src="

{foreach from=Category::getChildren(13, $cookie->id_lang) item=category}

{if $smarty.get.id_category == 13 || $smarty.get.id_category == $category.id_category || $prd.0.id_category == $category.id_category}{$img_ps_dir}logo13.jpg{else}{$img_ps_dir}logo.jpg{/if}

{/foreach}"</a>

Share this post


Link to post
Share on other sites

Pour la partie dur le define dans settings.inc.php c'est intéressant mais je ne pense pas que vous arriviez à récupérer l'id_category à cet endroit avec un GET

Share this post


Link to post
Share on other sites

Hi :)

 

Rocky I try what you tell about different category background in 1.5.6.2, but result is "class="category">" in top left corner and no bacground in category. Cqn you help?

 

I do:

 

There are a couple of ways you could do this, depending on how different the themes are. If there are only minor differences like a different background and some elements with different colours, I suggest that you change line 40 of header.tpl (in PrestaShop v1.3.1) from:

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>

to:

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

Share this post


Link to post
Share on other sites

try to recompile your theme, it looks like your shop remember old settings (you said that you still have got class="category")

Share this post


Link to post
Share on other sites

how i can do this background image changing on every CMS page ? Like i have a shipping page and in background i have a car ...

Share this post


Link to post
Share on other sites

Hi everybody, i try to reactivate this old topic for find a solution to my problem that is the same of the this topic, i want diffrent background image for each category how should i do?

Edited by biumbria (see edit history)

Share this post


Link to post
Share on other sites

I modified the header like you said rocky, and the global.css as you can see below, but it doesnt work, my web site is www.umbriacato.it could you help me?

thank you

 

 

 /* line 1689, ../sass/global.scss */

 
.header-container {
 
  position: relative;
 
  min-height: 500px;
 
  background-image: url(../img/templatetrip/header-bg.jpg); 
 
  body.cat13 { background-image: url(../img/templatetrip/parallax.jpg) };
 
  margin: 0 0 60px 0;

Share this post


Link to post
Share on other sites
That's invalid CSS. I'm not sure exactly what you're trying to do, but I think the following is better:
.header-container {
  position: relative;
  min-height: 500px;
  background-image: url(../img/templatetrip/header-bg.jpg); 
  margin: 0 0 60px 0;
}

.cat13 .header-container { background-image: url(../img/templatetrip/parallax.jpg) };

It will replace header-bg.jpg with parallax.jpg on category 13 only.

Share this post


Link to post
Share on other sites

Thank you rocky for the answer, it doesnt work, my aim is to have different header background image for each catergory, i modified the header.tpl like you said in the first page of this topic, from this:

 

</head>
<body{if isset($page_name)} id="{$page_name|escape:'html':'UTF-8'}"{/if} class="{if isset($page_name)}{$page_name|escape:'html':'UTF-8'}{/if}{if isset($body_classes) && $body_classes|@count} {implode value=$body_classes separator=' '}{/if}{if $hide_left_column} hide-left-column{else} show-left-column{/if}{if $hide_right_column} hide-right-column{else} show-right-column{/if}{if isset($content_only) && $content_only} content_only{/if} lang_{$lang_iso}">
{if !isset($content_only) || !$content_only}
 
to this:
 
</head>
<body{if isset($page_name)} id="{$page_name|escape:'html':'UTF-8'}"{/if}{if $smarty.get.id_category} class="cat{$smarty.get.id_category}"{/if} class="{if isset($page_name)}{$page_name|escape:'html':'UTF-8'}{/if}{if isset($body_classes) && $body_classes|@count} {implode value=$body_classes separator=' '}{/if}{if $hide_left_column} hide-left-column{else} show-left-column{/if}{if $hide_right_column} hide-right-column{else} show-right-column{/if}{if isset($content_only) && $content_only} content_only{/if} lang_{$lang_iso}">
{if !isset($content_only) || !$content_only}
 
 
is it right?
 
thabk you very much
Edited by biumbria (see edit history)

Share this post


Link to post
Share on other sites

Yes, that part is right. It's just the CSS that is wrong.

Share this post


Link to post
Share on other sites

You made a typo. There shoud be no space between the . and header-container:

.cat13 . header-container { background-image: url(../img/templatetrip/parallax.jpg) };

It should be:

.cat13 .header-container { background-image: url(../img/templatetrip/parallax.jpg) };

Share this post


Link to post
Share on other sites

Hello, please i have another problem related to the same question, now i have for each category a different header background image, but if i open a product of one category i dont have in the header product page the image that i can find in the related category page, how can i do?

Share this post


Link to post
Share on other sites
Try the following code in header.tpl:
<body{if isset($page_name)} id="{$page_name|escape:'html':'UTF-8'}"{/if} class="{if isset($smarty.get.id_category) && $smarty.get.id_category|intval}cat{$smarty.get.id_category|intval} {elseif $page_name == 'product' && isset($cookie->last_visited_category) && $cookie->last_visited_category|intval}cat{$cookie->last_visited_category|intval} {elseif $page_name == 'product' && isset($product) && $product->id|intval}cat{$product->id_category_default|intval} {/if}{if isset($page_name)}{$page_name|escape:'html':'UTF-8'}{/if}{if isset($body_classes) && $body_classes|@count} {implode value=$body_classes separator=' '}{/if}{if $hide_left_column} hide-left-column{else} show-left-column{/if}{if $hide_right_column} hide-right-column{else} show-right-column{/if}{if isset($content_only) && $content_only} content_only{/if} lang_{$lang_iso}">

This code will use the category ID on category pages. On product pages, it will use the last visited category if it exists or the product's default category otherwise.

Share this post


Link to post
Share on other sites

Hi, sorry, I am going again into this post; the problem is, if I open a product from the home page (not form inside his category) through for example the new products module, the header image will not be the image of the category which the product belongs, but the image of the last category visited, how can i fill also this thing to have always the right image on the header?

thank you very much

Share this post


Link to post
Share on other sites
Try:
<body{if isset($page_name)} id="{$page_name|escape:'html':'UTF-8'}"{/if} class="{if isset($smarty.get.id_category) && $smarty.get.id_category|intval}cat{$smarty.get.id_category|intval} {elseif $page_name == 'product' && isset($cookie->last_visited_category) && $cookie->last_visited_category|intval && Product::idIsOnCategoryId($product->id, [$cookie->last_visited_category|intval])}cat{$cookie->last_visited_category|intval} {elseif $page_name == 'product' && isset($product) && $product->id|intval}cat{$product->id_category_default|intval} {/if}{if isset($page_name)}{$page_name|escape:'html':'UTF-8'}{/if}{if isset($body_classes) && $body_classes|@count} {implode value=$body_classes separator=' '}{/if}{if $hide_left_column} hide-left-column{else} show-left-column{/if}{if $hide_right_column} hide-right-column{else} show-right-column{/if}{if isset($content_only) && $content_only} content_only{/if} lang_{$lang_iso}">

This adds an additional check to make sure the product is in the cookie category before using it. If it isn't, the default product category is used.

 

Share this post


Link to post
Share on other sites

 

Try:
<body{if isset($page_name)} id="{$page_name|escape:'html':'UTF-8'}"{/if} class="{if isset($smarty.get.id_category) && $smarty.get.id_category|intval}cat{$smarty.get.id_category|intval} {elseif $page_name == 'product' && isset($cookie->last_visited_category) && $cookie->last_visited_category|intval && Product::idIsOnCategoryId($product->id, [$cookie->last_visited_category|intval])}cat{$cookie->last_visited_category|intval} {elseif $page_name == 'product' && isset($product) && $product->id|intval}cat{$product->id_category_default|intval} {/if}{if isset($page_name)}{$page_name|escape:'html':'UTF-8'}{/if}{if isset($body_classes) && $body_classes|@count} {implode value=$body_classes separator=' '}{/if}{if $hide_left_column} hide-left-column{else} show-left-column{/if}{if $hide_right_column} hide-right-column{else} show-right-column{/if}{if isset($content_only) && $content_only} content_only{/if} lang_{$lang_iso}">

This adds an additional check to make sure the product is in the cookie category before using it. If it isn't, the default product category is used.

 

 

 

Hi, 

would this work in PS 1.7.1.1?

 

Many thanks,

B

Share this post


Link to post
Share on other sites

No, it won't, since the theme variables have changed. PrestaShop v1.7 already has a class on category pages like category-id-5 that you can use. It doesn't have such an ID on product pages though.

 

To add classes like category-id-5 to product pages, create override/classes/controller/FrontController.php with the following:

<?php

class FrontController extends FrontControllerCore
{
    public function getTemplateVarPage()
    {
        $page = parent::getTemplateVarPage();
        $id_category = 0;

        if (Tools::isSubmit('id_product') && (int)Tools::getValue('id_product')) {
            $product = new Product((int)Tools::getValue('id_product'));

            if (Validate::isLoadedObject($product)) {
                if ((int)$this->context->cookie->last_visited_category &&
                    Product::idIsOnCategoryId($product->id, [(int)$this->context->cookie->last_visited_category])) {
                    $id_category = (int)$this->context->cookie->last_visited_category;
                } else {
                    $id_category = (int)$product->id_category_default;
                }
            }
        }

        if ($id_category) {
            $page['body_classes']['category-id-'.$id_category] = true;
        }
        
        return $page;
    }
}

Remember to go to Advanced Parameters > Performance and then click the "Clear cache" button (or manually delete app/cache/dev/class_index.php and app/cache/prod/class_index.php) so PrestaShop can find the override.

Share this post


Link to post
Share on other sites

No, it won't, since the theme variables have changed. PrestaShop v1.7 already has a class on category pages like category-id-5 that you can use. It doesn't have such an ID on product pages though.

 

To add classes like category-id-5 to product pages, create override/classes/controller/FrontController.php with the following:

<?php

class FrontController extends FrontControllerCore
{
    public function getTemplateVarPage()
    {
        $page = parent::getTemplateVarPage();
        $id_category = 0;

        if (Tools::isSubmit('id_product') && (int)Tools::getValue('id_product')) {
            $product = new Product((int)Tools::getValue('id_product'));

            if (Validate::isLoadedObject($product)) {
                if ((int)$this->context->cookie->last_visited_category &&
                    Product::idIsOnCategoryId($product->id, [(int)$this->context->cookie->last_visited_category])) {
                    $id_category = (int)$this->context->cookie->last_visited_category;
                } else {
                    $id_category = (int)$product->id_category_default;
                }
            }
        }

        if ($id_category) {
            $page['body_classes']['category-id-'.$id_category] = true;
        }
        
        return $page;
    }
}

Remember to go to Advanced Parameters > Performance and then click the "Clear cache" button (or manually delete app/cache/dev/class_index.php and app/cache/prod/class_index.php) so PrestaShop can find the override.

 

Thousand thanks for the answer. So what do I have to do exactly? Add this code to Frontcontroller.php and then add the following code in header.tpl?

 

 

Try:
<body{if isset($page_name)} id="{$page_name|escape:'html':'UTF-8'}"{/if} class="{if isset($smarty.get.id_category) && $smarty.get.id_category|intval}cat{$smarty.get.id_category|intval} {elseif $page_name == 'product' && isset($cookie->last_visited_category) && $cookie->last_visited_category|intval && Product::idIsOnCategoryId($product->id, [$cookie->last_visited_category|intval])}cat{$cookie->last_visited_category|intval} {elseif $page_name == 'product' && isset($product) && $product->id|intval}cat{$product->id_category_default|intval} {/if}{if isset($page_name)}{$page_name|escape:'html':'UTF-8'}{/if}{if isset($body_classes) && $body_classes|@count} {implode value=$body_classes separator=' '}{/if}{if $hide_left_column} hide-left-column{else} show-left-column{/if}{if $hide_right_column} hide-right-column{else} show-right-column{/if}{if isset($content_only) && $content_only} content_only{/if} lang_{$lang_iso}">

This adds an additional check to make sure the product is in the cookie category before using it. If it isn't, the default product category is used.

 

 

 

Many thanks

B

Share this post


Link to post
Share on other sites

No, you don't need to change header.tpl. You can leave it as it is originally. You only need to create override/classes/controller/FrontController.php with the above code.

Share this post


Link to post
Share on other sites

No, you don't need to change header.tpl. You can leave it as it is originally. You only need to create override/classes/controller/FrontController.php with the above code.

 

Perfect thank you so much!! Works like a wonder!

Im still learning css, so i wanted to ask if there is a way to make my css simpler.

Right now I would have to repeat the .category-id-X before every selector:

.category-id-5 .h1, .category-id-5 .h2, .category-id-5 .h3 {
   color: #fe04ae;
}

Is there a way to make for example a separate css file that only loads on this category?

Or lets say "opens" the .category-id-5 and everything after that only applies to that category?

 

I tried to find a solution on the internet but i couldnt..

 

Thank you very much once again ^^

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More