How to show custom attribute value as label in magento 2 product listing page
-
23-03-2021 - |
Question
How to show custom attribute value as label in Magento 2 product listing page.
I am using helper to show custom attribute value in product listing page corner of every image as label. I get the value but first custom attribute value is coming for all that is wrong.
Please check where i am doing mistake - product listing is grid view.
Data Helper page Data.php
namespace Satish\Addaction\Helper;
use Magento\Catalog\Api\ProductRepositoryInterface;
use Magento\Catalog\Model\Product as ModelProduct;
use Magento\Store\Model\Store;
use Magento\Framework\Stdlib\DateTime\TimezoneInterface;
class Data extends \Magento\Framework\Url\Helper\Data
{
/**
* @var TimezoneInterface
*/
protected $localeDate;
public function __construct(
\Magento\Framework\App\Helper\Context $context,
\Magento\Framework\ObjectManagerInterface $objectmanager,
\Magento\Catalog\Model\ProductFactory $_productloader,
TimezoneInterface $localeDate
) {
$this->localeDate = $localeDate;
$this->_objectManager = $objectmanager;
$this->_productloader = $_productloader;
parent::__construct($context);
}
public function getRecommendedValue($pid)
{
$product = $this->_objectManager->get('Magento\Catalog\Model\Product')->load($pid);
return $product->getFree_test_label();
}
}
Below is the phtml page
<style>
.discount-percent{
position: absolute;
top: 0;
right: 0;
text-align: right;
z-index: 999;
background-color: red;
color: white;
width: 25%;
border-radius: 25%;
padding-right: 2%;
}
</style>
<?php /** @var $block \Magento\Catalog\Block\Product\Image */
$helper = $this->helper('Satish\Addaction\Helper\Data');
?>
<span class="product-image-container"
style="width:<?= /* @escapeNotVerified */ $block->getWidth() ?>px;">
<span class="product-image-wrapper"
style="padding-bottom: <?= /* @escapeNotVerified */ ($block->getRatio() * 100) ?>%;">
<img class="product-image-photo"
<?= /* @escapeNotVerified */ $block->getCustomAttributes() ?>
src="<?= /* @escapeNotVerified */ $block->getImageUrl() ?>"
width="<?= /* @escapeNotVerified */ $block->getResizedImageWidth() ?>"
height="<?= /* @escapeNotVerified */ $block->getResizedImageHeight() ?>"
alt="<?= /* @escapeNotVerified */ $block->stripTags($block->getLabel(), null, true) ?>"/></span>
</span>
<div class="discount-percent">
<?= $helper->getRecommendedValue($block->getProductId()) ?>
</div>
Solution
Make this configuration in your custom attribute :
Admin -> Stores -> Attributes -> Product > Select your attribute -> Storefront Properties -> Set "Used in Product Listing" to Yes
Reindex all
In your
product/list.phtml
:<?php foreach ($_productCollection as $_product): ?> ... <div class="discount-percent"> <?= $_product->getFreeTestLabel(); ?> </div> <?php endforeach; ?>
Or :
Label :
$_product->getResource()->getAttribute('free_test_label')->getStoreLabel();
Value :
$_product->getResource()->getAttribute('free_test_label')->getFrontend()->getValue($_product);
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange