javascript - WooCommerce 双负载

Question

我有这个Wordpress project我正在使用 WooCommerce Plug-in和 WooCommerce Adamas Theme 。我遇到以下问题:

作为我的项目的一部分，我需要将右上角菜单中的“购物车”一词替换为购物车图标。我的主题在其 functions.php 文件中的作用是创建两个指向购物车内容 PoP Up 元素的 a 链接。第一个是“购物车”一词，第二个是购物车产品计数器。

我尝试的是通过将 cmagnet-cart 类添加到第二个属性来添加以下 CSS 属性，以便包含购物车图标。

.cmagnet-cart{
    background: url('http://www.athlokinisi.gr/images/shopping-cart.png') no-repeat 10px 6px;
    min-width: 45px;
    text-align: right;
    background-size: auto 17px;
}

我已将该类添加到最初生成该类的 functions.php cartShow() 函数 中的适当元素。正如您所看到的，问题在于，当页面加载时，它会完美地显示图标，然后通过 JavaScript 重新加载一些 WooCommerce 参数并通过返回其原始值来再次隐藏它。因此，没有我添加的类。

在联系 PremiumCoding 的 Adamas 主题支持团队并在 2 周多的时间里收到几张票后，有人向我指出我需要对 WooCommerce 的 JS 功能进行更改，也许是 cart-fragment .js。问题是，那里对我来说没有任何意义，而且我真的找不到在哪里进行代码更改，以便 Javascript 的第二次加载包含我的函数或从双重加载中排除此元素。那里的支持团队无法为我提供进一步的帮助。

我将不胜感激任何帮助以及解释为什么会发生这种情况。为什么要加载某些元素两次对我来说没有任何意义。

添加两个附加信息: - 我知道，当我解决问题时，我将隐藏(可能通过添加注释)第一个打印“购物车”一词的a链接 - 我从支持部门得到的最后回复如下(如果有任何帮助):

even if you replace text with icon after loading WooCommerce Ajax, text will be back. So you will need to change WooCommerce js function or translate all WooCommerce plugin and theme with WPML plugin and string translation module.

扩展信息: 一般来说，仅将第一个显示“购物车”的 a 链接替换为购物车的图像是不够的，因为它不能解决我的更大问题，其中包括以下问题:我正在使用希腊语对于这个项目，主题有许多 大写 CSS 元素。这样做存在一些问题，因为大写的希腊单词无法自动转换，因为您必须删除元音中的重音。因此，我制作了一个 jQuery 函数，它可以在文档就绪时运行并纠正此问题，但由于上述双重加载问题，它会将所有文本返回到之前的状态。

Answer 1

我通过添加以下代码解决了这个问题:

//Uppercase correction for Greek language
    String.prototype.replaceArray = function(find, replace){
        var replaceString = this;
        for (var i = 0; i < find.length; i++){
            replaceString = replaceString.replace(find[i], replace[i]);
        }
        return replaceString;
    };
    var e = jQuery('a, h2, h3, button, li'), l = e.length, i;
    if (typeof getComputedStyle == "undefined"){
        getComputedStyle = function(e) {return e.currentStyle;};
    }

    for (i=0; i<l; i++){
        if (getComputedStyle(e[i]).textTransform == "uppercase"){
            var find = ['ά', 'έ', 'ί', 'ή', 'ύ', 'ό', 'ώ'];
            var replace = ['α', 'ε', 'ι', 'η', 'υ', 'ο', 'ω'];
            var replaceTo = e[i].innerHTML;
            replaceTo = replaceTo.replaceArray(find, replace);
            e[i].innerHTML = replaceTo;
        }
    }
    //Uppercase correction for Greek language

进入文件:

wp-content/plugins/woocommerce/assets/js/frontend/cart-fragments.min.js

此 JS 文件负责内容的双重加载。这可能不是最好的解决方案，但却是一个可行的解决方案。