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 2 of 5
can msgento change image according to it’s color attribute ?? 
 
MathieuF
Sr. Member
 
Total Posts:  141
Joined:  2009-03-12
Montreal, Canada
 

wow! that worked.

one downside… if you have a multi-language site (like mine) you’re screwed. For instance, Black is Noir in French. Labeling my pictures only works on one language on the site because of this :(

anyone has a solution to this labeling issue ?

 
Magento Community Magento Community
Magento Community
Magento Community
 
MathieuF
Sr. Member
 
Total Posts:  141
Joined:  2009-03-12
Montreal, Canada
 

my brain just woke up… add the image twice with two labels!

 
Magento Community Magento Community
Magento Community
Magento Community
 
vij
Sr. Member
 
Total Posts:  81
Joined:  2009-02-13
 

hi
i want this option to use in simple product which is shown in follwing link----->http://www.magentocommerce.com/wiki/how-to/color_swatches_without_creating_pallete_images
pls help me out i tried many things but i didnt got it.

thanks in advance

 
Magento Community Magento Community
Magento Community
Magento Community
 
Corporate007
Jr. Member
 
Total Posts:  14
Joined:  2008-08-17
 

So if I implement your suggestions above I will be able to change my base image based on the select of the colour I choose in the colour drop down..

I am going to give it a try tonight and tell you how I go.. Fingers crossed I don’t stuff it up..!!!

This would be wonderful..

Just one last question, what if I want the zoom feature to stay available in the process will that be possible after these swatch changes.??

Cheers
Corporate007

?;-p

 
Magento Community Magento Community
Magento Community
Magento Community
 
vij
Sr. Member
 
Total Posts:  81
Joined:  2009-02-13
 

ya im not confirmed but i think so the zoom feature will stay available in the process of swatch changes........

pls let me know when u will figure out.....

thanks for helping me

 
Magento Community Magento Community
Magento Community
Magento Community
 
vij
Sr. Member
 
Total Posts:  81
Joined:  2009-02-13
 

hi
Is anyone has solve my problem?
pls help me out.....waiting for rply....
thanks in advance

 
Magento Community Magento Community
Magento Community
Magento Community
 
MathieuF
Sr. Member
 
Total Posts:  141
Joined:  2009-03-12
Montreal, Canada
 

I got it to work nicely, except for the zooming which disapeared, not an issue for me.

I made some modifications, as I have some colors that are “Light blue”, spaces were an issue.

in media.phtml, change:
<?php echo $this->htmlEscape($_image->getLabel()) ?>” />
to
<?php echo str_replace(" ","_",$this->htmlEscape($_image->getLabel())) ?>” />

in configurable.phtml, change:
jQuery("#productImg" + optionValueText).show();
to
jQuery("#productImg" + optionValueText.replace(’ ‘,’_’)).show();

now I have to figure out something about french characters! (éèàöç ... )

 
Magento Community Magento Community
Magento Community
Magento Community
 
MathieuF
Sr. Member
 
Total Posts:  141
Joined:  2009-03-12
Montreal, Canada
 

for those of you that needs their special characters to work…

in configurable.phtml:
} else {
optionValueText = optionValueText.replace(’ ‘,’_’);
optionValueText = optionValueText.replace("\u00e0”,"a");
optionValueText = optionValueText.replace("\u00e2”,"a");
optionValueText = optionValueText.replace("\u00e7”,"c");
optionValueText = optionValueText.replace("\u00e8”,"e");
optionValueText = optionValueText.replace("\u00e9”,"e");
optionValueText = optionValueText.replace("\u00f6”,"o");
optionValueText = optionValueText.replace("\u00f9”,"u");
optionValueText = optionValueText.replace("\u00c0”,"A");
optionValueText = optionValueText.replace("\u00c2”,"A");
optionValueText = optionValueText.replace("\u00c7”,"C");
optionValueText = optionValueText.replace("\u00c8”,"E");
optionValueText = optionValueText.replace("\u00c9”,"E");
optionValueText = optionValueText.replace("\u00d6”,"O");
optionValueText = optionValueText.replace("\u00d9”,"U");
jQuery("#productImg" + optionValueText).show();
}

in media.phtml:
$_strorig = array("é”,"è”,"â”,"à”,"ç”,"ö”,"ù”,"É”,"È”,"”,"À”,"Ç”,"Ö”,"Ù"," “);
$_strrepl = array("e”,"e”,"a”,"a”,"c”,"o”,"u”,"E”,"E”,"A”,"A”,"C”,"O”,"U”,"_");
<?php echo str_replace($_strorig,$_strrepl,$this->htmlEscape($_image->getLabel())) ?>” />

I know, some dyacritics are missing, but it gives you an idea.

 
Magento Community Magento Community
Magento Community
Magento Community
 
vij
Sr. Member
 
Total Posts:  81
Joined:  2009-02-13
 

hi,
this not took me out of my problem so pls can u paste ur code here....

thank u

 
Magento Community Magento Community
Magento Community
Magento Community
 
nathanael.attali
Jr. Member
 
Total Posts:  20
Joined:  2009-01-15
 

Hi, first , great Job !

i try the with Jquery, it works fine with the HTC touch Diamond exemple, but when you add another simple product ---> the select_id change, in the tutoiral the” select_id “ for the HTC is “Select_3” but this ID change if you enter 10 differents simple products you will have 10 different select_ID.

I try the methode of coco in this forum---> change option.phtml et configurable.phtml it works fine but only for configurable products.

My question: how can we use this Jquery hints for all “simple product “of the onlineshop with this method.

what is the file to modify, and how.

Thanks a lot for your contribution.

Nathan

NB: find a picture showing the disparition of the selection bar ( for the color) it is a bug happening after the modification of the option.phtml and configurable.phtml files.... any ideas ?

 
Magento Community Magento Community
Magento Community
Magento Community
 
nathanael.attali
Jr. Member
 
Total Posts:  20
Joined:  2009-01-15
 

Thanks you a lot it works fine on magento 1.1.8

First step:
install the Jquery tuto
second one:
MOdify:only this file under with the cocomo code and it is all right for simple and configurable product wink

/app/design/frontend/default/YourLayoutsName/template/catalog/product/view/type/options/configurable.phtm

Nathan

 
Magento Community Magento Community
Magento Community
Magento Community
 
MathieuF
Sr. Member
 
Total Posts:  141
Joined:  2009-03-12
Montreal, Canada
 

vij, here is what I’ve done. Hope it also help others with this issue.

app/design/frontend/default/calins/template/catalog/product/view/media.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)
 */

/**
 * Product media data template
 *
 * @see Mage_Catalog_Block_Product_View_Media
 */
?>

<?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","_");
?>

<div id="imageShowcase">

<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
  
<img id="productImgDefault" src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(265); ?>" alt="<?php echo $this->htmlEscape($_
product->getName()) ?>" 
/>
<?php else: ?>
  
<img id="productImgDefault" src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(265); ?>" alt="<?php echo $this->htmlEscape($_
product->getName()) ?>" 
/>
<?php endif; ?>
<?php 
if (count($this->getGalleryImages()) > 1): ?>

<?php 
foreach ($this->getGalleryImages() as $_image): ?>
  
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize(265); ?>" alt="no image" id="productImg
<?php echo str_replace(
$_strorig,$_strrepl,$this->htmlEscape($_image->getLabel())) ?>" />
<?php endforeach; ?>

<?php 
endif; ?>
</div>

app/design/frontend/default/calins/template/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='';

?>
<?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="requir
ed-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)
  
// change 'Color' to the name of the label of your product attribute
  
if($_attribute->getLabel()=='Color' || $_attribute->getLabel()=='Couleur'){
    $_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);
        // 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 {
          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);
        
}
      })
;
    
});
  
</script>
<?php  }  ?>

app/design/frontend/default/calins/template/page/html/head.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)
 */
?>
<title><?php echo $this->getTitle() ?></title>
<
meta http-equiv="Content-Type" content="<?php echo $this->getContentType() ?>" />
<
meta name="description" content="<?php echo htmlspecialchars($this->getDescription()) ?>" />
<
meta name="keywords" content="<?php echo htmlspecialchars($this->getKeywords()) ?>" />
<
meta name="robots" content="<?php echo htmlspecialchars($this->getRobots()) ?>" />
<?php echo $this->getChildHtml() ?>
<link rel="icon" href="<?php echo $this->getSkinUrl('favicon.ico') ?>" type="image/x-icon" />
<
link rel="shortcut icon" href="<?php echo $this->getSkinUrl('favicon.ico') ?>" type="image/x-icon" />
<
script type="text/javascript">
//<![CDATA[
    
var BLANK_URL '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>';
    var 
BLANK_IMG '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>';
//]]>
</script>
<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/jquery/jquery-1.2.3.js')?>"></script>
<?php 
echo $this->getCssJsHtml() ?>
<?php 
echo $this->helper('core/js')->getTranslatorScript() ?>
<?php 
echo $this->getIncludes() ?>

Download http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.3.js
and copy to skin/frontend/default/default/js/jquery/

I haven’t tried with the new jquery 1.3.2 version.

 
Magento Community Magento Community
Magento Community
Magento Community
 
nathanael.attali
Jr. Member
 
Total Posts:  20
Joined:  2009-01-15
 

How to connect the “drop down menu” with the image “more view” to change automaticaly the attribut of the drop down with the label of the image ?

Is it possible.
the Jquery 1.2.3 methode work fine but you cant connect together the “more view images” with the “drop down menu” and it is so confusing for the customer.

Thank you a lot for your response.
Nathan

 
Magento Community Magento Community
Magento Community
Magento Community
 
nathanael.attali
Jr. Member
 
Total Posts:  20
Joined:  2009-01-15
 

is someone have done somthing like that but free ?

http://www.temgra.com/index.php/magento-extensions/color-swatches-plus-magento-extension.html

 
Magento Community Magento Community
Magento Community
Magento Community
 
spalanis
Jr. Member
 
Total Posts:  1
Joined:  2009-05-08
 

I have been successfully able to show the associated product image in the place of the configurable product image when the appropriate option is selected from the drop down. Unfortunately I have had to hack the core since I do not know how to create extensions as yet (just started on Magento a week or so back). Let me know if anyone of you need it and I will be happy to pass it on. It was written for 1.3.1 . Also anyone who wants to make an extension out of it let me know and we can work together.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top
Page 2 of 5