Magento Color swatch simple product

Creating custom attribute. Simply create a drop down selection box and create the same amount of drop down options as you have images, giving them the same name Red, Green, Blue, etc.

 

You need to modify your /template/page/html/head.phtml file to include the jQuery script  

 <script type="text/javascript">
jQuery(document).ready(function() {
   // On document ready hide all images first
    jQuery("#imageShowcase img").hide();
    jQuery("#productImgDefault").show();
  
    jQuery("#select_25").change(function() {
    var optionValueText = jQuery.trim(jQuery('#select_25 :selected').text());
    if(optionValueText != "-- Please Select --")
    {
 
        // Hide all images on slect element change action
        jQuery("#imageShowcase img").hide();
     optionValueText = optionValueText.split(" +", 2);
//alert (optionValueText[0]);
        // Show the image based on selected value
        jQuery("#productImg" + optionValueText[0]).show();
    }
    });

});
</script>

please check the select_4 option in your file

The final step is to modify the /template/catalog/product/view/media.phtml file

<?php $_product = $this->getProduct() ?>


<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(256); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" />
<?php else: ?>
    <img id="productImgDefault" src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(256); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" />
<?php endif; ?>
<?php if (count($this->getGalleryImages()) > 0): ?>

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

<?php endif; ?>

  You to see final result

Author : tech

Share this

Related Posts