cart items in popup updating only when page is refreshed in woocommerce - woocommerce

Question

i have a cart icon on the header.When the page is scrolled this cart icon is floating in a fixed position.when hover over cart icon the cart contents like name price subtotal all are displaying.now when adding a product the cart count is updating correctly.nut cart contents are updating only after refresh.
code of cart in header.php
<li>
<a href="<?php echo get_template_directory_uri(); ?>/cart"
><i class="uil uil-shopping-cart-alt"></i>
<div>Cart</div></a
>
<span class="counter" id="cart-count"><?php
$cart_count = WC()->cart->get_cart_contents_count();
//echo sprintf ( _n( '%d', '%d', $cart_count ), $cart_count );
echo $cart_count;
?></span>
</li>
updating cart count code in functions.php
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 );
echo $cart_count;
?></span>
<?php
$fragments['#cart-count'] = ob_get_clean();
return $fragments;
}
this is the code displaying when hovering over the cart
<div class="miniBasketContent"><div class="miniBasketHeader">Your basket</div><div class="items"><?php
global $woocommerce;
$items = $woocommerce->cart->get_cart();
$total = $woocommerce->cart->total;
foreach($items as $item => $values) { $_product = wc_get_product( $values['data']->get_id() );$getProductDetail = wc_get_product( $values['product_id'] );$price = get_post_meta($values['product_id'] , '_price', true);?><div class="item"><div class="image"><?php echo $getProductDetail->get_image();?></div><div class="info"><?php echo $_product->get_title();?></div><div class="price"><?php echo $price;?> AED</div></div><?php } ?></div><div class="miniBasketFooter"><div class="info"><div class="total"><span><?php echo $total; ?>AED</span>Total</div>Show basketGo to checkout</div></div></div>
what to do to update cart contents inside popup without reloading page.

Answer 1

You can try the below solution
demo_cart_link() Use this function where you want to display cart count HTML.
function.php
if ( defined( 'WC_VERSION' ) && version_compare( WC_VERSION, '2.3', '>=' ) ) {
add_filter( 'woocommerce_add_to_cart_fragments', 'demo_cart_link_fragment', 10 , 1 );
} else {
add_filter( 'add_to_cart_fragments', 'demo_cart_link_fragment', 10 , 1 );
}
if ( ! function_exists( 'demo_cart_link_fragment' ) ) {
function demo_cart_link_fragment( $fragments ) {
global $woocommerce;
ob_start();
demo_cart_link();
$fragments['a.cart-contents'] = ob_get_clean();
return $fragments;
}
}
if ( ! function_exists( 'demo_cart_link' ) ) {
function demo_cart_link() {
?>
<a class="cart-contents" href="<?php echo esc_url( wc_get_cart_url() ); ?>" title="<?php esc_attr_e( 'View your shopping cart', 'paperfig' ); ?>" type="button" data-toggle="modal">
<i class="fas fa-shopping-basket"></i>
<span class="cart-numbers"><?php echo wp_kses_data( sprintf( _n( ' %d', ' %d', WC()->cart->get_cart_contents_count(), 'paperfig' ), WC()->cart->get_cart_contents_count() ) );?></span>
</a>
<?php
}
}