2

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?

1

3 Answers 3

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().

9
  • That seems do do the trick. Thanks so much. Can you also let me know how to get the link for the child product?
    – JAtkinson
    Apr 26, 2016 at 20:44
  • You may try $_item->getProductUrl(). If my answer above solved your problem, please accept as a solution. That will help our community. Apr 27, 2016 at 6:06
  • My answer was too long.
    – JAtkinson
    May 20, 2016 at 7:14
  • This does not work, it fetches the placeholder not the product image
    – gabehou
    Apr 9, 2018 at 18:54
  • @gabehou can you create a new question with your code? Apr 9, 2018 at 22:11
0

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>
2
  • Hey. I also have same issue. Did you get the solution?
    – 3CE
    Oct 30, 2017 at 16:10
  • It seems to fetch the placeholder instead of the image Did you find a solution?
    – gabehou
    Apr 9, 2018 at 18:55
0

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>
1
  • This solution is still fetching the placeholder instead of the image.
    – gabehou
    Apr 9, 2018 at 18:56

Your Answer

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

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