Jump to content

How to make cart icon quantity not display zero

Recommended Posts

  • Replies 25
  • Views 1.4k
  • Created
  • Last Reply

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!

Link to comment
<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.

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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!

Link to comment

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.

Link to comment

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>

Link to comment

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> 

 

Link to comment

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>

 

 

Link to comment

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>

Link to comment

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;}

Link to comment

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

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.