Magento – Display bundle product’s child item’s images like normal product images

bundlemagento-1package

Is there a way to show bundle product's child item's product images as the images of the main bundle product?

We are using bundle products to sell products as product packages or kits (with small hacks to template to prevent customers from seeing the normal bundle options). So we need to display the bundle item's images like normal product images below the main product image list. Is this possible somehow?

UPDATE:

Here is the media.phtml file's code from my template. Could the bundle items' images be added in here somehow?

<?php
    $_product = $this->getProduct();
    $_helper = $this->helper('catalog/output');
?>


<p class="product-image">
        <a href="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(600,600); ?>"  rel="<?php echo implode($config, ',');?>" title="<?php echo $this->escapeHtml($this->getImageLabel()) ?>" id="zoom1" class="cloud-zoom">    
        <?php
        echo '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(292,320).'" alt="'.$this->escapeHtml($this->getImageLabel()).'" title="'.$this->escapeHtml($this->getImageLabel()).'"/>';            
        ?>
        </a>

    <?php if (count($this->getGalleryImages()) > 0): ?>
     <a id="zoom-btn" class="lightbox-group zoom-btn-small" href="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(600,600); ?>" title="<?php echo $this->getImageLabel(); ?>"><?php echo $this->__('Zoom'); ?></a>
     <?php endif; ?>
</p>


<?php if (count($this->getGalleryImages()) > 0): ?>

<div class="more-views additional-carousel">

    <?php 
            $sliderFor = 4;
            $productCount = count($this->getGalleryImages());
    ?>  

    <?php if ($productCount >= $sliderFor): ?>
        <div class="customNavigation">
            <a class="btn prev">&nbsp;</a>
            <a class="btn next">&nbsp;</a>
        </div>  
    <?php endif; ?> 

        <div id="additional-carousel" class="<?php if ($productCount >= $sliderFor){?>product-carousel<?php }else{?>products-grid<?php }?>">

        <?php foreach ($this->getGalleryImages() as $_image): ?>
            <div class="slider-item">
                <div class="product-block"> 

                <a href='<?php echo $this->helper('catalog/image')->init($product, 'image', $_image->getFile())->resize(600,600);?>' class='cloud-zoom-gallery lightbox-group' title='<?php echo $this->escapeHtml($_image->getLabel()) ?>' rel="useZoom: 'zoom1', smallImage: '<?php echo $this->helper('catalog/image')->init($product, 'image', $_image->getFile())->resize(292,320);?>' ">

                <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(75); ?>" width="75" height="75" alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />

                </a>

                </div>
            </div>
        <?php endforeach; ?>

        </div>

    <span class="additional_default_width" style="display:none; visibility:hidden"></span>

    <script type="text/javascript">
        jQuery(function($) {

            $(".lightbox-group").colorbox({
                rel:        'lightbox-group',
                opacity:    0.5,
                speed:      300
            });
            $(".cloud-zoom-gallery").first().removeClass("cboxElement");
            $(".cloud-zoom-gallery").click(function() {
                $("#zoom-btn").attr('href', $(this).attr('href'));
                $("#zoom-btn").attr('title', $(this).attr('title'));

                $(".cloud-zoom-gallery").each(function() {
                        $(this).addClass("cboxElement");
                    });
                $(this).removeClass("cboxElement");
            });

        });

        jQuery(function($) {
        var t; $(window).resize(function() { clearTimeout(t); t = setTimeout(function() { $(".cloud-zoom-gallery").first().click(); }, 200); });
        });

    </script>
</div>
<?php endif; ?>

Best Answer

For each bundle product you could load all the child ids, loop through the resultant set, pulling out the images.

You could get a list of the child ids and pull out the images that way

$parentId = 1234; //or whatever the bundle product is
$childIds =   Mage::getResourceSingleton("bundle/selection")->getChildrenIds($parentId,true);
$childImagesArray = array();
foreach($childIds as $cids){ 
    foreach($cids as $cid){ //yer an awkward array in an array here
        $childProduct = Mage::getModel("catalog/product")->load($cid);
        echo "<br/>".$childProduct->getName();
        $childProductImage = $childProduct->getImage(); // OR getSmallImage()  OR getThumbnail();
        var_dump($childProductImage); //see what you get out here
        //now add your data to an array $childImagesArray[] = ....  or do something else with your results.
    }
}
Related Topic