Hello Magento Folks?,
I hope all are awesome. Welcome to the Magento How-To Magento 2 blog. Today I am here with another interesting solution of the Magento 2: Show Lowest and Highest Price on Category Page For Configurable Product. Don’t forget to visit our last published blog about How to Custom Maintenance mode Page in Magento 2.
Let’s get started?
Introduction:
When we discuss Magento there are many advantages but when we focus on disadvantages then there is the incapability of displaying a price range for configurable products. Many times customers might be distracted with this and eliminate it to prefer shopping. So, to overcome this problem I will illustrate to you in the solution below.
Steps to Show Lowest and Highest Price on Category Page For Configurable Product:
Step 1: First, we need to create a “Registration.php” file inside our extension at the following path..
app\code\Vendor\Extension
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Vendor_Extension', __DIR__ );
Step 2: After that, we need to create a “module.xml” file inside the extension, etc folder.
app\code\Vendor\Extension\etc
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Vendor_Extension" setup_version="1.0.0" schema_version="1.0.0"/> </config>
Step 3: After that, we need to create “di.xml” file inside below path folder to add file in module.
app\code\Vendor\Extension\etc\frontend
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <type name="Magento\Catalog\Block\Product\ListProduct"> <plugin name="price_range" type="Vendor\Extension\Plugin\Block\Product\ListProduct" sortOrder="1"/> </type> </config>
Step 4: After that, we need to create a “ListProduct.php” file inside the path folder to add the file in the module.
app\code\Vendor\Extension\Plugin\Block\Product
<?php
namespace Vendor\Extension\Plugin\Block\Product;
use Magento\ConfigurableProduct\Model\Product\Type\Configurable;
class ListProduct
{
protected $listProductBlock;
protected $configurableProduct;
protected $pricingHelper;
protected $logger;
public function __construct(
Configurable $configurableProduct,
\Magento\Framework\Pricing\Helper\Data $pricingHelper,
\Psr\Log\LoggerInterface $logger
) {
$this->configurableProduct = $configurableProduct;
$this->pricingHelper = $pricingHelper;
$this->logger = $logger;
}
public function aroundGetProductPrice(
\Magento\Catalog\Block\Product\ListProduct $subject,
\Closure $proceed,
\Magento\Catalog\Model\Product $product) {
if (Configurable::TYPE_CODE !== $product->getTypeId()) {
return $proceed($product);
}
$this->listProductBlock = $subject;
$priceText = $this->getPriceRange($product);
return $priceText;
}
public function getPriceRange($product)
{
$childProductPrice = [];
$childProducts = $this->configurableProduct->getUsedProducts($product);
foreach($childProducts as $child) {
$price = number_format($child->getPrice(), 2, '.', '');
$finalPrice = number_format($child->getFinalPrice(), 2, '.', '');
if($price == $finalPrice) {
$childProductPrice[] = $price;
} else if($finalPrice < $price) {
$childProductPrice[] = $finalPrice;
}
}
$max = $this->pricingHelper->currencyByStore(max($childProductPrice));
$min = $this->pricingHelper->currencyByStore(min($childProductPrice));
if($min==$max){
return $this->getPriceRender($product, "$min", '');
} else {
return $this->getPriceRender($product, "$min-$max", '');
}
}
protected function getPriceRender($product, $price, $text='')
{
return $this->listProductBlock->getLayout()->createBlock('Magento\Framework\View\Element\Template')
->setTemplate('Vendor_Extension::product/price/range/price.phtml')
->setData('price_id', 'product-price-'.$product->getId())
->setData('display_label', $text)
->setData('product_id', $product->getId())
->setData('display_value', $price)->toHtml();
}
}
Step 5: Lastly, Create the “price.phtml” file inside the path folder in the module.
app\code\Vendor\Extension\view\frontend\templates\Product\Price\range
<div class="price-box range second price-final_price" data-role="priceBox" data-product-id="<?php /* @escapeNotVerified */ echo $block->getProductId() ?>"> <span class="special-price"> <span class="price-container price-final_price"> <?php if ($block->getDisplayLabel()): ?> <span class="price-label"><?php /* @escapeNotVerified */ echo $block->getDisplayLabel(); ?></span> <?php endif; ?> <span <?php if ($block->getPriceId()): ?> id="<?php /* @escapeNotVerified */ echo $block->getPriceId() ?>"<?php endif;?> data-price-amount="" data-price-type="finalPrice1" class="price-wrapper"> <span class="price"><?php /* @escapeNotVerified */ echo $block->getDisplayValue();?></span> </span> </span> </span> </div>
That’s It.
Over to You
So, that was all for the day! With the help of these codes, you can successfully achieve the task of showing the lowest and highest price on the category page for the configurable products in Magento 2. You are free to play around and customize these codes according to your needs for fetching data. If you face any issues while implementing, then contact our Support Team. We will be happy to help you. If the article was helpful then do share with your Magento friends.
Happy Coding?
