2

I'm trying to bring simple products thumbnails of a grouped product on product detail page. I can show their thumbnails easily in Magento1 but I am not able to do this in Magento2.

In Magento1, My simple products can be shown like this :

enter image description here

So I tried this code at below located file

app/design/frontend/[VendorName]/default/Magento_GroupedProduct/templates/product/view/type/grouped.phtml

<?php
/**
 * Copyright © 2013-2017 Magento, Inc. 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 $objectManager = \Magento\Framework\App\ObjectManager::getInstance(); ?>
<?php $imageHelper  = $objectManager->get('\Magento\Catalog\Helper\Image');?>

<!-- add simple products(associated product) thumbnails -->
        <td>
            <?php $image_url = $imageHelper->init($_item, 'grouped_list_product_thumbnail')->setImageFile($_item->getFile())->resize(100, 100)->getUrl(); ?>
            <img src="<?php echo $image_url; ?>">
        </td>

<!-- add simple products(associated product) thumbnails -->

If I run this code, my code gets images as placeholder, not from cache. so it doesn't come out. Actually, we did migrate from Magento1 and media folder also was migrated manually. I want to get these image from cache folder. How can I do that?

Thank you

1

Just overwrite the file in the custom theme app/design/frontend/Vendor/Theme/Magento_GroupedProduct/templates/product/view/type/grouped.phtml and paste the code in your phtml file

<?php $block->setPreconfiguredValue(); ?>
<?php $_product = $block->getProduct(); ?>
<?php $_associatedProducts = $block->getAssociatedProducts(); ?>
<?php $_hasAssociatedProducts = count($_associatedProducts) > 0; ?>
<?php $objectManager = \Magento\Framework\App\ObjectManager::getInstance(); ?>
<?php $imageHelper  = $objectManager->get('\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 item" scope="col"><?php /* @escapeNotVerified */ echo __('Image') ?></th>
            <th class="col item" scope="col"><?= /* @escapeNotVerified */ __('Product Name') ?></th>
            <?php if ($_product->isSaleable()): ?>
                <th class="col qty" scope="col"><?= /* @escapeNotVerified */ __('Qty') ?></th>
            <?php endif; ?>
        </tr>
        </thead>

        <?php if ($_hasAssociatedProducts): ?>
        <?php foreach ($_associatedProducts as $_item): ?>
        <?php  $item = $_item->getId() ;?>
        <?php $product = $objectManager->create('Magento\Catalog\Model\Product')->load($item); ?>
        <tbody>
            <tr>
                <td data-th="<?php echo $block->escapeHtml(__('Image')); ?>">
                  <?php $imageUrl   = $block->getImage($product, 'product_thumbnail_image'); ?> 
                    <div class="group-img-<?php echo $_item->getEntityId(); ?>">
                    <a href="<?php echo $_item->getProductUrl() ?>" title="<?php echo $this->escapeHtml($_item->getName()) ?>" class="product-image">
                    <?php echo $imageUrl->toHtml(); ?></a>
                </div>
            </td>

                <td data-th="<?= $block->escapeHtml(__('Product Name')) ?>" class="col item">
                    <strong class="product-item-name"><?= $block->escapeHtml($_item->getName()) ?></strong>
                    <?php if ($block->getCanShowProductPrice($_product)): ?>
                        <?php if ($block->getCanShowProductPrice($_item)): ?>
                            <?= /* @escapeNotVerified */ $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>
0

This does not get images from cache but it might point you towards what you need. This gets product thumbnails from Grouped Product.

You need to add a new module and override this from /vendor/magento/module-grouped-product/Model/Product/Type/Grouped.php:

public function getAssociatedProducts($product)
{
    if (!$product->hasData($this->_keyAssociatedProducts)) {
        $associatedProducts = [];

        $this->setSaleableStatus($product);

        $collection = $this->getAssociatedProductCollection(
            $product
        )->addAttributeToSelect(
            ['name', 'price', 'special_price', 'special_from_date', 'special_to_date', 'tax_class_id']
        )->addFilterByRequiredOptions()->setPositionOrder()->addStoreFilter(
            $this->getStoreFilter($product)
        )->addAttributeToFilter(
            'status',
            ['in' => $this->getStatusFilters($product)]
        );

        foreach ($collection as $item) {
            $associatedProducts[] = $item;
        }

        $product->setData($this->_keyAssociatedProducts, $associatedProducts);
    }
    return $product->getData($this->_keyAssociatedProducts);
}

With this (Added thumbnail. Look up the name for another type of image.):

public function getAssociatedProducts($product)
{
    if (!$product->hasData($this->_keyAssociatedProducts)) {
        $associatedProducts = [];

        $this->setSaleableStatus($product);

        $collection = $this->getAssociatedProductCollection(
            $product
        )->addAttributeToSelect(
            ['name', 'price', 'special_price', 'special_from_date', 'special_to_date', 'tax_class_id', 'thumbnail']
        )->addFilterByRequiredOptions()->setPositionOrder()->addStoreFilter(
            $this->getStoreFilter($product)
        )->addAttributeToFilter(
            'status',
            ['in' => $this->getStatusFilters($product)]
        );

        foreach ($collection as $item) {
            $associatedProducts[] = $item;
        }

        $product->setData($this->_keyAssociatedProducts, $associatedProducts);
    }
    return $product->getData($this->_keyAssociatedProducts);
}

Then override vendor/magento/module-grouped-product/view/frontend//frontend/templates/product/view/type/Grouped.phtml with your own. Just copy that file to your vendor/theme/Magento_GroupedProduct/...

For thumbnail add this:

        <?php $associatedProductThumbnail = $block->escapeHtml($_item->getThumbnail()) ?>
    <?php $associatedProductThumbnail = '/pub/media/catalog/product' . $associatedProductThumbnail ?>
