Change Product Description when clicking Color Swatch

Question

I am using Magento CE 1.9.1.0 and I am using the Configurable swatches function so that I can display color icons and when you click on a color icon it changes the product image to that colored image. This is working just fine. However What I am wanting to do is change the product description dynamically when you click on a different color swatch.

So for example the default product description may say "this white shirt comes in many colors". Then if you click on the red color swatch I want the product description to dynamically/automatically change to say what ever is in the "red" products description box which might be something like "this red colored shirt is 100% cotton".

Can anyone suggest what the code for this would be? I am thinking I would just need to edit the view.phtml file in the catalog/products directory however not sure what the code would be. I also want to display the product title and some attributes values for each color swatch. Like some color swatches have a machine washable = yes value while others have a Machine washable = no value.

Answer 1

You can check my code in this module, which gets all images from the simple products on swatch change: https://github.com/wigman/AjaxSwatches

I'm on a holiday so can't really type a lot of code here right now..

The module loads a JavaScript file that extends the swatch-change event. On this event I've put an Ajax call that gets the simple product information.

Should be quite straightforward extending this with title and description of you know your way around jquery..

Answer 2

i guess that you need codeing on the color swatches area on frontend. where you change product image using javascript there you must get simple product object

there you need get associated simple product and from simple product you can get description.

just an example

<a href=""  onclick="selectDesOption('<?php echo $simpleOb->getDesciption();?>')";>color swathces image </a>

and javascript:

<script>
function selectDesOption(descption){
//  change descirption data by it div id
$('descitoon').update(descption);
}
</script>