Custom Widget

By ukmodak | March 31st 2024 10:37:45 AM | viewed 674 times

How to make custom widget for CatImageBanner in Magento2

Magento 2 is a Model View ViewModel (MVVM) system. While being closely related to its sibling Model View Controller (MVC), an MVVM architecture provides a more robust separation between the Model and the View layers. Below is an explanation of each of the layers of a MVVM system:

  • The Model holds the business logic of the application, and depends on an associated class—the ResourceModel—for database access. Models rely on service contracts to expose their functionality to the other layers of the application.
  • The View is the structure and layout of what a user sees on a screen - the actual HTML. This is achieved in the PHTML files distributed with modules. PHTML files are associated to each ViewModel in the Layout XML files, which would be referred to as binders in the MVVM dialect. The layout files might also assign JavaScript files to be used in the final page.
  • The ViewModel interacts with the Model layer, exposing only the necessary information to the View layer. In Magento 2, this is handled by the module’s Block classes. Note that this was usually part of the Controller role of an MVC system. On MVVM, the controller is only responsible for handling the user flow, meaning that it receives requests and either tells the system to render a view or to redirect the user to another route.

A Magento 2 module can in turn define external dependencies by using Composer, PHP’s dependency manager. Magento 2 core modules depend on the Zend Framework, Symfony as well as other third-party libraries.It is also interesting to notice that, in practice, all of Magento 2’s inner workings live inside a module. for example, Magento_Checkout responsible for the checkout process, and Magento_Catalog responsible for the handling of products and categories.

Below is the structure of Magento_Cms, a Magento 2 core module responsible for handling the creation of pages and static blocks.

Each folder of a Module holds one part of the architecture, as follows:

  • Api: Service contracts, defining service interfaces and data interfaces
  • Block: The ViewModels of our MVVM architecture
  • Controller: Controllers, responsible for handling the user’s flow while interacting with the system
  • etc: Configuration XML files—The module defines itself and its parts (routes, models, blocks, observers, and cron jobs) within this folder. The etc files can also be used by non-core modules to override the functionality of core modules.
  • Helper: Helper classes that hold code used in more than one application layer. For example, in the Cms module, helper classes are responsible for preparing HTML for presentation to the browser.
  • i18n: Holds internationalization CSV files, used for translation
  • Model: For Models and ResourceModels
  • Observer: Holds Observers, or Models which are “observing” system events. Usually, when such an event is fired, the observer instantiates a Model to handle the necessary business logic for such an event.
  • Setup: Migration classes, responsible for schema and data creation
  • Test: Unit tests
  • Ui: UI elements such as grids and forms used in the admin application
  • view: Layout (XML) files and template (PHTML) files for the front-end and admin application

Before we move on to implementation, let’s take a closer look at the standard range of widgets supported in Magento 2

  • Recently Compared Products
  • Orders and Returns
  • Catalog Products List
  • Catalog Product Link
  • Catalog Category Link
  • Custom Block Widget

Creating Our First Magento 2 CatImageBanner Widget

Registering Our Module

Now we will register our module with Magento. Go ahead and create a file registration.php in the location : app/code/UKM/CatImageBanner/ with the following code where UKM is the namespace and Post is the Module name



