Change product display background color as per product category.

[prestandrew]

I am working on a shop for a puppy breeder, and would like to customize the color of the product container (in featured products as well as in the category display) to match the gender of the puppy (pink/female, blue/male).

 

I'm at a little bit of a loss on where to start. I know that I can create Male/Female associations and at least capture the data that way when a puppy is entered, but how do I use that information to change the background color of the product container?

 

Thanks in advance for any help.

[prestandrew]

What I've done so far is to add Gender as a feature. I realize this at least gets the information on to the page, but I believe what I need to do is repurpose that information into an additional part of the page, specifically the background portion of the product container CSS. I feel like it would be a hack, but if I could create two images (male.jpg and female.jpg) and just set those images as the colors I want, I can import the gender in at the appropriate place and cause the code to grab the appropriate image.

 

I'm at a loss as to how to get product-list.tpl to grab information from the features db. As you can probably tell, I know next to nothing about how to work with db information.

 

The portion of product-list.tpl that I'm trying to customize is

 

<div class="product-container" style="background:none;" itemscope itemtype="http://schema.org/Product">
<div class="left-block">
<div class="product-image-container" style="background:none;">

 

I've modified the inline CSS to ensure these are the lines I need to change. I need them both to pull the same information depending on what the Gender field is set to.

Edited August 10, 2015 by prestandrew (see edit history)

[prestandrew]

Any help on this would be greatly appreciated.

[prestandrew]

No ideas at all?

 

I'm guessing all I really need to do is call the database at the appropriate spot and retrieve data from the specific table setup by the product feature. I just have no clue how to actually DO that.

[prestandrew]

I'm still looking for direction on this.

[Naldinho]

Since no one else has offered any suggestions I will suggest how I would try this -- I'm not very experienced so not sure if this will help.

 

I have a few products that require that the product page be different. To accomplish this I just used a conditional -- basically if the product id = one of 3 numbers my alternative elements get displayed and if the product id does not equal those then that part of the code gets skipped and the standard product page is displayed.

 

That would solve your problem if you had a fixed product list but it won't work for your situation since as you add new animals they will all have new product ids. So you need to find something else to make the conditional. I assume you can query features and use that. I know some modules use UPC code field so you probably could use that if features are not an option.

 

So my approach would be to create a male and female entry in the css file then use whatever conditional I could get to work to alternate between which of the two css styles get used. 

 

That is pretty vague and untested but the best I can do without devoting time that I don't really have to spare.

[prestandrew]

Thank you, Naldinho.

 

Unfortunately, I don't know enough about how all of it works to really use your advice. Would anyone with knowledge and ability care to contribute and expound or further develop the idea?

[Azohel]

Hi,
 
You can use smarty.
Assign a specific id/class to your <div>, <img> etc. depending on the category.

For example : 

<div class="myProduct category-{if isset($category->id)}{else}noCategory{/if}"</div>

And in your CSS you can apply style in function

For example :

 .products_block.category-57{
background: #b9e1a2;}

[prestandrew]

 

Hi,

 

You can use smarty.

Assign a specific id/class to your <div>, <img> etc. depending on the category.

 

For example : 

<div class="myProduct category-{if isset($category->id)}{else}noCategory{/if}"</div>

And in your CSS you can apply style in function

 

For example :

 .products_block.category-57{
background: #b9e1a2;}

 

Thanks for the help. I'm sure this is probably the answer I'm looking for, but I can't make it work. When I put that code in, the rendered html is just "category-" and I have no clue how to make it change as a result of a specific category...

[prestandrew]

Actually I should amend that. Sometimes it renders as "category-" and sometimes it renders as "category-noCategory" so I'm at a complete loss.

[prestandrew]

Can anyone offer some clarification on how to apply this solution?

[Azohel]

You should look here: if you have some basics in php you should be ok. http://www.smarty.net/docsv2/en/language.function.if.tpl

If you are still in trouble post your code here, i will help you.