Changing product image on color selection
Posted: Tue Jan 08, 2013 7:50 pm
Hi, I noticed that the javascript for updating a product image after selecting one of the products color options was not working in the version of the demo site I started from (it looks like this is still the case with the online demo - correct me if I'm wrong).
After debugging the updateCurrentImage() function in heatClinic.js I came up with a fix which I thought I would share:
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).
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).