Create a file composer.json in the location : app/code/UKM/CatImageBanner/ with the following code

    "name": "UKM/CatImageBanner",
    "description": "UKM Category List Widget with images",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0"
    "type": "magento2-module",
    "version": "1.0.0",
    "license": [
    "autoload": {
        "files": [ "registration.php" ],
        "psr-4": {
            "UKM\\CatImageBanner\\": ""

Create a file module.xml in the location : app/code/UKM/CatImageBanner/etc/ with the following code

	<?xml version="1.0"?>
	<config xmlns:xsi="" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
	    <module name="UKM_CatImageBanner" setup_version="1.0.0">

Create a file widget.xml in the location : app/code/UKM/CatImageBanner/etc/ with the following code

	<?xml version="1.0" encoding="UTF-8"?>
		<widgets xmlns:xsi=""
			<widget id="ukm_catimagebanner" class="UKM\CatImageBanner\Block\Widget\CatewithimgWidget">
				<label translate="true">UKM Category List with image Widget>
				<description>Store Default 1st level Category List Widget>
		            <parameter name="blocktitle" xsi:type="text"  visible="true" required="true" sort_order="1">
		                <label translate="true">Block Title>
		            <parameter name="tagline" xsi:type="text"  visible="true" required="true" sort_order="2">
		                <label translate="true">Tag Line>
					<parameter name="parentcat"  xsi:type="multiselect"  visible="true" sort_order="3" source_model="UKM\CatImageBanner\Model\Config\Source\Categorylist">
		                <label translate="true">Select Categories (Any three) </label>
		                <description translate="true">Category must have image uploaded</description>

Now we run the following command to upgrade database info

    projectname>php bin/magento setup:upgrade
	projectname>php bin/magento cache:flush

Now we check module status by the command

    projectname>php bin/magento module:status

If the module is shown in the module list and is disable, then run the following command

    projectname>php bin/magento module:enable UKM_CatImageBanner

Create Model to face data:

Now create a file Categorylist.php to implementation the data interface in the location: app/code/UKM/CatImageBanner/Model/Config/Source/ with the following codes

namespace UKM\CatImageBanner\Model\Config\Source;

use Magento\Framework\Option\ArrayInterface;
use Magento\Catalog\Helper\Category;

class Categorylist implements ArrayInterface
    protected $_categoryHelper;

    public function __construct(\Magento\Catalog\Helper\Category $catalogCategory)
        $this->_categoryHelper = $catalogCategory;

     * Return categories helper

    public function getStoreCategories($sorted = false, $asCollection = false, $toLoad = true)
        return $this->_categoryHelper->getStoreCategories($sorted , $asCollection, $toLoad);

     * Option getter
     * @return array
    public function toOptionArray()

        $arr = $this->toArray();
        $ret = [];

        foreach ($arr as $key => $value)

            $ret[] = [
                'value' => $key,
                'label' => $value

        return $ret;

     * Get options in "key-value" format
     * @return array
    public function toArray()

        $categories = $this->getStoreCategories(true,false,true);

        $catagoryList = array();
        foreach ($categories as $category){

            $catagoryList[$category->getEntityId()] = __($category->getName());

        return $catagoryList;



Define Block:

Create a file CatewithimgWidget.php in the location: app/code/UKM/CatImageBanner/Block/Widget/ with the following code


namespace UKM\CatImageBanner\Block\Widget;

class CatewithimgWidget extends \Magento\Framework\View\Element\Template implements \Magento\Widget\Block\BlockInterface
	protected $_template = 'widget/categorywidget.phtml';

     * Default value for products count that will be shown
     protected $_categoryHelper;
     protected $categoryFlatConfig;

     protected $topMenu;
     protected $_categoryFactory;

     protected $mainTitle;
     protected $tagLine;

     * @param \Magento\Framework\View\Element\Template\Context $context
     * @param \Magento\Catalog\Helper\Category $categoryHelper
     * @param array $data
    public function __construct(
        \Magento\Framework\View\Element\Template\Context $context,
        \Magento\Catalog\Helper\Category $categoryHelper,
        \Magento\Catalog\Model\Indexer\Category\Flat\State $categoryFlatState,
        \Magento\Catalog\Model\CategoryFactory $categoryFactory,
        \Magento\Theme\Block\Html\Topmenu $topMenu
    ) {
        $this->_categoryHelper = $categoryHelper;
        $this->categoryFlatConfig = $categoryFlatState;
        $this->topMenu = $topMenu;
        $this->_categoryFactory = $categoryFactory;
     * Return categories helper
    public function getCategoryHelper()
        return $this->_categoryHelper;

    public function getCategorymodel($id)
         $_category = $this->_categoryFactory->create();
            return $_category;
     * Retrieve current store categories
     * @param bool|string $sorted
     * @param bool $asCollection
     * @param bool $toLoad
     * @return \Magento\Framework\Data\Tree\Node\Collection|\Magento\Catalog\Model\Resource\Category\Collection|array

     * Retrieve collection of selected categories
   public function getCategoryCollection()
        $rootCat = $this->getData('parentcat');

        $category = $this->_categoryFactory->create();
        $collection = $category
        return $collection;
     * Retrieve tag line for widget
    public function getTagLine()
        $tagLine = $this->getData('tagline');
        return $tagLine;
     * Retrieve main title for widget
    public function getMainTitle()
        $mainTitle = $this->getData('blocktitle');
        return $mainTitle;


Define View:

Create a file default.xml in the location: app/code/UKM/CatImageBanner/view/frontend/layout with the following code

  <page xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <css src="UKM_CatImageBanner::css/widget.css" />


Create a file categorywidget.phtml in the location: app/code/UKM/CatImageBanner/view/frontend/templates/widget/ with the following code

    $categories = $this->getCategoryCollection();
    $categoryHelper = $this->getCategoryHelper();
		<div class="widget block block-static-block cwiw" id="catewithimg">
		    <div class="block-content">
		        <div class="content-heading">
		            <h2 class="title"><?php echo $this->getMainTitle(); ?></h2>
		            <p class="info"><?php echo $this->getTagLine(); ?></p>
		        <div class="row" style="clear:both;">
		        foreach($categories as $category):
		            $cat = $this->getCategorymodel($category->getId());
		            $image = $cat->getImageUrl();
		            <?php if($image != null): ?>
		                <div class="col-md-4">
		                    <a class="category_name" href="getUrl(); ?>">
		                       <img src<?php echo $image; ?>" class="img-responsive category_image" alt="<?php echo $cat->getName(); ?>" />
		                        <h3><?php echo $cat->getName(); ?></h3>
		            <?php endif; ?>
		        <?php endforeach; ?>
			<div style="clear:both;"></div>


Create a file widget.css in the location: app/code/UKM/CatImageBanner/view/frontend/web/css/ with the following code

		width: 100%;
		clear: both;
		float: none;
		text-align: center;
		.cwiw .row{
		margin-bottom: 20px;
		margin-right: -15px;
		margin-left: -15px;
		.cwiw .row:before,
		.cwiw .row:after{
		display: table;
		content: " ";

		.cwiw .row .col-md-4{
		width: 33.33333333%;
		float: left;

		.cwiw a:hover{
		text-decoration: none;


Run the following command or manually flush cache from admiin panel

projectname>php bin/magento setup:upgrade
projectname>php bin/magento cache:flush

Login to admin panel and assign widget where you want to view category image list


Total : 20361

Today :15

Today Visit Country :

  • United Kingdom
  • United States
  • China
  • Singapore
  • Russia
  • Czechia