How to show up cart icon when added products.

STsuthep
New Member
7 0 0

Hi, I'm using Streamline theme and implemented ajaxify Add to cart, everything going well but found a problem on mobile view when adding products to empty cart the cart icon doesn't show up.

 

Here's my site: https://carabaoenergy.co.uk/

And ajax code that call to cart function.

cartCountSelector:             '.cart-link__count'

$.getJSON(_config.shopifyAjaxCartURL, function(cart) {
              if (_config.cartCountSelector && $(_config.cartCountSelector).length) {
                var value = $(_config.cartCountSelector).html() || '0';
                $(_config.cartCountSelector).html(value.replace(/[0-9]+/,cart.item_count)).removeClass('hide');

 

Thanks

ST

0 Likes
gina-gregory
Shopify Expert
647 37 140

Looks like you need to change your cart selector to '.cart-link__bubble' which is hidden, not the '.cart-link__count' element. You should also change the 'aria-hidden' attribute to false when adding to cart as well. 

I also noticed that your '.cart-link__count' element needs some styling fixes. For example, its text color is the same green as the background so it's not visible even if you unhide it.

0 Likes
STsuthep
New Member
7 0 0

Hi Gina, I follow your suggestion but nothing change. 

0 Likes
gina-gregory
Shopify Expert
647 37 140

You need to also change how you're unhiding the .cart-link__bubble element. It does not have a class of 'hide', so you can't try to remove that class to unhide it. Change to something like this:

$(_config.cartCountSelector).html(value.replace(/[0-9]+/,cart.item_count)).show();
0 Likes
STsuthep
New Member
7 0 0

Could you suggest how can I call to 'cart-link__bubble--visible' from Ajax?

0 Likes
STsuthep
New Member
7 0 0

Changed to

$(_config.cartCountSelector).html(value.replace(/[0-9]+/,cart.item_count)).addClass('cart-link__bubble--visible');

 but still not work

0 Likes