After debugging the updateCurrentImage() function in heatClinic.js I came up with a fix which I thought I would share:
Code: Select all
function updateCurrentImage() {
//grab the active product option values
var activeOptions = $('.product-options .active');
var optionValues = [];
$.each(activeOptions, function() {
optionValues.push($(this).attr('data-product-option-value'));
});
var mediaItems = $('#product_thumbs a');
var finalMedia;
var finalMediaMatches = 0;
$.each(mediaItems, function() {
var candidateMedia = this;
var candidateMediaMatches = 0;
$.each(optionValues, function() {
var optionValuesObj = JSON.parse(this);
if ($(candidateMedia).attr('data-tags') != undefined && $(candidateMedia).attr('data-tags').toLowerCase().indexOf(optionValuesObj['valueName'].toLowerCase()) !== -1) {
candidateMediaMatches++;
}
});
if (candidateMediaMatches > finalMediaMatches) {
finalMedia = candidateMedia;
finalMediaMatches = candidateMediaMatches;
}
});
//at this point I should have the best-matched media item; select it
if (finalMedia != null) {
finalMedia.click();
}
}
The change is in the iteration across the optionValues strings. Previously it was checking for the presence of the whole optionValue string (which is actually serialized json) in the media's data-tags where it should have been looking for the value of the json's "valueName" attribute.
Hope this helps someone and I would welcome suggestions for improvement (it seems a bit inefficient to parse the json strings that often).