3

I have the ajax script enqueued, but I can't seem to get the cart items count updated without refreshing the page.

Functions:

// Add scripts and stylesheets
function startwordpress_scripts() {
    wp_enqueue_style( 'reset', get_template_directory_uri() . '/reset.css' );
    wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'style', get_template_directory_uri() . '/veggiee.css');
    wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', array(), null, true);
}

function woocommerce_header_add_to_cart_fragment( $fragments ) {
    global $woocommerce;

    ob_start();

    $fragments['a.cart-customlocation'] = ob_get_clean();
    return $fragments;
}
add_filter( 'woocommerce_add_to_cart_validation', 'is_product_the_same_cat', 10, 3 );

HTML:

<ul>
<li>
<a href="/cart" id="cart_icon"></a></li><li><span class="counter"> 
<?php echo sprintf ( _n( '%d', '%d', WC()->cart>get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?></span></li>
<li id="access"><?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?></li>
</ul>

I have researched the problem and as far as I can see the basket total should update straight away without a refresh.

Does anyone have any idea what I'm missing here?

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
Remco
  • 361
  • 2
  • 18

1 Answers1

8

There is some mistakes and missing things in your code. For the cart item count in your header the following will solve the problem.

1) The HTML code in your header.php file:

<ul>
    <li>
        <a href="/cart" id="cart_icon"></a>
    </li>
    <li>
        <span class="counter" id="cart-count"><?php
        $cart_count = WC()->cart->get_cart_contents_count();
        echo sprintf ( _n( '%d', '%d', $cart_count ), $cart_count );
        ?></span>
    </li>
    <li id="access"><?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?></li>
</ul>

2) Your related hooked function code to enable cart item count Ajax refreshed:

add_filter( 'woocommerce_add_to_cart_fragments', 'refresh_cart_count', 50, 1 );
function refresh_cart_count( $fragments ){
    ob_start();
    ?>
    <span class="counter" id="cart-count"><?php
    $cart_count = WC()->cart->get_cart_contents_count();
    echo sprintf ( _n( '%d', '%d', $cart_count ), $cart_count );
    ?></span>
    <?php
     $fragments['#cart-count'] = ob_get_clean();

    return $fragments;
}

Code goes in function.php file of your active child theme (or active theme). Tested and works.

Related: Ajaxify the cart items count in Woocommerce

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
  • 1
    That works beautifully, thanks for this. I'll compare the code to what I have so i can actually understand what I am missing. Thanks. – Remco Aug 25 '18 at 22:42
  • 1
    @Remco Just added an "Id" to the `` tag, cleaned some typo errors, added the hook to your function and added the related code to be refreshed inside the function… See this related thread: [Ajaxify the cart items count in Woocommerce](https://stackoverflow.com/questions/51123903/ajaxify-the-cart-items-count-in-woocommerce/51126271#51126271) – LoicTheAztec Aug 25 '18 at 22:48
  • Thats very helpful, thanks. I got my initial code from https://docs.woocommerce.com/document/show-cart-contents-total/ and your explanation is really helpful for any future projects. Many thanks. Also, thanks for editing my question... this helps me to improve any future questions. – Remco Aug 25 '18 at 22:50
  • I think I've upvoted that too, no? Or am I missing an upvoting feature? – Remco Aug 25 '18 at 22:55
  • 1
    @Remco I mean this one: [Ajaxify the cart items count in Woocommerce](https://stackoverflow.com/questions/51123903/ajaxify-the-cart-items-count-in-woocommerce/51126271#51126271) but just if you want/like. Thank you :) – LoicTheAztec Aug 25 '18 at 23:03