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

Page 1 of 5
can msgento change image according to it’s color attribute ?? 
 
janim007
Jr. Member
 
Total Posts:  29
Joined:  2008-09-09
 

hi
let’s say i have t-shirts web site and i want to put config. product , can magento change product image according to the color attribute or size attribute ... etc.

Thanx for any answer or any hint

 
Magento Community Magento Community
Magento Community
Magento Community
 
J_T_
Mentor
 
Avatar
Total Posts:  1961
Joined:  2008-08-07
London-ish, UK
 

Not out of the box but as it’s open Source, you are more than welcome to make it do that. So no, right now it can’t but fundamentally, it can.

 
Magento Community Magento Community
Magento Community
Magento Community
 
janim007
Jr. Member
 
Total Posts:  29
Joined:  2008-09-09
 

Thanx J.T for your replay
i have starte woring on this
but i can’t understand the database
what is the relation between configured poduct and it’s Associated Products in da database ???
and then how i know that this attribute belong to this Associated Product
then get the base image for this Associated Product
Right ???

i think it done in that way unless any one have another idea .
can any body help ?
Thanx sooooooo much

 
Magento Community Magento Community
Magento Community
Magento Community
 
J_T_
Mentor
 
Avatar
Total Posts:  1961
Joined:  2008-08-07
London-ish, UK
 

If you can upload images with consistent filenames, you can skip the database and just edit the phtml files.

Example:

xyz_tshirt_main_image.jpg = default view

In drop-down you have Red, Blue, White and Green

You upload:

xyz_tshirt_red.jpg
xyz_tshirt_blue.jpg
xyz_tshirt_white.jpg
xyz_tshirt_green.jpg

That way you need no database edits or queries, just use the value of the drop-down to update the image shown. Maybe not the nicest way but sure works and far easier.

 
Magento Community Magento Community
Magento Community
Magento Community
 
janim007
Jr. Member
 
Total Posts:  29
Joined:  2008-09-09
 

yes i think this way gonna work but this is confusing , i mean you have to add all images at the same name , uness it will not wok
i think getting the base image of the associated product is better ,
but this is the problem .,
what is the table which do that ??

thanx any way

 
Magento Community Magento Community
Magento Community
Magento Community
 
tomislavbilic
Member
 
Avatar
Total Posts:  69
Joined:  2007-11-17
Osijek, Croatia
 

Hi guys,

Take a look at this tutorial of how to enable color switcher in Magento. Although the process is a little longer, a PHP developer should find its way wink

 
Magento Community Magento Community
Magento Community
Magento Community
 
bobbrodie
Sr. Member
 
Avatar
Total Posts:  132
Joined:  2008-04-02
Philadelphia, PA
 

This is really cool, but our products use custom attributes for color (I don’t think custom options was available when we started developing. Can you do this with configurable products?

 
Magento Community Magento Community
Magento Community
Magento Community
 
cooee
Sr. Member
 
Avatar
Total Posts:  100
Joined:  2007-08-31
Aachen, Germany
 

Hi Tomislav, I think the problem with the way you have created the color switcher is that you are hardcoding the name of the <select> into the header. That way, if the shop-admin enters a new product with new custom options, the select will be named something like “select_232”, thus the JQuery won’t work.

cooee

 
Magento Community Magento Community
Magento Community
Magento Community
 
cooee
Sr. Member
 
Avatar
Total Posts:  100
Joined:  2007-08-31
Aachen, Germany
 

Hi there,

I came up with a solution that filters the <select>’s id dynamically. If you follow the approach Tomislav has linked to and enter this into your options.phtml (right underneath the massive Javascript block), you should be fine:

<?php $colour_select_id='';
          foreach(
$_options as $_option){
            
if($_option->getTitle()=='Colour'){
              $colour_select_id 
'select_'.$_option->getId();
            
}
          }
    ?>    
    
    <?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);

                // 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);
                //alert('Selected option has value: ' + optionValue + ' and inner text: ' + optionValueText);


                // Show the image based on selected value
                // Whatch out, case sensitive...
                
jQuery("#productImg" optionValueText).show();
            
});
        
});
      
</script>
      <?php  }  ?>

The first loop checks which option has got the name “Colour” and inserts it into the bit of JQuery script responsible for the image swap.

HTH,
cooee

 
Magento Community Magento Community
Magento Community
Magento Community
 
sdsocali
Jr. Member
 