0

To achieve this just follow the guidelines as described below.

Create a custom module at below location

Magento_root/app/code/{Vendor}/{ModuleName}

Create below file into your module as per there locations given here.

  1. registration.php
  2. etc/module.xml
  3. etc/view.xml
  4. etc/di.xml
  5. view/frontend/templates/product/view/type/grouped.phtml
  6. view/frontend/layout/catalog_product_view_type_grouped.xml
  7. Model/Product/Type/Grouped.php

Now put below code into the respective files I am not putting here content of registraton.php & module.xml as because it might be well understood to you or you can get it from any where.

view.xml

<?xml version="1.0"?>
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    <media>
        <images module="Magento_Catalog">
            <image id="product_page_image_group_product" type="thumbnail">
                <width>100</width>
                <height>100</height>
            </image>
        </images>
    </media>
</view>

di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<preference for="\Magento\GroupedProduct\Model\Product\Type\Grouped" type="{Vendor}\{ModuleName}\Model\Product\Type\Grouped" />
</config>

grouped.phtml

<?php $block->setPreconfiguredValue(); ?>
<?php $_product = $block->getProduct(); ?>
<?php $_associatedProducts = $block->getAssociatedProducts(); ?>
<?php $_hasAssociatedProducts = count($_associatedProducts) > 0; ?>

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

        <?php if ($_hasAssociatedProducts): ?>
        <?php foreach ($_associatedProducts as $_item): ?>

        <tbody>
            <tr>

                <?php /* code for image thumbnail start */?>

                <?php 
                $imageUrl = $this->helper('Magento\Catalog\Helper\Image')->init($_item, 'product_page_image_group_product')
                            ->setImageFile($_item->getThumbnail())->getUrl();
                            ?>
                <td><div class="group-img-<?php echo $_item->getEntityId(); ?>" data-role="group-image" data-product-id="<?php echo $_item->getEntityId(); ?>"><img src="<?php echo $imageUrl; ?>"></div></td>

                <?php /* code for image thumbnail end */?>

                <td data-th="<?= $block->escapeHtml(__('Product Name')) ?>" class="col item">
                    <strong class="product-item-name"><?= $block->escapeHtml($_item->getName()) ?></strong>
                    <?php if ($block->getCanShowProductPrice($_product)): ?>
                        <?php if ($block->getCanShowProductPrice($_item)): ?>
                            <?= /* @escapeNotVerified */ $block->getProductPrice($_item) ?>
                        <?php endif; ?>
                     <?php endif; ?>
                </td>
                <?php if ($_product->isSaleable()): ?>
                <td data-th="<?= $block->escapeHtml(__('Qty')) ?>" class="col qty">
                <?php if ($_item->isSaleable()) : ?>
                    <div class="control qty">
                        <input type="number"
                               name="super_group[<?= /* @escapeNotVerified */ $_item->getId() ?>]"
                               data-selector="super_group[<?= /* @escapeNotVerified */ $_item->getId() ?>]"
                               value="<?= /* @escapeNotVerified */ $_item->getQty() * 1 ?>"
                               title="<?= /* @escapeNotVerified */ __('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="<?= /* @escapeNotVerified */ __('Availability') ?>">
                        <span><?= /* @escapeNotVerified */ __('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">
                        <?= $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; ?>">
                    <?= /* @escapeNotVerified */ __('No options of this product are available.') ?>
                </td>
            </tr>
        </tbody>
        <?php endif; ?>
    </table>
</div>
<div id="validation-message-box"></div>

<script type="text/x-magento-init">
        {
            "[data-role=group-image]": {
                "Webindiainc_Groupedproduct/js/group-image-renderer": {
                    "jsongroupimageConfig": "<?php echo $_item->getEntityId() ?>",
                    "mediaCallback": "<?= /* @escapeNotVerified */ $block->getMediaCallback() ?>"
                }
            }
        }
</script>

catalog_product_view_type_grouped.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="product.info.form.content">
            <block class="Magento\GroupedProduct\Block\Product\View\Type\Grouped" name="product.info.grouped" before="product.info.addtocart" template="{Vendor}_{ModuleName}::product/view/type/grouped.phtml"/>
        </referenceContainer>
    </body>
</page>

Grouped.php

<?php

namespace {Vendor}\{ModuleName}\Model\Product\Type;

use Magento\Catalog\Api\ProductRepositoryInterface;

class Grouped extends \Magento\GroupedProduct\Model\Product\Type\Grouped
{


    /**
     * Retrieve array of associated products
     *
     * @param \Magento\Catalog\Model\Product $product
     * @return array
     */
    public function getAssociatedProducts($product)
    {
        if (!$product->hasData($this->_keyAssociatedProducts)) {
            $associatedProducts = [];

            $this->setSaleableStatus($product);

            $collection = $this->getAssociatedProductCollection(
                $product
            )->addAttributeToSelect(
                ['name', 'price', 'special_price', 'special_from_date', 'special_to_date', 'tax_class_id', 'thumbnail']
            )->addFilterByRequiredOptions()->setPositionOrder()->addStoreFilter(
                $this->getStoreFilter($product)
            )->addAttributeToFilter(
                'status',
                ['in' => $this->getStatusFilters($product)]
            );

            foreach ($collection as $item) {
                $associatedProducts[] = $item;
            }

            $product->setData($this->_keyAssociatedProducts, $associatedProducts);
        }
        return $product->getData($this->_keyAssociatedProducts);
    }

}
?>

Note: After completing with this stuff just do run below commands.

php bin/magento module:enable {Vendor}_{ModuleName}
php bin/magento setup:upgrade
php bin/magento setup-static-content:deploy

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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