web-dev-qa-db-ja.com

WooCommerceajaxでカートを更新する

私のwoocommerceWebサイトで、カートページを変更し、[カートを更新]ボタンを削除し、次の図に示すように、製品のアイテムを追加および削除するための2つのボタンを作成しました。

enter image description here

数量ボタンをクリックしたときに、ボタンを押してカートを更新すると、同じ関数を呼び出したいと思います。

このために私は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を読み込もうとしているからです。

前もって感謝します！

phpjqueryajaxwordpresswoocommerce
6
Stone

あなたはこの本質的なプロセスを忘れています：

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' ) ) );
}

次に、「ajaxurl」と「cart_ajax "のjavascriptファイルの" url: "：

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

Javascript関数は機能しません。 ここにあなたがする必要があることのいくつかの機能的な例があります：

7
LoicTheAztec

2016年6月にリリースされたWooCommerce2.6.0以降、WooCommerceカートページはAjaxを使用して、[カートの更新]ボタンをクリックした後にカートの合計を更新します。

独自のAjax呼び出しを作成する必要がなくなり、[カートの更新]ボタンに割り当てられた呼び出しを使用できます。

無料のプラグインを作成しました Ajax Cart AutoUpdate for WooCommerce 製品の数量を変更した後、カートページとミニカートを更新し、このプロセスにいくつかのカスタマイズオプションを提供します。

最も重要なことは、更新遅延を設定することです。この遅延中にユーザーが数量を再度変更すると、完全な期間にリセットされます。実装されておらず、インクリメントボタンをクリックして数量を1から10に変更すると、1ではなく9つのAjax呼び出しがトリガーされます。

JQueryコードは以下のとおりです。これをjsファイルに配置し、jQueryとの依存関係でキューに入れることをお勧めします。その後、jQuerydeferredで機能します。

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 );
});
0
Ryszard Jędraszyk