How to Showcase Bestseller Products in Magento 2?

The ‘Bestseller Products’ section helps in finding products that are in the list of top-selling or frequently bought products. In other words, when a product is top-rated and has been sold in vast numbers, it is termed as a ‘Bestseller.’ In this blog, we will show you how to display the bestseller products in Magento 2.

Let’s get started by creating the bestseller product module, as shown in the file structure below.

Step 1:

Create a block to get the bestseller product collection.

app/code/DCKAP/BestSellerProducts/Block/BestSellerProduct.php

<?php
namespace DCKAP\BestsellerProducts\Block;
class BestSellerProduct extends \Magento\Framework\View\Element\Template{
protected $_resourceFactory;
protected $_imageHelper;
protected $_cartHelper;
protected $product;
public function __construct(
\Magento\Catalog\Block\Product\Context $context,
\Magento\Reports\Model\ResourceModel\Report\Collection\Factory $resourceFactory,
\Magento\Catalog\Model\Product $product,
array $data = []
) {
$this->_resourceFactory = $resourceFactory;
$this->product = $product;
$this->_imageHelper = $context->getImageHelper();
$this->_cartHelper = $context->getCartHelper();
parent::__construct($context, $data);
}
public function imageHelperObj(){
return $this->_imageHelper;
}
public function getProduct($id){
return $this->product->load($id);
}
/**
To get featured product collection
*/
public function getBestsellerProduct(){
$resourceCollection = $this->_resourceFactory->create('Magento\Sales\Model\ResourceModel\Report\Bestsellers\Collection');
$resourceCollection->setPageSize(10);
return $resourceCollection;
}
public function getAddToCartUrl($product, $additional = [])
{
return $this->_cartHelper->getAddUrl($product, $additional);
}
public function getProductPriceHtml(
\Magento\Catalog\Model\Product $product,
$priceType = null,
$renderZone = \Magento\Framework\Pricing\Render::ZONE_ITEM_LIST,
array $arguments = []
) {
if (!isset($arguments['zone'])) {
$arguments['zone'] = $renderZone;
}
$arguments['zone'] = isset($arguments['zone'])
? $arguments['zone']
: $renderZone;
$arguments['price_id'] = isset($arguments['price_id'])
? $arguments['price_id']
: 'old-price-' . $product->getId() . '-' . $priceType;
$arguments['include_container'] = isset($arguments['include_container'])
? $arguments['include_container']
: true;
$arguments['display_minimal_price'] = isset($arguments['display_minimal_price'])
? $arguments['display_minimal_price']
: true;
$priceRender = $this->getLayout()->getBlock('product.price.render.default');
$price = '';
if ($priceRender) {
$price = $priceRender->render(
\Magento\Catalog\Pricing\Price\FinalPrice::PRICE_CODE,
$product,
$arguments
);
}
return $price;
}
}

<?php

namespace DCKAP\BestsellerProducts\Block;

