Individual template for each product?

Yarns · February 14, 2008, 06:41:28 AM

Hi all

I'd like to pin an individual background to each product-description (flypage). Is there any way to assign templates by product and not just by category?

Thanks in advance,
Yarns

unleash.it · February 14, 2008, 12:12:15 PM

You can use a combination of CSS and PHP. This will only affect the main body area and I'm not sure how you could affect the outer areas if that's what you mean.

Go to the flypage you are using in the product_details folder. Make a Switch statement at the top that assigns a css suffix to for each background you will be using:

Code Select

<?php
switch ($product_name)
{
case "COLOMBIAN":
  $psuffix="_background1";
  break;
case "ESPRESSO":
  $psuffix="_background2";
  break;
case "ESPRESSO DECAF":
  $psuffix="_background3";
  break;
}
?>

You'll want to replace the coffees with your products (case sensitive) and add as many more as you need. Next make some styles in your css file:

.pbackground{background-image: url(../images/defaultbackground.jpg;} (the default background)

.pbackground_background1{background-image: url(../images/background1.jpg;}
.pbackground_background2{background-image: url(../images/background2.jpg;}
.pbackground_background3{background-image: url(../images/background3.jpg;}

Then add the class to your html. You could wrap a div around everything:

Code Select

<div style="padding:6px;" class="pbackground<?php echo $psuffix?>">

<-- code for the product details -->

</div>

The suffix only gets added if the switch statement detects one of the products.

Hope that helps...

Yarns · February 14, 2008, 17:51:52 PM

Many thanks - you really made my day!

Will implement the code right away...

Best wishes,
Yarns

Yarns · February 14, 2008, 19:00:45 PM

One more question:

I've added the switch statement to flypage.tpl.php and the styles to theme.css of the default VirtueMart-Theme.
In which HTML-file do I have to put the last lines of the code?

Sorry for being so numb, but that stuff is absolutely new to me... :/

Thanks in advance,
Yarns

unleash.it · February 14, 2008, 21:11:03 PM

No problem, I think I'll want to do something like this somewhere down the line and I didn't want to get rusty between projects...

As for the css, you can put it in theme.css, but make sure the paths are right. I happened to put mine in my template.css.

The HTML/PHP part goes on the flypage under the switch. I'm not exactly sure what you're trying to do, but my code should give you a way to make changes on a per product basis. To change the background of the main body area (not the surrounding module positions and stuff), you wrap the existing theme code with a div tag and the class. I used a little padding to give it some breathing room. You might need to adjust, give it a border, etc. You can of course change the theme code any way you like.

Lots of luck

Yarns · February 14, 2008, 22:51:37 PM

A thousand thank yous to you

I had to modify the code a bit, but you put me into the right direction and now everything's working as intended.

Best wishes,
Yarns

unleash.it · February 14, 2008, 23:03:02 PM

Right on, glad it helped. If something I did was wrong, care to post it? I have to admit...I've used the same code in similar ways, but I didn't have the time to fully test it here

Yarns · February 15, 2008, 05:57:37 AM

I just put this to the top of my flypage:

Code Select

<?php
switch ($product_name)
{
case "Milk":
  $psuffix="name of image 1";
  break;
case "Butter":
  $psuffix="name of image 2";
  break;
case "Cheese":
  $psuffix="name of image 3l";
  break;

}
?>

<html><head><STYLE type=text/css>
#vmMainPage {
background: url(../images/logos/<?php echo $psuffix ?>.gif);
background-repeat: no-repeat;
background-position: 50% 50%;
background-attachment: fixed
}
</STYLE></head></html>

News:

Individual template for each product?