Magento 1.9 Configurable Product – Image Not Switching with Swatch Change

configurable-productjavascriptmagento-1.9product-imagesswatches

I am trying to get configurable swatches working in a custom theme in a 1.9 build. I am basically using this method of importing the functionality in the theme. The swatches are working fine, they are setting the correct values of the configurable product, but when selecting the options, the product image is not switching.

Looking at a working RWD implementation as an example, the JS that is driving the functionality adds in the switching images dynamically when you click on of the swatches and will then switch between them as the user continues to click. The image that is added looks like this:

<img src="http://{{site-home}}/media/catalog/product/cache/1/image/1800x/040ec09b1e35df139433887a97daa66f/m/t/mtk004t_7.jpg" class="gallery-image visible">

For my site, this image is not being generated when I click on my swatch.

I tracked down the functionality to this file: /skin/frontend/{{vender}}/{{theme}}/js/configurableswatches/product-media.js. As far as i have been able to de-bug this file, the fail point is here:

getSwatchImage: function(productId, optionLabel, selectedLabels) {
    var fallback = ConfigurableMediaImages.productImages[productId];
    console.log(fallback);
    if(!fallback) {
        return null;
    }

Where the var fallback is returning undefined because the .productImages is not getting set. The productId is getting passed in correctly. Before the call to the productId the JS is only defining it as an empty object, and it hasn't had any value pushed into it.

At this point i'm not sure what to check to find out what might be causing this to fail. There are no JS errors on the site, and to my understanding all the files are loading correctly and in place. The product has images set in the configurable and the simple, so i don't "think" that's the issue. If anyone has any experience de-bugging this functionality, any clue to what might be failing would be great.

thanks

Best Answer

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:

enter image description here

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>
Related Topic