Style Individual Product Attributes
Permalink 2 users found helpful
I have used C5 for a while now and have built a few C5 eCommerce stores as well, but I am running into a problem that I need some help with. I need to be able to style each product attribute individually.
The store I'm working on is for a pharmacy, and I need to be able to include product warnings and directions as well as active ingredients, but I don't want them to all show up the same.
Right now I'm using the core product block and just styling it with a custom template but it lumps all product attributes into the same CSS classes. So it's impossible to style Product Attribute A differently that Product Attribute B. I'm sure there is a way to do this, I'm just not sure where or how I should edit and make changes. Any help would be greatly appreciated.
The store I'm working on is for a pharmacy, and I need to be able to include product warnings and directions as well as active ingredients, but I don't want them to all show up the same.
Right now I'm using the core product block and just styling it with a custom template but it lumps all product attributes into the same CSS classes. So it's impossible to style Product Attribute A differently that Product Attribute B. I'm sure there is a way to do this, I'm just not sure where or how I should edit and make changes. Any help would be greatly appreciated.
use CSS2 in your theme to snif for the name of those divs and style away.
Thank you Franz for your reply and for answering the question on TR today. That is what I had planned on doing but with the Product Block all custom attributes are lumped together and have the same classes.
Each custom attribute uses those 2 classes, so you can't style each attribute individually.
I've probably overlooked some code somewhere or don't have it set up properly. Seems like every C5 site I do I learn something new, which is a good thing :)
.ccm-core-commerce-add-to-cart-product-attributes-label .ccm-core-commerce-add-to-cart-product-attributes-value
Each custom attribute uses those 2 classes, so you can't style each attribute individually.
I've probably overlooked some code somewhere or don't have it set up properly. Seems like every C5 site I do I learn something new, which is a good thing :)
I think I might have come up with a solution to be able to isolate each product attribute, but I still need a little help. If I do this:
I can then call each attribute individually, however using the KeyName for the attribute is a bit problematic because I will end up with uppercase characters and spaces in my class names. Is there a way to get the Attribute Handle from the database, instead of the KeyName? That would solve the problem.
<div class="product-attribute-<?php echo $dak->getAttributeKeyName()?>"> <div class="ccm-core-commerce-add-to-cart-product-attributes-label"><?php echo $dak->getAttributeKeyName()?></div> <div class="ccm-core-commerce-add-to-cart-product-attributes-value"><?php echo $av->getValue('display')?></div> </div>
I can then call each attribute individually, however using the KeyName for the attribute is a bit problematic because I will end up with uppercase characters and spaces in my class names. Is there a way to get the Attribute Handle from the database, instead of the KeyName? That would solve the problem.
See concrete/models/attribute/key.php [or Mnkras' excellent docs:
http://docs.mnkras.com/key_8php_source.html... ]
Likely choices:
getAttributeKeyHandle()
getAttributeKeyDisplayHandle()
getAttributeKeyID()
getAttributeKeyCategoryID()
Let us know how it turns out!
http://docs.mnkras.com/key_8php_source.html... ]
Likely choices:
getAttributeKeyHandle()
getAttributeKeyDisplayHandle()
getAttributeKeyID()
getAttributeKeyCategoryID()
Let us know how it turns out!
It worked great.
I changed line 110 of view.php in my custom template to:
I then can style each custom attribute with CSS using these 2 classes:
So far it is working quite well. I have attached an image of the results. This website is for a client which is a local pharmacy. "Directions, Active Ingredients, Inactive Ingredients & Warnings" are all custom product attributes.
I will post back with a link to the site when it goes live. Thank you so much to everyone for your help. One of the things I love about C5 is the community that really does help one another.
I changed line 110 of view.php in my custom template to:
<div class="product-attribute-<?php echo $dak->getAttributeKeyHandle()?>"><div class="ccm-core-commerce-add-to-cart-product-attributes-label"><?php echo $dak->getAttributeKeyName()?>: </div> <div class="ccm-core-commerce-add-to-cart-product-attributes-value"><?php echo $av->getValue('display')?></div></div>
I then can style each custom attribute with CSS using these 2 classes:
.product-attribute-whatever .ccm-core-commerce-add-to-cart-product-attributes-label .product-attribute-whatever .ccm-core-commerce-add-to-cart-product-attributes-value
So far it is working quite well. I have attached an image of the results. This website is for a client which is a local pharmacy. "Directions, Active Ingredients, Inactive Ingredients & Warnings" are all custom product attributes.
I will post back with a link to the site when it goes live. Thank you so much to everyone for your help. One of the things I love about C5 is the community that really does help one another.
Ok now I am running into a new problem. All the custom attributes display on every product even if an attribute has no value on a particular product. So it just displays a blank attribute. Any ideas?
Untested, but something like this?
<?php $kh = $dak->getAttributeKeyHandle(); $kn = $dak->getAttributeKeyName(); $gv = $av->getValue('display'); // only display if there is a value if($gv) { ?> <div class="product-attribute-<?php echo $kh; ?>"> <div class="ccm-core-commerce-add-to-cart-product-attributes-label"><?php echo $kn; ?>:</div> <div class="ccm-core-commerce-add-to-cart-product-attributes-value"><?php echo $gv; ?></div> </div> <?php } ?>
