Widget is an important element of a Graphical User Interface (GUI) that provides a specific way for an end user to interact with any software application or operating system. It allows admins to add dynamic or static content to CMS pages and blocks in Magento 2 site. You can take a benefit of the widget Magento 2 to improve your storefront under the live interface as an eCommerce store owner. Widgets are similar to static blocks and they allow inserting all types of content into static pages or a static block. Below listed are few widgets that are available in Magento 2 by default:
Learn how to create a widget in Magento 2 by following the steps mentioned here. Please follow the below 4 simple steps for creating Magento 2 widget:
Create a file filename/widget.xml with the following content or you can use file name such as VendorName/Module/etc/widget.xml.
<?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="Mageants\CustomWidget\Block\Widget\Posts" id="mageants_customwidget_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>
You can the below use configuration options.
After setting parameters, you also need to add a dependency to Magento_Widget in the module.xml file, as shown below:
etc/module.xml
<sequence>
<module name="Magento_Widget" />
</sequence>
In this step, you need to create a file with the path view/frontend/templates/widget/posts.phtml and add below code to it.
<?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; ?>
Create block file: Block/Widget/Posts.php
<?php
namespace Mageants\CustomWidget\Block\Widget;
use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;
class Posts extends Template implements BlockInterface {
protected $_template = "widget/posts.phtml";
}
In this step, you should flush the Magento cache and run a post. To run a post, follow the below process.
You will get the Blog Posts in widget list as shown below:
Following widgets are available in Magento 2:
Let’s talk about Magento 2 Calendar Widget.
Magento 2 calendar widget is a customized jQuery Datepicker widget that helps to choose a data using a pop-up or an in-line calendar. You can add it in any custom form text filed using simple code.
The jQuery Datepicker widget source is lib/web/mage/calendar.js.
You need to initialize a widget in a JS component or .phtml template.
In Magento 2, calendar widget’s global configuration is set to default options, automatically applied when each calendar instance is initialized and it includes the following features:
Following example shows how to set global widget configuration in Magento 2:
require([
'jquery',
'mage/calendar'
], function ( $ ) {
$.extend(true, $, {
calendarConfig: { ... }
});
});
If you want to use custom parameters, refer the below code:
<div class="field">
<label>Date : </label>
<input type="text" class="input-text" id="example-date" style="width: auto" name="example-date" />
</div>
<script>
require([
'jquery',
'mage/translate',
'mage/calendar'
], function ($, $t) {
$('#example-date').calendar({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
currentText: $t('Go Today'),
closeText: $t('Close'),
showWeek: true
});
})
</script>
So, execution of above code will give you the below output:
The result will be a calendar and an icon (Click Here) that opens the calendar.
Initial output:
Output for the opened state:
And that’s all about it. Hope this will help you to know how to create a widget in Magento 2. You can start empowering your website with added functionality. Please share your comment in case if you have any doubts or need any help on this and bookmark it for your future reference.
Sign In
Create New Account