How to Show the cart item count in motion theme

[AvidBrio]

Hi,

I need to show the cart item count value in header section right side of the cart icon

[AvidBrio]

Here is a solution: you can add this code into theme files.

Output :

need to add the j query in your theme layout/theme.liquid

// add the  jquery cdn  before the  tag close

add code into the section/header.liquid OR add this html code any where you want to add

({{ cart.item_count }})

add code into theme.js
starting of the file or before the function calling

function get_cartitems() {
  setTimeout(function(){
		$.getJSON('/cart.js', function(cart){ 
			var result_ic = cart.item_count;
      $('[data-cart-count]').text("("+ result_ic +")");
			console.log("get item in cart ",result_ic);
		});
	},300);
}

find the add cart function and cart update int theme.js or any relevant JavaScript files

call the JavaScript function

var data = theme.utils.serialize(this.form);
  
        fetch(theme.routes.cartAdd, {
          method: 'POST',
          body: data,
          credentials: 'same-origin',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-Requested-With': 'XMLHttpRequest'
          }
        })
        .then(response => response.json())
        .then(function(data) {
          if (data.status === 422) {
            this.error(data);
          } else {
            var product = data;
            this.success(product);

            // sm cart added
            console.log(product);
            console.log("item added successfully call the item count method");
            //call the item count method
            get_cartitems();

          }

call the item count method

get_cartitems();

[EvinceDev]

Hello AvidBrio,

Can you please add “{{ cart.item_count }}” inside cart count span or div element.

[AvidBrio]

@EvinceDev this is not updating all cart event i fixed the issue you can see the my post