[Magento 2 定制化开发] 之十二：询盘按钮失效问题，及插件代码修改

在开源的商城系统 Magento 2 中，安装了一个询盘插件。

第一天还能使用，但是突然次日按钮就失效了。现象是点击没有反应。 从页面代码看，是对应按钮的点击事件没有注册处理函数，也就是对应的 js 文件没有加载。 但是，切换为 Magento 内置的 Luma 主题，这个插件就是正常的，js 文件加载正常。

实在不行，自己开发一个询盘窗口功能。界面自定义，成果后自动跳转等功能。没必要纠结原来的失效问题。

x-magento-init

查看页面源代码，能看到加载配置：

<script type="text/x-magento-init">
{
 "*":{"Bluethinkinc_ProductEnquiry/js/productenquiry": {}}
}
</script>

但是没有加载。

breeze.js

从我用的这个主题的官方文档中，看到了这样一段描述：(基本上，我把这个主题的所有跟 js 相关的文档都看了一遍，本来想说非常浪费时间的，算了，就当玩解谜游戏了)

You should register module components using breeze_default.xml layout update as described in JS Components section:

Now, Breeze will load Vendor_Module/js/name if it will be used in data-mage-init, x-magento-init, or inline require call.

https://breezefront.com/docs/scripts

修改示例：

<referenceBlock name="breeze.js">
  <arguments>
    <argument name="bundles" xsi:type="array">
      <item name="default" xsi:type="array">
        <item name="items" xsi:type="array">
          <item name="Vendor_Module/js/name" xsi:type="array">
            <item name="path" xsi:type="string">Vendor_Module/js/name</item>
          </item>
        </item>
      </item>
    </argument>
  </arguments>
</referenceBlock>

修改配置的方法

> cd vendor/swissup/module-breeze/view/frontend/layout
> vim breeze_default.xml

找到：

<item name="default" xsi:type="array">
     <item name="items" xsi:type="array">

在里面添加：

<item name="Bluethinkinc_ProductEnquiry/js/productlistenquiry" xsi:type="array">
	<item name="path" xsi:type="string">Bluethinkinc_ProductEnquiry/js/productlistenquiry</item>
</item>
<item name="Bluethinkinc_ProductEnquiry/js/productenquiry" xsi:type="array">
	<item name="path" xsi:type="string">Bluethinkinc_ProductEnquiry/js/productenquiry</item>
</item>

因为这个插件包含了两个 js 文件，一个是产品详情页的逻辑，一个是产品列表页的逻辑。

执行

> php bin/magento cache:flush

然后页面中就能加载对应的 js 文件了。

但是，还是点击 按钮无效，发现是缺少 jquery。

jQuery is not defined

Uncaught ReferenceError: jQuery is not defined
    at HTMLAnchorElement.<anonymous> (productenquiry.js:17:17)

我看这个插件的代码里是 require 了 jQuery 的依赖，而且三方主题也是是内置了 jquery 的支持。 为啥还是报没有 jquery 呢？

Holy Shit! 再次在文档中看到了这样的描述：

Please note, that jquery will be resolved as Cash library — minimal jQuery alternative.

https://breezefront.com/docs/requirejs

WTF! What is Cash?

Cash is an absurdly small jQuery alternative for modern browsers (IE11+) that provides jQuery-style syntax for manipulating the DOM.

看了一下 github 里的介绍：

https://github.com/fabiospampinato/cash

用法确实类似 jquery

$(function () {
  $('html').addClass ( 'dom-loaded' );
  $('<footer>Appended with Cash</footer>').appendTo ( document.body );
});

之所以用 cash 作为替代品，而插件依旧报错，看了一下插件代码，是因为插件里好多地方是用 jquery 替代了 $ 的写法。 代码质量垃圾的一塌糊涂！

那么, 定义一个全局的

var jQuery = $;

不就行了?

jQuery 解决方案

vim vendor/bluethinkinc/magento2-module-product-enquiry/view/frontend/web/js/productlistenquiry.js
vim vendor/bluethinkinc/magento2-module-product-enquiry/view/frontend/web/js/productenquiry.js

修改组件代码，将在代码前加入

var jQuery = $;

即可。这是最简单直接的修改方式，不要去尝试逐个 jQuery 修改，没有意义。

修改完插件 js 后

跟 composer 安装完插件一样，需要执行：

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush

只执行 static content deploy 是不行的。上面两个命令不能省掉。

然后，页面中的询盘按钮就能正常提交信息了。

但是，还没有结束。

bug 2

response 的处理，有问题。字段写错了，修改。

bug 3

css 样式问题。大量 4em 的字号，字都大的重叠了。

vim vendor/bluethinkinc/magento2-module-product-enquiry/view/frontend/web/css/customcss.css

到此，基本功能没问题了，界面看上去也还说得过去。剩下的就是提交信息的体验问题了：

• 没有重复点击规避处理
• 没有提交的中间等待状态显示。毕竟要等两秒左右的 SMTP 邮件发送时间。

下面是一些额外的记录。

询盘插件中的 js 文件有哪些

> cd vendor/bluethinkinc/magento2-module-product-enquiry
> find . -name "*.js"

./view/frontend/web/js/productlistenquiry.js
./view/frontend/web/js/productenquiry.js
./view/frontend/requirejs-config.js

requirejs-config.js

# cat ./view/frontend/requirejs-config.js
var config = {
    map: {
        '*': {
            productenquiry: 'Bluethinkinc_ProductEnquiry/js/productenquiry',
            productlistenquiry: 'Bluethinkinc_ProductEnquiry/js/productlistenquiry'
        }
    },
    shim: {
        'productenquiry': {
            deps: ['jquery']
        },
        'productlistenquiry': {
            deps: ['jquery']
        }
    }
};

productenquiry.js

# cat ./view/frontend/web/js/productenquiry.js
define(['jquery','Magento_Ui/js/modal/modal','mage/url'],
function($,modal,urlBuilder)
{
                $(".enquiry-product").on('click',function()
                {
                event.preventDefault();
                var datatitle = $(this).attr("data-title");
                var options = {
                type: 'popup',
				...
}

继续阅读 🌳

Magento 2 主题定制化开发系列教程

微信关注我哦 👍

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式