Question 278015 in Shopify Question posted in
The Shopify help center can be found here.

Shopify cart.item_count with text dynamic update

I’m currently practicing how to edit the Shopify template, and I’d like to display the current cart.item_count next to the text. It’s working, and it correctly identifies the current item count, but I need to refresh the page to see the updated count. How can I make the output display dynamically?

on my product-template.liquid

{% if cart.item_count == 0 %}
  Your cart is empty.
    {% else %}
      {%- if settings.cart_count -%}
        <span>
            {%- if cart.item_count <= 99 -%}
        <span id="cart-item-text"></span>
      {%- else -%}
        99+ items are in your cart
      {%- endif -%}
        </span>
    {%- endif -%}
{% endif %}

and on my custom.js

$(document).ready(function() {
  function updateCartItemCount() {
    $.ajax({
      type: 'GET',
      url: '/cart.json',
      cache: false,
      dataType: 'json',
      success: function(cart) {
        const itemCount = cart.item_count;
        const textElement = $('#cart-item-text');
        const text = itemCount === 1 ? 'item is' : 'items are';

        // You can modify the text as needed to suit your store's language and design
        const dynamicText = itemCount + ' ' + text + ' in your cart';

        textElement.text(dynamicText);
      }
    });
  }

  updateCartItemCount();
  Shopify.onCartUpdate = updateCartItemCount;
});
Tags:

2

Answers


  1. 0

    It looks like you’ve got the right idea, but you’ve got an issue with how updateCartItemCount is called.

    You are calling the function when the document is ready and you are overwriting the Shopify.onCartUpdate function. This means that any existing references to Shopify.onCartUpdate will call your function, but you haven’t preserved the original function.

    You could preserve it by doing something simple like

    ...
updateCartItemCount();

var oldOnCartUpdate = Shopify.onCartUpdate;
Shopify.onCartUpdate = function () {
    oldOnCartUpdate();
    updateCartItemCount();
}

    Please view this example as one way to preserve the original function and not an actual solution. Based on the updateCartItemCount function this solution would cause some race conditions and your cart count might update correctly half of the time.

    I would recommend trying to find a way to hook into your themes cart update functionality. Identify functions that change cart quantity without refreshing the page and tack your update onto those functions.

    Login or Signup to reply.
  2. 0

    You can use the Shopify Cart API to retrieve the current cart info, including the item count, without having to refresh the page.

    First, you need to modify your template code to include a placeholder for the item count:

    {% if cart.item_count == 0 %}
  Your cart is empty.
{% else %}
  {%- if settings.cart_count -%}
    <span>
      <span id="cart-item-text">{{ cart_item_count }}</span>
      items are in your cart
    </span>
  {%- endif -%}
{% endif %}

    Then, in your custom.js file, you can use the Shopify AJAX Cart API to retrieve the current cart information and update the placeholder dynamically:

    $(document).ready(function() {
  function updateCartItemCount() {
    Shopify.cart.getCart(function(cart) {
      const itemCount = cart.item_count;
      const textElement = $('#cart-item-text');
      const text = itemCount === 1 ? 'item is' : 'items are';

      const dynamicText = itemCount + ' ' + text + ' in your cart';

      textElement.text(dynamicText);
    });
  }

  updateCartItemCount();
  Shopify.onCartUpdate = updateCartItemCount;
});

    Now, every time the cart is updated (e.g. a new item is added or removed), the item count will be updated dynamically without the need to refresh the page.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search