Avatar
Total Posts:  6
Joined:  2008-01-31
 

Tomislav never mentions optoions.phtml. Also in the head he places some code refering to select_3

jQuery("#select_3").change(function() {
// Hide all images on slect element change action
jQuery("#imageShowcase img").hide();

how does this change things. I did everything Tomislav talks about on the site and the video and i can not get it to work. The images are hidden but when i choose a new color it does not change the pic.

I have attached the files.

File Attachments
head.phtml  (File Size: 4KB - Downloads: 895)
media.phtml  (File Size: 2KB - Downloads: 857)
options.phtml  (File Size: 9KB - Downloads: 971)
 
Magento Community Magento Community
Magento Community
Magento Community
 
zoooj
Member
 
Total Posts:  34
Joined:  2008-10-13
London, United Kingdom
 

I’m also going to try to get images load for all associated products per configurable product. The reason I can’t use Tomislav’s code is that he’s got a single product with multiple options while i have multiple products that are of the same type of product. Each has two variants. So after selecting the first you then get a new subset depending on your choice. I haven’t explored the phtml files too much yet but was wondering whether anyone else had done this using two variants as opposed to just the one.

 
Magento Community Magento Community
Magento Community
Magento Community
 
matssee
Jr. Member
 
Total Posts:  2
Joined:  2008-09-26
 

Thanks cooee, that worked great!

I have Swedish characters in both my option names and it’s labels.

I figured out how to get it ti work with the option name: In options.phtl, I wrapped $_option->getTitle() with utf8_decode($_option->getTitle()) in the first PHP block.

But I can’t figure out how to deal with the labels.
My approach was to strip the Swedish characters out in media.phtml, which I could do, but then I can’t seem to do the same thing in the jQuery code.

Mats

 
Magento Community Magento Community
Magento Community
Magento Community
 
Max Rapp
Jr. Member
 
Total Posts:  2
Joined:  2008-11-23
 

So I’ve appended my options.phtml file with said corrections, now, however, if you have a product option that modifies price, it fails to show the picture. I’m wondering if when you change the price, you are somehow changing the id of the product. Anyone have any ideas on how to fix this?

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

I implemented Color Swatches for Magento and offer it as a commercial extension. There is also a live demo of the extension: http://www.temgra.com/index.php/color-swatches-magento-extension.html

 
Magento Community Magento Community
Magento Community
Magento Community
 
cocomo
Jr. Member
 
Total Posts:  5
Joined:  2009-02-04
 

Thank You Tomislav and Cooee! To implement the changing images in Magento 1.2.0.3 the following modification will be required:

Cooees code for options.phtml needs to go into /app/design/frontend/default/YourLayoutsName/template/catalog/product/view/type/options/configurable.phtml where “YourLayoutsName” is the name of the folder with your custom configuration. If you don’t have a custom layout defined use the “default” directory here.

For debugging: Try to uncommenting the javascript alerts.

Following my code for configurable.phtml:

<?php
$_product    
$this->getProduct();
$_attributes Mage::helper('core')->decorateArray($this->getAllowAttributes());
// variable definition
$_colour_select_id='';

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

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

// apply the code for the image change 
<?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);
                // 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);
                // 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 {
                    jQuery
("#productImg" optionValueText).show();
                
}
            }
);
        
});
    
</script>
<?php  }  ?>

See it happen at Medienprodukt | Store
 
Magento Community Magento Community
Magento Community
Magento Community
 
cocomo
Jr. Member
 
Total Posts:  5
Joined:  2009-02-04
 

Thank You Tomislav and Cooee! To implement the changing images in Magento 1.2.0.3 the following modification will be required:

Cooees code for options.phtml needs to go into /app/design/frontend/default/YourLayoutsName/template/catalog/product/view/type/options/configurable.phtml where “YourLayoutsName” is the name of the folder with your custom configuration. If you don’t have a custom layout defined use the “default” directory here.

For debugging: Try to uncommenting the javascript alerts.

Following my code for configurable.phtml:

<?php
$_product    
$this->getProduct();
$_attributes Mage::helper('core')->decorateArray($this->getAllowAttributes());
// variable definition
$_colour_select_id='';

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

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

// apply the code for the image change 
<?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);
                // 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);
                // 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 {
                    jQuery
("#productImg" optionValueText).show();
                
}
            }
);
        
});
    
</script>
<?php  }  ?>

See it happen at Medienprodukt | Store
 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top
Page 1 of 5