Improve conversion rate in your eCommerce store by choosing Magento services from us and get your brand new Magento 2 store for your business. Let’s Talk
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<?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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<?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;?> |
Step 3:
Create routes.xml
app/code/DCKAP/BestSellerProducts/etc/frontend/routes.xml
|
1 2 3 4 5 6 7 8 |
<?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> |
Step 4:
Create a layout to render the block and view file.
app/code/DCKAP/BestSellerProducts/view/frontend/layout/bestseller_index_index.xml
|
1 2 3 4 5 6 7 8 |
<?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> |
Step 5:
Create a controller to check the best seller grid.
app/code/DCKAP/BestSellerProducts/Controller/Index/Index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?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.
|
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.
