Jakub Ilczuk's blog

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!

Magento Translations Module

One of best things in magento is you can easily add new language versions to the site. It's all done using CSV files - 1 file for 1 module per language. For most popular languages translations are available as free Magento modules on magento connect.

What if we want to change the translations and don't lose changes after updating magento and translations? Or if we want to have translation common independently of module? Or just list all the texts that were added by us and are not original magento texts? We can create our own very simple translations module.

You need to edit only 2 files:

  • etc/config.xml
    <?xml version="1.0"?>
    <config>
            <modules>
                    <Baobaz_Translations>
                            <version>0.1.0</version>
                    </Baobaz_Translations>
            </modules>
           
            <global>
                    <helpers>
                            <translations>
                                    <class>Baobaz_Translations_Helper</class>
                            </translations>
                    </helpers>
            </global>
           
            <frontend>
                    <translate>
                            <modules>
                                    <Baobaz_Translations>
                                            <files>
                                                    <default>Baobaz_Translations.csv</default>
                                            </files>
                                    </Baobaz_Translations>
                            </modules>
                    </translate>
            </frontend>

    </config>
  • and helper/data.php:
    class Baobaz_Translations_Helper_Data extends Mage_Core_Helper_Abstract
    {

    }

and that's it... Module must be turned on (in etc/modules) and it will work fine.

in app/locale/fr_fr/ we create file Baobaz_Translations.csv and in it we put all the new translations we need.

Then, anywhere in magento - doesn't matter if it's template, block or controller - we can use:

echo Mage::helper('translations')->__('text to translate');

Yes. It is that simple.

Sharing informations between controllers and blocks in Magento

As we know magento has quite powerful templates system. The same thing we can say about logic part. In general magento consists of about 50 modules. There is module for checkout, for customer, for cms pages etc. Module consists of few parts - beside design parts there are: components, blocks, models and  helpers. Components contains all actions that happen when the module is used.  When we have url http://www.my-eshop.tld/index.php/a/b/c

it means that module a must run action c in controller b.

Blocks are responsible for preparing data for templates. Each template used must have it's block. Sometimes blocks are simple, sometimes they can be more complicated. Anyway in some situations it's useful to move data from controller to block so we won't have to calculate it few times in one request.

For that we can use possibility that magento gives us - registering data.

In controller we store our data in variable called $data, we can save it to register like this:

Mage::register('MyData',$dat);

Then in block file, you can get all this data, back using.

$data = Mage::registry('MyData');

It's a small feature that can be very useful sometimes.