How to make cart icon quantity not display zero

Site URL: https://www.deprio.com/cart

Hi! I wanted to see if there is a way to make the cart icon quantity label not display zero when there is nothing in the cart and only display numbers (1+) when there are items in the cart.  I am using Squarespace 7.1.

Thanks!

if ($('span.sqs-cart-quantity').html() == 0) {
  $('span.sqs-cart-quantity').html('');
}

Hi, I added the code(between the script labels) in the code injection header, but my cart still has the zero label.  I did also add the jQuery 3.x minified code before it.  Please let me know if I'm doing something wrong, thanks!

<script>
$(document).ready(function() {
  if ($('span.sqs-cart-quantity').html() == 0) {
    $('span.sqs-cart-quantity').html('');
  }
});
</script>

Leave the jQuery script in the header, remove the other one, and put that in the footer.

You actually shouldn't need the document ready in the footer, you can try it both ways.

I removed and placed the second script in the footer and also tried it with the document ready code, but the cart label still shows zero.  Is there something else I can try?  Thanks!

7 minutes ago, abry747 said:

I removed and placed the second script in the footer and also tried it with the document ready code, but the cart label still shows zero.  Is there something else I can try?  Thanks!

I see you used some duplicated jquery code. Remove some.

Quote

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

and these

Quote

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Ugh, sorry, I missed the end ); when I copied the code. Fixed the post above. Keep document.ready

I deleted the duplicated jQuery and used the updated Document.ready code in the footer but it didn't work.  When I placed the document.ready code in the header, the zero label did not show on the cart page, but it shows up on the cart icon on other pages.  Is there a way to make the zero label not show on all pages?  Thanks!

Try opening in a private or incognito window. It is functioning properly on all pages and mobile on my end.

You're right, it's on all pages.  I'm seeing the zero because when you add an item in the cart and remove it, the zero is then displayed and stays on all pages.  Not sure if this can be fixed.  Thanks!

Whats the password to the store?

pw: deja

You still have multiple jquery scripts. I think you have different codes fighting each other.

Unless you have code that requires older versions of jQuery, the only one you need is 3.5

Right now it seems like you have a total of 3.

I deleted another.  Here is my current code below for header/footer of code injection.  I'm still getting the same result.  Thanks!

HEADER

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<script>
$(document).ready(function() {
  if ($('span.sqs-cart-quantity').html() == 0) {
    $('span.sqs-cart-quantity').html('');
  }
});
</script>

<script>
$(document).ready(function(){
  $(".sqs-add-to-cart-button").one("click", function(){
    $("<a class='checkoutbutton' href='/commerce/show-cart'>SHOPPING CASE CHECKOUT</a>").insertAfter(".sqs-add-to-cart-button");
});
  });
</script>

FOOTER

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
<script>

  $(".Cart-inner").append("<i class='fa fa-suitcase' aria-hidden='true'></i>");
</script>

Try removing jQuery from footer.

Unless your code specifically requires the older versions, all you need is 3.5

I removed the jQuery from the footer, but then the suitcase cart icon disappears and only the zero label remains.

Can you please repost all of your code, or screen shots of the code area.

Oh I see, you deleted too much from the footer.

Put this back:

<script>
  $(".Cart-inner").append("<i class='fa fa-suitcase' aria-hidden='true'></i>");
</script> 

Sure, here is all the current code for the header and footer of code injection.

HEADER

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<script>
$(document).ready(function() {
  if ($('span.sqs-cart-quantity').html() == 0) {
    $('span.sqs-cart-quantity').html('');
  }
});
</script>

<script>
$(document).ready(function(){
  $(".sqs-add-to-cart-button").one("click", function(){
    $("<a class='checkoutbutton' href='/commerce/show-cart'>SHOPPING CASE CHECKOUT</a>").insertAfter(".sqs-add-to-cart-button");
});
  });
</script>

FOOTER

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

  $(".Cart-inner").append("<i class='fa fa-suitcase' aria-hidden='true'></i>");
</script>

I just added "<script>" in the footer and now the suitcase is visible.  Here is the current footer code below..

FOOTER

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<script>
  $(".Cart-inner").append("<i class='fa fa-suitcase' aria-hidden='true'></i>");
</script>

Is this 7.0 or 7.1? If its 7.0 are you using ajax loading?

I'm using 7.1

I do not know why this isn't running when the page reloads.

I would try putting it back in the footer now that the jQuery scripts are fixed.

I'm not sure if there is another issue that is throwing it off.  I've decided to just use this css below to get rid of the quantity labels on the other pages.  I appreciate all your help.

header#header .icon-cart-quantity {visibility:hidden;}

Here’s an article I wrote to explain how to hide the shopping cart icon when the cart is empty. 

@paul2009 got us going in the right direction! Cool trick for sure!

@abry747 this is the CSS that should do what you want. Remove the other codes we were working on.

a.icon--cart[aria-label^="0 items in cart"] .sqs-cart-quantity{
  visibility: hidden;
}