修复 Magento 询盘组件在产品列表页不弹窗显示

在外贸站 Magento 主题中，使用了 bluethinkinc/magento2-module-product-enquiry 这个询盘组件。
在产品详情页是可以正常点击按钮进行询盘的。

但是在产品列表页，部分产品可以正常询盘。但是某些产品，点击了询盘组件之后，无法弹出询盘窗口。

问题出在哪里

看了一下页面的代码，发现这个询盘组件，会在产品框里增加一个询盘按钮，id 为产品的 sku。

问题就出在这里，因为 sku 中可能包含特殊的字符，例如空格，句号之类，导致生成了一个非法的 html 元素 id。

于是 js 的点击响应事件就无法触发了。

所以，需要修改一下插件的代码，来修复这个 bug.

修改哪个源码文件呢

cd vendor/bluethinkinc/magento2-module-product-enquiry/view/frontend
grep sku -r .

./templates/productenquiry-list.phtml:    id='sku<?= /* @noEscape */ $sku; ?>'>

php 代码测试

使用产品的 sku 作为 html 页面中 div 元素的 id，需要如何格式化才能使 id 的值符合变量命名规范，使用 php 实现.
先本地新建一个 PHP 文件测试一下：

<?php
function formatSkuForId($sku) {
    // 移除特殊字符，只保留字母、数字、下划线和破折号
    $formattedSku = preg_replace('/[^a-zA-Z0-9_-]/', '', $sku);
    // 将多个下划线或破折号替换为单个下划线
    $formattedSku = preg_replace('/_+|-+/', '_', $formattedSku);
    // 确保不以数字开头
    if (preg_match('/^[0-9]/', $formattedSku)) {
        $formattedSku = '_'. $formattedSku;
    }
    return $formattedSku;
}

// 示例使用
$sku = "ABC-123#456@XYZ";
$formattedId = formatSkuForId($sku);
echo '<div id="'. $formattedId. '">Product Information</div>';
?>

输出为

> php sku_id.php
<div id="ABC_123456XYZ">Product Information</div>

修改插件代码中的逻辑

在获取 sku 之后，加入下面的逻辑：

$formattedSku = preg_replace('/[^a-zA-Z0-9_-]/', '', $sku);
$formattedSku = preg_replace('/_+|-+/', '_', $formattedSku);
$sku = $formattedSku;

修改完插件 PHP 代码后

跟 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 是不行的。上面两个命令不能省掉。

关于作者 🌱

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”，查看更多联系方式