Magento2 - How do I add child item images to a grouped product - grouped.phtml

Question

I am working on Magento 2 and would like to show images of the individual items that are part of a group. I have gotten as far as figuring out that it is grouped.phtml that renders the list of child products, but I can't seem to get the image to work for me.

Can anyone help?

Answer 1

The most interesting thing is that each child item is an instance of product model. So, we can re-use init() method in Magento\Catalog\Helper\Image. You try this code below:

<?php
$_imagehelper = $this->helper('Magento\Catalog\Helper\Image');
$productImage = $_imagehelper->init($_item, 'product_base_image')
                        ->constrainOnly(FALSE)
                        ->keepAspectRatio(TRUE)
                        ->keepFrame(FALSE)->resize(50)->getUrl();

//echo $productImage;

These code lines above allow us to resize the item image and keep its Aspect Ratio.

product_base_image is a global id of type image of Magento Catalog module. It may define in blank,luma or your theme. For example: vendor/magento/theme-frontend-luma/etc/view.xml and vendor/magento/theme-frontend-blank/etc/view.xml

Or there is another way

$productImage = $block->getImage($_item, 'product_base_image')->getImageUrl();
  //echo $productImage;

This is because the current block extends from Magento\Catalog\Block\Product\AbstractProduct, so that, we can use exist method getImage().

Answer 2

This doesn't seem to be working after all. This is what I have. Am I doing something wrong? It apears that $_item is causing the problem.

If I change $_item to $_product it doesn't error, but shows the parent product image.

<?php $block->setPreconfiguredValue(); ?>
<?php $_product = $block->getProduct(); ?>
<?php $_associatedProducts = $block->getAssociatedProducts(); ?>
<?php $_hasAssociatedProducts = count($_associatedProducts) > 0; ?>
<?php $_imagehelper = $this->helper('Magento\Catalog\Helper\Image');
$productImage = $_imagehelper->init($_item, 'product_base_image')
                        ->constrainOnly(FALSE)
                        ->keepAspectRatio(TRUE)
                        ->keepFrame(FALSE)->resize(50)->getUrl();?>

<div class="table-wrapper grouped">
    <table class="table data grouped" id="super-product-table">
        <caption class="table-caption"><?php /* @escapeNotVerified */ echo __('Grouped product items') ?></caption>
        <thead>
        <tr>
            <th class="col item" scope="col"><?php /* @escapeNotVerified */ echo __('Product Name') ?></th>
            <?php if ($_product->isSaleable()): ?>
                <th class="col qty" scope="col"><?php /* @escapeNotVerified */ echo __('Qty') ?></th>
            <?php endif; ?>
        </tr>
        </thead>

        <?php if ($_hasAssociatedProducts): ?>
        <?php foreach ($_associatedProducts as $_item): ?>
        <tbody>
            <tr>
                <td data-th="<?php echo $block->escapeHtml(__('Product Name')); ?>" class="col item">
                    <strong class="product-item-name"><?php echo $block->escapeHtml($_item->getName()) ?></strong> 
                    <img src="<?php echo $productImage; ?>">
                    <?php if ($block->getCanShowProductPrice($_product)): ?>
                        <?php if ($block->getCanShowProductPrice($_item)): ?>
                            <?php /* @escapeNotVerified */ echo $block->getProductPrice($_item) ?>
                        <?php endif; ?>
                     <?php endif; ?>
                </td>

Answer 3

This is the perfect way to do it... JAtkinson put the entire code in header, which is wrong. Use my code as a reference. Tested on MAGENTO 2.0.7

<?php $block->setPreconfiguredValue(); ?>
<?php $_product = $block->getProduct(); ?>
<?php $_associatedProducts = $block->getAssociatedProducts(); ?>
<?php $_hasAssociatedProducts = count($_associatedProducts) > 0; ?>
<?php $_imagehelper = $this->helper('Magento\Catalog\Helper\Image');?>




