I have the following requirement. Shop sells varnish with litres/sheen product variations. However, not every product will have same attributes - a 5ltr can may have two sheen options, a 10ltr can may only have one sheen.
When a user selects a gallery image of a 5lt can it should
a. change the main product image to 5 ltr b. change the litres selection option to '5'
When the user uses the select to change the litres, it should update the main product image
I have the main functionality sorted for 1 & 2, but I can't control the 'sheen' select - if I enable it the product sheen options are not firing in sync with the size changes. Hopefully you could see in the attachment what I mean (if I was allowed to post one!) - the second select is stuck on 'Select an Option', whereas it should be populated with options. Nor does changing the gallery images update the sheen select.
The code I have is as follows:
<div class="product-img-box">
<p class="product-image product-image-zoom"><img id="image" src="" alt="Bona parent" title="Bona parent" /></p>
</div>
<div class="more-views none-slider-more-views">
<ul id="img-list">
<li> <img class="changer" data-main-image-src="" src="" alt="5" title="5" /></li>
<li><img class="changer" data-main-image-src="" src="" alt="0.75" title="0.75" /></li>
</ul>
</div>
The Javascript is being deployed in template/product/view/media.phtml & uses JQuery to retrieve the clicked image & substitute, using the image alt as a map between the image & the Litre options, is as follows:
jQuery(document).ready(function()
{
jQuery('.changer').click(function()
{
jQuery("#image").attr("src", jQuery(this).attr("data-main-image-src"));
var divid = jQuery(this).attr("alt");
changeSelectState("#attribute990");
jQuery("#attribute989 option").each(function () {
if (jQuery(this).html() == divid) {
jQuery(this).attr("selected", "selected");
return;
}
});
});
jQuery("#attribute989").change(function(){
jQuery("#attribute989 option").each(function () {
changeImage(jQuery('#attribute989 :selected').text());
changeState();
return false;
});
});
function changeImage(obj){
jQuery('.changer').each( function(idx,img) {
var pAlt = img.alt;
if(obj == pAlt)
jQuery("#image").attr("src", jQuery(this).attr("data-main-image-src"));
});
}
function changeSelectState(obj){
changeState();
//jQuery(obj).attr('disabled', false);
}
});
function changeState(){
// simulate firing a DOM event
if (typeof fireEvent !== 'function') {
document.fireEvent = document.createEventObject ? // IE
function(element, event) {
var evt = document.createEventObject();
return element.fireEvent('on' + event, evt);
} : // FX
function(element, event) {
var evt = document.createEvent('HTMLEvents');
evt.initEvent(event, true, true); // event type, bubbling, cancelable
return !element.dispatchEvent(evt);
};
}
// preselect the 1st option of the 1st-maxPreselectedAttributeOptionCount
window.maxPreselectedAttributeOptionCount = 2;
Event.observe(window, 'load', function() {
if (!spConfig) {
return;
}
for (var i = 0; i < Math.min(maxPreselectedAttributeOptionCount, spConfig.settings.length); ++i) {
var attr = spConfig.settings[i];
attr.selectedIndex = 1;
Event.observe(attr, 'change', Prototype.emptyFunction);
fireEvent(attr, 'change');
spConfig.reloadPrice();
}
});
}
This issue comes when simulating the user selecting an option from the Litres dropdown. I'm sure I'm doing something very wrong here! Any suggestions most welcome. Thanks