Magento – How to display attribute swatch image in listing page in Magento 2

attributesmagento2productswatches

I am using Magento 2.2.2

I have created one attribute "Manufacturer". Input type of this attribute is visual swatch. I have added values with swatch images in this attribute.

I have selected different values of this attribute in different products. Now I am trying to display this images in listing page. See below code:

 <?php $_productCollection = $block->getLoadedProductCollection(); ?>
     <?php foreach ($_productCollection as $_product): ?>
          <?php $m = $_product->getResource()->getAttribute('manufacturer')->getFrontend()->getValue($_product);
                        $swatchCollection = $objectManager->create('Magento\Swatches\Model\ResourceModel\Swatch\Collection');
                        $swatchHelper= $objectManager->get("Magento\Swatches\Helper\Media"); 
                        $item = $swatchCollection->getFirstItem();
                        $SwatchImage = $swatchHelper->getSwatchAttributeImage('swatch_image', $_product->getValue());
                        $thumbImage =  $swatchHelper->getSwatchAttributeImage('swatch_thumb', $_product->getValue());
                  ?>
                    <?php /*?><div class="brand"> <img src="<?php echo $this->getViewFileUrl('images/product_brand_logo.jpg'); ?>" alt="" /> </div><?php */?>
                    <div class="brand"> <img src="<?php echo $thumbImage; ?>" alt="" /></div>
     <?php endforeach; ?>

I have added this code in list.phtml file but I am not getting swatch image for corresponding product in listing page. So how can I solve this issue?

Best Answer

Finally I found the answer to your question, and I'm going to share it because maybe it helps somebody in the future:

1.- Enter to admin panel

2.- Stores (left menu)

3.- Product (under attribute section)

4.- Select the attribute you want to edit, for example Manufacturer

5.- Storefront Properties (in the Attribute Information menu on the left)

6.- Look for Used in product listing option and set it to YES

And then Incase anyone is experiencing the same problem, the problem was the catalog.xml file - items were missing from this.

Related Solutions

Magento – Magento 2 Product Attribute Swatch Image

To retrieve that value, you need the next in your block or viewModel (https://www.yireo.com/blog/1856-viewmodels-in-magento-2)

...

use Magento\Catalog\Helper\Data as CatalogData;
use Magento\Swatches\Helper\Data;
use Magento\Swatches\Helper\Media;

...

/**
 * @var Data
 */
private $swatchesHelper;

/**
 * @var Media
 */
private $swatchesHelperMedia;

/**
 * @var CatalogData
 */
private $catalogHelperData;

...

/**
 * @return string|null
 */
public function getSwatchImage()
{
    $product = $this->catalogHelperData->getProduct(); //This depends of as you want do it,but you can do it on this way
    if ($product->getSwatchAttribute()) {
        $image = $this->swatchesHelper->getSwatchesByOptionsId([$product->getSwatchAttribute()]);
        if (current($image)['value']) {
            return $this->swatchesHelperMedia->getSwatchAttributeImage('swatch_thumb', current($image)['value']);
        }
    }

    return null;
}

swatch_attribute is the attribute code.

Magento – Magento 2 : How to get the product attributes based on attribute set id on listing page

I suggest you should use Magento\Eav\Api\AttributeManagementInterface to get all attributes by attribute set id

To do this, we need to override Magento\Catalog\Block\Product\ListProduct class and inject this class into the constructor. See more detail here:

app/code/YourVendor/YourModule/etc/frontend/di.xml

    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Magento\Catalog\Block\Product\ListProduct" type="YourVendor\YourModule\Block\Catalog\Product\ListProduct" />
</config>

app/code/YourVendor/YourModule/Block/Catalog/Product/ListProduct.php

use Magento\Catalog\Block\Product\Context;
use Magento\Catalog\Api\CategoryRepositoryInterface;
use Magento\Catalog\Model\Layer\Resolver;
use Magento\Framework\Data\Helper\PostHelper;
use Magento\Framework\Url\Helper\Data;
use Magento\Eav\Api\AttributeManagementInterface;

class ListProduct extends \Magento\Catalog\Block\Product\ListProduct
{
    private $attributeManagement;

    /**
     * @param Context $context
     * @param PostHelper $postDataHelper
     * @param Resolver $layerResolver
     * @param CategoryRepositoryInterface $categoryRepository
     * @param Data $urlHelper
     * @param AttributeManagementInterface $attributeManagement
     * @param array $data
     */
    public function __construct(
        Context $context,
        PostHelper $postDataHelper,
        Resolver $layerResolver,
        CategoryRepositoryInterface $categoryRepository,
        Data $urlHelper,
        AttributeManagementInterface $attributeManagement,
        array $data = []
    ) {
        $this->attributeManagement = $attributeManagement;
        parent::__construct(
            $context,
            $postDataHelper,
            $layerResolver,
            $categoryRepository,
            $urlHelper,
            $data
        );
    }

    /**
     * Get Attributes by Attribute Set ID
     * @param $attributeSetId
     * @return \Magento\Eav\Api\Data\AttributeInterface[]
     * @throws \Magento\Framework\Exception\NoSuchEntityException
     */
    public function getAttributesBySetId($attributeSetId)
    {
        $attributes = $this->attributeManagement->getAttributes(\Magento\Catalog\Model\Product::ENTITY,
            $attributeSetId);
        return $attributes;
    }
}

app/design/frontend/YourCustomTheme/templates/product/list.phtml

........
<?php $attributes = $block->getAttributesBySetId($_product->getAttributeSetId()); ?>
                <?php
                foreach ($attributes as $attribute) {
                    echo ($attribute->getFrontendLabel()).':::';
                }
                ?>
..........

Hopefully this will solve your issue

Regards

Best Answer

Related Solutions

Magento – Magento 2 Product Attribute Swatch Image

Magento – Magento 2 : How to get the product attributes based on attribute set id on listing page

Related Topic