Woocommerce Ajax 以编程方式添加到购物车

本文介绍了Woocommerce Ajax 以编程方式添加到购物车的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有这个按钮:

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

此按钮位于我的主页上，由页面构建器生成.我想要完成的是当有人点击按钮时，它会将他们带到结账处，并将产品添加到购物车.我知道这可以通过 URL 来完成，但我还需要让这个按钮做其他事情(客户想法).

This button is located on my homebage and is generated by a page builder. What I want to accomplish is when somebody click on the button, it will take them on the checkout, and add a product to the cart. I know that this can be accomplished via a URL, but I need to have this button do other things as well(client idea).

所以现在我被困在这里:

So right now I'm stucked here:

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 菜鸟，所以你能指出我正确的方向，或者给我一个关于我做错了什么的提示.

I'm a javascript noob, so can you please point me to the right direction, or maybe give me a hint on what I'm doing wrong.

提前致谢！

推荐答案

正如我在评论中提到的，您几乎可以借鉴 WooCommerce 的核心功能.

As I mentioned in the comments, you can pretty much borrow from core WooCommerce functions.

首先，这是我们要尝试ajaxify的按钮:

First, here's the button we'll be trying to ajaxify:

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

其次，我们将加载我们的自定义脚本并将重要的变量传递给它，例如管理 ajax 和结帐 URL.

Secondly, we'll load our custom script and pass it important variables such as the admin ajax and checkout urls.

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 核心逐字复制而来，只有一些小的修改:

Now we will write our ajax callbacks, which is copied almost verbatim from WooCommerce core with only a few small modifications:

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