[SOLVED] How to use different headers according to sub-category in the product page?

[metta]

I would like to use different header according to the sub-category in the product page. In my sub-category 13 is men's shoes and sub-category 14 is women's boot, and sub-categotuy 15 is women's handbagl. I would like to have different image on the header for different sub-category in the product page. So when the customers view the handbag product page, I would like to have an image in the header, or if the customers view the men's shoes page, the header will shows neb's shoes.

I know how to input an image in the header. But I don't know how to make it view different header for different sub-category in the product page. Any help will be grateful. Thanks.

[rocky]

What method are you using to insert the image in the header? Are you using an tag or are you using CSS to add the image? If you are using an tag, and you have an image for every subcategory, you can simply use the following code in header.tpl:

<img src="{$img_dir}header{$smarty.get.id_category}.jpg" />

Then you would put header.jpg, header13.jpg, header14.jpg and header15.jpg in the img directory of your theme's directory.

If you need only a few header images to be different and the rest will use the default image, you'll need to use the following code in header.tpl instead:

<img src="{$img_dir}header{if $smarty.get.id_category == 13 OR $smarty.get.id_category == 14 OR $smarty.get.id_category == 15}{$smarty.get.id_category}{/if}.jpg" />

If you are using CSS to display your images, you'll need to add a class to container of the image using the following code:

{if $smarty.get.id_category} class="cat{$smarty.get.id_category}"{/if}

Then you can use the following code in global.css to display the different images:

.cat13 { background: url(../img/header13.jpg); }
.cat14 { background: url(../img/header14.jpg); }
.cat15 { background: url(../img/header15.jpg); }

[metta]

Hi Rocky,

I begin to think I can not live without you...... Thank you very much for all of the help.

If you are using CSS to display your images, you'll need to add a class to container of the image using the following code:

{if $smarty.get.id_category} class="cat{$smarty.get.id_category}"{/if}

I am using css to add the image. You said "you'll need to add a class to container of the image using the following code:" Do you mean I have to add these codes in the class/image.php? Do you mind to tell me after which line I should add the codes?

I wonder do you happen to know the answer on this thread?

http://www.prestashop.com/forums/viewthread/40830/general_discussion/how_can_i_put_a_price_under_the_color_picker

Thank you again for the help.

[metta]

Sorry Rocky,

The codes that we used only will change the images in the category page. I am talking about I want to change the header image in the product page. For example: I have product #433, 434 and 435 within the category #4, and product #533, 534 and 535 within the category #5. I would like to change the header image not only on the category level, but also in the product page that are within the category. Use my example above, I will have header image# 4 for category #4 and the product page #433, 434, and 435. And I will have header image#5 for category #5 and the product page #533, 534, and 535. I have switched using the tag, could you please how I can make this work? Thank you very much for all of your help.

[rocky]

By container, I mean the element whose background you are setting to the header image. For example, if you are setting the background of header div to the header image, you'll need to change line 47 of header.tpl from:

to:

Doing this will allow you to target the subcategories in the CSS.

[rocky]

Sorry, forgot to refresh the page before I posted. I just saw your last message then. If I've understood you correctly, you want to use the default category of the product so that header image matches when you click from the product listings to the product. In that case, you'll need to write the following:

id_category_default} class="cat{if $smarty.get.id_category}{$smarty.get.id_category}{else}{$product->id_category_default}"{/if}>

[metta]

By container, I mean the element whose background you are setting to the header image. For example, if you are setting the background of header div to the header image, you'll need to change line 47 of header.tpl from:

to:

Doing this will allow you to target the subcategories in the CSS.

I am so sorry, English is my second language. I think I did not explain my need clearly. I got the container part, and the images show up on the category page according to the category ID. It is great. But when I go to the product page which is under the category such as product ID#433, 435 and 436 that are within the category ID#4, the header in the product page are gone back to the default header. It there a way I can use the category header#4 image in the product pages that are within the category #4?

Thank you again for all the help.

[metta]

Sorry, forgot to refresh the page before I posted. I just saw your last message then. If I've understood you correctly, you want to use the default category of the product so that header image matches when you click from the product listings to the product. In that case, you'll need to write the following:

id_category_default} class="cat{if $smarty.get.id_category}{$smarty.get.id_category}{else}{$product->id_category_default}"{/if}>

It works. Thank you very much,

Just for my education purpose, what if I want to use this way, the other way that you showed me

<img src="{$img_dir}header{if $smarty.get.id_category == 13 OR $smarty.get.id_category == 14 OR $smarty.get.id_category == 15}{$smarty.get.id_category}{/if}.jpg" />

How can I incorporate the product to match the category?

Thank you again for all the help.

[rocky]

In that case, you'd have to do the following:

<img src="{$img_dir}header{if $smarty.get.id_category == 13 OR $product->id_category_default == 13 OR $smarty.get.id_category == 14 OR $product->id_category_default == 14 OR $smarty.get.id_category == 15 OR $product->id_category_default == 15}{if $smarty.get.id_category == 13 OR $smarty.get.id_category == 14 OR $smarty.get.id_category == 15}{$smarty.get.id_category}{else}{$product->id_category_default}{/if}{/if}.jpg" />

[metta]

In that case, you'd have to do the following:

<img src="{$img_dir}header{if $smarty.get.id_category == 13 OR $product->id_category_default == 13 OR $smarty.get.id_category == 14 OR $product->id_category_default == 14 OR $smarty.get.id_category == 15 OR $product->id_category_default == 15}{$smarty.get.id_category}{/if}.jpg" />

Hi Rocky,

Sorry to ask you question again. I used the codes that you provided, the images on the category page did change to the ones that is according to the category ID#, but the header images on the product pages are still in the default image, it did not get to change. Do you mind to check the codes again? Thank you very much.

[rocky]

You are right. I've updated my code. It isn't very efficient, but it should work.

[metta]

It is me again :cheese:

Sorry, After I entered your codes, I got the following error:

Fatal error: Smarty error: [in /home/content/xxx/html/domain/themes/prestashop/header.tpl line 48]: syntax error: $smarty.id_category is an unknown reference (Smarty_Compiler.class.php, line 2129) in /home/content/xxx/html/domain/tools/smarty/Smarty.class.php on line 1095

Do I need to change anything in my class?

[rocky]

Sorry, made a typo. I wrote "smarty.id_category" instead of "smarty.get.id_category". I've updated the code above again.

[metta]

Sorry, the header images in the product page are still the default image......still unchanged.....

[rocky]

I forgot that this code is being used in header.tpl, not product.tpl like the previous code, so I can't use the $product object. This makes things more difficult. You'll need to add the following code before $smarty->display at the end of header.php:

if ($_GET['id_category'])
   $category = $_GET['id_category'];
else if ($_GET['id_product'])
{
   $product = new Product($_GET['id_product']);    
   $category = $product->id_category_default;
}

$smarty->assign('category', $category);

Then you can write the following in header.tpl:

I hope I've got it right this time.

[metta]

It works perfectly.

One last question: What about I want to use an image that are not according to the category but a fixed image? For example, I want category 13, 14, 15 and all of the products under these categories used handbag.jpg, and category 16,17,18 and all of the products under these categories used men_shoes.jpg and 19,20 and all of the products under these categories use women_shoes.jp. And all other categories use the default image? I would like to do it this way so that I can save some web size.

Thank you for the help.

[rocky]

In that case:

[metta]

It works. You are the best...Thank you again and again......

[metta]

Sorry, I just realized as soon as I put these codes that you provided in the header.php,

if ($_GET['id_category'])
   $category = $_GET['id_category'];
else if ($_GET['id_product'])
{
   $product = new Product($_GET['id_product']);    
   $category = $product->id_category_default;
}

$smarty->assign('category', $category);

Before the following line

$smarty->display(_PS_THEME_DIR_.'header.tpl');

The images show up perfectly in the category pages as well as the product pages. But in my product page, and it gave me this warning before the breadcrumb :

Warning: htmlentities() expects parameter 1 to be string, array given in /home/content/xxx/html/domin/classes/Tools.php on line 581

I did a new install with noting change yet and I got the error. How do I fix it?

[rocky]

I can't reproduce this message on my test website, but it appears it is the line 178 of product.php that is causing the error:

'path' => ((isset($category->id) AND $category->id) ? Tools::getFullPath(intval($category->id), $product->name) : Tools::getFullPath(intval($product->id_default_category), $product->name))

For some reason, $product->name is returning an array instead of a string like it should. The only thing I can think of is that my "$product = " is overwriting an important variable. Try changing it to the following instead:

if ($_GET['id_category'])
   $category = $_GET['id_category'];
else if ($_GET['id_product'])
{
   $productObj = new Product($_GET['id_product']);    
   $category = $productObj->id_category_default;
}

$smarty->assign('category', $category); 

[metta]

It works perfectly this time. Thank you again for all the help.

[outlet.ee]

Rocky,

how could I do the same but different image for each language as I am going to use some text on the images?

[rocky]

Are these images added using the <img> tag or using CSS? If they are using the <img> tag, you'll need to add code like the following:

<img src="{$img_ps_dir}logo{$cookie->id_lang}.jpg" alt="{$shop_name|escape:'htmlall':'UTF-8'}" />

This code will display a different logo depending on the current language (logo1.jpg for English adnd logo2.jpg for French by default)

If they are added using CSS, I suggest that you change line 39 of header.tpl in your theme's directory 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} class="lang{$cookie->id_lang}">

so that you can target any object of the page for a specific language. For example, the following code gives the website's a different background depending on the current language:

body.lang1 { background: url('../img/bg_en.jpg'); }
body.lang2 { background: url('../img/bg_fr.jpg'); }

