覆盖 WooCommerce 前端 Javascript

Posted 2023-03-25

【中文标题】覆盖 WooCommerce 前端 Javascript

【英文标题】：Override WooCommerce Frontend Javascript

【发布时间】：2012-08-04 20:35:15

【问题描述】：

有人可以指导我什么是覆盖 WooCommerce 核心 javascript 文件的正确方法，特别是前端文件。我还没有找到任何关于此的文档并查看代码，前端脚本文件的路径在插件中是硬编码的，所以我怀疑在我的主题中放置一个资产文件夹会做任何事情。

最干净的方法是什么，以便我可以加载位于我的主题目录中的文件？

谢谢

【问题讨论】：

您想完全禁用他们的脚本，还是覆盖特定的行为或事件？

好吧，我打算完全覆盖 javascript 文件 (add-to-cart-variation.js)，因为我需要进行很多更改。

在该文件中，看起来只有两个事件绑定在 doc ready 上。您可以在自己的脚本中取消绑定它们。第 4 行和第 216 行 github.com/woothemes/woocommerce/blob/master/assets/js/frontend/…。我没有使用过那个插件，但我想你也可以手动修改那个文件。

我需要将它们全部出列。这包含所有包含的 woocommerce 前端 css 和 javascript 文件的不错列表。这就是我需要使用的：gregrickaby.com/remove-woocommerce-styles-and-scripts

【参考方案1】：

我遇到了同样的问题，除了 add-to-cart.js。简单的解决方案是将 woocommerce 脚本出队并入队您的替代品。在我的情况下，我将以下内容添加到我的 functions.php 中：

wp_dequeue_script('wc-add-to-cart');
wp_enqueue_script( 'wc-add-to-cart', get_bloginfo( 'stylesheet_directory' ). '/js/add-to-cart-multi.js' , array( 'jquery' ), false, true );

您希望将“wc-add-to-cart-variation”脚本出队。我不认为您有以同名入队，但我找不到不这样做的理由。

希望这会有所帮助。

如果您使用的是 WordPress 4.0.1 版和 WooCommerce 2.2.10 版。您可以使用以下脚本：

wp_deregister_script('wc-add-to-cart'); wp_register_script('wc-add-to-cart', get_bloginfo( 'stylesheet_directory' ). '/js/add-to-cart-multi.js' , array( 'jquery' ), WC_VERSION, TRUE); wp_enqueue_script('wc-add-to-cart');

【讨论】：

使用同名排队“更好”，因此您不会破坏它可能具有的任何依赖关系。

如果您确实尝试使用相同的句柄入队，那么原始文件仍然会入队，除非您在重新入队之前使用 wp_dequeue_script() 取消注册原始句柄。

能否请您也检查一下我的问题wordpress.stackexchange.com/questions/215238/…

【参考方案2】：

WooCommerce 在class-wc-frontend-scripts.php 文件中加载前端脚本和样式，并且可以找到脚本是如何注册、排队、本地化和依赖的。

在 Wordpress 中将脚本排入队列的首选位置是 wp_enqueue_scripts 操作挂钩，因为这是在 Wordpress 完全加载之后但在进行任何输出之前的时刻。而且我喜欢将我所有的相关脚本和样式排入一段代码中。

当您想完全删除某些脚本时，调用wp_deregister_script() 或wp_dequeue_script() 就足够了。但有时如果想要进行一些更改并保留现有的依赖项、变量和本地化，则会出现问题，因为插件是在主题之前加载的。所以入队函数不会像你期望的那样工作。简单的wp_dequeue_script() => wp_enqueue_script() 将not work、wp_deregister_script() => wp_register_script() 将起作用，但本地化数据将丢失。

---

这可以通过直接使用$wp_scripts 全局对象来解决，该对象包含并管理通过wp_enqueue_script() 加载或向wp_register_script() 注册的所有脚本：

    add_action( 'wp_enqueue_scripts', 'load_theme_scripts' );

    function load_theme_scripts() 
        global $wp_scripts; 
        $wp_scripts->registered[ 'wc-add-to-cart' ]->src = get_template_directory_uri() . '/woocommerce/js/wc-add-to-cart.js';
    

【讨论】：

我喜欢$wp_scripts 选项，因为这样我就不会打扰/不需要担心脚本依赖或版本等问题。+1

这真是一个了不起的答案！我不知道您可以使用，甚至不知道您可以修改 $wp_scripts 对象。这真太了不起了！我想请你喝啤酒！

谢谢！实际上，我复制的脚本（wc-single-product）在没有本地化数据的情况下无法工作，因此这为我解决了一个大问题 :) 请注意，您需要在子主题中使用“get_stylesheet_directory_uri”而不是“get_template_directory_uri”。跨度>

【参考方案3】：

将此部分添加到您的 function.php 中

function themeslug_enqueue_script() 
wp_enqueue_script( 'add-to-cart-variation', get_bloginfo( 'url' ). '/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.js', false );

add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script' );