I want to change the HTML layout of a 3rd party module which is displaying INC/DEC buttons on the quantity input field on the product description page.
For that, I have to override a JS of a 3rd party module which I did and is working all fine.
The issue is that on the first request with an empty cache, it's dependencies are not loading and giving the following error:
TypeError: $.widget is not a function (\app\code\MyCompany\General\view\frontend\web\js\qtycontrol.js)
TypeError: $(...).qtycontrol is not a function (where it has been called)
Refreshing the page once, making it work fine.
Please find the details below of the code of the module I created to override and also of the original 3rd party module.
Override Module (\app\code\MyCompany\General\view\frontend\web\js\qtycontrol.js):
;define([
'jquery',
'jquery/ui'],
(function ($, window, document, undefined) {
$.widget("infortis.qtycontrol", {
, _create: function()
{
this._initPlugin();
}
, _initPlugin: function()
{
//Exetnded code to display inc/dec buttons on the quantity input field but with changes in HTML.
}
}); //end: widget
})(jQuery, window, document));
Override Module (\app\code\MyCompany\General\view\frontendequirejs-config.js):
var config = {
map: {
'*': {
'qtycontrol': 'MyCompany_General/js/qtycontrol'
}
}
};
Override Module (\app\code\MyCompany\General\etc\module.xml):
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="MyCompany_General" setup_version="1.0.0">
<sequence>
<module name="Infortis_Base"/>
</sequence>
</module>
</config>
3rd Party original module (\app\code\Infortis\Base\view\frontend\web\js\qtycontrol.js):
;(function ($, window, document, undefined) {
$.widget("infortis.qtycontrol", {
, _initPlugin: function()
{
//Some code to display inc/dec buttons on the quantity input field.
}
}); //end: widget
})(jQuery, window, document);
3rd Party original module (\app\code\Infortis\Base\view\frontendequirejs-config.js):
var config = {
paths: {
'qtycontrol': 'Infortis_Base/js/qtycontrol'
},
shim: {
'qtycontrol': {
deps: ['jquery', 'jquery/ui']
}
}
};
I am running the application with the following environment:
- Operating system => Windows.
- Package => WAMP
As I am new to Magento 2 but well aware of PHP and basic JavaScript concepts. But it's possible that might missing some basic concept. Any help would be appreciated.