How to create a new widget (Magento 2)

# Custom widget
Widgets provide powerful features in Magento 2, that is used to add dynamic or static content to store’s pages.

#Create a new widget
Create a new widget step:
1. Declaring the widget
2. Adding widget parameters
3. Check the widget
4. Create the block
5. Create the template
6. Check the Frontend

##Declaring the widget
now create a file named `etc/widget.xml` that define basic information about the widget such as Name, description, Block Class.

```xml:Karabiner/Widget/etc/widget.xml
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
    <widget class="Karabiner\Widget\Block\Widget\Test" id="karabiner_test_widget">
        <label>New Widget</label>
        <description>This is a New Widget</description>
        <parameters>
            ...
        </parameters>
        <containers>
            ...
        </containers>
    </widget>
</widgets>
```
We need to also add a dependency to Magento_Widget in the `module.xml` file.

```xml:Karabiner/Widget/etc/module.xml
...
<sequence>
    <module name="Magento_Widget" />
</sequence>
...
```
##Adding widget parameters
As a parameter, we are able to use any of these field types:

text
select
multiselect
block
Add a text and a select field:

```xml:Karabiner/Widget/etc/widget.xml
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
    <widget class="Karabiner\Widget\Block\Widget\Test" id="karabiner_test_widget">
        ...
        <parameters>
            <parameter name="title" xsi:type="text" required="true" visible="true" sort_order="10">
                <label>Label</label>
            </parameter>
            <parameter name="size" xsi:type="select" visible="true" required="true" sort_order="20">
                <label translate="true">Size</label>
                <options>
                    <option name="s" value="S">
                        <label>S</label>
                    </option>
                    <option name="m" value="M" selected="true">
                        <label>M</label>
                    </option>
                    <option name="l" value="L">
                        <label>L</label>
                    </option>
                </options>
            </parameter>
        </parameters>
    </widget>
</widgets>
```

##Check the widget
after run cache clear comand `php bin/magento cache:flush`

go to Admin panel > Content > Pages > Homepage(or any page) > Edit
In the Content tab, click on Insert Widget icon.

![widget-icon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275433/a3131e7b-30c9-d502-7ff3-83b8e50d3cf5.png)


![custom-widget-options.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275433/05b0344b-93b2-d55b-94f4-8922f2527a4e.png)

##Create the block
Create the block class that we provided on the widget’s initialization, responsible for rendering it on the frontend.

```php:Karabiner/Widget/Block/Widget/Test.php
namespace Karabiner\Widget\Block\Widget;

use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;

class Test extends Template implements BlockInterface
{
    protected $_template = "widget/test.phtml";
}
```
##Create the template

And finally, create the template that will be used for showing the widget’s data on the frontend.

```php:Karabiner/widget/view/frontend/templates/widget/test.phtml
<?php
/** \Karabiner\Widget\Block\Widget\Test $block */
?>
<h3><?= $block->escapeHtml($block->getData('title')) ?></h3>
<h3><?= $block->escapeHtml(__('Size:')) ?> <?= $block->escapeHtml($block->getData('size')) ?></h3>
```

##Check the Frontend
Clean the Magento cache with the following command:

    php bin/magento cache:flush

The widget is now shown on the frontend.
![custom-widget-result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275433/481279df-06a4-70ea-5b91-f042ed74f453.png)