doudun8705 2019-06-22 13:21
浏览 120

Magento 2覆盖模块的JS,但是在第一次请求依赖项时没有加载

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.

  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥15 2020长安杯与连接网探
    • ¥15 关于#matlab#的问题:在模糊控制器中选出线路信息,在simulink中根据线路信息生成速度时间目标曲线(初速度为20m/s,15秒后减为0的速度时间图像)我想问线路信息是什么
    • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
    • ¥16 mybatis的代理对象无法通过@Autowired装填
    • ¥15 可见光定位matlab仿真
    • ¥15 arduino 四自由度机械臂
    • ¥15 wordpress 产品图片 GIF 没法显示
    • ¥15 求三国群英传pl国战时间的修改方法
    • ¥15 matlab代码代写,需写出详细代码,代价私
    • ¥15 ROS系统搭建请教(跨境电商用途)