AJAXIFY Add to Cart Doesn't Update the Cart Counter on Header

Highlighted
Tourist
30 0 1

So, I followed Shopify's instructions so that when people add to cart, it doesn't redirect to the Cart page.

However, it doesn't update the cart counter in the header unless I refresh the page.

How can I fix it so it updates the cart without leaving the page?

Followed this:

https://help.shopify.com/themes/customization/products/stay-on-product-page-when-items-added-to-cart

 

0 Likes
Highlighted
Shopify Expert
2684 67 841

Hi Troy,

the quick fix for this is to open your ajaxify-cart.liquid snippet, find this line

    cartCountSelector:             '#CartCount',

and change it to 

    cartCountSelector:             '.CartCount',

because you have class="CartCount" , not id="CartCount" assigned to that element.

The number of the items in cart will update now, but the problem is that the on-hover cart popup is also not updated and it is a bit more difficult.

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
Tourist
30 0 1

Thanks Tim! That's a good solution for now! I figured it would be more complicated for that part.

0 Likes
Highlighted
Shopify Expert
2684 67 841

You know what? Funny thing is that there is already Ajax add-to-cart functionality in the lib.js

And there is a function updateMiniCart() which does exactly what you need :)

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
Tourist
30 0 1

You never cease to amaze me..

I see this function, but im not 100% sure how to add this to my theme. Do I just include the whole like the ajax cart?

0 Likes
Highlighted
Shopify Expert
2684 67 841

If I was doing this, I'd probably try to enable the built-in functionality. You may, however, reuse som parts in your new addition.. Find this code:

            // Update cart count and show cart link.
            $.getJSON(_config.shopifyAjaxCartURL, function(cart) {
              if (_config.cartCountSelector && $(_config.cartCountSelector).size()) {
                var value = $(_config.cartCountSelector).html() || '0';
                $(_config.cartCountSelector).html(value.replace(/[0-9]+/,cart.item_count)).removeClass('hidden-count');
              }
              if (_config.cartTotalSelector && $(_config.cartTotalSelector).size()) {
                if (typeof Currency !== 'undefined' && typeof Currency.moneyFormats !== 'undefined') {
                  var newCurrency = '';
                  if ($('[name="currencies"]').size()) {
                    newCurrency = $('[name="currencies"]').val();
                  }
                  else if ($('#currencies span.selected').size()) {
                    newCurrency = $('#currencies span.selected').attr('data-currency');
                  }
                  if (newCurrency) {
                    $(_config.cartTotalSelector).html('<span class=money>' + Shopify.formatMoney(Currency.convert(cart.total_price, "{{ shop.currency }}", newCurrency), Currency.money_format[newCurrency]) + '</span>');
                  } 
                  else {
                    $(_config.cartTotalSelector).html(Shopify.formatMoney(cart.total_price, "{{ shop.money_format | remove: "'" | remove: '"' }}"));
                  }
                }
                else {
                  $(_config.cartTotalSelector).html(Shopify.formatMoney(cart.total_price, "{{ shop.money_format | remove: "'" | remove: '"' }}"));
                }
              };
            });        

and replace it with this:

            // Update cart count and show cart link.
             updateMiniCart();

Make a backup before trying this -- I was unable to test it thoroughly since your javascipt is inlined in page and my Chrome Developers Tools does not allow to change the main page file.

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
Tourist
26 0 1

Hey Guys,

This is Tamal from HeyCarson Shopify experts.

If you are facing issue with cart counter update and don't want to mess with the Shopify code, you can get the Shopify cart count ajax update fix from our small tasks menu.

Thanks

0 Likes
Highlighted
Shopify Partner
2 0 2

I know this post is outdated but this might help other people looking at it now.

 

To fix the issue you have to replace all the 

.size()

by

.length

 

.size() has been deprecated therefore it cannot verify the statement

Highlighted
Tourist
3 0 1

This is confirmed working. thanks!


@HJNJ wrote:

I know this post is outdated but this might help other people looking at it now.

 

To fix the issue you have to replace all the 

.size()

by

.length

 

.size() has been deprecated therefore it cannot verify the statement


 

Highlighted
New Member
2 0 1

Just within the ajaxify-cart.liquid code it should work? I don't have any

.size() 

and all, but it still does not work. It works when I refresh the page but not instantly

.length