Venue Theme: Add item count to header cart icon

[mendowebdesign]

Hello, I'm wondering if anyone can offer some advice. I'm working with Venue Theme and for the life of me, cannot get the cart icon to do what I want. I'd like for the icon to show the number of items in the cart.

I've added {{cart.item_count}} to my header.liquid and was able to have the correct number of items display. However, if I add an item to the cart, the number stays the same until I refresh the page. Once the page is refreshed, the correct number of items are displayed next to the icon. I'm aware that this is an ajax issue and have searched to no avail for an answer. Thank you in advance.

[KetanKumar]

Hello, @mendowebdesign 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

[mendowebdesign]

Thank you so much for the welcoming @KetanKumar!  I sure would appreciate your input! The site url is: https://shopmoonlady.com/

[KetanKumar]

@mendowebdesign 

I need your store login details. Yes, I know your login details are confidential. For this second option, I have added your store to my Shopify partner account so I will check your code easily and manage what you think about it?

[SIVASUBRAMANIAN]

Dear Ketan, I am using venture theme. I have removed the cart indictaor and added cart count display. But cart count display is updated only after i refresh the page. I would like to have it to show updated once i click add to cart button without refreshing the page. Can you help on it? my store is RVS Food Products. How to PM you the password?

[KetanKumar]

@SIVASUBRAMANIAN 

Thanks

if you have any queries and issues please feel free to contact me here.
Email: bamaniyaketan.sky@gmail.com
Skype: bamaniya.sky

[mendowebdesign · Accepted solution]

Hello @SIVASUBRAMANIAN,

I'm also using Venue Theme and I finally figured out the solution to having the cart notification show the updated cart count without refreshing the page. You can view the code below. Be sure to change the first "if cart.item_count" is set to ">1" and the second is set to ">-1". I left the "Search" code in so you could see where in your header.liquid to begin making changes. Let me know if you have any questions.

    {% if settings.search_enable %}
        <div class="header-trigger header-trigger--right search-draw-trigger-icon u-flex u-flex--middle js-search-draw-icon" style="display: none">
            <a href="{{ routes.search_url }}" class="header-trigger__link header-trigger__link--search icon-fallback js-search-trigger js-no-transition">
                <i class="icon icon--search" aria-hidden="true"></i>
                <span class="icon-fallback__text">{{ 'layout.navigation.search' | t }}</span>
            </a>
        </div>
    {% endif %}
    <div class="header-trigger header-trigger--far-right cart-draw-trigger-icon u-flex u-flex--middle js-cart-draw-icon" style="display: none;">
        <a href="{{ routes.cart_url }}" class="header-trigger__link header-trigger__link--cart icon-fallback{% if cart.item_count > 1 %} js-cart-full{% endif %}{% if settings.cart_type == 'modal' %} js-cart-trigger js-no-transition{% endif %}">
            <i class="icon icon--cart" aria-hidden="true"></i>
            <span class="icon-fallback__text">{{ 'layout.navigation.cart' | t }}</span>
        </a>
    	{% if cart.item_count > -1 %}           
  			<span id="CartCount" style="margin-left: -14.25px; margin-top: 4px; font-size: 12px;">{{cart.item_count}}</span>
		{% endif %}
    </div>

    <div class="header-navs js-heaver-navs u-clearfix u-hidden@tab-down">

,

[SIVASUBRAMANIAN]

Hello @mendowebdesign after I changed my header like below. My cart icon totally disappeared from the header. Are you using Venture theme? If so nothing to change in the theme.js ?

 <div class="header-trigger header-trigger--far-right cart-draw-trigger-icon u-flex u-flex--middle js-cart-draw-icon" style="display: none;">
        <a href="{{ routes.cart_url }}" class="header-trigger__link header-trigger__link--cart icon-fallback{% if cart.item_count > 1 %} js-cart-full{% endif %}{% if settings.cart_type == 'modal' %} js-cart-trigger js-no-transition{% endif %}">
            <i class="icon icon--cart" aria-hidden="true"></i>
            <span class="icon-fallback__text">{{ 'layout.navigation.cart' | t }}</span>
        </a>
    	{% if cart.item_count > -1 %}           
  			<span id="CartCount" style="margin-left: -14.25px; margin-top: 4px; font-size: 12px;">{{cart.item_count}}</span>
		{% endif %}
    </div>

    <div class="header-navs js-heaver-navs u-clearfix u-hidden@tab-down">