we can change product main image on selection of attribute. below are steps.
step1.
-open template/catalog/product/view/type/options/configurable.phtml
-add
var mainProductImgSrc = document.getElementById(“image”).src;//added
on bottom of page after spConfig
step2.
-open template/catalog/produict/view.phtml
- add this after
var optionsPrice = new Product.OptionsPrice(<?php echo $this->getJsonConfig() ?>);
//added
var assocIMG =
<?php
if ($_product->getTypeId() == “configurable”) {
echo “{“;
$associated_products = $_product->loadByAttribute(‘sku’, $_product->getSku())->getTypeInstance()->getUsedProducts();
foreach ($associated_products as $assoc)
$dados[] = $assoc->getId().”:’”.($assoc->image == “no_selection” || $assoc->image == “” ? $this->helper(‘catalog/image’)->init($_product, ‘image’, $_product->image)->resize(365,400) : $this->helper(‘catalog/image’)->init($assoc, ‘image’, $assoc->image)->resize(365,400)).”‘”;
} else {
$dados[] = “””;
}
echo implode(‘,’, $dados );
if ($_product->getTypeId() == “configurable”) {
echo “}”;
}
?>
//added
step3.
- open js/varien/product.js
-add
//added
settings = $$(‘.super-attribute-select’);
imgSrc = mainProductImgSrc;
settings.each(function(element)
{
attributeId = element.attributeId;
if(element.options[element.selectedIndex].config)
imgSrc = assocIMG[element.options[element.selectedIndex].config.products];
$(‘image’).src = imgSrc;
} );
//added end
Before
}.bind(this));
},
formatPrice: function(price) {
return formatCurrency(price, this.priceFormat);
}
around line : 715
=== By this way when attribute will change then its image also change.
