CODEWITHSUNDEEP
javascriptjquerybigcommerce
Zipotontic
Zipotontic

Reputation: 518

Hiding BigCommerce cart wording with javascript or jquery?

I've installed a badge icon that I would like to show the number of items in the shopping cart.

The problem is that it's for a BigCommerce site and the way the cart count is displayed is "View Cart" along with the number of items in the cart.

I was told there might be a way to hide the "View Cart" portion with javascript or jQuery so I would be able to display the number only. I have no idea how I would do this so would appreciate ideas.

I've attached two screeshots. The first is how it displays currently. The second is how I would like it to display. Also added my code at the bottom. %%GLOBAL_CartItems%% is the BigCommerce global variable that generates the cart count as shown in the first screenshot.

How it is displayed currently: enter image description here

How I would like it displayed: enter image description here

My code:

<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: 20px;"></i><span class="badge badge-info" style="position: relative; top: 18px; right: 13px;">%%GLOBAL_CartItems%%</span></a></span>
</li>

Upvotes: 0

Views: 1308

Answers (2)

thannes
thannes

Reputation: 778

Unfortunately, the script above doesn't accommodate for displaying (0) when there are no items in the cart.

I came across the same issue, where BigCommerce's %%GLOBAL_CartItems%% variable adds item after the amount of items in the user's cart.

The script below to removes items from after the number of items in the cart provided by %%GLOBAL_CartItems%%, and if there are no items when the variable would not return anything, to add (0). 

var num = $('#cartnumber').text().replace(/\D/g, '');
$('#cartnumber').text('( ' + num + ' )');

if ($('#cartnumber').text() == '(  )') {
    $('#cartnumber').text('(0)');
}

Upvotes: 0

Aaron Cicali
Aaron Cicali

Reputation: 1556

<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: 20px;"></i><span id='cart-items' class="badge badge-info" style="position: relative; top: 18px; right: 13px;">%%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>

This should work, but from an idealist perspective it's a dirty hack. This assumes inclusion of jQuery. The first thing I did was to give the container an ID... "cart-items". The javascript then selects that element by ID and removes all non-numeric characters inside of it.

Upvotes: 1

Related Questions