5

I am trying to display the grouped product images on my product page. So I extended the grouped.phtml file in my theme and modified it as follow:

<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

/**
 * Grouped product data template
 *
 * @var $block \Magento\Catalog\Block\Product\View\BaseImage
 * @var $block \Magento\GroupedProduct\Block\Product\View\Type\Grouped
 */
?>
<?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 picture" scope="col"><?php /* @escapeNotVerified */ echo __('Product Picture') ?></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 class="col picture" scope="col">
                        <?php $productImage = $block->getImage($_item, 'product_thumbnail_image');
                        echo $productImage->toHtml();
                        ?>
                    </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() ?>]"
                                           data-selector="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>
                            <?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>

So the first column of my grouped product table is the main picture of the grouped product.

Right now, I get a placeholder:

<img class="product-image-photo" src="http://BASEURL/static/frontend/Vendor/theme/en_US/Magento_Catalog/images/product/placeholder/thumbnail.jpg" width="50" height="50" alt="Leurre de manger">

But if I change to $_product instaed of $_item I get the parent picture (the main grouped picture) to display...

<td class="col picture" scope="col">
                        <?php $productImage = $block->getImage($_product, 'product_thumbnail_image');
                        echo $productImage->toHtml();
                        ?>
</td>

How can I display the individual grouped pictures?

4

1 Answer 1

0

You can get item image using below code.

<?php $productImage = $block->getImage($_item, 'product_thumbnail_image'); ?>

<img src="<?= $productImage->getImageUrl(); ?>" />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.