Magento 2 Override JS of a module but on first request dependencies not loading

Question

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\frontend\requirejs-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\frontend\requirejs-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.

Are you asking that once we refresh, does it loads fine? Yes, it does once we reload the page. — Noman, Jun 25 '19 at 11:31
Yes I am asking that code is your javascript call your theme javascript call.Is it possible to share url of the website? — Jinesh, Jun 25 '19 at 11:32
Sharing URL wouldn't be possible for me as it's a client's project. Yes, the code inside my theme to use "qtycontrol" method works fine after one or two refreshes. — Noman, Jun 25 '19 at 12:40
Let me clarify a bit, the qtycontrol.js is not in theme. It's in the module and overriding all fine. I have logged like "overriden theme" and "parent theme" in the original JS file. So the override file is loading. But when jQuery dependency does not load first time so the qtycontrol JS file blasts as well. — Noman, Jun 25 '19 at 13:33

score 1 · Answer 1 · answered Nov 14 '19 at 05:06

1

Magento recommends using mixins instead of overriding the entire JS file.

You can go the link there is an example also given, I believe that will help.

answered Nov 14 '19 at 05:06

Sanjib Chowdhury

45
5

Magento 2 Override JS of a module but on first request dependencies not loading

1 Answers1