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

PART 1.3.1 – How to install modules

add module

aja project add-module vaimo/module-widget-example:dev-default

 

In case the module includes database modification, you will need to run following command:

setup upgrade

m2-upgrade | m2 setup:upgrade | php bin/magento setup:upgrade

 

You will probably need to clean caches as well with following command:

clean cache

m2-qccc | php bin/magento cache:flush

PART 1.3 – Widgets and Modules

Magento 2 focuses more on widgets approach and it is our direction. We highly recommend to create widgets for our Magento 2 project and develop already existing ones. The list of internal widgets and modules for Magento 2 can be found on confluence page Vaimo Internal Modules or on Bitbucket with name convention module-widget-xxxx for widgets and module-xxxx for modules.

Some of our top widgets and modules.

Widgets

Modules

Vaimo_Widget_Slider

Vaimo_Widget_TextOnImage

Vaimo_WidgetAccordionContent

Vaimo_WidgetImageList

Vaimo_WidgetAnchorLinks

Vaimo_WidgetVideo

Vaimo_Carousel

Vaimo_Cms

Vaimo_GoogleTagManager

Vaimo_MatrixRates

Vaimo_Menu

Vaimo_StoreSwitcher

Vaimo_Story