Woocommerce 中的迷你购物车数量变化
Posted
技术标签:
【中文标题】Woocommerce 中的迷你购物车数量变化【英文标题】：Mini cart quantity change in Woocommerce 【发布时间】：2014-10-30 02:27:55 【问题描述】：我已经阅读了有关 woocommerce 的每一个主题，但不知道如何在 Woocommerce MiniCart 中添加一个减号按钮来减少购物车项目的数量（最好使用 ajax）。
我确实设法添加了一个按钮，该按钮使用 woocommerce 短代码和其他几个代码示例来增加数量。但是，我找不到如何减少任何地方的数量。
关于这个有多个问题，没有答案。或者我在错误的目录中搜索。
但是，有人可以给我一个代码示例，说明如何减少开箱即用产品的购物车数量吗？我已经用这些代码行尝试了一个自定义 php 文件：
$cartKey = $_POST['cart_item_key']; //The cart key required by set_quantity method
$cartQty = $_POST['cart_item_qty']; //the quantity I provide in my post
global $woocommerce;
echo $woocommerce->cart->set_quantity($cartKey,$cartQty);
但是通过 AJAX 帖子调用它会给我一个错误（内部服务器错误）。我也尝试以负数添加到购物车，也没有工作。
更新：将此代码添加到 WP 页面模板并调用该页面不再给我错误。但是，调用代码后，它不会更新购物车。
我能做什么？非常感谢，希望有人能在这里提供帮助！
【问题讨论】：
【参考方案1】：好的，所以我想通了。我做了什么：
1：创建一个负责处理AJAX更新购物车的WP页面。我认为你也可以只用一个简单的 PHP 文件来做到这一点，但我现在只是创建了一个自定义 WP 模板。所以我添加了一个名为“template-setquantity.php”的页面模板，其内容如下：
<?php
/**
* Template Name: Request template for Set Quantity
* This page updates mini cart quantity for a product based on the post value
*/
//I dont think this line is needed
global $woo_options;
?>
<html>
<head>
<?php wp_head(); ?>
</head>
<body>
//the cart key stores information about cart
$cartKeySanitized = filter_var($_POST['cart_item_key'], FILTER_SANITIZE_STRING);
//the new qty you want for the product in cart
$cartQtySanitized = filter_var($_POST['cart_item_qty'], FILTER_SANITIZE_STRING);
//update the quantity
global $woocommerce;
ob_start();
$woocommerce->cart->set_quantity($cartKeySanitized,$cartQtySanitized);
ob_get_clean();
wp_footer(); ?>
<?php woo_foot(); ?>
</body>
</html>
使用此模板创建一个 wordpress 后端页面。对于本教程，网址应为：updatecart
现在将 mini-cart.php 从 woocommerce 复制到您的自定义主题。所以我在自定义主题中创建了目录 woocommerce/cart 并将文件 mini-cart.php 复制到此文件夹中
更新 mini-cart.php 模板以添加您的加号和减号按钮以更新迷你购物车中的数量。对我来说，这意味着在每个产品的循环中某处添加以下代码：
<?php
//btn add
echo do_shortcode('[add_to_cart id="'.$cart_item['product_id'].'" show_price="false" btn_text="+" class="btnAdd" ]');
//btn minus, the cart_item_key and $cart_item['.. is available already in scope.
echo '<a class="btnMinus" onClick="updateQty(\''.$cart_item_key.'\','.($cart_item['quantity']-1).')"> - </a>';
?>
所以现在我们已经设置了捕获更新数量请求的页面，并且我们已经为迷你购物车中的每个产品添加了加号和减号按钮。作为最后一步，我们需要创建一个 JS 函数，它做两件事：AJAX 调用我们的 updatecart 模板页面和 AJAX 调用以直观地刷新购物车内容1。
在我的例子中，我将这些函数添加到页脚。正如您在第 4 步中所读到的，onClick 的减号按钮的功能是 updateQty，因此它必须是我们的 JS 函数名称。将以下 JS 代码粘贴到例如您的页脚（请注意我使用 Jquery）：
<script type="text/javascript">
function updateQty(key,qty)
url = 'http://yourdomain.com/updatecart/';
data = "cart_item_key="+key+"&cart_item_qty="+qty;
jQuery.post( url, data ) .done(function( data )
//function updateCartFragment
updateCartFragment();
);
function updateCartFragment()
$fragment_refresh =
url: woocommerce_params.ajax_url,
type: 'POST',
data: action: 'woocommerce_get_refreshed_fragments' ,
success: function( data )
if ( data && data.fragments )
jQuery.each( data.fragments, function( key, value )
jQuery(key).replaceWith(value);
);
if ( $supports_html5_storage )
sessionStorage.setItem( "wc_fragments", JSON.stringify( data.fragments ) );
sessionStorage.setItem( "wc_cart_hash", data.cart_hash );
jQuery('body').trigger( 'wc_fragments_refreshed' );
;
//Always perform fragment refresh
jQuery.ajax( $fragment_refresh );
</script>
我希望这会有所帮助！
注意，在以后的 Woocommerce 版本中，我最好用函数 WC() (http://docs.woothemes.com/wc-apidocs/function-WC.html) 替换全局 $woocommerce
【讨论】：
感谢您分享此解决方案！我无法启动并运行它，您介意分享更多代码示例，例如如何进行 AJAX 调用吗？我希望我可以 pm 你，但没有与你的个人资料相关联的联系信息。提前致谢！干杯，杰伦。 非常感谢！它是一种魅力。为了使其工作，我必须从您的示例中修改一件事是更改$woocommerce->cart->set_quantity() 函数以匹配分配的变量。 （Sani -> 已消毒）。再次感谢您提供明确的答案和示例！干杯
酷，不客气！你对变量的看法是对的，我编辑了我的答案。
嗨，最新版本的 Woocommerce 有没有更简单的解决方案？
@Marcel，模板正文部分缺少起始标记“以上是关于Woocommerce 中的迷你购物车数量变化的主要内容，如果未能解决你的问题，请参考以下文章
WooCommerce - 更改数量触发购物车中的 AJAX 调用