Change Product Image on View Page to Associated Product's Image (Configurable Product)

/************************************************************

 Change Product Image on View Page to Associated Product's Image (Configurable Product)

/************************************************************

1) app/design/frontend/*/*/template/catalog/product/view.phtml

Change

<script type="text/javascript">

    var optionsPrice = new Product.OptionsPrice(<?php echo $this->getJsonConfig() ?>);

</script>

To

Edit ——————- Fixed bug in IE caused by the last comma in the foreach loop

<script type="text/javascript">

    var optionsPrice = new Product.OptionsPrice(<?php echo $this->getJsonConfig() ?>);

    var assocIMG =  // Added  - Removed { here, causes issues with other scripts when not working with a configurable product.

    <?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 "}";

    }

    ?>

</script>

2 ) app/design/frontend/*/*/template/catalog/product/view/type/options/configurable.phtml

Change

<script type="text/javascript">

    var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);

</script>

To

<script type="text/javascript">

    var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);

    var selectedAssocProducts = {}; // Added

</script>

3. js/varien/configurable.js

a) Add to top : 

if(typeof selectedAssocProducts=='undefined') {

    var selectedAssocProducts = {};

}

b) In configureElement : function(element) 

add to end of function after the following lines

       this.reloadPrice();

//      Calculator.updatePrice();

add this :

/***** Load Associated Image : This should come after this.resetChildren is called *****/

// If an option doesnt have a value attribute, it'll take its innerHTML as its value - hence the reason for || element.value.substr(0,6) == 'choose'

if (!element.value || element.value.substr(0,6) == 'choose') return; // Selected "choose option"

var attributeId = element.id.replace(/[a-z]*/, '');

for (var a in this.config.attributes)

{

    for (i = 0; i < this.config.attributes[a].options.length; i++)

    {

        if (this.config.attributes[a].options[i].id != element.value) continue;

        selectedAssocProducts[a] = this.config.attributes[attributeId].options[i].products;

    }

}

var productNo = intersect(selectedAssocProducts) || selectedAssocProducts[attributeId][0];

$('image').src = assocIMG[productNo];

c) Change resetChildren : function(element) to

resetChildren : function(element){

    delete selectedAssocProducts[element.config.id]; // Added

    if(element.childSettings) {      

        for(var i=0;i<element.childSettings.length;i++){

            element.childSettings[i].selectedIndex = 0;

            element.childSettings[i].disabled = true;              

            delete selectedAssocProducts[element.childSettings[i].config.id]; // Added

            if(element.config){

                this.state[element.config.id] = false;                  

            }

        }

    }

},

d) Add to end of file 

function intersect(ar) // ar can be an array of arrays or an asssociative array

{

    if (ar == null) return false;

     

    var a = new Array();

 

    if (ar.length == undefined) // Associate Array

    {      

        for (var i in ar)

         a.push(ar[i]);      

    }    

    else

     a = ar;

 

    if (a.length == 1) return false; // Single array ? Nothing to intersect with

    var common = new Array();

    function loop(a, index, s_index, e_index)

    {              

        if (index == null) index = 0;

        if (s_index == null) s_index = 0;

        if (e_index == null) e_index = a[index].length;

        if (index == a.length - 1) return;          

     

        for (var i = s_index; i < e_index; i++)

        {

            if (common.indexOf(a[index][i]) != -1) continue;

            for (var j = 0; j < a[index + 1].length; j++)

            {

                if (a[index][i] != a[index+1][j]) continue;                      

                loop(a, index + 1, j, j + 1);

                if (index + 1 == a.length - 1) { common.push(a[index][i]); break; }                      

            }

        }          

    }      

    loop(a);

    return common;

}