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

Question

really hoping someone can help me out here.

What I want to achieve is to show a little icon displaying how many of the current product is in the shopping cart. Eg user is browsing the product page "fresh oranges", the user adds 2 fresh oranges to the cart then I want to display "2" somewhere on the product page. Here is my code:

<?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 } } ?>

It's working if you refresh the product page, but since I'm using AJAX so the whole page doesn't refresh every time the user adds a product, I need this quantity field to update as more of this product is added to the cart.

If anyone could help I'd really appreciate it, any questions or if none of what I wrote makes sense please let me know.

Answer 1

I've found a workaround without needing to use AJAX which suits my needs.

Display the number of the current product in the cart in case the user comes back to the product page later. If empty, nothing will display.

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

So if there are none of the current product in the cart, nothing will show up in that span. So I added this JS to add a 0:

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

Now with a default value of 0 set in that span, if the user adds more of the current product to the cart, we can add the number in the span to the quantity number selected by the user via the add to cart form.

$(".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()));
});

...And I'm happy with that. There's probably a better way to get a 0 in that span if there are none of the current product in the cart via php, but I'm not great with php. Just figured I'd share my workaround on the off chance someone is looking to achieve something similar. I would still be interested in seeing how to accomplish this properly using WooCommerce's AJAX functionality (there's probably some code from the mini-cart that could be used but I don't understand it well enough myself.)

Answer 2

I am not familiar with the shopping cart you mention, but conceptually this is how I'd go about it (option one of my initial comment):

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