Magento – Magento 2 : Display grouped product pictures in template

grouped-productsmagento2product-images

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?

Best Answer

You can get item image using below code.

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

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

Related Solutions

Magento – How to show image in grouped product

This is what I have done which might point you in the right direction:

1) It took me forever to get the right path to extend the template from vendor\magento\module-grouped-product\view\frontend\templates\product\view\type\grouped.phtml to my theme directory app\design\frontend\Vendorname\Themename\Magento_GroupedProduct\templates\product\view\type\grouped.html

2) I added the line <?php $productImage = $block->getImage($_item, $image); echo $productImage->toHtml(); ?>

3) the trick now is to figure out how to define what goes in $image - i have created my own definition in my theme app\design\frontend\Vendorname\Themename\etc\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="grouped_list_product_thumbnail" type="thumbnail">
            <width>75</width>
            <height>90</height>
        </image>
 </images>            
</media>
</view>

So for me, $image = "grouped_list_product_thumbnail";

This is working for me although it is showing the placeholder and not the thumbnail - it seems my test migration did not copy the thumbnail linkage properly

This might help you solve yours though :)

Magento 2.2.3 – How to Create Custom Form

Create layout XML

/app/code/Company/Module/view/frontend/layout/module_index_custom.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceContainer name="content">
        <block class="Company\Module\Block\Custom" name="customer_index_gallery" template="Vendor_Module::custom.phtml" cacheable="false"/>
    </referenceContainer>
</page>

/app/code/Company/Module/Block/Custom.php

<?php

namespace Vendor\Module\Block;

class Custom extends \Magento\Framework\View\Element\Template
{
    /**
     * Construct
     *
     * @param \Magento\Framework\View\Element\Template\Context $context
     * @param array $data
     */
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        array $data = []
    )
    {
        parent::__construct($context, $data);
       }

    /**
     * Get form action URL for POST booking request
     *
     * @return string
     */
    public function getFormAction()
    {
        return '/companymodule/controller_name/custom';
        // here controller_name is index, action is booking
    }
}

/app/code/Company/Module/view/frontend/templates/custom.phtml

<form action="<?php echo $block->getFormAction() ?>" method="post">
    <input name="firstname" type="text">
    <input name="lastname" type="text">
    <input name="email" type="text">
    <input type="submit" value="informations">
</form>

/app/code/Company/Module/Controller/Index/Custom.php

<?php

namespace Company\Module\Controller\Index;

use Magento\Framework\Controller\ResultFactory;

class Custom extends \Magento\Framework\App\Action\Action
{
    /**
     * Booking action
     *
     * @return void
     */
    public function execute()
    {
        // 1. POST request : Get booking data
        $post = (array) $this->getRequest()->getPost();

        if (!empty($post)) {
            // Retrieve your form data
            $firstname   = $post['firstname'];
            $lastname    = $post['lastname'];
            $email       = $post['email'];
          
            // Doing-something with...

            // Display the succes form validation message
            $this->messageManager->addSuccessMessage('Booking done !');

            // Redirect to your form page (or anywhere you want...)
            $resultRedirect = $this->resultFactory->create(ResultFactory::TYPE_REDIRECT);
            $resultRedirect->setUrl('/companymodule/index/custom');

            return $resultRedirect;
        }
  
    }
}

Best Answer

Related Solutions

Magento – How to show image in grouped product

Magento 2.2.3 – How to Create Custom Form

Related Topic