Magento 2 widget with js

Question

Tell me please how to create my own Magento 2 widget with custom JS. I need something like a "scroll to top" button, but with another function. I'm allready have a worked script, but how i can create a widget with them?

Answer 1

I have created "Custom Widget" Module as per your requirement.

app/code/Widget/CustomWidget/registration.php

Registration.php

<?php

use \Magento\Framework\Component\ComponentRegistrar;

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

app/code/Widget/CustomWidget/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="Widget_CustomWidget" setup_version="1.0.0">
    </module>
</config>

app/code/Widget/CustomWidget/etc/widget.xml

Widget.xml

<?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="widget_customwidget" class="Widget\CustomWidget\Block\Widget\ContactInformations">
        <label translate="true">Custom Widget For Scroll to Top</label>
        <description>Custom Widget</description>
    </widget>
</widgets>

app/code/Widget/CustomWidget/Block/Widget/ContactInformations.php

ContactInformations.php

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

app/code/Widget/CustomWidget/view/frontend/templates/widget/contact_informations.phtml

contact_informations.phtml

Link: <a href="#switcher-language" class="toTop">Scroll to TOP &uarr;</a>
<script type="text/javascript">
     require(['jquery','smoothscroll'],function($){
     });
</script>

app/code/Widget/CustomWidget/view/frontend/web/js/smoothscroll.js

smoothscroll.js

jQuery('.toTop ').click(function(){
        //alert("hello world");
      jQuery("html, body").animate({ scrollTop: 0 }, 600);
      return false;
   });
   jQuery('.toBottom').click(function(){
      jQuery('html,body').animate({scrollTop: $(document).height()}, 600);
      return false;
});

app/code/Widget/CustomWidget/view/frontend/requirejs-config.js

requirejs-config.js

var config = {
    "map": {
        "*": {
            "smoothscroll": "Widget_CustomWidget/js/smoothscroll"
        }
    }
};

After creating above module first run setup:upgrade command

Call your widget on the page where you want Scroll To Top link , by adding following line.(I have called this on homepage and its working fine ).

{{widget type="Widget\CustomWidget\Block\Widget\ContactInformations"}}

After above all steps run below commands :

1. Run setup:static-content:deploy(as we are creating customjs)
2. Run cache:clean command