WordPress YITH POS页jQuery未定义ReferenceError报错如何解决

你遇到的jQuery is not defined以及后续功能异常是多个代码写法错误叠加导致的，具体问题点：

• 脚本依赖声明错误：WordPress内置jQuery的注册句柄是小写的jquery，你写的大写jQuery无法被识别，依赖加载规则完全失效
• jQuery加载代码位置错误：你把wp_enqueue_script('jquery')写在函数全局作用域，没有挂载到WordPress的脚本加载钩子上，根本不会被执行
• 脚本路径生成错误：你使用了插件专用的plugins_url()函数生成子主题文件路径，还直接传入了完整站点URL，导致自定义脚本路径解析错误，加载顺序/加载状态异常
• 脚本变量不匹配：wp_localize_script传入的脚本句柄和你注册自定义脚本的句柄不一致，定义的JS变量名和代码中调用的变量名不匹配，后续AJAX功能也会报错
• 加载钩子不匹配：YITH POS的运行页面如果在WordPress后台，仅使用wp_enqueue_scripts钩子只会在前台加载脚本，POS页根本不会载入你的自定义代码
• JS代码本身存在逻辑问题：冗余的ready嵌套、DOM元素未做非空判断、数值计算未初始化、HTML拼接标签结构错误
• AJAX参数获取方式错误：查看购物车的请求是GET类型，回调函数却用$_POST取参，会导致功能失效

1. 替换functions.php中的相关代码 #

// 删除全局位置单独写的wp_enqueue_script('jquery'); 所有脚本加载逻辑放到函数内挂载钩子
function save_cart_enqueue_scripts(){
    // 依赖项写小写jquery，路径改用子主题路径函数，句柄统一用yith-pos-custom避免冲突
    wp_enqueue_script( 
        'yith-pos-custom', 
        get_stylesheet_directory_uri() . '/yith-pos-additions/javascript.js', 
        array( 'jquery' ),
        '1.0.0',
        true
    );

    // 本地化脚本句柄和上面注册的句柄保持一致，变量名和JS内调用的名称统一，ajaxurl填正确的WP AJAX地址
    wp_localize_script( 'yith-pos-custom', 'youruniquejs_vars', 
        array(
            'ajaxurl' => admin_url( 'admin-ajax.php' ),
        ) 
    );  
}
// 同时挂载前台和后台的脚本加载钩子，保证POS页面能加载到自定义代码
add_action( 'wp_enqueue_scripts', 'save_cart_enqueue_scripts' );
add_action( 'admin_enqueue_scripts', 'save_cart_enqueue_scripts' );

// AJAX保存购物车回调
function cart_save_callback_function(){
    $my_var = $_POST["my_var"];
    update_option('saved_carts', $my_var);
    $return_array = array();
    echo json_encode( $return_array );
    die(); 
}
add_action( 'wp_ajax_wpa_49691', 'cart_save_callback_function' );
add_action( 'wp_ajax_nopriv_wpa_49691', 'cart_save_callback_function' );

// AJAX读取购物车回调
function cart_view_callback_function(){
    $my_var = $_GET["my_var"];
    $carts = get_option('saved_carts');
    echo json_encode( $carts );
    die(); 
}
add_action( 'wp_ajax_wpa_49692', 'cart_view_callback_function' );
add_action( 'wp_ajax_nopriv_wpa_49692', 'cart_view_callback_function' );

2. 替换javascript.js中的代码 #

(function($){
    $(document).ready(function() {
        // 保存购物车逻辑
        const clickparent = document.querySelector(".cart-actions");
        if(clickparent){
            clickparent.addEventListener("click", function(e) {
                const carts = JSON.parse(window.localStorage.getItem('yithPOS_carts'));
                if (e.target && (e.target.className == "cart-action cart-action--suspend-and-save-cart cart-action--with-icon") || e.target.className == "cart-action__icon yith-pos-icon-saved-cart") {
                    const postData = {
                        action: 'wpa_49691',
                        my_var: 'carts',
                    }
            
                    $.ajax({
                        type: "POST",
                        data: postData,
                        dataType:"json",
                        url: youruniquejs_vars.ajaxurl,
                        success: function (response) {
                            console.log("Cart saved to database.");
                        }
                    }).fail(function (data) {
                        console.log(data);
                    });
                }
            });
        }

        // 查看已保存购物车逻辑
        const viewcartparent = document.querySelector(".yith-pos-cart__buttons");
        if(viewcartparent){
            viewcartparent.addEventListener("click", function(e) {
                if (e.target && e.target.className == "yith-pos-cart__buttons-saved-carts") {
                    const getData = {
                        action: 'wpa_49692',
                        my_var: 'my_data',
                    }
            
                    $.ajax({
                        type: "GET",
                        data: getData,
                        dataType:"json",
                        url: youruniquejs_vars.ajaxurl,
                        success: function (response) {
                            let total = 0; // 初始化总值避免计算结果为NaN
                            for(item in response){
                                total += item.lineTotal ? item.lineTotal : 0;
                            }
                            // 修正拼接的HTML结构，去掉开头多余的闭合标签
                            $(".yith-pos-cart__savedcarts").append('<div class="cart-saved__item"><i class="yith-pos-cart__savedcart"></i><div class="cart-saved__name"><div class="cart-saved__name__id">' + response['id'] + '</div><div class="cart-saved__name__customer">' + response['cartitems']['names'] + '</div></div><div class="cart-saved__num_of_items">' + response['cartitems'].size + '</div><div class="cart-saved__status">Pending Payment</div><div class="cart-saved__total">'+ total + '</div><button class="btn btn-primary"><i class="yith-pos-icon-refresh"></i> load</button></div>');
                        }
                    }).fail(function (data) {
                        console.log(data);
                    }); 
                }
            });
        }
    });
})(jQuery);

1. 保存修改后清空WP Engine主机缓存、浏览器缓存
2. 打开POS页面按F12打开控制台，确认不再出现jQuery未定义报错
3. 在Network面板筛选JS资源，确认yith-pos-custom脚本加载状态为200，且在jQuery资源之后加载

内容的提问来源于stack exchange，提问作者Riley Lutz