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

Last modified by Anjanesh on Thu, June 24, 2010 16:45
Source|Old Revisions  

This is an old revision of the document!


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>

to

  1. <script type="text/javascript">
  2.     var optionsPrice = new Product.OptionsPrice(<?php echo $this->getJsonConfig() ?>);
  3.     var assocIMG = { // Added
  4.     <?php
  5.     $associated_products = $_product->loadByAttribute('sku', $_product->getSku())->getTypeInstance()->getUsedProducts();
  6.     foreach ($associated_products as $assoc)
  7.      echo $assoc->getId().":'".($assoc->image == "no_selection" ? $this->helper('catalog/image')->init($_product, 'image', $_product->image)->resize(365,400) : $this->helper('catalog/image')->init($assoc, 'image', $assoc->image)->resize(365,400))."',";         
  8.     ?>
  9.     }   
  10. </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>

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 selected, an image has to be added for every associated product in the admin.

If there isn’t an image for an associated product, then it’ll use the configurable product’s default image.

So the configurable product’s default image should not represent a specific attribute (like black color t-shirt) - otherwise it may be misleading.

An example of this shown here - please dont click on the Add to Bag unless you really intend to buy.




 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs