Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

can msgento change image according to it’s color attribute ?? 
 
nathanael.attali
Jr. Member
 
Total Posts:  20
Joined:  2009-01-15
 

FINALY I BOUGHT AN EXTENSION “ color swatch extension plus” it work very well and it is easy to implement . It is a java extension.

You can find the extension in the community ressource.
smile

nathan

 
Magento Community Magento Community
Magento Community
Magento Community
 
KOSTYA, INC.
Jr. Member
 
Avatar
Total Posts:  2
Joined:  2009-05-12
 

Take a look at the Wiki Article: How to change Image when Option changes

 
Magento Community Magento Community
Magento Community
Magento Community
 
temgra
Member
 
Avatar
Total Posts:  34
Joined:  2008-08-11
 

@Nathan: Thank you for your purchase and the nice review.

@Kostya: Thank you for purchasing Color Swatches Plus, too.

 
Magento Community Magento Community
Magento Community
Magento Community
 
loeffel
Guru
 
Avatar
Total Posts:  427
Joined:  2009-02-03
 

OK, first of all, big thanks to: MathieuF, Tomislav Bilic, cooee & cocomo You provided some great help and information regarding this feature. I have applied this a little differently, maybe this could help somebody else, so here is what I did:

Since I am using jquery for other things aswell, I am calling it in page.xml:

<default>
        <
block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">

            <
block type="page/html_head" name="head" as="head">
                <
action method="addJs"><script>jquery/jquery-1.3.2.js</script></action>

As you can see this has been succesfully tested with jquery 1.3.2!

My complete catalog/product/view/type/options/configurable.phtml:

<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category   design_default
 * @package    Mage
 * @copyright  Copyright (c) 2008 Irubin Consulting Inc. DBA Varien (http://www.varien.com)
 * @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
?>

<?php
$_product    
$this->getProduct();
$_attributes Mage::helper('core')->decorateArray($this->getAllowAttributes());
// variable definition
$_colour_select_id'attribute525'     <b>// I had to enter the id of the attribute or it wouldnt work</b>

?>
<?php 
if ($_product->isSaleable() && count($_attributes)):?>
    
<dl>
    
<?php foreach($_attributes as $_attribute): ?>
        
<dt><label><?php echo $_attribute->getLabel() ?><span class="required">&nbsp;*</span></label></dt>
        <
dd<?php if ($_attribute->decoratedIsLast){?> class="last"<?php }?>>
          <
select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select">
            <
option><?php echo $this->__('Choose an Option...'?></option>
          </
select>
        </
dd>
    
<?php endforeach; ?>
    
</dl>
    <
script type="text/javascript">
        var 
spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
    
</script>
<?php 
endif;?>

<?php
foreach($_attributes as $_attribute)
  
if($_attribute->getLabel()=='COLOR' || $_attribute->getLabel()=='COLOR'){     //change COLOR to the name of your attribute
    
$_colour_select_id 'attribute'.$_attribute->getAttributeId();
    
//echo $_attribute->getLabel()." ".$_colour_select_id;
  
}
}
?>

<?php 
if($_colour_select_id{ ?>
  
<script type="text/javascript">
    
jQuery(document).ready(function() {

      
// On document ready hide all images first
      
jQuery("#imageShowcase img").hide();
      
jQuery("#productImgDefault").show();
      
jQuery("#<?=$_colour_select_id ?>").change(function() {
       
        
// Hide all images on slect element change action
        
jQuery("#imageShowcase img").hide();

        
// Get the value of selected option
        
var optionValue jQuery(this).attr('value');
        
        
// Just a test to see if you're getting option value
        //alert(optionValue);     //You can uncomment these to test if jquery is working at all
        
        // Get the content (aka inner HTML) of selected option
        
var optionValueText jQuery.trim(jQuery('#<?=$_colour_select_id ?> :selected').text());

        
// Just a test to see if you're getting right selected option inner text
        //alert(optionValueText);     //You can uncomment these to test if jquery is working at all<b>
        //alert('Selected option has value: ' + optionValue + ' and inner text: ' + optionValueText);
                  
        // Show the image based on selected value
        // Whatch out, case sensitive...
        
if( ! optionValue ){ 
          jQuery
("#productImgDefault").show();
        
else {
          optionValueText 
optionValueText.replace(/ /g,'_');
          
optionValueText optionValueText.replace(/\u00e0/g,"a"); 
          
optionValueText optionValueText.replace(/\u00e2/g,"a");
          
optionValueText optionValueText.replace(/\u00e7/g,"c");
          
optionValueText optionValueText.replace(/\u00e8/g,"e");
          
optionValueText optionValueText.replace(/\u00e9/g,"e");
          
optionValueText optionValueText.replace(/\u00f6/g,"o");
          
optionValueText optionValueText.replace(/\u00f9/g,"u");
          
optionValueText optionValueText.replace(/\u00c0/g,"A");
          
optionValueText optionValueText.replace(/\u00c2/g,"A");
          
optionValueText optionValueText.replace(/\u00c7/g,"C");
          
optionValueText optionValueText.replace(/\u00c8/g,"E");
          
optionValueText optionValueText.replace(/\u00c9/g,"E");
          
optionValueText optionValueText.replace(/\u00d6/g,"O");
          
optionValueText optionValueText.replace(/\u00d9/g,"U");
          
jQuery("#productImg" optionValueText).show();
          
//alert(optionValueText);     //You can uncomment these to test if jquery is working at all
        
}
      })
;
    
});
  
</script>
<?php  }  ?>

My complete updated media.phtml:

<?php
    $_product 
$this->getProduct();
    
$_helper $this->helper('catalog/output');
    
$_strorig = array("é","è","â","à","ç","ö","ù","É","È","Â","À","Ç","Ö"," ");
    
$_strrepl = array("e","e","a","a","c","o","u","E","E","A","A","C","O","_");
?>
<?php 
if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
<div id="imageShowcase">
         
<?php foreach ($this->getGalleryImages() as $_image): ?>
         
<a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;">
         
<?php
             $_img 
'<img id="productImgDefault" src="'.$this->helper('catalog/image')->init($_product'image')->resize(300).'" alt="'.$this->htmlEscape($_product->getImageLabel()).'" title="'.$this->htmlEscape($_product->getImageLabel()).'" />';
             echo 
$_helper->productAttribute($_product$_img'image');
         
?>
         
</a>   
         
<?php endforeach; ?>             
<?php 
else: ?>
         <?php
             $_img 
'<img id="productImgDefault" src="'.$this->helper('catalog/image')->init($_product'image')->resize(300).'" alt="'.$this->htmlEscape($_product->getImageLabel()).'" title="'.$this->htmlEscape($_product->getImageLabel()).'" />';
             echo 
$_helper->productAttribute($_product$_img'image');
         
?>     
<?php 
endif; ?>
      <?php 
if (count($this->getGalleryImages()) > 0): ?>
      <?php 
foreach ($this->getGalleryImages() as $_image): ?>
             
<a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;"><img id="productImg<?php echo str_replace($_strorig,$_strrepl,$this->htmlEscape($_image->getLabel())) ?>" src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize(300); ?>" alt="no image" /></a>
      
<?php endforeach; ?>
</div>
      
<?php endif; ?>

<?php 
if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
    <
strong><?php echo $this->__('More Views'?></strong>
    <
ul>
    
<?php foreach ($this->getGalleryImages() as $_image): ?>
        
<li>
            <
a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(48, 48); ?>" width="48" height="48" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
        </
li>
    
<?php endforeach; ?>
    
</ul>
    
    <
div id="image-preload" style="position:absolute;visibility:hidden;">    
        
<?php foreach ($this->getGalleryImages() as $_image): ?>
            
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize(300); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" id="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
        
<?php endforeach; ?>    
    
</div>    
    
<
script type="Text/javascript">
      
jQuery(document).ready(function(){     

        jQuery
.fn.galleryimageChange=function(index){
          
var oldsrc jQuery('#imageShowcase #productImgDefault').attr('src'); // Standardbild merken
          
var oldtitle jQuery('#imageShowcase #productImgDefault').attr('title'); // Title,Alt merken          

          
jQuery(this).mouseover
            function()
            
{
              
var preload jQuery("#image-preload img").get(index); // Bild aus unserem Preloader mit Bildposition/index auslesen
              
jQuery('#imageShowcase #productImgDefault').attr('src',jQuery(preload).attr("src")); // Standardbild ersetzen                       
              
jQuery('#imageShowcase #productImgDefault').attr('title',jQuery(preload).attr("alt")); // Title-Tag ersetzen              
              
jQuery('#imageShowcase #productImgDefault').attr('alt',jQuery(preload).attr("alt")); // Alt-Tag ersetzen              
            
}
          
)
        
          
jQuery(this).mouseout(
            function()
            

             jQuery
('#imageShowcase #productImgDefault').attr('src',oldsrc); // Standardbild wieder herstellen           
             
jQuery('#imageShowcase #productImgDefault').attr('title',oldtitle); // Title-Tag wieder herstellen             
             
jQuery('#imageShowcase #productImgDefault').attr('alt',oldtitle); // Alt-Tag wieder herstellen             
            
}
          
)
        
          
jQuery(this).click(
            function()
            

              
var preload jQuery("#image-preload img").get(index); 
              
oldsrc jQuery(preload).attr('src'); // Standard-Bild lokal Ã¼berschreiben           
              
oldtitle jQuery(preload).attr('alt'); // Alt,Title lokal Ã¼berschreiben              
            
}
          
)                        
        
}

        jQuery
(function() {
          obj 
jQuery(".more-views ul li:first"); // erstes LI aus more-views
          
          
var 0;
          while ( (
obj != null) && (obj.html() != null) ) {          
            
var image obj.find("a").html(); // IMG-Tag als Source wird zurückgegeben                       
            
jQuery(obj).html(image); // A-Tag mit IMG-Tag Ã¼berschreiben
            
jQuery(obj).galleryimageChange(i); // IMG-Tag galleryimageChange zuweisen, mit Index (Position in der Aufzählung)
            
            
obj obj.next(); // nächstes LI oder NULL
            
i++;            
          
}     
         }
)   

      
})
</script>
    
</div>
<?php endif; ?>
 
Magento Community Magento Community
Magento Community
Magento Community
 
loeffel
Guru
 
Avatar
Total Posts:  427
Joined:  2009-02-03
 

Now if we could somehow use this in list view aswell…

 
Magento Community Magento Community
Magento Community
Magento Community
 
cloudquarry
Guru
 
Avatar
Total Posts:  528
Joined:  2008-11-19
 

@loeffel - Do you have a place we could see your jquery code in action?

 
Magento Community Magento Community
Magento Community
Magento Community
 
e[X]treme[Z]
Jr. Member
 
Total Posts:  1
Joined:  2009-10-07
 

Hi,

I followed the instructions but the drop down options won’t work and the enlarge feature is missing?

http://www.giftmeabreak.com/go-shopping/simple-wedding-card.html

Did I get everything right?

 
Magento Community Magento Community
Magento Community
Magento Community
 
loeffel
Guru
 
Avatar
Total Posts:  427
Joined:  2009-02-03
 

e[X]treme[Z], which instructions here exactly?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Riti
Member
 
Total Posts:  33
Joined:  2010-03-09
 

Hi Guys,

Great work.

I have also implemented it for one of my store.
First problem it disappears my zoom option.

and other is How can I implement small color images instead of attribute drop down (color)?

Thanks,
Riti

 
Magento Community Magento Community
Magento Community
Magento Community
 
Dev008
Jr. Member
 
Avatar
Total Posts:  24
Joined:  2010-01-11
 

we call it as associated product we can add product variant with different prices…

thanks!

 
Magento Community Magento Community
Magento Community
Magento Community
 
realcnbs
Jr. Member
 
Avatar
Total Posts:  5
Joined:  2008-05-03
 

Hey guys, I just published my extension for configurable products color switcher. Please check if interested http://www.magentocommerce.com/magento-connect/realcnbs/extension/5407/colormage

 
Magento Community Magento Community
Magento Community
Magento Community
 
Amasty
Mentor
 
Avatar
Total Posts:  3988
Joined:  2009-11-10
 

There are several color swathes extensions at the magento connect, but none gives your customers such level of usability as Image-Based Dynamic Configurable Products.  Product images and content are reloaded based on customer selections, this way customers can see exactly what they’ve chosen. The module does not limit you with colors images only.  You may upload manufacturer logos, nice size pictures, etc.  See the demo: http://image-based-dynamic-configurables.amasty.com/demo-category/plain-demo-t-shirt.html

 
Magento Community Magento Community
Magento Community
Magento Community
 
info64
Jr. Member
 
Avatar
Total Posts:  2
Joined:  2011-02-21
 

can I upload a PDF with different color version to a product? so instead of images shoppes opens pdf and can see all options?

 
Magento Community Magento Community
Magento Community
Magento Community
 
MagePlace
Member
 
Avatar
Total Posts:  50
Joined:  2010-11-10
Belarus
 

Stan,
You can convert pdf file to images and then create a flipping flash magazine with different colors of your product. It can be assigned to product so when user clicks a thumbnail he will see fancy flipping book on flash.  (process described here
you will need the Flash Flipping Book extension - more info on this page

You will also need 123PDF-to-Image software to convert pdf

 
Magento Community Magento Community
Magento Community
Magento Community
 
nico76
Sr. Member
 
Avatar
Total Posts:  76
Joined:  2007-09-06
Berlin
 

Hi,

@KOSTYA, INC.

Take a look at the Wiki Article: How to change Image when Option changes

Do you know, how to make the stuff from the wiki article work in Magento 1.5.1

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top