Badge icon partially disappearing when number is < 1

Question

I'm using a badge icon to display the number of cart items. It works great when the number is 1 or more but if there are no items in the cart, it doesn't display zero, but rather half of it disappears. I've posted screenshots of what it looks like with a value of 1+ and then what it looks like when the cart is empty. Further, even after an item is added to the cart, the badge doesn't pop up with the number until refreshing or going to the next page after the item has been added.

I'm thinking I probably have to add more script but just learning and not sure how I would do this.

To give the full picture: This is a BigCommerce site so the cart info is generated by an internal server. It is referenced by variable %%GLOBAL_CartItems%% (in code below) and normally displays as a text string, "View Cart.." along with the total number of items in the cart. Since I only want the number, I added script that replaces the text with numeric values only. I've included both the HTML and script below.

What it looks like with 1 or more in cart:

enter image description here

What it looks like with no items in cart:

enter image description here

<li style="display:%%GLOBAL_HideCartOptions%%">
    <span><a href="%%GLOBAL_ShopPathNormal%%/cart.php" title="%%LNG_ViewCart%%"><i class="icon-large sprite-glyphicons_halflings_115_shopping-cart2x icon-2x" style="position: relative; top: 14px; right: 16px;"></i><span id='cart-items' class="badge badge-info" style="position: relative; top: 18px; right: 17px;">%%GLOBAL_CartItems%%</span></a></span>
</li>

<script type='text/javascript'>
   var $cart_items = $('#cart-items');
   $cart_items.text($cart_items.text().replace(/[^0-9]/g, ''));
</script>

Badge CSS:

.badge {
  padding: 1px 9px 2px;
  font-size: 10.998px;
  font-weight: bold;
  line-height: 14px;
  color: #ffffff;
  vertical-align: baseline;
  white-space: nowrap;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #999999;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
}

Why it's moved on the right? Is there something else (more) on its left that _pushes_
I thought about this as well. I don't think it's what is the issue however. I've tried to move it around and it still looks the same. I think it's something having to do with the way I've had to force displaying only the number portion of the BigCommerce global CartItems variable. Maybe it's trying to hide when the number is 0 or less but BigCommerce is generating 'View Cart' preventing it from hiding all the way....? — Zipotontic, Oct 22 '13 at 20:21

score 0 · Answer 1 · answered Oct 22 '13 at 10:59

0

Add the folowwing CSS to your styleshtee file or add it inline

.cart-items {
  display:block;
  min-width:25px;
}

answered Oct 22 '13 at 10:59

Ahmad

1,913
13
21

This works fabulously actually, however, I now realize having a cart icon without a number in it is not that cool looking. As said in my comment below to Fazi, I am now thinking I should try to figure out how to hide the icon and only show it when the cart-items are equal or great than 1. I imagine it would be done by adding more script to my already existing script above. However, I have no idea how I would do this. Any ideas? – Zipotontic Oct 22 '13 at 20:18
Also, I forgot to mention: Altho, as I said, I don't love the empty badge, i wanted to clarify on how I ended up using your idea in case this post is helpful to anyone else. Using your code above, resulted in the badge looking like a flat line and aligning itself underneath my cart icon. I changed it to inline-block. Also, min-width is unecessary but it does need min-height, I gave it min-height: 11px; Thanks anyway for the idea, would work great under different circumstances. Appreciate your help!! – Zipotontic Oct 22 '13 at 20:33

score 0 · Answer 2 · answered Oct 22 '13 at 11:03

0

I suspect that the html(or its css at least) of the badge icon is responsible for its disappearance, as in it is not correctly put together.Post a code sample, and we will try to fix it. As for the number not being updated until refresh, my first question would be do you capture the event when a buyer puts something in the cart? That would be the time to update the number, say like:

$("#cart").on('update', undefined, cart.NumberOfItems, updateBadgeIcon);

function updateBadgeIcon(event)
{
    var newNumber = event.Data;
    $('#badgeNumber').html(newNumber);
};

Take a look at jQuery documentation, and jQuery on method.

answered Oct 22 '13 at 11:03

Fazi

3,909
4
27
23

Thank you for your response. I am unsure I know when the event is captured exactly. Sorry, I'm new to this & not sure how BigCommerce handles the add-to-cart scenario in the back end. I can tell you the badge icon does react immediately when items are removed from the cart but when they are added, it doesn't change until the page refresh. I think the best thing to do would be to just have it appear when cart-item is equal/greater than 1. I attempted the answer from Ahmad above and, while it does work, I now realize having an icon without a number isn't exactly ideal. Can you help me with this? – Zipotontic Oct 22 '13 at 20:12
I just added the badge CSS as you requested. Thanks again for your help! – Zipotontic Oct 22 '13 at 21:01

score 0 · Accepted Answer · answered Oct 27 '13 at 22:36

Figured out the answer to my own issue: turns out I was missing some CSS for the badge:

    .badge:empty { 
        display: none; 
     }

Guess I thought this would be in the bootstrap already...either I erroneously deleted it somehow or maybe it just needed to be added. Either way, problem solved.

Badge icon partially disappearing when number is < 1

3 Answers3