Price in header cart is not updating without refresh

Rikardions
New Member
1 0 0

Hello,

I have this problem, that when I add a item to cart, quantity goes up, but price doesn't. Only after I refresh the page, I see the correct price and quantity.

And also, although quantity goes up, the word "item" or "items" disapears, and comes back only after refresh.

For example, empy cart will say : "0 Items $0.00" as it should.

Then I add an item to cart and cart will say "1 $0.00".

And only after refresh the cart will say the correct "1 Item $40.00".

What is causing this issue? I am using Ajax api to update these prices.

Here is my header.liquid code: 

<div class="header-section" data-section-id="{{ section.id }}" data-section-type="header-section">
 
 
  <header{% if section.settings.full_width_header %} class="gridlock-fluid"{% endif %}>
    {% if section.settings.full_width_header %}<div class="row">{% endif %}
    <div id="identity" class="row">
      <div id="logo" class="{% if section.settings.logo_center %}desktop-4 desktop-push-4 tablet-6{% else %}desktop-4 tablet-3{% endif %} mobile-3">
        {% if section.settings.logo != blank %}
        {%- assign image_size = '600x' -%}
        <a href="https://vintagesteal.com/">
          <img src="{{ section.settings.logo | img_url: image_size }}" alt="{{ section.settings.logo.alt | default: shop.name }}" itemprop="logo">
        </a>
        {% else %}
        <a href="https://vintagesteal.com/">{{ shop.name }}</a>
        {% endif %}
      </div>
      
      
        <div class="desktop-4 tablet-hide mobile-hide">
          <div class="desktop__search--bar ">
          {% if section.settings.show_search %}
          <div class="searchbox">
            <form action="/search" method="get">
              <input type="text" name="q" id="q" placeholder="{{ 'general.search.placeholder' | t }}" />
              <button type="submit" class="desktop__search--button"><i class="fa fa-search"></i></button>
            </form>
          </div>
          {% endif %}
        </div>
      </div>
 
      <div class="desktop-4 {% if section.settings.logo_center %}tablet-6{% else %}tablet-3{% endif %} mobile-3">
        
        <ul id="cart"{% if section.settings.logo_center %} class="tablet-3"{% endif %}>
          {% if shop.customer_accounts_enabled %}
          <li>
            <a href="/account"><i class="fa fa-user"></i></a>
          </li>
          {% endif %}
          {% if settings.show_multiple_currencies %}
          <li>{% include 'currencies-switcher' %}</li>
          {% endif %}
 
          <li class="cart-overview cart__desktop">
            <a href="/cart"  {% if settings.ajax_cart_method == 'drawer' %} class="site-header__cart-toggle js-drawer-open-right" aria-controls="CartDrawer" aria-expanded="false"{% endif %}>
              {% comment %}
              <span class="cart-words">{{ 'cart.general.title' | t }}</span>
              {% endcomment %}
              {% if section.settings.cart_icon == 'cart' %}<i class="fa fa-shopping-cart" aria-hidden="true"></i>{% elsif section.settings.cart_icon == 'bag' %}<i class="fa fa-shopping-bag" aria-hidden="true"></i>{% endif %}
              <span class="CartCount">{{ cart.item_count }} {{ cart.item_count | pluralize: 'item', 'items' }}</span>
              <span class="cart-original-total money">{{ cart.total_price | money }}</span> 
              
            </a>
          </li>
        </ul>
<ul id="social-links"{% if section.settings.logo_center %} class="tablet-3"{% endif %}>
          {% if section.settings.show_social_icons %}
          {% include 'social-icons' %}
          {% endif %}
        </ul>
        
      </div>
    </div>
    {% if section.settings.full_width_header %}</div>{% endif %}
  </header>
 
  {%- if section.settings.show_announcement_text -%}
  <div id="top-bar"{% if section.settings.full_width_header %} class="gridlock-fluid"{% endif %}>
    {% if section.settings.full_width_header %}<div class="row">{% endif %}
    <div class="row">
      <div class="desktop-12 tablet-6 mobile-3">
        {%- if section.settings.announcement_link -%}
        <a href="{{ section.settings.announcement_link }}">
          {{ section.settings.announcement_text }}
        </a>
        {%- else -%}
        {{ section.settings.announcement_text }}
        {%- endif -%}
      </div>
    </div>
    {% if section.settings.full_width_header %}</div>{% endif %}
  </div>
  {%- endif -%}
 
  {% include 'navigation' %}
  
  
  <div class="mobile__menu">
    <div class="row">
      <div class="desktop-hide tablet-half mobile-half">
        <li class="shifter-handle"><i class="fa fa-bars" aria-hidden="true"></i></li>
      </div>
      <div class="desktop-hide tablet-half mobile-half">
        <li class="cart-overview">
          <a href="/cart" {% if settings.ajax_cart_method == 'drawer' %}class="site-header__cart-toggle js-drawer-open-right" aria-controls="CartDrawer" aria-expanded="false"{% endif %}>
            {% comment %}
            <span class="cart-words">{{ 'cart.general.title' | t }}</span>
            {% endcomment %}
            
             {% if section.settings.cart_icon == 'cart' %}<i class="fa fa-shopping-cart" aria-hidden="true"></i>{% elsif section.settings.cart_icon == 'bag' %}<i class="fa fa-shopping-bag" aria-hidden="true"></i>{% endif %}
            <span class="CartCount">{{ cart.item_count }}</span>
           <span class="cart-original-total money">{{ cart.total_price | money }}</span> 
          </a>
        </li>
      </div>
    </div>
  </div>
 
  <div class="row">
    <div class="desktop-hide tablet-6 mobile-3">
      <div class="mobile__search--bar ">
        {% if section.settings.show_search %}
        <div class="searchbox">
          <form action="/search" method="get">
            <input type="text" name="q" id="q" placeholder="{{ 'general.search.placeholder' | t }}" />
            <button type="submit" class="mobile__search--button"><i class="fa fa-search"></i></button>
          </form>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
 

 

Replies 0 (0)