Magento Color Palate for custom attribute

If you want to do the same as below with simple products, I made a simple piece of code to make it work easily and smoothly with jQuery. This is particularly useful on small projects where products don’t need to be an individual product. Inmy use case there weren’t any other product like this one and SKU wasn’t used.

Steps

1. Edit your product, go to Custom options tab and add a New Option Drop-down: http://grab.by/6qZU

Add as many color as you want and the SKU is consider as a color HEX.

1. Place at the end of your file the code below in:

app/design/frontend/default/default/template/catalog/product/view/options/type/select.phtml

1. <?php if($_option->getType() == Mage_Catalog_Model_Product_Option::OPTION_TYPE_DROP_DOWN):?>
2. <dt><label>Select your color</label></dt>
3. <ul>
4. <?php foreach ($_option->getValues() as $_value) { ?>
5. <li class="colorpick <?php echo str_replace(" ","_",$_value->getid()) ?>" style="background-color:#<?php echo $_value->getSku(); ?>;">&nbsp;</li>
6. <?php } ?>
7. </ul>
8. <script src="http://code.jquery.com/jquery-latest.min.js"></script>
9. <script type="text/javascript">
10. $(document).ready(function(){
11.     $(".colorpick").click(function() {
12.         var id = this.className.split(' ')[1];
13.         $("select[name='options[<?php echo $_option->getid() ?>]']").val(id);
14.         if($(".colorpick").hasClass('highlight')) {
15.             $(".colorpick").removeClass('highlight');
16.         }
17.         $(this).addClass('highlight');
18.     });
19.     $("select[name='options[<?php echo $_option->getid() ?>]']").change(function() {
20.         var selected_option = $("select[name='options[<?php echo $_option->getid() ?>]']").val();       
21.         if($(".colorpick").hasClass('highlight')) {
22.             $(".colorpick").removeClass('highlight');
23.         }
24.         $("."+selected_option).addClass('highlight');
25.     });
26. });
27. </script>
28. <?php endif; ?>

1. add a some CSS to stylish your color boxes:

1. .highlight { border: 2px solid #000; }
2. .colorpick { cursor:pointer; width:20px; height:20px; float:left; margin:1px; display:inline; vertical-al