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
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 ↑</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 :
- Run setup:static-content:deploy(as we are creating customjs)
- Run cache:clean command
-
-
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
-