How do you vary the Header via Category?
 

I have converted a static site of a customer and moved the product and categories to a X-Cart 4.2 Gold shopping cart system.

See here: http://www.shopdelicae.com/

Unfortunately they used to have unique header photos that changed depending on the category. For example a photo of steaks on the grill for the BBQ category, photo of Berries for the Jellies/Jam category etc.

Is there anyway to do this with X-cart 4.2?

I have all the artwork, but nowhere to put it

thanks,

Marc

Re: How do you vary the Header via Category?
 

One way to do this is to hard code the images in within an if statement.
{if $cat eq "1"} image1 {elseif $cat eq "2"} image2 {else} mainimage {/if}
getting the no from the category IDs.

Re: How do you vary the Header via Category?
 

sure you can use smarty and set if conditions to show any image you like.

for example.

{if $cat=22}<img src="{$ImagesDir}/yourcategory22image.jpg" alt="" />
{elseif $cat=23}<img src="{$ImagesDir}/yourcategory23image.jpg" alt="" />
{elseif $cat=24}<img src="{$ImagesDir}/yourcategory23image.jpg" alt="" />
{else}defaultpic.jpg
{/if}

This would go in teh head.tpl wherever you want the image to apear.

upload the iamges to your skin1/images folder.

Re: How do you vary the Header via Category?
 

Wouldn't it also be possible to do the following for flexibility?

{if $cat=1234}<div class="class">header</div>{/if}

Re: How do you vary the Header via Category?
 

Guys,

You are all working too hard!

Have you forgotten that you can put html into the category header?

/admin/category_modify.php?cat=x

Put your header image in the description field.

:-)

Re: How do you vary the Header via Category?
 

he wants the iamge to change in the header, not the cat description.

Re: How do you vary the Header via Category?
 

There is "category icon" for each category. Upload your image there for each category and then just change the code for the header image to read
(code taken from subcategories.tpl)
or this (code taken from subcategories_t.tpl)
whichever works

Re: How do you vary the Header via Category?
 

Thank you everyone for the many possible answers to my question. Unfortunately my skills are very good with CSS & HTML, but very bad with JavaScript and Smarty Templates.

My design relies on CSS to create the graphic for the header, so from reading the replies, Tal's code snippet seems to be the closest solution to my design.

Here is some more information regarding my current header design.

As the bases for the website I used the Neon Lights template. I then modified the CSS for the header with the following:

"body {
background: transparent url(images/neon_lights/bg_left.gif) left top repeat-y;"

and

"#header {
height: 155px;
position: absolute;
top: 0;
left: 0;
width: 100%;
background: #ffffff url(images/neon_lights/head_bg.gif) repeat-x 1px top;
}"

So I have a base graphic which has the logo and a repeating graphic that tiles in order to allow for a photo that tiles (they are almost identical but the non-tiling graphic is locked into the top left to display the company logo).

So how, and in what module can I create some code snippet to swap out the CSS setting (via a class change) to swap out the two graphics for each category?

thanks for further assistance.

Marc

Re: How do you vary the Header via Category?
 

You can define styles to overwite the skin1.css when you need to. You can have your default style is skin1.css, then for categories where you want to change it, add css to override it in home.tpl. You could add something like this before </head>:

Re: How do you vary the Header via Category?
 

Ok,

Thanks GB2World, I tried your code snippet, but it fails with this error message:

The code I created and placed just before the </head> tag is:


the error I get when refreshing the page viewing any category is:

Error: Smarty error: [in customer/home.tpl line 20]: syntax error: unrecognized tag: background: transparent url(images/neon_lights/head_top2.gif) left top repeat-y; (Smarty_Compiler.class.php, line 446) in /home/delicae/wwwroot/shopdelicae.com/include/lib/smarty/Smarty.class.php on line 1092

after hitting the refresh button, the error goes away, but it doesn't swap out the image, so its not working.

Any ideas, your code snipped makes sense to me, but I guess not the PHP compiler?

Re: How do you vary the Header via Category?
 

I think surrounding it with {literal} and {/literal} should keep smarty compiler from trying to figure out the brackets. So, this should compile without smarty errors:

Re: How do you vary the Header via Category?
 

gb2world and everyone else...thank you SOOO MUCH!

Got it working via this code:


Thank you again for everyone's help. I am proud of myself as this is the first time I am coding in Smarty. The last languages I coded in was Pascal and Cobol...

I had a couple of other formatting issues and errors, but using the Firefox Plug in 'Webmaster Tools', I was able to follow the CSS code and see when the variables worked and didn't work.

thanks again,

Re: How do you vary the Header via Category?
 

Be sure and get firebug - it is indispensable for debugging css and html (& javascript).