使用 wordpress 动作修改 div 内容

Question

每次将某些内容添加到 woocommerce 购物车时，我都会尝试修改 div 的内容。在本例中，内容将是当前的购物车总价值。

首先我创建了一个名为“test-cart-value”的简单插件，其中包含以下代码：

<?php

 function test_cart_value() {
    echo "<div>" . WC()->cart->total . "</div>";
}

add_shortcode('test_cart_value_shortcode', 'test_cart_value');

这很好用，无论我在哪里放置短代码，我都会在页面加载后获得当前的购物车值。

所以，现在我希望每次将某些内容添加到购物车时更新此打印值，而无需重新加载页面。这个想法是使用动作钩子 woocommerce_cart_updated 并调用该函数 - 因此每次购物车中的某些内容发生变化时，都会回显新的购物车值：

function action_woocommerce_cart_updated() { 
    test_cart_value();
}; 

// add the action 
add_action( 'woocommerce_cart_updated', 'action_woocommerce_cart_updated', 10, 0 ); 

问题是，现在我无法将产品动态添加到购物车。每当我点击“添加到购物车”按钮时，加载动画就会永远加载。 如何正确执行此操作？ 我尝试了使用 Ajax 和不同 Hooks 的不同方法，但到目前为止没有任何效果。

有什么想法吗？提前致谢！

编辑：

所以我尝试将此作为我的插件代码

function test_cart_value() { 
    echo "<div id='cart_test'>" . WC()->cart->total . "</div>";
}

add_shortcode('test_cart_value_shortcode', 'test_cart_value');


// define the actions for the two hooks created, first for logged in users and the next for logged out users
add_action("woocommerce_cart_updated", "cart_update");

// define the function to be fired for logged in users
function cart_update() {

    $cart = WC()->cart->total;
    $result['type'] = "success";
    $result['new_cart'] = $cart;

    $result = json_encode($result);
    //if I uncomment the "die" function, the page won't load
//   die();
}

// Fires after WordPress has finished loading, but before any headers are sent.
add_action( 'init', 'script_enqueuer' );

function script_enqueuer() {

   // Register the JS file with a unique handle, file location, and an array of dependencies
   wp_register_script( "test_script", plugin_dir_url(__FILE__).'test_script.js', array('jquery') );

   // localize the script to your domain name, so that you can reference the url to admin-ajax.php file easily
   wp_localize_script( 'test_script', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));        

   // enqueue jQuery library and the script you registered above
   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'test_script' );
}

还有我的 test_script.js 代码：

jQuery(document).ready( function() {
   jQuery(".ajax_add_to_cart").click( function(e) {
      e.preventDefault(); 
      jQuery.ajax({
         type : "post",
         dataType : "json",
         url : myAjax.ajaxurl,
         data : {action: "cart_update"},
         success: function(response) {
            if(response.type == "success") {
               jQuery("#cart_test").html(response.new_cart);
            }
            else {
               alert("Your like could not be added");
            }
         }
      });
   });
});

所以我认为当我按下“ajax_add_to_cart”按钮时应该触发 cart_update() 函数，但我收到错误 400。

有什么想法吗？ 谢谢！

Answer 1

让它与 woocommerce_add_to_cart_fragments 一起使用。