d
Topic
Elle Lisson Member
Posts:
3
10 days ago

Cart not updating after item added to cart via AJAX - Narrative Theme

Hi,

I know this has been asked a thousand times already, but I just can't find a fitting solution: after I add an item to the cart, I have to refresh the page manually to get the cart to reflect the new product in the cart. I am looking for the code snippet I have to add to make the cart update. What we use:

- Narrative theme

- cart drawer

- ajaxified cart-snippet

- add items via AJAX

Code:

<form id="addToCartForm" class="product-form" action="/cart/add" method="post" enctype="multipart/form-data" style="padding-top:20px;margin-bottom:30px">
    {% if variant.available %}
  <div class="product-form__item supports-js">
   
  {% for variant in product.variants %}  
    {% if variant.available %}
    <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
    {% endif %}  
  {% endfor %}     
</div>

{% else %}

<input type="hidden" name="id" value="{{ product.variants.first.id }}" />

 {% unless product.variants.size == 1 and product.options.size == 1 and product.options.first == 'Title' and product.variants.first.title == 'Default Title' %}
    {% for option in product.options_with_values %}
      <div class="product-form__item supports-js">

        {% if option.name != 'default' %}
          <label class="single-option-selector__label{% unless section.settings.show_variant_labels %} single-option-selector__label--hidden{% endunless %}" for="{{option.name}}">{{ option.name }}</label>
        {% endif %}

        <select id="{{option.name}}" name="{{option.name}}" class="single-option-selector" data-option-input>
          {% for value in option.values %}
            {% assign safeValue = value | replace: '"', '&quot;' %}
            <option value="{{ safeValue }}" {% if option.selected_value == value %}selected{% endif %}>{{ value }}</option>
          {% endfor %}
        </select>
      </div>
    {% endfor %}
  {% endunless %}
    <button id="CartCount" class="btn btn--to-secondary btn--full product__add-to-cart-button" data-cart-submit type="submit" name="add" aria-live="polite" aria-live="polite">
      <span class="primary-text" aria-hidden=false data-cart-primary-submit-text>
        {{ 'products.product.add_to_cart' | t }}
      {% else %}
        {{ 'products.product.sold_out' | t }}
      {% endif %}
    </span>
    <span class="secondary-text" aria-hidden=true data-cart-secondary-submit-text>{{ 'products.product.view_cart' | t }}</span>
      
  </button>
       
</form>

Any help would be appreciated!

 

i
Replies
Jason Shopify Expert freakdesign.com.au
Posts:
7547
10 days ago

The code you've posted here doesn't do any of the work when it comes to AJAX adding or dynamic updates. That would be controlled by the site JavaScript.

The forum members would want to see a link to the store so they can see what happens in the live store. It also helps the members check the debug console to see if any JavaScript messages show. Those errors might give clues to a code problem (if one exists).

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
Elle Lisson Member
Posts:
3
9 days ago

Ok, the collection is in https://ober-gudt.myshopify.com/collections/shop. I would have loved to use the function already included into the Narrative theme and tried to re-use the product-form snippet by just adding it to the collection overview via {% include 'product-fom' %}, but that didn't work either, it rather showed every product as 'sold out'. After that I added the ajaxify-cart-fuction to the site and that solved it - almost, up to the problem with not not updating cart after adding an item.

Thanks so much in advance!