change configurable product image in magento

how to change configurable product image in magento

In this post we will show you How to change configurable product image(product main image) by associated product image based on color and size attributes.

hear we will use call function get_json_config_images at \app\code\core\Mage\Catalog\Block\Product\View\Type\Configurable.php location.

There is one block at \app\code\core\Mage\Catalog\Block\Product\View\Type\Configurable.php .

1) Go to Extend of this block or just add “Mage\Catalog\Block\Product\View\Type\Configurable.php” to “\app\code\local” folder.

2) There is one method in Configurable.php, getJsonConfig() which is used for getting configurable product details(main product details) with their associated products(all detail of associated products). we need to created one new method in this file, called get_json_config_images() and in this method and add following code.

get all configurable product image
public function get_json_config_images()
{
    $small_product_images = array();
    foreach ($this->getAllowProducts() as $sp_val) {
        $small_product_images[$sp_val->getId()] = 
            (string)$this->helper('catalog/image')
                ->init($sp_val, 'small_image')
                ->resize(645,520);
    }
    return Mage::helper('core')->jsonEncode($small_product_images);
}

OR

configurable product image with “size-color” attribute EXAMPLE : “xl-red”
public function get_json_config_images()
    {
        $small_product_images = array();
		$temp_sp = array();
        foreach ($this->getAllowProducts() as $sp_val) {      
			// you your short attribut to get value 	
			$temp_id = $sp_val->getSize()."-".$sp_val->getColor();
			$small_product_images[$temp_id] =  (string)$this->helper('catalog/image')
                    ->init($sp_val, 'small_image')
                    ->resize(645,520);
        }
        return Mage::helper('core')->jsonEncode($small_product_images);
    }

This function(get_json_config_images) will give us every main image url (of associated product) which is associated with configurable product image.

3) we need called this script at \app\design\frontend\\\template\catalog\product\view\type\options\configurable.phtml like this.

NOTE : pass this script in your your-package and your-theme.

Add function on onchange="changeimage()" on dropdown/swatch/other event of configurable product.

get all configurable product image
<script type="text/javascript">
    var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
    var spConfigimages = new Product.Config(<?php echo $this->get_json_config_images() ?>);
</script>

OR

configurable product image with “size-color” attribute EXAMPLE : “xl-red”
<script type="text/javascript">  
var default_image = jQuery("#image").attr('src');
var json_var =  '<?php echo $this->get_json_config_images() ?>';
function changeimage() {
    var data_size = jQuery("#attribute133 option:selected").val(); // cahnge attribute id 
	var data_color = jQuery("#attribute92 option:selected").val();  // cahnge attribute id 
	if (isNaN(data_size))
	{
		jQuery("#image").attr("src",default_image);
	}
	else if(data_size == null){
		jQuery("#image").attr("src",default_image);
	}
	else
	{	
		var data_val = data_size+"-"+data_color;
		//alert(data_val);
		var obj = jQuery.parseJSON(json_var);
		var image_result = obj[data_val];
		jQuery("#image").attr("src",image_result);
	}
}	
</script>

Leave a Comment

Your email address will not be published. Required fields are marked *

6  +    =  15

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US