使用AJAX显示购物车中当前有多少种当前产品

Question

真的希望有人能在这里帮助我。

我要实现的是显示一个小图标，显示购物车中有多少当前产品。 例如，用户正在浏览产品页面“新鲜的橘子”，该用户向购物车中添加了2个新鲜的橘子，那么我想在产品页面的某处显示“ 2”。 这是我的代码：

<?php foreach( WC()->cart->get_cart() as $cart_item_key => $values ) {
$_product = $values['data'];    
if( $_product->id == get_the_ID() ) { ?>
    <div class="quantity-in-cart">
        <span><?php echo $values['quantity'] ?></span>
    </div>
<?php } } ?>

如果您刷新产品页面，则可以使用，但是由于我使用的是AJAX，因此用户每次添加产品时都不会刷新整个页面，因此，随着更多产品被添加到购物车中，我需要此数量字段进行更新。

如果有人可以帮助我，我将不胜感激，如有任何疑问，或者我写的东西都没有道理，请告诉我。

Answer 1

我找到了一种解决方法，而无需使用适合我需要的AJAX。

在用户稍后返回产品页面时，在购物车中显示当前产品的编号。 如果为空，将不显示任何内容。

<div class="quantity-in-cart">
<span><?php foreach( WC()->cart->get_cart() as $cart_item_key => $values ) {
    $_product = $values['data'];    
    if( $_product->id == get_the_ID() ) { ?><?php echo $values['quantity'] ?>
<?php } } ?></span>
</div>

因此，如果购物车中没有当前产品，那么该时间段内将不会显示任何产品。 因此，我添加了此JS以添加0：

$span = $(".quantity-in-cart span");
if($span.text() == ""){
    $span.text("0");
}   

现在，在该跨度中设置了默认值0，如果用户将更多当前产品添加到购物车，我们可以通过“添加到购物车”表单将跨度中的数字添加到用户选择的数量编号中。

$(".description .add-to-cart .add_to_cart_button").click(function() {
    $('.quantity-in-cart span').text(parseInt($('.quantity-in-cart span').text()) + parseInt($('.quantity .qty').val()));
});

...我对此感到满意。 如果通过php购物车中没有当前产品，可能有一个更好的方法可以在该范围内获得0，但是我对php不太满意。 只是想着，我会与其他人分享我的变通办法，以防止有人希望实现类似的目标。 我仍然希望了解如何使用WooCommerce的AJAX功能正确完成此操作（可能会使用微型购物车中的一些代码，但我自己对此不太了解。）

Answer 2

我不熟悉您提到的购物车，但是从概念上讲，这就是我的处理方式（我最初评论的选项之一）：

<div class="quantity-in-cart">
    <span data-qty="0" id="qty">0</span>
</div>

<input type="number" value="0" step="1" id="add_qty">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
var qty = $('#qty').data('qty');

$('#add_qty').on('click', function(event){
    $.ajax({
        url: "path/to/your/script.php",
    }).done(function() {
        $('#qty').attr('data-qty', $(this).val() );
        $('#qty').html( $(this).val() );
    });
});

</script>