使用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>