data-ajax-cart-bind="item_count" not working

[edoardolunardi]

Hey, I'm having issue displaying the number of items in the cart in my header.
The number of items is correctly displayed upon page reload (that is liquid doing), but looks like data-ajax-cart-bind="item_count is ignored/doing nothing.

Below the snipper responsible of rendering what's in the screenshot.

Note: the lib was setup following the official docs (almost everything else works, "almost" since I'm having another couple of issues, but I will open separate issues for the rest)

Thank you!

      <div class="flex items-center gap-16 lg:ml-auto">
        <button class="hidden lg:block">
          {% render 'icon-search', class: 'w-24' %}
        </button>
        <div class="hidden lg:block">
          {% render 'icon-heart', class: 'w-24' %}
        </div>
        {%- if shop.customer_accounts_enabled -%}
          <a
            class="hidden lg:block"
            href="{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.account_login_url }}{%- endif -%}"
          >
            {% render 'icon-account', class: 'w-24' %}
          </a>
        {%- endif -%}
        <button
          onclick="
            document.documentElement.classList.add('js-show-cart-drawer');
            Components.BodyScrollLock.disableBodyScroll();
          "
          class="relative"
        >
          {% render 'icon-bag', class: 'w-24' %}
          <span class="sr-only">Open cart</span>
          <div
            class="absolute right-0 top-0 flex h-12 w-12 items-center justify-center rounded-full bg-purple-75 text-[8px] font-semibold text-white"
          >
            <span data-ajax-cart-bind="item_count">{{ cart.item_count }}</span>
          </div>
        </button>
      </div>

[edoardolunardi]

Related to #95

[edoardolunardi]

Closing as I went with a custom ajax cart.