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

Question

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?

Answer 1

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.

Answer 2

The code you've provided seems to be attempting to retrieve and display swatch images for products on a listing page in Magento 2. However, there are a few issues with this approach. Let me provide you with a more reliable method to get attribute swatches on a listing page.

Here's an improved version of the code:

<?php
/** @var \Magento\Catalog\Block\Product\ListProduct $block */
/** @var \Magento\Catalog\Model\ResourceModel\Product\Collection $_productCollection */
$_productCollection = $block->getLoadedProductCollection();

/** @var \Magento\Swatches\Helper\Data $swatchHelper */
$swatchHelper = $this->helper(\Magento\Swatches\Helper\Data::class);

/** @var \Magento\Swatches\Helper\Media $swatchMediaHelper */
$swatchMediaHelper = $this->helper(\Magento\Swatches\Helper\Media::class);

/** @var \Magento\Catalog\Helper\Output $outputHelper */
$outputHelper = $this->helper(\Magento\Catalog\Helper\Output::class);
?>

<?php foreach ($_productCollection as $_product): ?>
    <?php
    $swatchAttribute = $swatchHelper->getSwatchAttribute($_product, 'color'); // Replace 'color' with your swatch attribute code
    if ($swatchAttribute && $swatchAttribute->getId()) {
        $swatchOptions = $swatchHelper->getSwatchesByOptionsId([$_product->getData($swatchAttribute->getAttributeCode())]);
        foreach ($swatchOptions as $optionId => $swatchOption) {
            if (isset($swatchOption['type']) && $swatchOption['type'] == \Magento\Swatches\Model\Swatch::SWATCH_TYPE_VISUAL_IMAGE) {
                $swatchThumbPath = $swatchMediaHelper->getSwatchAttributeImage('swatch_thumb', $swatchOption['value']);
                $swatchImagePath = $swatchMediaHelper->getSwatchAttributeImage('swatch_image', $swatchOption['value']);
                ?>
                <div class="swatch-option-container">
                    <img src="<?php echo $block->escapeUrl($swatchThumbPath); ?>" 
                         alt="<?php echo $block->escapeHtmlAttr($outputHelper->productAttribute($_product, $_product->getName(), 'name')); ?>" 
                         class="swatch-option-thumb" />
                </div>
                <?php
            }
        }
    }
    ?>
<?php endforeach; ?>