Magento 1.9 – Display Color Names of Configurable Swatches on Product View Page

I have built this, in a modular way. Will post the code on github soon.

It triggers on a JavaScript call and fetches the images with Ajax. So it does not effect page speed or caching system.

PM me if you want the code asap. Otherwise follow me on Twitter @willemwigman to hear when I post the code.

Edit: I've put the code on github https://github.com/wigman/AjaxSwatches

After another day of digging I did get this working. I was on the right path to finding out what was broken, I was just in the wrong file. In the end, the JS that drives the image swap is the object ConfigurableMediaImages which is defined and setup in this file

skin/frontend/{{vendor}}/{{theme}}/js/configurableswatches/product-media.js.

I was de-bugging in this file to find out why the images were not being created on the front end. But when I step back, & looked at the file that was using the JS object,

app/design/frontend/{{vendor}}/{{theme}}/template/configurableswatches/catalog/media/js.phtml.

Because the images were not being set in the JS file, it makes sense to looks a step back at and see where the images are set. In this file you have php the calls the images.

<script type="text/javascript">
    $j(document).on('product-media-loaded', function() {
        ConfigurableMediaImages.init('<?php echo $this->getImageType(); ?>');
        <?php foreach ($this->getProductImageFallbacks() as $imageFallback): ?>
        ConfigurableMediaImages.setImageFallback(<?php echo $imageFallback['product']->getId(); ?>, $j.parseJSON('<?php echo $imageFallback['image_fallback']; ?>'));
        <?php endforeach; ?>
        $j(document).trigger('configurable-media-images-init', ConfigurableMediaImages);
    });
</script>

If you do a search on the dom for this object - and the functionality is working - you will get a json object with all the info the JS needs to plug in the image

$j(document).on('product-media-loaded', function() {
  ConfigurableMediaImages.init('base_image');
    ConfigurableMediaImages.setImageFallback(410, $j.parseJSON('{"option_labels":{"black":{"configurable_product":{"small_image":null,"base_image":null},"products":["253","254","483","484","488"]},"white":{"configurable_product":{"small_image":null,"base_image":null},"products":["251","252"]},"blue":{"configurable_product":{"small_image":null,"base_image":null},"products":["249","250"]},

For me, this object wasn't on the page at all. I turned on template hints to see if the file was being loaded, and it turns out it wasn't there at all. Here is a pic of what it should look like:

But there is another trick here, if you do a grep -r "configurableswatches/catalog/media/js.phtml" you wont find a .xml file that is loading in the template. I wasn't able to take the time to see how the template was being loaded, but it turns out that my theme did not have a call to a block that IS loading in the template that I needed.

In the app/design/frontend/{{vendor}}/{{theme}}/template/catalog/product/view/media.phtml file there is a call to <?php echo $this->getChildHtml('after'); ?>. Commenting this out removes the image swapping functionality. This block is called in the app/design/frontend/rwd/default/layout/catalog.xml file.

So I just needed to add in the xml to my local.xml to get that block into my site.

<catalog_product_view>
    <reference name="content">
      <reference name="product.info.media">
        <block type="core/text_list" name="product.info.media.after" as="after" />
      </reference>
    </reference>
</catalog_product_view>

TL;DR

The block with the correct template was not being called in my by theme, so I added this to my local.xml

<catalog_product_view>
    <reference name="content">
      <reference name="product.info.media">
        <block type="core/text_list" name="product.info.media.after" as="after" />
      </reference>
    </reference>
</catalog_product_view>