<div class="table-wrapper grouped">
    <table class="table data grouped" id="super-product-table">
        <caption class="table-caption"><?php /* @escapeNotVerified */ echo __('Grouped product items') ?></caption>
        <thead>
        <tr>
            <th class="col qty" scope="col"><?php /* @escapeNotVerified */ echo __('Image') ?></th>
            <th class="col item" scope="col"><?php /* @escapeNotVerified */ echo __('Product Name') ?></th>
            <?php if ($_product->isSaleable()): ?>
                <th class="col qty" scope="col"><?php /* @escapeNotVerified */ echo __('Qty') ?></th>
            <?php endif; ?>
        </tr>
        </thead>

        <?php if ($_hasAssociatedProducts): ?>
        <?php foreach ($_associatedProducts as $_item): ?>
        <tbody>
            <tr>
                <td data-th="<?php echo $block->escapeHtml(__('Product Name')); ?>" class="col qty">
                <?php $productImage = $block->getImage($_item, 'product_base_image')->getImageUrl(); ?>
                    <img src="<?php echo $productImage; ?>">
                </td>




                <td data-th="<?php echo $block->escapeHtml(__('Product Name')); ?>" class="col item">
                    <strong class="product-item-name"><?php echo $block->escapeHtml($_item->getName()) ?></strong>
                       <?php if ($block->getCanShowProductPrice($_product)): ?>
                       <?php if ($block->getCanShowProductPrice($_item)): ?>
                            <?php /* @escapeNotVerified */ echo $block->getProductPrice($_item) ?>
                        <?php endif; ?>
                     <?php endif; ?>
                </td>
                <?php if ($_product->isSaleable()): ?>
                <td data-th="<?php echo $block->escapeHtml(__('Qty')); ?>" class="col qty">
                <?php if ($_item->isSaleable()) : ?>
                    <div class="control qty">
                        <input type="number" name="super_group[<?php /* @escapeNotVerified */ echo $_item->getId() ?>]"
                               maxlength="12"
                               value="<?php /* @escapeNotVerified */ echo $_item->getQty() * 1 ?>"
                               title="<?php /* @escapeNotVerified */ echo __('Qty') ?>"
                               class="input-text qty"
                               data-validate="{'validate-grouped-qty':'#super-product-table'}"
                               data-errors-message-box="#validation-message-box"/>
                    </div>
                    <div class="qty-changer">
                        <a href="javascript:void(0)" class="qty-inc"><i class="porto-icon-up-dir"></i></a>
                        <a href="javascript:void(0)" class="qty-dec"><i class="porto-icon-down-dir"></i></a>
                    </div>
                <?php else: ?>
                    <div class="stock unavailable" title="<?php /* @escapeNotVerified */ echo __('Availability') ?>">
                        <span><?php /* @escapeNotVerified */ echo __('Out of stock') ?></span>
                    </div>
                <?php endif; ?>
                </td>
                <?php endif; ?>
            </tr>
            <?php if ($block->getCanShowProductPrice($_product)
                && $block->getCanShowProductPrice($_item)
                && trim($block->getProductPriceHtml(
                    $_item,
                    \Magento\Catalog\Pricing\Price\TierPrice::PRICE_CODE
                ))): ?>
                <tr class="row-tier-price">
                    <td colspan="2">
                        <?php echo $block->getProductPriceHtml(
                            $_item,
                            \Magento\Catalog\Pricing\Price\TierPrice::PRICE_CODE
                        ) ?>
                    </td>
                </tr>
            <?php endif; ?>
        </tbody>
        <?php endforeach; ?>
        <?php else: ?>
        <tbody>
            <tr>
                <td class="unavailable"
                    colspan="<?php if ($_product->isSaleable()): ?>4<?php else : ?>3<?php endif; ?>">
                    <?php /* @escapeNotVerified */ echo __('No options of this product are available.') ?>
                </td>
            </tr>
        </tbody>
        <?php endif; ?>
    </table>
</div>
<div id="validation-message-box"></div>