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