3

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?

1 Answer 1

8

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
4
  • I'am not sure but i just wonder if the Dec 5, 2016 at 10:10
  • I accidentally hit ENTER, and the editing expired after 5 minutes, what the ..... I just wonder if the requirejs([],[]) here would work. because the "map" keyword doesnt make the regular scroll.js code automatically an AMD module that requirejs depneds on. Pls correct if i am wrong. Dec 5, 2016 at 10:37
  • @robertshare i have used require js here to only load over smoothscroll.js , as i have created smoothscroll as a seprate so if any change needed they can directly customize and change there so here use of requirejs is correct i am just loading my smoothscroll.js via require js . Hope it clears to you Dec 5, 2016 at 10:43
  • I checked the requirejs docs again, you are right. Dec 5, 2016 at 12:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.