Try the Demo

Magento Forum

   
Change product image based on selected radio button of a bundled item
 
backpack
Jr. Member
 
Total Posts:  22
Joined:  2010-02-19
 

Hi, as stated in the title, I would like to be able to change the product image based on the user’s option on a radio button for a bundled item. For example, I choose a radio button that changes the chassis of a product, the image should also change. This is similar to changing an image based on colour, but not quite the same. I would appreciate any help if you could please point me in the right direction. Thank you very much.

 
Magento Community Magento Community
Magento Community
Magento Community
 
tzyganu
Mentor
 
Avatar
Total Posts:  2181
Joined:  2009-11-18
Bucharest, Romania
 

Here is whet you can try.
Edit app\design\frontend\{interface}\{theme}\template\bundle\catalog\product\view\type\bundle\option\radio.phtml
For each radio button in that file add an ‘onclick’ event. (or something else)
This is to code for a radio input (original)

<input type="radio" onclick="bundle.changeSelection(this)" class="radio" id="bundle-option-<?php echo $_option->getId() ?>" name="bundle_option[<?php echo $_option->getId() ?>]"<?php echo ($_default && $_default->isSalable())?'':' checked="checked" ' ?> value="" />
for the onclick attribute a a new function. Let’s call it changeImage
<input type="radio" onclick="bundle.changeSelection(this);changeImage('some image url')" class="radio" id="bundle-option-<?php echo $_option->getId() ?>" name="bundle_option[<?php echo $_option->getId() ?>]"<?php echo ($_default && $_default->isSalable())?'':' checked="checked" ' ?> value="" />
the function could look like this
function changeImage(imageUrl){
$('Your_main_image_id').src imageUrl;
}

This is just a ‘skeleton’ of what to do. You can do it in whatever way you want.
I hope this helps.

 Signature 

http://marius-strajeru.blogspot.com/
Check out the Ultimate Module Creator:
on magento connect
on github

 
Magento Community Magento Community
Magento Community
Magento Community
 
backpack
Jr. Member
 
Total Posts:  22
Joined:  2010-02-19
 

Thanks a lot for replying. When I click on an image from “More Views”, however, the image still links to the old image. Also, when I add the item to the cart, the image is the original image. What would be the best way to handle these “problems”?

 
Magento Community Magento Community
Magento Community
Magento Community
 
tzyganu
Mentor
 
Avatar
Total Posts:  2181
Joined:  2009-11-18
Bucharest, Romania
 

I thought you only needed it for the product details page and it seamed to be the easiest solution.
I have no idea how to keep the changed picture. I don’t even know how to approach this.
I can just recommend looking through the cart files maybe you find something.
The product image in the cart is displayed like this

<?php echo $this->getProductThumbnail()->resize(75); ?>
and getProductThumbnail() looks like this
public function getProductThumbnail()
    
{
        
if (!is_null($this->_productThumbnail)) {
            
return $this->_productThumbnail;
        
}
        
return $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail');
    
}
(see \app\code\core\Mage\Checkout\Block\Cart\Item\Renderer.php)
You can try to set a value for _productThumbnail so you won’t see the default thumbnail.
If you manage to do this post your solution here for everyone to ‘enjoy’.

 Signature 

http://marius-strajeru.blogspot.com/
Check out the Ultimate Module Creator:
on magento connect
on github

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