Color attribute

Magento dropdown attributes

Let's say you want to create a new attribute for a product, e.g. 'color'.
There should be a set of possible values for this attribute. So what you do is create
an attribute of 'Dropdown' type. You set all its properties, give it a title and create its options, e.g. 'black', 'white', 'red' and 'yellow'.
But there is still one surprise that you may have. When you try to obtain the color simply by:

$product->getColor()

all you get is a numeric value corresponding to an option value in the dropdown.
But you probably would like to get a color name.
Fortunately you don't need to construct database queries, as Magento already thought about it.
So to get the name of the color selected for a product you need to use a method:
$product->getAttributeText('color');

where 'color' is the text that you have set as attribute code. Remember that you cannot
change attribute code nor its type after you create it.

Magento: reload color images for configurable product

Let's talk about one situation. We are in shop made in Magento.

We are on configurable product page. One of configurable attributes is color. Wouldn't it be good idea, after color is chosen show only images of this color? It can be... and it's not hard to achieve.

First we must do some preparations:

Create attribute "image_storing" type boolean and add it to your attribute sets. Can be limited only to simple products.

For each color of superproduct (configurable+simples) choose one simple product and set value to yes, also to this product upload images of this color.

Now create new module called "imageswitch" (or whatever you want, just remember to change it in the following code).

In it you must have a controller looking like this:

class Baobaz_Imageswitch_IndexController extends Mage_Core_Controller_Front_Action
{
    public function indexAction()
    {
        $prod_id  = (int) $this->getRequest()->getParam('prod_id');
        $color_value  = (int) $this->getRequest()->getParam('color_id');
        $product=Mage::getModel('catalog/product')->load($prod_id);
        if($color_value) {
            $allProducts = $product->getTypeInstance(true)->getUsedProducts(null, $product);      
            foreach ($allProducts as $prod) {
                if ($prod->getData('image_storing') && $prod->getColor()==$color_value) { // && $prod->isSaleable()
                    break;
                }
            }          
            $prod_full=Mage::getModel('catalog/product')->load($prod->getId());
            Mage::register('product', $prod_full);
        }
        else {
            Mage::register('product', $product);
        }
        $this->loadLayout();    
        $this->renderLayout();
    }
}

This controller will reload the whole media block, but for that we also need proper layout xml file

imageswitch.xml

<?xml version="1.0"?>
<layout version="0.1.0">
    <imageswitch_index_index>
        <reference name="root">
            <action method="setTemplate"><template>page/empty.phtml</template></action>
        </reference>
        <reference name="content">
            <block type="catalog/product_view_media" name="product.info.media" as="media" template="catalog/product/view/media.phtml" />
        </reference>
    </imageswitch_index_index>
</layout>

and a layout html file - page/empty.phtml

<!-- start content -->
    <?php echo $this->getChildHtml('content') ?>
<!-- end content -->

Then we need to add some observer to catalog/product/view.phtml so we can reload it when the value of color is changed (attribute76 is the id of select for attribute color, it's default id if we use standard Magento attribute, if changed, may need adjusting)

<script>
function runajax() {
    product_id=$('product_id').value
    color_id=$('attribute76').value;
   
    new Ajax.Updater('product_media_content', '<?php echo Mage::getBaseUrl(); ?>imageswitch/index/index/prod_id/'+product_id+'/color_id/'+color_id, { method: 'get', evalScripts: true });
}

if ($('attribute76')) {
    Event.observe('attribute76', 'change', runajax);  
}
</script>

and add in the same file id of block to be added by changing :

<div class="product-img-box">
    <?php echo $this->getChildHtml('media') ?>
</div>

<div class="product-img-box" id="product_media_content">
    <?php echo $this->getChildHtml('media') ?>
</div>

and if all is done properly, now you should be able to see the effect. enjoy!