Cart Count in Header does not appear on initial add

[rjhodges]

Hey guys –

The cart count does not appear when a user adds the first item to the cart without a page refresh.  Your demo also displays this flaw:

https://claue-from-janstudio.myshopify.com/

Please notice when you add an item to an empty cart whether it be with ‘Quick Shop’ or directly from product detail page with the ‘Add to Cart’ button the count does not appear unless you navigate to a different page or hit browser refresh.

However, interestingly enough, once you have refreshed the page and the (1) is visible, adding or removing additional products from the cart does indeed update the count number as it should.

You should be able to readily replicate this error on  your end but just in case not, I have attached three screen captures… the first being on your demo homepage just before clicking ‘Add to Cart’, the second showing the quick cart and that I have indeed added the item, then the third screen capture shows that after clicking off of the quick cart the count still does not appear.  The only way to get it to do so is to refresh the page manually.  Naturally as the issue occurs on  your demos it also happens on my implementation.

Can you provide a line of code, etc. to address and fix this issue?

Great theme so far otherwise…

Thanks!

Ryan

 

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

I checked our demo on Chrome, Firefox on macOS 10.12 it still work well.

Did you try clear cache of browser?

Could you tell me which browser and OS you’re using?

Thank and regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[rjhodges]

Nah, please check your demo again.  The count does not appear on ANY browser upon the INITIAL add(s), it only appears after the page has been manually refreshed with the button in the browser or a user navigates to a new page on your demo site, effectively refreshing the count trigger.

As a matter of fact, from the homepage you can add multiple items to the cart and unless you manually refresh the page the (2) does not appear.  Please see my new attachments.  1. The first screen capture shows an empty bag icon in the upper right with me clicking ‘add to cart’, 2. the second shows that the high waist skirt was added to the cart, 3. the third shows that I’ve clicked off the side cart and the shopping bag still shows no count whilst I’m in the process of adding the backpack, 4. the fourth shows that I have added the backpack, 5. and the fifth is me clicked off of the side cart with 2 items in my cart yet the bag in the upper right still shows no count.  HOWEVER, if I then manually hit the browser refresh page button then the count shows.

The same thing happens if you add products from your product detail page.  Navigate to https://claue-from-janstudio.myshopify.com/collections/bottom/products/cuffed-beanie with an EMPTY bag.  Click add to bag and the (1) will not appear unless you refresh the page manually in the browser.

This is the main url of your demo site that I’m testing: https://claue-from-janstudio.myshopify.com/

I am running Mac OS High Sierra v. 10.13.5 and using Chrome v. 66.0.3359.181 and Safari v. 11.1.1

CSS is my where I’m experienced and absolute not so much with JS so I’m not certain by any means but perhaps this link relates to the problem with the Claue demo template? :  https://ecommerce.shopify.com/c/shopify-apis-and-technology/t/how-do-i-update-the-cart-counter-immediately-via-ajax-268966

Your thoughts?

Thanks,

Ryan

Attachments:

You must be logged in to view attached files.

[rjhodges]

I’ve been trying to solve this on my own as well.  This shopify link also describes exactly what is happening in your theme in case my explanation and multiple screen captures was too confusing to follow :

https://ecommerce.shopify.com/c/shopify-discussion/t/cart-count-auto-update-venture-theme-466295

[Harry]

Hi,

Sorry i check when cart have item and don’t see the issue.

Now I see the issue, please go to Theme Action > Edit Code and navigate to Snippets > header-cart.liquid and delete code in line 5 and line 7

from

{% if cart.item_count > 0 %}
	<span class="pa count bgb br__50 fs__12 cw tc">{{ cart.item_count }}</span>
{% endif %}

to

<span class="pa count bgb br__50 fs__12 cw tc">{{ cart.item_count }}</span>

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[rjhodges]

awesome, thanks!

[Author]

Posts