使用 AJAX 向购物车添加变体 - WooCommerce API?
Posted
技术标签:
【中文标题】使用 AJAX 向购物车添加变体 - WooCommerce API?【英文标题】:Add a Variation to Cart using AJAX - WooCommerce API? 【发布时间】:2015-01-31 23:11:36 【问题描述】:我有一个包含以下数据的项目:
var item =
id : "124",
name : "xxx",
price : "13.13",
quantity : 1,
options :
"size" : "xl",
"color": "pink"
;
当用户单击“添加到购物车”时,我想使用 WC API 发出 Ajax 请求并将上述项目添加到购物车中。
jQuery.ajax(
url: "some/woocommerce/api/add/to/cart/request/path",
data: item,
type: "POST"
);
然后在购物车页面上,我想使用 WC API 发出另一个 Ajax 请求并检索购物车的内容。
我还没有找到任何文档(官方或非官方)关于如何使用 javascript 从客户端执行此操作。
有谁知道并可以给我一个例子吗?
另外,有谁知道为什么 WooCommerce Api 文档如此可怕(缺少关于上述明显/标准问题的任何类型的信息)。我正在认真考虑让我们的公司改用 Shopify。
【问题讨论】:
您是否尝试从同一个域执行此操作?我正在阅读与 API 相关的文件,但没有看到任何用于管理购物车的内容。但是,如果您在同一个域中,WC 已经通过 AJAX 添加到购物车,您可以查看和借用。 是的,我将在同一个域中执行此操作。我在哪里可以找到您所指的这个 AJAX 请求。我没有使用任何 WC 生成的页面。只是在安装 WC 的同一域上加载的空白 Wordpress html 页面。 您不需要至少购物车和订单页面以便人们结帐吗?无论如何,评论太长了,所以我在下面发布了我所知道的关于 ajax 添加到购物车回调的信息。 【参考方案1】:您可以直接在代码中调查 WooCommerce 如何通过 ajax 将商品添加到购物车......回调位于 includes/class-wc-ajax.php
。 WooCommerce 已经在产品“循环”(产品档案)上做到了这一点,所以我认为你不需要重新发明***,如果他们现有的代码不适用于你想要做的事情,那么你应该可以借用从中重重。
该文件的开头有一个包含所有 WooCommerce Ajax 操作的循环,但我们可以追踪到添加到购物车基本上是这样的:
add_action( 'wp_ajax_nopriv_woocommerce_add_to_cart', array( 'WC_AJAX', 'add_to_cart' ) );
而且它的回调在文件的后面一点:
/**
* AJAX add to cart
*/
public static function add_to_cart()
ob_start();
$product_id = apply_filters( 'woocommerce_add_to_cart_product_id', absint( $_POST['product_id'] ) );
$quantity = empty( $_POST['quantity'] ) ? 1 : wc_stock_amount( $_POST['quantity'] );
$passed_validation = apply_filters( 'woocommerce_add_to_cart_validation', true, $product_id, $quantity, $variation_id, $variations, $cart_item_data );
if ( $passed_validation && WC()->cart->add_to_cart( $product_id, $quantity ) )
do_action( 'woocommerce_ajax_added_to_cart', $product_id );
if ( get_option( 'woocommerce_cart_redirect_after_add' ) == 'yes' )
wc_add_to_cart_message( $product_id );
// Return fragments
self::get_refreshed_fragments();
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();
如果您想查看他们的添加到购物车 ajax 调用,其 JS 位于 assest/js/frontend/add-to-cart.js
。
编辑
现在我知道您正在寻找添加变体,也许我们可以调整上述内容。
首先,我认为您需要将 AJAX url 传递给您的脚本:
wp_enqueue_script( 'wc-variation-add-to-cart', 'source-to-script/your-script.js' );
$vars = array( 'ajax_url' => admin_url( 'admin-ajax.php' ) );
wp_localize_script( 'wc-variation-add-to-cart', 'WC_VARIATION_ADD_TO_CART', $vars );
那么您的 AJAX 调用将如下所示:
jQuery.ajax(
url: WC_VARIATION_ADD_TO_CART.ajax_url,
data:
"action" : "woocommerce_add_variation_to_cart",
"product_id" : "124",
"variation_id" : "125",
"quantity" : 1,
"variation" :
"size" : "xl",
"color": "pink"
,
,
type: "POST"
);
基本上,要添加特定变体,除了所有特定选项之外,您还需要该变体的 ID。
最后,woocommerce_add_variation_to_cart
ajax 操作的新回调将类似于以下内容:
add_action( 'wp_ajax_nopriv_woocommerce_add_variation_to_cart', 'so_27270880_add_variation_to_cart' );
function so_27270880_add_variation_to_cart()
ob_start();
$product_id = apply_filters( 'woocommerce_add_to_cart_product_id', absint( $_POST['product_id'] ) );
$quantity = empty( $_POST['quantity'] ) ? 1 : wc_stock_amount( $_POST['quantity'] );
$variation_id = isset( $_POST['variation_id'] ) ? absint( $_POST['variation_id'] ) : '';
$variations = ! empty( $_POST['variation'] ) ? (array) $_POST['variation'] : '';
$passed_validation = apply_filters( 'woocommerce_add_to_cart_validation', true, $product_id, $quantity, $variation_id, $variations, $cart_item_data );
if ( $passed_validation && WC()->cart->add_to_cart( $product_id, $quantity, $variation_id, $variations ) )
do_action( 'woocommerce_ajax_added_to_cart', $product_id );
if ( get_option( 'woocommerce_cart_redirect_after_add' ) == 'yes' )
wc_add_to_cart_message( $product_id );
// Return fragments
WC_AJAX::get_refreshed_fragments();
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();
大多数情况下,我只是复制 WooCommerce 的方法并添加添加变体所需的 2 个变量。完全未经测试,但我希望它有所帮助。
【讨论】:
谢谢。我有2个问题。第一个是我不了解 PHP,所以查看服务器端代码我真的不明白如何将其翻译成客户端 Javascript。 我的第二个问题是上面的代码(以及我在网上找到的它的变体)基本上只将产品 ID 和产品数量添加到购物车中。我要添加到购物篮的那个项目对象(将在用户单击添加到购物车并选择各种项目选项后生成)看起来像这样:name: "", id: "", price: "", photo: "", quantity: "", options: size: "XL", color: "pink", attributeX: "someOtherValue", etc..
。
因此,在我的情况下,仅添加产品 ID 及其数量是不够的,因为每个对象都带有我在 WC UI 中在 Wordpress 仪表板中定义的自定义选项。
我希望这一切对一些人有所帮助。但是,是的,如果您想使用 WooCommerce,您将必须学习一些 PHP。听起来你会想要create a plugin。
我认为我们应该将 $variation_id 和 $variation 变量传递给 woocommerce_add_to_cart_validation 过滤器。 (参考:docs.woothemes.com/wc-apidocs/…)【参考方案2】:
如果有人感兴趣,我还编写了一个“从购物车中删除”功能来应对添加到购物车的情况。我的项目要求在结帐时使用单选按钮,因此我需要添加一个产品并删除它已经存在的替代品:
这是 php:
function remove_from_cart( $product_id )
$cart_contents = WC()->cart->get_cart();
if (empty($product_id)) $product_id = $_POST['product_id'];
foreach ($cart_contents as $product_key => $product)
if ($product['variation_id'] == $product_id)
WC()->cart->remove_cart_item($product_key);
add_action( 'wp_ajax_nopriv_remove_from_cart', 'remove_from_cart' );
然后是 jQuery:
function remove_item_from_cart(product)
var data =
"action" : "remove_from_cart",
"product_id" : product,
;
jQuery.post(WC_VARIATION_ADD_TO_CART.ajax_url, data, function(response)
$(document.body).trigger("update_checkout");
);
php 中的 if(empty)... 是这样,如果需要,我也可以从服务器端调用该函数。
【讨论】:
购物车页面有触发器吗?如:jQuery (function ($) $ (document.body) .trigger ("update_cart"); );这不起作用。谢谢!以上是关于使用 AJAX 向购物车添加变体 - WooCommerce API?的主要内容,如果未能解决你的问题,请参考以下文章
仅在特定产品变体属性中显示Woocommerce购物车中的消息
在 Woocommerce 中的产品自定义循环上启用 Ajax 添加到购物车按钮