Jump to content

multiple css for the site depending on selected category

ezakimak
 Share

Recommended Posts

ezakimak Newbie

ezakimak

Posted
Posted

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

Link to comment
Share on other sites
rocky Apprentice

rocky

Posted
Posted

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
Link to comment
Share on other sites
PrestaNoob Newbie

PrestaNoob

Posted
Posted

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

Link to comment
Share on other sites
rocky Apprentice

rocky

Posted
Posted

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
Link to comment
Share on other sites
  • 1 month later...
oren Newbie

oren

Posted
Posted

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.

Link to comment
Share on other sites
rocky Apprentice

rocky

Posted
Posted

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

Link to comment
Share on other sites
oren Newbie

oren

Posted
Posted

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

Link to comment
Share on other sites
rocky Apprentice

rocky

Posted
Posted

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

Link to comment
Share on other sites
oren Newbie

oren

Posted
Posted

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!

Link to comment
Share on other sites
  • 2 months later...
viar Newbie

viar

Posted
Posted

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

Link to comment
Share on other sites
  • 4 weeks later...
  • 1 month later...
PizzaPie Newbie

PizzaPie

Posted
Posted

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?
Link to comment
Share on other sites
  • 2 weeks later...
  • 3 months later...
pless Newbie

pless

Posted
Posted
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.
Link to comment
Share on other sites
rocky Apprentice

rocky

Posted
Posted

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.

Link to comment
Share on other sites
pless Newbie

pless

Posted
Posted 
/*
   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

Link to comment
Share on other sites
  • 1 month later...
Slieptsov Newbie

Slieptsov

Posted
Posted

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.

Link to comment
Share on other sites
rocky Apprentice

rocky

Posted
Posted

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.

Link to comment
Share on other sites
rocky Apprentice

rocky

Posted
Posted

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

Link to comment
Share on other sites
rocky Apprentice

rocky

Posted
Posted

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.

Link to comment
Share on other sites
rocky Apprentice

rocky

Posted
Posted

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.

Link to comment
Share on other sites
rocky Apprentice

rocky

Posted
Posted

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.

Link to comment
Share on other sites
Slieptsov Newbie

Slieptsov

Posted
Posted

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

Link to comment
Share on other sites
rocky Apprentice

rocky

Posted
Posted

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.

Link to comment
Share on other sites
Slieptsov Newbie

Slieptsov

Posted
Posted

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

Link to comment
Share on other sites
  • 3 weeks later...
d3mon Newbie

d3mon

Posted
Posted

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?

Link to comment
Share on other sites
Slieptsov Newbie

Slieptsov

Posted
Posted

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!

Link to comment
Share on other sites
d3mon Newbie

d3mon

Posted
Posted

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.

Link to comment
Share on other sites
  • 8 months later...
Sarah87 Newbie

Sarah87

Posted
Posted

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?

Link to comment
Share on other sites
  • 1 month later...
  • 1 month later...
miss-d Newbie

miss-d

Posted
Posted

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.

Link to comment
Share on other sites
miss-d Newbie

miss-d

Posted
Posted

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>

Link to comment
Share on other sites
  • 1 month later...
  • 11 months later...
  • 7 months later...
sikera Newbie

sikera

Posted
Posted

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

Link to comment
Share on other sites
  • 1 year later...
  • 3 weeks later...
  • 1 year later...
biumbria Newbie

biumbria

Posted
Posted

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;
Link to comment
Share on other sites
rocky Apprentice

rocky

Posted
Posted
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.

Link to comment
Share on other sites
biumbria Newbie

biumbria

Posted
Posted (edited)

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)
Link to comment
Share on other sites
rocky Apprentice

rocky

Posted
Posted

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) };
Link to comment
Share on other sites
biumbria Newbie

biumbria

Posted
Posted

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?

Link to comment
Share on other sites
rocky Apprentice

rocky

Posted
Posted
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.

Link to comment
Share on other sites
  • 1 month later...
biumbria Newbie

biumbria

Posted
Posted

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

Link to comment
Share on other sites
rocky Apprentice

rocky

Posted
Posted
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.

 

Link to comment
Share on other sites
  • 1 month later...
Club Vapea! Newbie

Club Vapea!

Posted
Posted

 

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

Link to comment
Share on other sites
rocky Apprentice

rocky

Posted
Posted

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.

Link to comment
Share on other sites
  • 2 weeks later...
Club Vapea! Newbie

Club Vapea!

Posted
Posted

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

Link to comment
Share on other sites
Club Vapea! Newbie

Club Vapea!

Posted
Posted

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

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