PART 1.3.2 – How to create a widget

Required files

As en example of the widget can be used https://bitbucket.org/vaimo/module-example-widget/overview.

registration.php

registration.php

<?php

/**

 * Copyright © 2009-2017 Vaimo AB. All rights reserved.

 * See LICENSE.txt for license details.

 */

\Magento\Framework\Component\ComponentRegistrar::register(

    \Magento\Framework\Component\ComponentRegistrar::MODULE,

    ‘Vaimo_ExampleWidget’,

    __DIR__

);

composer.json

composer.json

{

    “name”: “vaimo/module-example-widget”,

    “type”: “magento2-module”,

    “description”: “example widget”,

    “license”: “proprietary”,

    “authors”: [

        {

            “name”: “Andrey Golovin”,

            “email”: “andrey.golovin@vaimo.com”

        }

    ],

    “require”: {

        “magento/framework”: “*”,

        “magento/module-widget”: “*”

    },

    “autoload”: {

        “files”: [

            “registration.php”

        ],

        “psr-4”: {

            “Vaimo\\ExampleWidget\\”: “”

        }

    },

    “extra”: {

        “vaimo-module-category”: “Widgets”

    }

}

etc/widget.xml

<?xml version=”1.0″?>

<!–

 Copyright © 2009-2017 Vaimo AB. All rights reserved.

 See LICENSE.txt for license details.

–>

<widgets xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:module:Magento_Widget:etc/widget.xsd”>

    <widget id=”example_widget” class=”Vaimo\ExampleWidget\Block\Widget”>

        <label translate=”true”>Example Widget</label>

        <description translate=”true”>Example Widget</description>

        <parameters>

            <parameter name=”template” xsi:type=”select” visible=”true” required=”true” sort_order=”10″>

                <label translate=”true”>Template</label>

                <options>

                    <option name=”default” value=”example-widget-template.phtml” selected=”true”>

                        <label translate=”true”>Default</label>

                    </option>

                </options>

            </parameter>

            <parameter name=”example_text” xsi:type=”text” visible=”true” sort_order=”10″>

                <label translate=”true”>Text Field</label>

            </parameter>

        </parameters>

    </widget>

</widgets>

etc/module.xml

etc/module.xml

<?xml version=”1.0″?>

<!–

/**

 * Copyright © 2009-2017 Vaimo AB. All rights reserved.

 * See LICENSE.txt for license details.

 */

–>

<config xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:Module/etc/module.xsd”>

    <module name=”Vaimo_ExampleWidget” setup_version=”1.0.0″/>

</config>

Optional files

For new modules we need to create new Block, however for extending of module, can be used existing Block file.

Block/Widget.php

<?php

/**

 * Copyright © 2009-2017 Vaimo AB. All rights reserved.

 * See LICENSE.txt for license details.

 */

namespace Vaimo\ExampleWidget\Block;

 

class Widget extends \Magento\Framework\View\Element\Template

    implements \Magento\Widget\Block\BlockInterface

{

 

}

view/frontend/templates/example-widget-template.phtml

For new widgets we need to create new templates, however for extending of module, can be used exisiting templates file.

view/frontend/templates/example-widget-template.phtml

<?php

/**

 * Copyright © 2009-2017 Vaimo AB. All rights reserved.

 * See LICENSE.txt for license details.

 */

echo $block->getExampleText();

view/frontend/css/sources/_module.less

During adding new less files to your widget, please, add only general styles. In case, some of styles are project specific, add them to your themes. Remember about creating variables, so it can be easy to overwrite them.

Examples

Some another examples of simple widgets:

Widget

Functionality

https://bitbucket.org/vaimo/module-widget-logo/overview

  1. Adding image
  2. Adding dropdown

https://bitbucket.org/vaimo/module-widget-catalog-product-list/overview

  1. Showing product list

https://bitbucket.org/vaimo/module-widget-container-sticky/overview

  1. Adding sticky container

Exercise 10.0

Create your own widget based on https://bitbucket.org/vaimo/module-example-widget/overview or extend it by adding some additional fields. NOTE: All your changes should be added to project repository and pushed on branch.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s