X-Cart: shopping cart software

X-Cart forums (https://forum.x-cart.com/index.php)
-   Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)
-   -   Rotating the Main Image based on categories (https://forum.x-cart.com/showthread.php?t=14157)

JaredMatfess 05-23-2005 04:37 PM

Rotating the Main Image based on categories
 
I sure hope someone can help on this one...

I've got X-cart 4.x and what I'm trying to do is have it rotate the image (using the flexy rectangles skin)

It's the banner

/skin1/images/custom/main_bg_1.jpg

I have no idea which template references this file, and I'm not the best programmer, but essentially what I'd like to do is if it's on the "hats" category I want it to display the main_bg_hats.jpg which would feature some hats, on shoes, it would change the big image to main_bg_shoes.jpg

Is this something that people are doing??

shan 05-24-2005 03:00 AM

im sure youll find stuff like this in the custom mods forum but the basic rule is something like this.

Code:

{if $cat eq "1" }
[img]{$ImagesDir}/yourpic_1.jpg[/img]
{elsif $cat eq "2"}
[img]{$ImagesDir}/yourpic_2.jpg[/img]
{elsif $cat eq "3"}
[img]{$ImagesDir}/yourpic_3.jpg[/img]
{else}
[img]{$ImagesDir}/yourpic_normal.jpg[/img]
{/if}


JaredMatfess 06-11-2005 03:38 PM

Do you know where this image file is referenced? I've been looking through all the templates and just can't seem to find it..

Thanks!

JaredMatfess 06-11-2005 04:02 PM

/customer/home.tpl

got it!

ChristineP 01-05-2009 06:41 AM

Re: Rotating the Main Image based on categories
 
This is exactly what I want to do with swapping/rotating image when a (root) category is selected, though I currently have my original image in head.tpl as it sits below my logo and menu bar. Would the above script work in the head.tpl or do I need to look at this differently by using a .js file?

Any help is appreciated.
Christine

ARW VISIONS 01-05-2009 05:35 PM

Re: Rotating the Main Image based on categories
 
You could use the elseif statements in the head.tpl if you wanted to.

Quote:

Originally Posted by ChristineP
This is exactly what I want to do with swapping/rotating image when a (root) category is selected, though I currently have my original image in head.tpl as it sits below my logo and menu bar. Would the above script work in the head.tpl or do I need to look at this differently by using a .js file?

Any help is appreciated.
Christine


ChristineP 01-06-2009 07:40 AM

Re: Rotating the Main Image based on categories
 
I've been playing with this and still not getting any results other than errors. I placed my images in the skin1/images folder on the host server and tried the original code in the head.tpl as:

<div class="HeadLine" style="text-align: left; height: 153px; width: 100%; margin: 10px 0px 0px 0px">
{if $cat eq "110" }
[img]{$ImagesDir}/IR_HdrImg.jpg[/img]
{elsif $cat eq "120"}
[img]{$ImagesDir}/textbanner.jpg[/img]
{elsif $cat eq "130"}
[img]{$ImagesDir}/IR_HdrImg.jpg.jpg[/img]
{else}
[img]{$ImagesDir}/textbanner.jpg[/img]
{/if}
</div>


Also placed the same images in my Images folder on the host server and the code in the head.tpl as:
<div class="HeadLine" style="text-align: left; height: 153px; width: 100%; margin: 10px 0px 0px 0px">
{if $categories[cat_num].categoryid = "110"}
<img src="/Images/IR_HdrImg.jpg" height="153" border="0" alt="IR Bullet Cameras" />
{elseif $categories[cat_num].categoryid = "120"}
<img src="/Images/textbanner.jpg" height="153" border="0" alt="IR Bullet Cameras" />
{elseif $categories[cat_num].categoryid = "130"}
<img src="/Images/IR_HdrImg.jpg" height="153" border="0" alt="IR Bullet Cameras" />
{elseif $categories[cat_num].categoryid = "140"}
<img src="/Images/textbanner.jpg" height="153" border="0" alt="IR Bullet Cameras" />
{/if}
</div>

Do you have suggestions for me to try?

Christine

Quote:

Originally Posted by Ashley
You could use the elseif statements in the head.tpl if you wanted to.


Vetrivel 01-06-2009 07:58 AM

Re: Rotating the Main Image based on categories
 
If you get an error please post that too.So it is easy to debug.
and
TRY THIS:
<div class="HeadLine" style="text-align: left; height: 153px; width: 100%; margin: 10px 0px 0px 0px">
{if $categories[cat_num].categoryid eq "110"}
<img src="{$ImagesDir}/IR_HdrImg.jpg" height="153" border="0" alt="IR Bullet Cameras" />
{elseif $categories[cat_num].categoryid eq "120"}
<img src="{$ImagesDir}/textbanner.jpg" height="153" border="0" alt="IR Bullet Cameras" />
{elseif $categories[cat_num].categoryid eq "130"}
<img src="{$ImagesDir}/IR_HdrImg.jpg" height="153" border="0" alt="IR Bullet Cameras" />
{elseif $categories[cat_num].categoryid eq "140"}
<img src="{$ImagesDir}/textbanner.jpg" height="153" border="0" alt="IR Bullet Cameras" />
{/if}
</div>

Quote:

Originally Posted by ChristineP
I've been playing with this and still not getting any results other than errors. I placed my images in the skin1/images folder on the host server and tried the original code in the head.tpl as:

<div class="HeadLine" style="text-align: left; height: 153px; width: 100%; margin: 10px 0px 0px 0px">
{if $cat eq "110" }
[img]{$ImagesDir}/IR_HdrImg.jpg[/img]
{elsif $cat eq "120"}
[img]{$ImagesDir}/textbanner.jpg[/img]
{elsif $cat eq "130"}
[img]{$ImagesDir}/IR_HdrImg.jpg.jpg[/img]
{else}
[img]{$ImagesDir}/textbanner.jpg[/img]
{/if}
</div>


Also placed the same images in my Images folder on the host server and the code in the head.tpl as:
<div class="HeadLine" style="text-align: left; height: 153px; width: 100%; margin: 10px 0px 0px 0px">
{if $categories[cat_num].categoryid = "110"}
<img src="/Images/IR_HdrImg.jpg" height="153" border="0" alt="IR Bullet Cameras" />
{elseif $categories[cat_num].categoryid = "120"}
<img src="/Images/textbanner.jpg" height="153" border="0" alt="IR Bullet Cameras" />
{elseif $categories[cat_num].categoryid = "130"}
<img src="/Images/IR_HdrImg.jpg" height="153" border="0" alt="IR Bullet Cameras" />
{elseif $categories[cat_num].categoryid = "140"}
<img src="/Images/textbanner.jpg" height="153" border="0" alt="IR Bullet Cameras" />
{/if}
</div>

Do you have suggestions for me to try?

Christine


ARW VISIONS 01-06-2009 07:59 AM

Re: Rotating the Main Image based on categories
 
your original code is missing and 'e' in the elseif

ARW VISIONS 01-06-2009 08:01 AM

Re: Rotating the Main Image based on categories
 
Edit**

try this. make sure you use the <img src /> tag and that your files re in the skin1 images dir

<div class="HeadLine" style="text-align: left; height: 153px; width: 100%; margin: 10px 0px 0px 0px">
{if $main and $cat eq "110" }
<img src="{$ImagesDir}/IR_HdrImg.jpg" />
{elseif $main and $cat eq "120"}
<img src="{$ImagesDir}/textbanner.jpg />
{elseif $main and $cat eq "130"}
<img src="{$ImagesDir}/IR_HdrImg.jpg.jpg />
{else}
<img src="{$ImagesDir}/textbanner.jpg />
{/if}
</div>

ChristineP 01-06-2009 08:14 AM

Re: Rotating the Main Image based on categories
 
Thanks for your reply. Still not working... I don't get an error, however the placement for the image(s) is blank for the height of 153. I've tried adding foreach, but that places all images in order all at once in the headline.

Quote:

Originally Posted by Vetrivel
If you get an error please post that too.So it is easy to debug.
and
TRY THIS:
<div class="HeadLine" style="text-align: left; height: 153px; width: 100%; margin: 10px 0px 0px 0px">
{if $categories[cat_num].categoryid eq "110"}
<img src="{$ImagesDir}/IR_HdrImg.jpg" height="153" border="0" alt="IR Bullet Cameras" />
{elseif $categories[cat_num].categoryid eq "120"}
<img src="{$ImagesDir}/textbanner.jpg" height="153" border="0" alt="IR Bullet Cameras" />
{elseif $categories[cat_num].categoryid eq "130"}
<img src="{$ImagesDir}/IR_HdrImg.jpg" height="153" border="0" alt="IR Bullet Cameras" />
{elseif $categories[cat_num].categoryid eq "140"}
<img src="{$ImagesDir}/textbanner.jpg" height="153" border="0" alt="IR Bullet Cameras" />
{/if}
</div>


ChristineP 01-06-2009 08:17 AM

Re: Rotating the Main Image based on categories
 
Thanks for your reply, I copied from the original post here, and X-Cart caught that error when I refreshed my browser.

Quote:

Originally Posted by Ashley
your original code is missing and 'e' in the elseif


ARW VISIONS 01-06-2009 08:35 AM

Re: Rotating the Main Image based on categories
 
did you try this?

<div class="HeadLine" style="text-align: left; height: 153px; width: 100%; margin: 10px 0px 0px 0px">
{if $main and $cat eq "110" }
<img src="{$ImagesDir}/IR_HdrImg.jpg" />
{elseif $main and $cat eq "120"}
<img src="{$ImagesDir}/textbanner.jpg" />
{elseif $main and $cat eq "130"}
<img src="{$ImagesDir}/IR_HdrImg.jpg.jpg" />
{else}
<img src="{$ImagesDir}/textbanner.jpg" />
{/if}
</div>

ChristineP 01-06-2009 08:41 AM

Re: Rotating the Main Image based on categories
 
Thanks for the update, still not working. I have my images in both the root Images folder and skin1/images/ folder on my server.

Along with the code you suggested, I also tried the below, but still nothing

<div class="HeadLine" style="text-align: left; height: 153px; width: 100%; margin: 10px 0px 0px 0px">
{if $main and $categoryid eq "110" }
<img src="{$ImagesDir}/IR_HdrImg.jpg" />
{elseif $main and $categoryid eq "120"}
<img src="{$ImagesDir}/textbanner.jpg />
{elseif $main and $categoryid eq "130"}
<img src="{$ImagesDir}/IR_HdrImg.jpg.jpg />
{else}
<img src="{$ImagesDir}/textbanner.jpg />
{/if}
</div>

I know there's something I've missed, and I'll try any suggestions you have.

Thanks again


Quote:

Originally Posted by Ashley
Edit**

try this. make sure you use the <img src /> tag and that your files re in the skin1 images dir

<div class="HeadLine" style="text-align: left; height: 153px; width: 100%; margin: 10px 0px 0px 0px">
{if $main and $cat eq "110" }
<img src="{$ImagesDir}/IR_HdrImg.jpg" />
{elseif $main and $cat eq "120"}
<img src="{$ImagesDir}/textbanner.jpg />
{elseif $main and $cat eq "130"}
<img src="{$ImagesDir}/IR_HdrImg.jpg.jpg />
{else}
<img src="{$ImagesDir}/textbanner.jpg />
{/if}
</div>


ARW VISIONS 01-06-2009 08:46 AM

Re: Rotating the Main Image based on categories
 
look like there are some quotes mising in the code I posted. it's corrected.

Vetrivel 01-06-2009 08:59 AM

Re: Rotating the Main Image based on categories
 
You didnt closed the double quotes of img src
try this:
<div class="HeadLine" style="text-align: left; height: 153px; width: 100%; margin: 10px 0px 0px 0px">
{if $main and $categoryid eq "110" }
<img src="{$ImagesDir}/IR_HdrImg.jpg" />
{elseif $main and $categoryid eq "120"}
<img src="{$ImagesDir}/textbanner.jpg"/>
{elseif $main and $categoryid eq "130"}
<img src="{$ImagesDir}/IR_HdrImg.jpg" />
{else}
<img src="{$ImagesDir}/textbanner.jpg"/>
{/if}
</div>

Quote:

Originally Posted by Ashley
look like there are some quotes mising in the code I posted. it's corrected.


ChristineP 01-06-2009 08:59 AM

Re: Rotating the Main Image based on categories
 
I have an image showing, and it captures to the last image though it doesn't "rotate/swap" out when I click on a new category. When I changed the image name for the last <img src="{$ImagesDir}/IR_HdrImg.jpg. /> that image showed, making sure that I typed in the correct image name for the required folder.

{else}
<img src="{$ImagesDir}/textbanner.jpg" />
{/if}
</div>

Is there another place that I've missed for this to work?

Quote:

Originally Posted by Ashley
look like there are some quotes mising in the code I posted. it's corrected.


ARW VISIONS 01-06-2009 09:02 AM

Re: Rotating the Main Image based on categories
 
please post the code you are using. and a url is you can.

ChristineP 01-06-2009 09:03 AM

Re: Rotating the Main Image based on categories
 
1 Attachment(s)
I tried this, and an image does show, but it captures only the last {else} image. When I commented out the last image I still have a blank area for the image, but clicking on those categories listed doesn't show an image see attached. (I placed a temporary border around the area that I want the image to reside.)


Quote:

Originally Posted by Vetrivel
You didnt closed the double quotes of img src
try this:
<div class="HeadLine" style="text-align: left; height: 153px; width: 100%; margin: 10px 0px 0px 0px">
{if $main and $categoryid eq "110" }
<img src="{$ImagesDir}/IR_HdrImg.jpg" />
{elseif $main and $categoryid eq "120"}
<img src="{$ImagesDir}/textbanner.jpg"/>
{elseif $main and $categoryid eq "130"}
<img src="{$ImagesDir}/IR_HdrImg.jpg" />
{else}
<img src="{$ImagesDir}/textbanner.jpg"/>
{/if}
</div>


ARW VISIONS 01-06-2009 09:06 AM

Re: Rotating the Main Image based on categories
 
can you post a URL?

ARW VISIONS 01-06-2009 09:07 AM

Re: Rotating the Main Image based on categories
 
replace $categoryid with $cat

ChristineP 01-06-2009 09:10 AM

Re: Rotating the Main Image based on categories
 
Here's our url: www.clintonelectronics.com/store

I'm still in the customizing stage so it's unfinished, and in some areas purposely ugly for me to get back to when other areas are complete.

Quote:

Originally Posted by Ashley
can you post a URL?


ARW VISIONS 01-06-2009 09:14 AM

Re: Rotating the Main Image based on categories
 
{if $main and $cat eq "249" }
1
{elseif $main and $cat eq "250"}
2
{elseif $main and $cat eq "252"}
3
{else}
4
{/if}

this works on my server. the smarty is correct. make sure the categorey number are correct.

ARW VISIONS 01-06-2009 09:18 AM

Re: Rotating the Main Image based on categories
 
where did you get you category numbers from? I don;t see 110, 120, 130 in your store? those look like sort numbers to me. the $cat number can be found in the URL when you click on the category.

ARW VISIONS 01-06-2009 09:21 AM

Re: Rotating the Main Image based on categories
 
I tested this on my server. I replaced the images with simple text and it worked.

ChristineP 01-06-2009 10:57 AM

Re: Rotating the Main Image based on categories
 
AWESOME.... Thank you Ashley and Vetrivel! I have this working now on my computer. You were right Ashley, I was using the order_by number and not the parentid from my cpanel.

For those interested the code is as follows:
<div class="HeadLine" style="text-align: left; height: 153px; width: 100%; margin: 10px 0px 0px 0px">
{if $main and $cat eq "68" }
<img src="{$ImagesDir}/IR_HdrImg.jpg" />
{elseif $main and $cat "15"}
<img src="{$ImagesDir}/textbanner.jpg"/>
{elseif $main and $cat eq "16"}
<img src="{$ImagesDir}/textbanner.jpg" />
{elseif $main and $cat eq "14"}
<img src="{$ImagesDir}/textbanner.jpg" />
{else}
<img src="{$ImagesDir}/IR_HdrImg.jpg"/>
{/if}
</div>

Also works for subcategory as:
{elseif $cat "70"}
<img src="{$ImagesDir}/textbanner.jpg"/>


Thanks again,
Christine

ARW VISIONS 01-06-2009 10:59 AM

Re: Rotating the Main Image based on categories
 
whew! that was a tough one :) glad its working.

ChristineP 01-06-2009 11:05 AM

Re: Rotating the Main Image based on categories
 
Me too! Thank you for sticking with me. I've been able to find the "how to" for most of my customizing wants with the posts from the experts on these forums. This is why I try to post my final results when I get something working properly.

Thanks again.

Quote:

Originally Posted by Ashley
whew! that was a tough one :) glad its working.


Vetrivel 01-06-2009 07:22 PM

Re: Rotating the Main Image based on categories
 
thats great.and finally you got it..:lol::lol::lol::lol:
Quote:

Originally Posted by ChristineP
Me too! Thank you for sticking with me. I've been able to find the "how to" for most of my customizing wants with the posts from the experts on these forums. This is why I try to post my final results when I get something working properly.

Thanks again.



All times are GMT -8. The time now is 06:01 AM.

Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.