[outlet.ee]

I am doing another shop selling just one product. How would I change the

in header.tpl class for just a specific product?

thank you!

[rocky]

Change:

<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_product} class="product{$smarty.get.id_product}{/if}>

You can then use the following to target the page:

body.product1 div#page { }

Change 1 to the ID of the product.

[mscat]

Hi Rocky,

I have the same issue but for

of the product.tpl page.
What I need to do is to change the

background image per product per category.

ex:
Products under category#5 should have 'h2-cat5.jpg' as the h2 background image.
Products under category#6 should have 'h2-cat6.jpg' as the h2 background image.
Products under category#7 should have 'h2-cat7.jpg' as the h2 background image.

I hope you can also help me with this Rocky..

Thank you for all the help.. You are every ones' angel!

-Cat

[rocky]

Use the same code in header.tpl above, but use this in global.css:

body.product5 h2 { background-image: url(../img/h2-cat5.jpg) }
body.product6 h2 { background-image: url(../img/h2-cat6.jpg) }
body.product7 h2 { background-image: url(../img/h2-cat7.jpg) }

[mscat]

Hi Rocky, Thank you for that very quick response.

This is what i did:
1. I added these codes to my header.tpl

2. Added the following on my global.css

body.product5 h2 { background-image: url(../img/h2-cat5.jpg) }
body.product6 h2 { background-image: url(../img/h2-cat6.jpg) }
body.product7 h2 { background-image: url(../img/h2-cat7.jpg) } 

But it still doesnt work. Can you look if I did this correctly?

Thank you so much! I really appreciate it..

id_category_default} class="cat{if $smarty.get.id_category}{$smarty.get.id_category}{else}{$product->id_category_default}"{/if}>

[rocky]

In that case, try:

body.cat5 h2 { background-image: url(../img/h2-cat5.jpg) }
body.cat6 h2 { background-image: url(../img/h2-cat6.jpg) }
body.cat7 h2 { background-image: url(../img/h2-cat7.jpg) }

[mscat]

Hi Rocky,

Thanks again for the reply..

But I think this code doesn't work for me

because after I have it refreshed a couple of times, my site doesn't show up now. Then I tried bringing it back to

then the site showed up again.

please please help me on this.. Thank you so much...

id_category_default} class="cat{if $smarty.get.id_category}{$smarty.get.id_category}{else}{$product->id_category_default}"{/if}> 

[rocky]

Perhaps $product is generated an error when it doesn't exist. Try:

id_category_default)} class="cat{if $smarty.get.id_category}{$smarty.get.id_category}{else}{$product->id_category_default}"{/if}>

[mscat]

Hi Rocky... SOrry but still no luck on the new code..


I tried another option, on product.tpl

I canged it to the follwing

It works perfect in Firefox, but on IE8 the h2 image doesnt show up..

Maybe we could try to solve this instead? Or if you have a solution to the previous issue it will be also much appreciated. Thank you thank you

Thanks,
-Cat

[greeneyedesign]

Hi Rocky,

I hope you can help me with a similar issue.

I'd like the image marked in red (see the image) to change depending on which product category the customer clicks on. For example, different images for earrings and bracelets.

I don't understand where to apply the code previously mentioned.
Can you please help?

Thank you!

[greeneyedesign]

Here is the image...

[rocky]

Why don't you just upload the banner as the category image, or if you are displaying subcategory thumbnails, use the "Image mapping" feature? Go to Catalog tab and click the "Edit" icon next to a category to upload an image for the category. Go to Catalog > Image mapping and upload a banner for each category and associate it with the category.

[nicoco]

Hi!

 

I'm using PS 1.4, and it seems that the core changed... header.php looks really different, so how could i do this trick?

Where should i paste this code :

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

 

So that i could juste use {$category} in header.tpl (?)

 

Thank you very much...

[efr]

Hello,

 

I have the same problem as nicoco, i would like to get "id_category_current" in "header.tpl" in the product page in PS 1.4.4.1, and the above code doesn't work in this version of PS

 

if somebody had an idea how to achieve this ?

 

Thank you very much

Edited October 24, 2011 by efr (see edit history)

[efr]

Hello again,

 

solved !

 

thanks to this code, post #11 , which suits perfectly with PS 1.4.4.1 :

http://www.prestashop.com/forums/topic/67536-solved-load-category-name-and-product-name-in-header/

 

Thank you rocky !

[jujutte24]

Hi,

 

sorry for my bad english, but i need some help, for a similar case.

 

Do you think there is a simple way to duplicate the image of the parent category (exemple second level) to all the child categories ?

 

For exemple the second level parent category have a picture, and i want this picture to be duplicate to all the categorys that are under this level...

Could i use something like "depht_level"...etc...

 

thank you for your help

 

regards

Edited March 12, 2013 by jujutte24 (see edit history)