Let’s just start creating this custom widget.

Open app folder and if you don’t have code folder in it please create it. After that open code folder and create a folder Vky. Here “Vky” is our namespace.
Then here is folder structure we will need. If you want to create all folders first go on create as shown in below image. Remember app/code/Vky then as shown in image.

Now follow the steps.

Step 1 : Create module.xml file in the app/code/Vky/WidgetBlock/etc/ folder with the following code:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Vky_WidgetBlock" setup_version="1.0.0" />
</config>

Step 2 : Create registration.php file in the app/code/Vky/WidgetBlock/ folder with the following code:

<?php
use \Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Vky_WidgetBlock', __DIR__);

Step 3 : Create widget.xml file in the app/code/Vky/WidgetBlock/etc/ folder with the following code:

<?xml version="1.0" encoding="UTF-8"?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
	<widget id="cc_custom_widget" class="Vky\WidgetBlock\Block\Widget\CustomWidget" placeholder_image="Vky_WidgetBlock::images/widget_block.png">
		<label translate="true">Vky custom widget</label>
		<description>Vky - Demo Block widget</description>
		<parameters>
			<parameter name="cc_title" xsi:type="text" visible="true" required="true" sort_order="0" >
				<label translate="true">Title</label>
			</parameter>
			<parameter name="cc_content" xsi:type="text" visible="true" sort_order="10">
				<label translate="true">Widget content</label>
			</parameter>
			<parameter name="cc_enable_url" xsi:type="select" visible="true" source_model="Magento\Config\Model\Config\Source\Yesno" sort_order="20">
				<label translate="true">Add URL like</label>
				<description>Enable or disable link</description>
			</parameter>
			<parameter name="cc_url" xsi:type="text" visible="true" sort_order="30">
				<label translate="true">URL</label>
				<depends>
					<parameter name="cc_enable_url" value="1" />
				</depends>
			</parameter>
			<parameter name="cc_url_label" xsi:type="text" visible="true" sort_order="40">
				<label translate="true">URL Label</label>
				<depends>
					<parameter name="cc_enable_url" value="1" />
				</depends>
			</parameter>
			<parameter name="cc_width" xsi:type="select" source_model="Vky\WidgetBlock\Model\Config\Source\WidgetWidth" visible="true" sort_order="50" >
				<label translate="true">Widget width</label>
			</parameter>
			<parameter name="cc_aligment" xsi:type="select" visible="true" sort_order="70" >
				<label translate="true">Widget aligment</label>
				<options>
					<option name="left" value="left" selected="true">
						<label translate="true">Left</label>
					</option>
					<option name="right" value="right">
						<label translate="true">Right</label>
					</option>
				</options>
			</parameter>
		</parameters>
	</widget>
</widgets>

Step 4 : Create CustomWidget.php file in the app/code/Vky/WidgetBlock/Block/Widget folder with the following code:

<?php 
namespace Vky\WidgetBlock\Block\Widget; 
class CustomWidget extends \Magento\Framework\View\Element\Template implements \Magento\Widget\Block\BlockInterface 
{ 
	protected function _construct() 
	{ 
		parent::_construct(); $this->setTemplate('widget/custom_widget.phtml');
	}
}

Step 5 : Here you can see custom_widget.phtml file so we need to create custom_widget.phtml file in the app/code/Vky/WidgetBlock/view/frontend/templates/widget/ folder with the following code:

<style>
	.cc-custom-widget {
	background: #ff0;
	padding: 30px;
	border-radius: 5px;
	width: <?php echo $this->getData('cc_width') ?>;
	align: <?php echo $this->getData('cc_aligment') ?>;
	}
</style>
<div class="cc-custom-widget">
	<h1><?php echo $this->getData('cc_title'); ?></h1>
	<?php if ($cc_content = $this->getData('cc_content')): ?>
	<?php echo $cc_content; ?>
	<?php endif; ?>
	<?php if ($this->getData('cc_enable_url')): ?>
	<?php $cc_url = $this->getData('cc_url') ?>
	<?php if (filter_var($cc_url, FILTER_VALIDATE_URL)): ?>
	<a href="<?php echo $this->getData('cc_url'); ?>"><?php echo $this->getData('cc_url_label'); ?></a>
	<?php endif; ?>
	<?php endif; ?>
</div>

Step 6 : Create WidgetWidth.php file in the app/code/Vky/WidgetBlock/Model/Config/Source/ folder with the following code:

<?php 
namespace Vky\WidgetBlock\Model\Config\Source; 
class WidgetWidth implements \Magento\Framework\Option\ArrayInterface 
{ 
    public function toOptionArray() 
    { 
        return [ ['value' => '100%', 'label' => __('100%')],
        ['value' => '75%', 'label' => __('75%')],
        ['value' => '50%', 'label' => __('50%')],
        ['value' => '25%', 'label' => __('25%')]];
    }
}

Now open cmd go to your projects root directory and run php bin/magento setup:upgrade command.
So we have successfully created our custome widget.

Of course you want to check it

For that go to your admin panel and content->pages->Add New Page->Content click on “Show / Hide Editor” then click on “Insert Widget…” you will have list of widgets with one we just created “Vky custom widget”

Fill information and fill Add New Page information as well and go to page on frontend from URL key : “widget” like http://localhost/magento/widget/ you will have result like this

Custom Widget Display Frontend

Custom Widget Display
Frontend

Happy to help.

Be kind to one another. Take care!

No Comments

Post A Comment