X-Cart forums

[Marc Washburn]

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

[pauldodman]

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.

[ARW VISIONS]

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.

[Shamun]

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

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

[carpeperdiem]

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.

[ARW VISIONS]

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

[cflsystems]

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)

 
<img class="subcategory-image" src="{$current_category.icon_url|amp}" alt="{$current_category.category|escape}"{if $current_category.image_x} width="{$current_category.image_x}"{/if}{if $current_category.image_y} height="{$current_category.image_y}"{/if} />

or this (code taken from subcategories_t.tpl)

 
<img src="{$subcategory.icon_url|amp}" alt="{$subcategory.category|escape}" width="{$subcategory.image_x}" height="{$subcategory.image_y}" />

whichever works

[Marc Washburn]

Originally Posted by Tal

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

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

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

[gb2world]

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

<style type="text/css">
<!--
{if $current_category.categoryid eq 123}
 #header {background: #ffffff url(images/neon_lights/head_bg_123.gif) repeat-x 1px top;}
{/if}
{if $current_category.categoryid eq 456}
 #header {background: #ffffff url(images/neon_lights/head_bg_456.gif) repeat-x 1px top;}
{/if}

-->
 </style>

[Marc Washburn]

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:

<style type="text/css">
<!--
{if $current_category.categoryid eq 25}
 #body {background: transparent url(images/neon_lights/head_top2.gif) left top repeat-y;}
{/if}
-->
 </style>

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?