Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

New Wiki entry: Color swatches without creating palette images
 
jim_keller
Jr. Member
 
Total Posts:  6
Joined:  2008-11-28
 

I need a way to do clickable color swatches in the attribute dropdowns without my client having to create each individual swatch as an image. The solution (which uses CSS to generate swatches) appears to be working well, so I’ve created a wiki entry for it. Hope it saves someone some time:

http://www.magentocommerce.com/wiki/color_swatches_without_creating_pallete_images

 
Magento Community Magento Community
Magento Community
Magento Community
 
Discovery
Enthusiast
 
Total Posts:  767
Joined:  2007-12-29
 

Very elegant code and easy to maintain for the catalog builder.

You might also want to consider adding the swatches in the filtered navigation - this brightens up the category pages.

Do you think your technique can be extended to do swatch combinations, e.g. ‘Royal Blue/Scarlet/Light Blue’ where you can have a primary, secondary and highlight colour?

 
Magento Community Magento Community
Magento Community
Magento Community
 
jim_keller
Jr. Member
 
Total Posts:  6
Joined:  2008-11-28
 

Do you think your technique can be extended to do swatch combinations, e.g. ‘Royal Blue/Scarlet/Light Blue’ where you can have a primary, secondary and highlight colour?

The way I would probably do this would just be to add three separate attributes: ‘primary_color’, ‘secondary_color’, and ‘highlight_color’, then simply add them to the $color_attributes array in the code. This would result in three separate dropdowns. If you wanted to do a single dropdown,the regular expression for parsing the color code could be extended to look for a comma, then you could just use explode() to get the separated color codes. You would also then have to generate three DIVs per swatch, but it could certainly be done.

 
Magento Community Magento Community
Magento Community
Magento Community
 
joecommerce
Member
 
Total Posts:  37
Joined:  2008-10-16
 

Hi jim_keller, can you provide a sample website that has already implemented this feature?

Thanks in advance.

 
Magento Community Magento Community
Magento Community
Magento Community
 
jim_keller
Jr. Member
 
Total Posts:  6
Joined:  2008-11-28
 

Hi jim_keller, can you provide a sample website that has already implemented this feature?

Thanks in advance.

The site we’re implementing this on will be launched in a week or two - I will be sure to come back to provide a link.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top