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

更新于 2025-03-08 | 浏览: 1390
文章目录

    在开源的商城系统 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 邮件发送时间。

    bug 4

    按钮样式，因为其用 span 写的按钮，所以鼠标放上去的样式不是小手，需要修正。

    目录
    vendor/bluethinkinc/magento2-module-product-enquiry/view/frontend/templates

    # ls
enquiry.phtml  productenquiry-list.phtml

    在下面两个按钮上添加

    style="cursor: pointer";

<span class="Submit_Enquiry_btn" id="submit_enquireXXX">Request a Quote</span>

<span class="Submit_Enquiry_btn" id="submit_enquire">Request a Quote</span>

    下面是一些额外的记录。

    询盘插件中的 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 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式

    标签: magento

    相关推荐