Venue Theme: Add item count to header cart icon

Solved
Highlighted
Tourist
3 1 1

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.

Highlighted
Shopify Partner
9580 1201 3358

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.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
3 1 1

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

0 Likes
Highlighted
Shopify Partner
9580 1201 3358

@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?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
New Member
2 0 1

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?

Highlighted
Shopify Partner
9580 1201 3358

@SIVASUBRAMANIAN 

Thanks

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
3 1 1

This is an 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">

 

,

0 Likes
Highlighted
New Member
2 0 1

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">

 

0 Likes