我有一个自定义的“添加到购物车”按钮使用Ajax在WooCommerce。我在一个固定价格的产品上测试了它，它的工作原理和预期的一样。然而，产品是可定制的，价格将根据它如何定制而变化。我环顾四周，作为PHP和WP/WC开发的新手，我不确定我看到了什么对我有帮助的东西。
我目前在functions.php文件中为我的活动子主题提供了以下两个函数：
add_action('wp_enqueue_scripts', 'enqueue_custom_add_to_cart_scripts');
function enqueue_custom_add_to_cart_scripts() {
if(function_exists('is_product') && is_product()) {
wp_enqueue_script('custom_add_to_cart', get_stylesheet_directory_uri() . '/js/add-to-cart-ajax.js', array('jquery'), '1.0', true);
wp_localize_script('custom_add_to_cart', 'wc_params_custom', array(
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('nonce_custom_atc')
));
}
}
add_action('wp_ajax_custom_add_to_cart', 'custom_add_to_cart');
add_action('wp_ajax_nopriv_custom_add_to_cart', 'custom_add_to_cart');
function custom_add_to_cart() {
$cart_item_key = null;
if (isset($_POST['nonce']) && wp_verify_nonce($_POST['nonce'], 'nonce_custom_atc')
&& isset($_POST['product_id']) && $_POST['product_id'] > 0
&& isset($_POST['quantity']) && $_POST['quantity'] > 0) {
$cart_item_key = WC()->cart->add_to_cart(
intval($_POST['product_id']),
intval($_POST['quantity']),
0,
array(),
array(
'height'=>isset($_POST['height']) ? sanitize_text_field($_POST['height']) : '',
'width'=>isset($_POST['width']) ? sanitize_text_field($_POST['width']) : '',
'totalArea'=>isset($_POST['totalArea']) ? sanitize_text_field($_POST['totalArea']) : '',
'cost'=>isset($_POST['cost']) ? sanitize_text_field($_POST['cost']) : '',
'numPanels'=>isset($_POST['numPanels']) ? sanitize_text_field($_POST['numPanels']) : '',
'enteredHeight'=>isset($_POST['enteredHeight']) ? sanitize_text_field($_POST['enteredHeight']) : '',
'enteredWidth'=>isset($_POST['enteredWidth']) ? sanitize_text_field($_POST['enteredWidth']) : ''
)
);
}
wp_die($cart_item_key ? "Cart item key: {$cart_item_key}" : "Error: not added!");
}我的JS文件看起来像这样：
jQuery( function($) {
if (typeof wc_params_custom === 'undefined')
return false;
const PANEL_WIDTH = 24;
let height = $('.height).val();
let width = $('.width).val();
let totalArea = ((height / 12) * (width / 12)).toFixed(2);
let cost = (totalArea * 7.95).toFixed(2);
let numPanels = width / PANEL_WIDTH;
$('.custom.add-to-cart').on('click', function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: wc_params_custom.ajax_url,
data: {
'action' :'custom_add_to_cart',
'nonce' : wc_params_custom.nonce,
'product_id' : '123',
'quantity' : 1,
'height' : `${height} in.`,
'width' : `${width} in.`,
'totalArea' : `${totalArea} sq ft`,
'cost' : `$${cost}`, // changes based upon height & width input
numPanels,
// These next two fields take their value from the inputs based upon whether it is inches or feet selected. They are not used for any sort of calculation and are only to be passed to the cart for customer info.
'enteredHeight' : '8 ft',
'enteredWidth' : '10 ft'
},
success: function (response) {
$(document.body).trigger("wc_fragment_refresh");
console.log(response);
},
error: function (error) {
console.log(error);
}
});
});
});上面的代码是由一个简单的触发：
<input class="height" type="text" />
<input class="width" type="text" />
<button class="custom add-to-cart">Add to Cart</button>(EDIT：我添加了如何收集维度输入并处理上述两个代码块的计算。）
显然，我不能把它放在后端的产品页面上，所以它必须来自用户输入。我还需要它在购物车页面上显示，以便客户可以看到正确的总数。我还需要totalArea，numPanels，enteredHeight和enteredWidth显示在购物车上。我仍然需要以某种方式将height和width发送到生产团队，但对客户隐藏。字段enteredHeight和enteredWidth只是为了向客户显示他们在定制器页面上输入的尺寸，以免他们混淆。
有没有人知道如何正确显示这些自定义数据以及生产所需的数据？
谢谢你，谢谢
更新：我发现了这篇文章，并试图让它与我的代码一起工作，但我仍然从wp_die()得到Error: not added!。我想我的方向是对的。Adding a product to cart with custom info and price
1条答案
按热度按时间iyzzxitl1#
下面将显示一些自定义购物车项目数据，设置计算的购物车项目价格，并将保存一些自定义购物车项目数据作为自定义订单项目元数据（在订单和电子邮件通知上显示该元数据）。
HTML代码 （带有一点PHP）
PHP代码：
代码放在子主题的functions.php文件中（或插件中）。
JavaScript代码：
代码放在子主题文件夹中的js/custom-add-to-cart.js文件中。