CODEWITHSUNDEEP
javascriptphpjquerywoocommerce
Developer
Developer

Reputation: 230

Showing and not showing the shopping cart item count

Using the following codes, I display the number of products in the shopping cart numerically next to the shopping cart icon.

HTML:

<div class="ico-shop"> 
      <a href="<?php echo wc_get_cart_url(); ?>">
    <button class="ico-shop_btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" class="bi bi-cart4" viewBox="0 0 16 16" >
      <path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l.5 2H5V5H3.14zM6 5v2h2V5H6zm3 0v2h2V5H9zm3 0v2h1.36l.5-2H12zm1.11 3H12v2h.61l.5-2zM11 8H9v2h2V8zM8 8H6v2h2V8zM5 8H3.89l.5 2H5V8zm0 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
    </svg>
    </button>
    <span class="counting_cart_items"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
      </a> 
    </div>

CSS:

.ico-shop button {
    background: none;
    border: none;
    outline: none;
    list-style: none;
    padding-right: 17px;
    border-right: 2px solid #afb1b5;
}

.ico-shop {
    position: relative;
}

.counting_cart_items {
    position: absolute;
    top: 18px;
    right: 3px;
    font-size: 12px;
    background: #52abff;
    color: #fff;
    text-shadow: none;
    padding: 1px 7px;
    border-radius: 50%;
}

PHP (In the function file):

function custom_cart_count_fragments( $fragments ) {
  $fragments[ 'div.cart-totals' ] = '<div class="cart-totals">' . WC()->cart->get_cart_contents_count() . '</div>';
  return $fragments;
}

Result:

enter image description here

But I don't want this number to be displayed when there are no items in the cart. For this purpose, I wrote the following script code, which does not work:

script:

var cart_item = document.querySelector(".counting_cart_items");

$(cart_item).each(function () {
    if ($(this) == 0) {
        $(this).css("display", "none");
    } else {
        $(this).css("display", "block");
    }
});

Is there a way to solve this problem?

Upvotes: 0

Views: 448

Answers (1)

jojo2357
jojo2357

Reputation: 58

Why not something like

<div class="ico-shop"> 
    <a href="<?php echo wc_get_cart_url(); ?>">
    <button class="ico-shop_btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" class="bi bi-cart4" viewBox="0 0 16 16" >
      <path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l.5 2H5V5H3.14zM6 5v2h2V5H6zm3 0v2h2V5H9zm3 0v2h1.36l.5-2H12zm1.11 3H12v2h.61l.5-2zM11 8H9v2h2V8zM8 8H6v2h2V8zM5 8H3.89l.5 2H5V8zm0 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
    </svg>
    </button>
<?php if (WC()->cart->get_cart_contents_count() > 0) { ?>
    <span class="counting_cart_items"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
<?php } ?>
      </a> 
    </div>

Or (only pertinent line included here)

<span class="counting_cart_items" style="display: <?php echo (WC()->cart->get_cart_contents_count() > 0 ? "block" : "none"); ?>><?php echo WC()->cart->get_cart_contents_count(); ?></span>

Alternatively, you could give the span an ID, then use document.getElementByID(<id>).style.display = <block/none>. I suspect $(this) == 0 may also not be working as you intend it to. I would need more information to comment on how to do more in JS

Upvotes: 1

Related Questions