Merry Christmas, 25% OFF. Coupon: XMAS Explore

Magento 2 Create Widget

Widget is a greater tool to insert or edit content into a CMS Page Block or Page, so I am so happy to bring you Create Widget in Magento 2 topic. Reading the post will help you understand: “What are the widgets?” and “How to use them on Magento 2 store”. With the simple instruction, it is easy to custom new widgets in Magento 2.

What is the widget?

Firstly, we all will access the the of Widget in Magento 2.

Widgets are the powerful functionalities in Magento 2 configuration. As a store admin, you can take the advantage of the widget to improve the storefront under the lively interface. The widgets allow showing the static information or dynamic content marketing. I want to illustrate some of the implementations of Magento widgets such as:

  • Dynamic product data
  • Dynamic lists of the recently viewed products
  • Promotional banners
  • Interactive navigation elements and action blocks
  • Dynamic flash elements that are inserted in content pages

The customization of the widgets in Magento 2 is similar to an optimized front-end extension with the simple module. Is it easy to create Magento 2 widget? Absolutely yes for that, because that is same as when you create a helloworld excepting from some additional files. Hence, although you have any experience in technology, it is easy to improve your storefront by the dynamic block of content.

How to create widget in Magento 2?

Overview of creating a widget in Magento 2

  • Step 1: Declare widget
  • Step 2: Create a widget template file
  • Step 3: Create widget Block class
  • Step 4: Flush cache and posts

Step 1: Declare widget

Create a file etc/widget.xml with the following content

<?xml version="1.0" ?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:helloworld:Magento_Widget:etc/widget.xsd">
	<widget class="Mageplaza\HelloWorld\Block\Widget\Posts" id="mageplaza_helloworld_posts">
		<label>Blog Posts</label>
		<description>Posts</description>
		<parameters>
			<parameter name="posts" sort_order="10" visible="true" xsi:type="text">
				<label>Custom Posts Label</label>
			</parameter>
		</parameters>
	</widget>
</widgets>

Step 2: Create a widget template file

File: view/frontend/templates/widget/posts.phtml

<?php if($block->getData('posts')): ?>
	<h2 class='posts'><?php echo $block->getData('posts'); ?></h2>
	<p>This is sample widget. Perform your code here.</p>
<?php endif; ?>

Step 3: Create widget Block class

Create block file: Block/Widget/Posts.php

<?php 
namespace Mageplaza\HelloWorld\Block\Widget;

use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface; 
 
class Posts extends Template implements BlockInterface {

	protected $_template = "widget/posts.phtml";

}

Step 4: Flush cache and posts

Go to admin panel > Content > Pages > Home page > Edit

In Content tab, click on Insert Widget icon

insert widget

You will see the Blog posts in widget list

widgets





Next tutorial:



Enjoyed the tutorial? Spread it to your friends!

magento-2-tutorial
create
widget

Comments for Magento 2 Create Widget

Please leave comments if you have any questions, feedbacks.

You also may like these Magento 2 Extensions

One Step Checkout

$199
10 reviews

Layered Navigation

$149
12 reviews

Store Locator

$199
3 reviews

Shop By Brand

$99
3 reviews

Zoho CRM

$249
3 reviews

FAQ

$149
10 reviews

Better Blog

FREE
8 reviews

Affiliate

$149
3 reviews

People also searched for:

  • Magento 2 Create Widget