insert_webcreta_custom_widget

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 “Webcreta”. Here “Webcreta” 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/Webcreta then as shown in image.

folders_custom_widget_magento2

Step 1 : Create module.xml file in the app/code/Webcreta/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="Webcreta_WidgetBlock" setup_version="1.0.0" />
</config>

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

<?php

use \Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Webcreta_WidgetBlock', __DIR__);

Step 3 : Create widget.xml file in the app/code/Webcreta/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="Webcreta\WidgetBlock\Block\Widget\CustomWidget" placeholder_image="Webcreta_WidgetBlock::images/widget_block.png">
<label translate="true">Webcreta custom widget</label>
<description>Webcreta - 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="Webcreta\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/Webcreta/WidgetBlock/Block/Widget folder with the following code:

<?php
namespace Webcreta\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/Webcreta/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/Webcreta/WidgetBlock/Model/Config/Source/ folder with the following code:

<?php
namespace Webcreta\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 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 “Webcreta custom widget”

insert_webcreta_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

custom_widget_display_frontend

I Hope it helps!

Leave a Reply