Добавить класс в div, когда корзина woocommerce пуста

Question

Я хотел бы добавить класс (или непосредственно стилизовать) элемент, который содержит количество корзин ТОЛЬКО, когда корзина пуста.

Ниже приведен код, который я сейчас использую и который отлично работает. Счетчик корзины работает отлично, но цвет не обновляется.

header. php (количество корзин добавлено после значка корзины в меню)

?>          
<div class="counter_bubble">
        <a href="/cart">
            <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>
        </a>
</div>
<?php

функции. php (добавить в очередь javascript + refre cart sh)

// ADD CUSTOM JS FILE FROM CHILD THEME
add_action('wp_enqueue_scripts', 'bubblescript');

function bubblescript() {
    wp_enqueue_script( '_tandt-main', get_template_directory_uri() . 
    '/../Graffont/js/gft-script.js', array("jquery"), $my_js_ver, true );
}

// REFRESH CART FRAGMENTS (ITEM COUNT) SO CORRECT NUMBER IS ALWAYS SHOWN
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;
}

gft-script. js

jQuery(document).ready(function($) {

function changecartbubble() {
    if ($('body').find('#cart-count').length > 0) {
        if (parseInt($('#cart-count').html()) > 0) {
            // cart has number > 0 so cart has items
            //change background class
            $('#cart-count').addClass('other-background-of-bubble');
        }
        else {
            // cart has no number so cart has no items
            //remove background class
            $('#cart-count').removeClass('other-background-of-bubble');
        }
    }
}

});

style. css - Current CSS

.counter {
    background-color: #ff0;
    border-radius: 20px;
    font-size: 10px;
    padding: 0 4px 0 4px;
}

.other-background-of-bubble{
    background-color:red!important;
}

Answer 1

Вы можете вызвать эту функцию при готовности документа и всякий раз, когда корзина обновляется с помощью ajax.

Javascript / jQuery:

function changecartbubble() {
    if ($('body').find('#cart-count').length > 0) {
        if (parseInt($('#cart-count').html()) > 0) {
            // cart has number > 0 so cart has items
            //change background class
            $('#cart-count').addClass('other-background-of-bubble');
        }
        else {
            // cart has no number so cart has no items
            //remove background class
            $('#cart-count').removeClass('other-background-of-bubble');
        }
    }
}

Стиль:

.other-background-of-bubble{
    background:red!important;
}