Woocommerce阿賈克斯添加到購物車程序

Question

我有這個按鈕：

<a href="http://my-site/checkout/" target="_blank" class="dt-sc-button">bla bla</a> 

此按鈕位於我homebage，並通過頁面生成器生成的。我想要完成的是當有人點擊按鈕時，它會將他們帶到結帳處，並將產品添加到購物車中。我知道這可以通過URL完成，但我需要讓這個按鈕做其他事情（客戶端想法）。

所以現在我在這裏stucked：

JQuery的

jQuery(document).ready(function($){  
$(".remove-all").click(function(){ 
    $.ajax({ 
     url: "wp-admin/admin-ajax.php", 
     data: 'myajax' 
    }); 
    }); 
}); 

PHP

add_action('wp_ajax_myajax', 'myajax'); 
add_action('wp_ajax_nopriv_myajax', 'myajax'); 

    function myajax() { 
     global $woocommerce; 
     $product_id = 264; 
    $woocommerce->cart->add_to_cart($product_id); 
    die(); 
    } 

我是一個javascript小白，所以你可以請點我到正確的方向，或者給我提示我做錯了什麼。

在此先感謝！

Answer 1

正如我在評論中提到的，你幾乎可以從核心WooCommerce函數中借用。

首先，這裏我們將試圖ajaxify按鈕：

<a href="http://local.wordpress.dev/checkout/" class="button test-button">bla bla</a> 

其次，我們將載入我們自定義腳本，並通過它的重要變量，例如管理員Ajax和結帳的URL。

add_action('wp_enqueue_scripts', 'so_load_script', 20); 
function so_load_script(){ 
    wp_enqueue_script('so_test', plugins_url('js/test.js', __FILE__)); 
    $i18n = array('ajax_url' => admin_url('admin-ajax.php'), 'checkout_url' => get_permalink(wc_get_page_id('checkout'))); 
    wp_localize_script('so_test', 'SO_TEST_AJAX', $i18n); 
} 

現在我們將寫我們的AJAX回調，這是複製幾乎逐字從WooCommerce核心，只有一些小的修改：

add_action('wp_ajax_myajax', 'myajax_callback'); 
add_action('wp_ajax_nopriv_myajax', 'myajax_callback'); 

    /** 
    * AJAX add to cart. 
    */ 
function myajax_callback() {   
     ob_start(); 

     //$product_id  = 264; 
     $product_id  = 34; 
     $quantity   = 1; 
     $passed_validation = apply_filters('woocommerce_add_to_cart_validation', true, $product_id, $quantity); 
     $product_status = get_post_status($product_id); 

     if ($passed_validation && WC()->cart->add_to_cart($product_id, $quantity) && 'publish' === $product_status) { 

      do_action('woocommerce_ajax_added_to_cart', $product_id); 

      wc_add_to_cart_message($product_id); 

     } else { 

      // If there was an error adding to the cart, redirect to the product page to show any errors 
      $data = array(
       'error'  => true, 
       'product_url' => apply_filters('woocommerce_cart_redirect_after_error', get_permalink($product_id), $product_id) 
      ); 

      wp_send_json($data); 

     } 

     die(); 

} 

和test.js終於內容：

jQuery(document).ready(function($){  
    $(".test-button").click(function(e){ 
    e.preventDefault(); // Prevent the click from going to the link 

    $.ajax({ 
     url: wc_add_to_cart_params.ajax_url, 
     method: 'post', 
     data: { 
      'action': 'myajax' 
     } 
    }).done(function (response) { 
      if(response.error != 'undefined' && response.error){ 
      //some kind of error processing or just redirect to link 
      // might be a good idea to link to the single product page in case JS is disabled 
      return true; 
      } else { 
      window.location.href = SO_TEST_AJAX.checkout_url; 
      } 
    }); 

    }); 

}); 

Answer 2

您可能需要取消/防止點擊鏈接的默認操作，然後重定向一旦AJAX調用完成（這僅僅是一個辦法做到這一點）：

jQuery(document).ready(function($){  
    $(".remove-all").click(function(e){ 
    e.preventDefault(); // Prevent the click from going to the link 
    var $redirect = $(this).attr('href');   

    $.ajax({ 
     url: "wp-admin/admin-ajax.php", 
     data: 'myajax', 
     success: function() { 
      window.location.href = $redirect; 
     } 
    }); 
    }); 
}); 

PHP

add_action('wp_ajax_myajax', 'myajax'); 
add_action('wp_ajax_nopriv_myajax', 'myajax'); 

function myajax() { 
    $product_id = 264; 
    // Avoid using the global $woocommerce object 
    WC()->cart->add_to_cart($product_id); 
    die(); 
}