class BestSellerProduct extends \Magento\Framework\View\Element\Template{

protected $_resourceFactory;

protected $_imageHelper;

protected $_cartHelper;

protected $product;

public function __construct(

\Magento\Catalog\Block\Product\Context $context,

\Magento\Reports\Model\ResourceModel\Report\Collection\Factory $resourceFactory,

\Magento\Catalog\Model\Product $product,

array $data = []

) {

$this->_resourceFactory = $resourceFactory;

$this->product = $product;

$this->_imageHelper = $context->getImageHelper();

$this->_cartHelper = $context->getCartHelper();

parent::__construct($context, $data);

}

public function imageHelperObj(){

return $this->_imageHelper;

}

public function getProduct($id){

return $this->product->load($id);

}

/**

To get featured product collection

public function getBestsellerProduct(){

$resourceCollection = $this->_resourceFactory->create('Magento\Sales\Model\ResourceModel\Report\Bestsellers\Collection');

$resourceCollection->setPageSize(10);

return $resourceCollection;

}

public function getAddToCartUrl($product, $additional = [])

{

return $this->_cartHelper->getAddUrl($product, $additional);

}

public function getProductPriceHtml(

\Magento\Catalog\Model\Product $product,

$priceType = null,

$renderZone = \Magento\Framework\Pricing\Render::ZONE_ITEM_LIST,

array $arguments = []

) {

if (!isset($arguments['zone'])) {

$arguments['zone'] = $renderZone;

}

$arguments['zone'] = isset($arguments['zone'])

? $arguments['zone']

: $renderZone;

$arguments['price_id'] = isset($arguments['price_id'])

? $arguments['price_id']

: 'old-price-' . $product->getId() . '-' . $priceType;

$arguments['include_container'] = isset($arguments['include_container'])

? $arguments['include_container']

: true;

$arguments['display_minimal_price'] = isset($arguments['display_minimal_price'])

? $arguments['display_minimal_price']

: true;

$priceRender = $this->getLayout()->getBlock('product.price.render.default');

$price = '';

if ($priceRender) {

$price = $priceRender->render(

\Magento\Catalog\Pricing\Price\FinalPrice::PRICE_CODE,

$product,

$arguments

);

}

return $price;

}

Step 2:

Create a view file.

app/code/DCKAP/BestSellerProducts/view/frontend/templates/bestsellerproducts.phtml

<?php
$product_collection = $this->getBestsellerProduct();
?>
<?php if ($product_collection):?>
<div class="block widget block-bestseller-products grid">
<div class="block-title">
<b class="heading"><?php  echo "Bestseller Products"; ?></b>
</div>
<div class="block-content">
<div class="products-grid grid">
<ol class="product-items">
<?php $iterator = 1; ?>
<?php foreach ($product_collection as $item):
$_product =$block->getProduct($item->getProductId());
?>
<?php echo($iterator++ == 1) ? '<li class="product-item">' : '</li><li class="product-item">' ?>
<div class="product-item-info">
<?php
$image_url = $block->imageHelperObj()->init($_product, 'product_page_image_small')
->setImageFile($_product->getFile())
->resize($this->getProductimagewidth(),$this->getProductimageheight())
->getUrl();
?>
<a href="<?php  echo $_product->getProductUrl() ?>" class="product-item-photo">
<img src="<?php echo  $image_url;?>" alt="<?php echo $this->escapeHtml($_product->getName()) ?>" />
</a>
<div class="product-item-details">
<strong class="product-item-name">
<a title="<?php echo $block->escapeHtml($_product->getName()) ?>"
href="<?php echo $_product->getProductUrl() ?>"
class="product-item-link">
<?php echo $block->escapeHtml($_product->getName()) ?>
</a>
</strong>
<?php
echo $this->getProductPriceHtml($_product);
?>
<div class="product-item-actions">
<div class="actions-primary">
<?php if ($_product->isSaleable()): ?>
<?php if ($_product->getTypeInstance()->hasRequiredOptions($_product)): ?>
<button class="action tocart primary"
data-mage-init='{"redirectUrl":{"url":"<?php  echo $block->getAddToCartUrl($_product) ?>"}}'
type="button" title="<?php echo __('Add to Cart') ?>">
<span><?php echo __('Add to Cart') ?></span>
</button>
<?php else: ?>
<?php
$postDataHelper = $this->helper('Magento\Framework\Data\Helper\PostHelper');
$postData = $postDataHelper->getPostData($block->getAddToCartUrl($_product), ['product' => $_product->getId()]);
?>
<button class="action tocart primary"
data-post='<?php echo $postData; ?>'
type="button" title="<?php echo __('Add to Cart') ?>">
<span><?php echo __('Add to Cart') ?></span>
</button>
<?php endif; ?>
<?php else: ?>
<?php if ($_product->getIsSalable()): ?>
<div class="stock available"><span><?php echo __('In stock') ?></span></div>
<?php else: ?>
<div class="stock unavailable"><span><?php echo __('Out of stock') ?></span></div>
<?php endif; ?>
<?php endif; ?>
</div>
</div>
</div>
</div>
<?php echo($iterator == count($product_collection)+1) ? '</li>' : '' ?>
<?php endforeach ?>
</ol>
</div>
<?php endif;?>

<?php

$product_collection = $this->getBestsellerProduct();

<?php if ($product_collection):?>

</div>

<?php $iterator = 1; ?>

<?php foreach ($product_collection as $item):

$_product =$block->getProduct($item->getProductId());

<?php echo($iterator++ == 1) ? '<li class="product-item">' : '</li><li class="product-item">' ?>

<?php

$image_url = $block->imageHelperObj()->init($_product, 'product_page_image_small')

->setImageFile($_product->getFile())

->resize($this->getProductimagewidth(),$this->getProductimageheight())

->getUrl();

<a href="<?php echo $_product->getProductUrl() ?>" class="product-item-photo">

<img src="<?php echo $image_url;?>" alt="<?php echo $this->escapeHtml($_product->getName()) ?>" />

</a>

<a title="<?php echo $block->escapeHtml($_product->getName()) ?>"

href="<?php echo $_product->getProductUrl() ?>"

class="product-item-link">

<?php echo $block->escapeHtml($_product->getName()) ?>

</a>

</strong>

<?php

echo $this->getProductPriceHtml($_product);

<?php if ($_product->isSaleable()): ?>

<?php if ($_product->getTypeInstance()->hasRequiredOptions($_product)): ?>

<button class="action tocart primary"

data-mage-init='{"redirectUrl":{"url":"<?php echo $block->getAddToCartUrl($_product) ?>"}}'

type="button" title="<?php echo __('Add to Cart') ?>">

</button>

<?php else: ?>

<?php

$postDataHelper = $this->helper('Magento\Framework\Data\Helper\PostHelper');

$postData = $postDataHelper->getPostData($block->getAddToCartUrl($_product), ['product' => $_product->getId()]);

<button class="action tocart primary"

data-post='<?php echo $postData; ?>'

type="button" title="<?php echo __('Add to Cart') ?>">

</button>

<?php endif; ?>

<?php else: ?>

<?php if ($_product->getIsSalable()): ?>

<?php else: ?>

<?php endif; ?>

</div>

<?php echo($iterator == count($product_collection)+1) ? '</li>' : '' ?>

<?php endforeach ?>

</ol>

</div>

<?php endif;?>

Step 3:

Create routes.xml

app/code/DCKAP/BestSellerProducts/etc/frontend/routes.xml

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="standard">
<route frontName="bestseller" id="bestseller">
<module name="DCKAP_BestSellerProducts"/>
</route>
</router>
</config>

<?xml version="1.0" ?>

</route>

</router>

</config>

Step 4:

Create a layout to render the block and view file.

app/code/DCKAP/BestSellerProducts/view/frontend/layout/bestseller_index_index.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">
<body>
<referenceContainer name="main">
<block class="DCKAP\BestSellerProducts\Block\BestSellerProduct" name="best.seller.products" template="DCKAP_BestSellerProducts::bestsellerproducts.phtml"/>
</referenceContainer>
</body>
</page>

<?xml version="1.0"?>

<body>

</referenceContainer>

</body>

</page>

Step 5:

Create a controller to check the best seller grid.

app/code/DCKAP/BestSellerProducts/Controller/Index/Index.php

<?php
namespace DCKAP\BestSellerProducts\Controller\Index;
use Magento\Framework\App\Action\Context;
class Index extends \Magento\Framework\App\Action\Action {
private $pageFactory;
public  function __construct(
\Magento\Framework\View\Result\PageFactory $pageFactory,
Context $context)
{
parent::__construct($context);
$this->pageFactory=$pageFactory;
}
public function execute()
{
return $this->pageFactory->create();
}
}

<?php

namespace DCKAP\BestSellerProducts\Controller\Index;

use Magento\Framework\App\Action\Context;

class Index extends \Magento\Framework\App\Action\Action {

private $pageFactory;

public function __construct(

\Magento\Framework\View\Result\PageFactory $pageFactory,

Context $context)

{

parent::__construct($context);

$this->pageFactory=$pageFactory;

}

public function execute()

{

return $this->pageFactory->create();

}

Step 6:

Install the module.

Now, go to the browser: Type your Magento Store URL/Bestseller

Note: We can also call this block on the CMS page with our custom CSS.

{{block class="DCKAP\BestSellerProducts\Block\BestSellerProduct" 
template="DCKAP_BestSellerProducts::bestsellerproducts.phtml"}}

1 2	{{block class="DCKAP\BestSellerProducts\Block\BestSellerProduct" template="DCKAP_BestSellerProducts::bestsellerproducts.phtml"}}

Bestseller products help in quickly identifying the top-rated products in an eCommerce store. You can now easily display the bestseller products using the Magento 2 module. We hope this blog was helpful to you. If you have any queries, please feel free to leave a comment below.