CODEWITHSUNDEEP
phpajaxwordpresswoocommercecart
tobiasg
tobiasg

Reputation: 1073

Refresh / update minicart with AJAX in Woocommerce

I’m trying to add this code to my WooCommerce setup that adds a shopping cart link wherever I put the PHP and then updates it upon changing items in the cart with AJAX: https://docs.woocommerce.com/document/show-cart-contents-total/

Here are the snippets:

HTML - PHP:

<a class="cart-customlocation" href="<?php echo wc_get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"><?php echo sprintf ( _n( '%d item', '%d items', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?> - <?php echo WC()->cart->get_cart_total(); ?></a>

In functions.php file:

function woocommerce_header_add_to_cart_fragment( $fragments ) {
    global $woocommerce;

    ob_start();

    ?>
    <a class="cart-customlocation" href="<?php echo esc_url(wc_get_cart_url()); ?>" title="<?php _e('View your shopping cart', 'woothemes'); ?>"><?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?> - <?php echo $woocommerce->cart->get_cart_total(); ?></a>
    <?php
    $fragments['a.cart-customlocation'] = ob_get_clean();
    return $fragments;
}

But the AJAX is not working. Is the second snippet all I need to add to the functions.php?

It feels like I should call the function and not just define it?

Or do I need to activate AJAX in general in some way to get it to work?

Upvotes: 3

Views: 30887

Answers (3)

Magalie Chetrit
Magalie Chetrit

Reputation: 75

Here's my 2022 version.

I hope this helps someone.

in the header.php:

<a class="custom-cart-contents" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( ' View your shopping cart' ); ?>"><span class="cart-counter"></span></a> 

<div class="mini-cart-total"><?php woocommerce_mini_cart(); ?></div>
  1. I altered my classname on the anchor tag. If you have a child theme or woocommerce changes it setup it may not take your custom code.
  2. No need for an echo on woocommerce_mini_cart(); The functions will display the mini cart.
  3. Simply define a span.class and handle the rest of the logic in functions.php with the hook woocommerce_add_to_cart_fragments

Which can look like this:

functions.php

/*
* Cart Counter
*
*/
function cart_count_fragments( $fragments ) {
    global $woocommerce;
    $count = $woocommerce->cart->cart_contents_count;

    $fragments['.cart-counter'] = '<span class="cart-counter">Cart(' . $count . ')</span>';
    return $fragments;
}
add_filter( 'woocommerce_add_to_cart_fragments', 'cart_count_fragments', 10, 1 );

Short explanations:

  1. It finds the class .cart-counter which we defined in the header.php
  2. I still don't know why <span class="cart-counter"></span> is needed when we define it in the header as well. That doesn't seem very DRY to me, but if I take it out AJAX doesn't work. So I've left it in.

Upvotes: 0

Pedram
Pedram

Reputation: 16575

2022 Solution

Woocommere display realtime counter and minicart with ajax

First display your counter and mini cart contents in where you want like header.php or etc like this:

<div class="basket-item-count">
  <span class="cart-items-count">
  <?php
    echo WC()->cart->get_cart_contents_count();
  ?>
</span>
</div>

This will be display standalone counter that you want to have beside cart icon.

<div class="widget_shopping_cart_content">
   <?php
     echo woocommerce_mini_cart();
   ?>
</div>

This will be display mini cart items. by default woocommerce will be update your mini cart items in fragments but you need to append your counter to this fragment like below, so add this snippet to your functions.php:

add_filter( 'woocommerce_add_to_cart_fragments', 'cart_count_fragments', 10, 1 );

function cart_count_fragments( $fragments ) {
    $fragments['div.basket-item-count'] = '<div class="basket-item-count"><span class="cart-items-count">' . WC()->cart->get_cart_contents_count() . '</span></div>';
    return $fragments;
}

Note that class names are important and it will be update counter with cart-items-count class.

Upvotes: 6

LoicTheAztec
LoicTheAztec

Reputation: 253867

The filter hook woocommerce_add_to_cart_fragments is missing from your function…

To get it work, it should be:

add_filter( 'woocommerce_add_to_cart_fragments', 'header_add_to_cart_fragment', 30, 1 );
function header_add_to_cart_fragment( $fragments ) {
    global $woocommerce;

    ob_start();

    ?>
    <a class="cart-customlocation" href="<?php echo esc_url(wc_get_cart_url()); ?>" title="<?php _e('View your shopping cart', 'woothemes'); ?>"><?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?> - <?php echo $woocommerce->cart->get_cart_total(); ?></a>
    <?php
    $fragments['a.cart-customlocation'] = ob_get_clean();

    return $fragments;
}

Code goes in function.php file of your active child theme (or active theme). Untested.

Upvotes: 3

Related Questions