Change Product Image on View Page to Associated Product's Image

Change Product Image on View Page to Associated Product's Image

Last modified by nuzil on Wed, August 17, 2011 14:24

Source|Old Revisions  

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

Change

1. <script type="text/javascript">
2.     var optionsPrice = new Product.OptionsPrice(<?php echo $this->getJsonConfig() ?>);
3. </script>

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

1. <script type="text/javascript">
2.     var optionsPrice = new Product.OptionsPrice(<?php echo $this->getJsonConfig() ?>);
3.     var assocIMG =  // Added  - Removed { here, causes issues with other scripts when not working with a configurable product.
4.     <?php
5.     if ($_product->getTypeId() == "configurable") {
6.         echo "{";
7.         $associated_products = $_product->loadByAttribute('sku', $_product->getSku())->getTypeInstance()->getUsedProducts();
8.         foreach ($associated_products as $assoc)
9.             $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))."'";
10.     } else {
11.         $dados[] =  "''";
12.     }
13.     echo implode(',', $dados );     
14.     if ($_product->getTypeId() == "configurable") {
15.         echo "}";
16.     }
17.     ?>
18. </script>

---

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

Change

1. <script type="text/javascript">
2.     var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
3. </script>

to

1. <script type="text/javascript">
2.     var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
3.     var selectedAssocProducts = {}; // Added
4. </script>

---

#EDITED: nuzil: I ckecked in magento 1.5.1.0 and it works for file

3. js/varien/configurable.js

=== 3. js/varien/product.js ===
a) Add to top :

1. if(typeof selectedAssocProducts=='undefined') {
2.     var selectedAssocProducts = {};
3. }

---

b) In configureElement : function(element)
add to end of function after the following lines

1.        this.reloadPrice();
2. //      Calculator.updatePrice();

add this :

1. /***** Load Associated Image : This should come after this.resetChildren is called *****/
2.  
3. // 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'
4. if (!element.value || element.value.substr(0,6) == 'choose') return; // Selected "choose option"
5. var attributeId = element.id.replace(/[a-z]*/, '');
6. for (var a in this.config.attributes)
7. {
8.     for (i = 0; i < this.config.attributes[a].options.length; i++)
9.     {
10.         if (this.config.attributes[a].options[i].id != element.value) continue;
11.         selectedAssocProducts[a] = this.config.attributes[attributeId].options[i].products;
12.     }
13. }
14.  
15. var productNo = intersect(selectedAssocProducts) || selectedAssocProducts[attributeId][0];
16. $('image').src = assocIMG[productNo];

---

c) Change resetChildren : function(element) to

1. resetChildren : function(element){
2.     delete selectedAssocProducts[element.config.id]; // Added
3.     if(element.childSettings) {       
4.         for(var i=0;i<element.childSettings.length;i++){
5.             element.childSettings[i].selectedIndex = 0;
6.             element.childSettings[i].disabled = true;               
7.             delete selectedAssocProducts[element.childSettings[i].config.id]; // Added
8.             if(element.config){
9.                 this.state[element.config.id] = false;                   
10.             }
11.         }
12.     }
13. },

---

d) Add to end of file

1. function intersect(ar) // ar can be an array of arrays or an asssociative array
2. {
3.     if (ar == null) return false;
4.        
5.     var a = new Array();
6.    
7.     if (ar.length == undefined) // Associate Array
8.     {       
9.         for (var i in ar)
10.          a.push(ar[i]);       
11.     }     
12.     else
13.      a = ar;
14.    
15.     if (a.length == 1) return false; // Single array ? Nothing to intersect with
16.  
17.     var common = new Array();
18.     function loop(a, index, s_index, e_index)
19.     {               
20.         if (index == null) index = 0;
21.         if (s_index == null) s_index = 0;
22.         if (e_index == null) e_index = a[index].length;
23.         if (index == a.length - 1) return;           
24.        
25.         for (var i = s_index; i < e_index; i++)
26.         {
27.             if (common.indexOf(a[index][i]) != -1) continue;
28.             for (var j = 0; j < a[index + 1].length; j++)
29.             {
30.                 if (a[index][i] != a[index+1][j]) continue;                       
31.                 loop(a, index + 1, j, j + 1);
32.                 if (index + 1 == a.length - 1) { common.push(a[index][i]); break; }                       
33.             }
34.         }           
35.     }       
36.  
37.     loop(a);
38.     return common;
39. }

---

On a configurable product’s view page, in order to display the associated product’s image after an option has been