使用 WooCommerce ajax 更新购物车答案

【问题标题】：Update cart with WooCommerce ajax使用 WooCommerce ajax 更新购物车
【发布时间】：2016-10-09 05:02:15
【问题描述】：

在我的 woocommerce 网站中，我更改了购物车页面，删除了“更新购物车”按钮，并创建了 2 个按钮来添加和删除产品项目，如图所示：

当我点击数量按钮时，如果我按下按钮更新购物车，我想调用相同的函数。

为此，我正在使用 ajax，但它什么也没做。

首先在我的function.php 文件中，我有这个：

  function update_my_cart() {
    // here update then cart
    var_dump("execute");
  }
  add_action( 'wp_ajax_update_my_cart', 'update_my_cart' );    // If called from admin panel
  add_action( 'wp_ajax_nopriv_update_my_cart', 'update_my_cart' );  



    add_action( 'wp_enqueue_scripts', 'rct_enqueue_scripts' );

    if ( ! function_exists( 'rct_enqueue_scripts' ) ) :

    function rct_enqueue_scripts() {
    wp_enqueue_script( 'rct-js', get_template_directory_uri() . '/js/themeCoffee.js', array(), '1.0', true );
    wp_localize_script('rct-js', 'ajax_object', array('ajax_url' => admin_url( 'admin-ajax.php' )));
    }

    endif;

在我的 jquery 文件中我有这个：

  updatecart = function(qty) {
    var currentVal, data, item_hash, request;
    currentVal = void 0;
    data = void 0;
    item_hash = void 0;
    currentVal = parseFloat(qty);
    request = $.ajax({
      url: 'ajax_object.ajax_url',
      method: 'POST',
      data: {
        quantity: currentVal,
        action: 'update_my_cart'
      },
      dataType: 'html'
    });
    request.done(function(msg) {
      alert('cart update ');
    });
    request.fail(function(jqXHR, textStatus) {
      alert('Request failed: ' + textStatus);
    });
  };

我收到此错误：

Failed to load resource: the server responded with a status of 404 (Not Found)

因为我尝试加载my_website/cart/ajax_object.ajax_url。

提前致谢！

【问题讨论】：

谢谢@LoicTheAztec 我已经按照你的建议修改了我的文件。并用新的更改更改问题，但我仍然收到相同的错误。任何想法！
@LoicTheAztec 我有一个错误，我的 ajax 函数 url 中有这个：'ajax_object.ajax_url'，正确的是没有引号。现在可以了，谢谢你的帮助

标签： php jquery ajax wordpress woocommerce

【解决方案1】：

自 2016 年 6 月发布的 WooCommerce 2.6.0 以来，WooCommerce 购物车页面在单击更新购物车按钮后使用 Ajax 更新购物车总数。

不再需要创建自己的 Ajax 调用，可以使用分配给更新购物车按钮的调用。

我创建了一个免费插件Ajax Cart AutoUpdate for WooCommerce，它会在更改产品数量后更新购物车页面和迷你购物车，并为此过程提供一些自定义选项。

最重要的是设置更新延迟。如果用户在此延迟期间再次更改数量，它将重置为完整持续时间。如果它没有实现并且你通过点击增量按钮将数量从 1 更改为 10，它将触发 9 个 Ajax 调用而不是 1。

JQuery 代码如下，我建议将它放在 js 文件中并依赖 jQuery 入队，然后它可以与 jQuery deferred 一起使用：

var timeout;

jQuery('div.woocommerce').on('change keyup mouseup', 'input.qty', function(){ // keyup and mouseup for Firefox support
    if (timeout != undefined) clearTimeout(timeout); //cancel previously scheduled event
    if (jQuery(this).val() == '') return; //qty empty, instead of removing item from cart, do nothing
    timeout = setTimeout(function() {
        jQuery('[name="update_cart"]').trigger('click');
    }, 1000 );
});

【讨论】：

如果您自己构建购物车，这仅适用于购物车页面，而不适用于任何其他页面

【解决方案2】：

你忘记了这个重要的过程：

add_action('wp_enqueue_scripts', 'add_my_ajax_scripts'); 

function add_my_ajax_scripts() {
    // Here you register your script located in a subfolder `js` of your active theme
    wp_enqueue_script( 'ajax-script', get_template_directory_uri().'/js/script.js', array('jquery'), '1.0', true );
    // Here you are going to make the bridge between php and js
    wp_localize_script( 'ajax-script', 'cart_ajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}

然后您将在“url:”的 javascript 文件中检索“ajaxurl”和“cart_ajax”：

$.ajax({
  url: cart_ajax.ajaxurl,
  ...
})

您的 javascript 函数将不起作用。 以下是一些功能示例，说明您需要做什么：

【讨论】：