Updating Product Quantity in Cart

Solved
Highlighted
Shopify Partner
3 1 0

Hi, I don't know what I'm doing wrong. I know there's already a lot of posts about this but I can't find the solution to my problem. I can't get to update the product quantity in my cart when I click the update button nothing happens, the page reloads but the quantity doesn't change.

Basically, this is my code:

Product item inside cart:

{% for item in cart.items%}
  <div class="columns is-mobile product">
    <div class="column product-image">
      <figure class="image">
        <img src="{{ item.image | product_img_url: '1920x' }}">
      </figure>
    </div>
    <div class="column">
      <div class="columns is-mobile">
        <div class="column is-four-fifths product-details">
          <a href="{{ item.url }}">
            <h2 class="title is-3 is-size-6-mobile has-text-primary">{{ item.title }}</h2>
          </a>
          <form>
            <div class="field">
              <div class="control">
                <input type="number" id="updates_{{ item.id }}" name="updates[]" value="{{ item.quantity }}" class="input" />
              </div>
            </div>
          </form>
          <p class="title is-3 is-size-6 is-size-7-mobile has-text-primary price">{{ item.price | money }}</p>
        </div>
        <div class="column remove-product">
          <a href="/cart/change?line={{ forloop.index }}&quantity=0" rel="{{ item.id }}" class="has-text-primary is-size-3">x
          </a>
        </div>
      </div>
    </div>
  </div>
{% endfor %}

Cart Form:

<form action="/cart" method="post">
  <input type="submit" name="checkout" value="checkout" class="button is-small is-rounded is-primary is-uppercase has-text-centered" />
  <input type="submit" name="update" value="update" class="button is-small is-rounded is-primary is-outlined is-uppercase has-text-centered" />
</form>

I will really appreciate any helpful feedback, I already spent hours trying to fix this, I followed this guide https://help.shopify.com/en/themes/development/templates/cart-liquid but is not working for me.

Thanks

0 Likes
Highlighted
Shopify Partner
3 1 0

This is an accepted solution.

My bad. Was a simple fix everything has to be inside the same form.

0 Likes
Highlighted
New Member
2 0 0

Hey, ive been trying to fix this same issue you had but ive been unsucessful and have run out of options!!! 

 

When I edit the quantity (increase or decrease) and click update cart, it redirects me to checkout without the change in quantity. Same happens if I click on 'Checkout", however, continue shopping will do as it says, continue shopping.

 

Any ideas what went wrong?

 

{% include 'cart.pb' %}
{% comment %}

  This is your /cart template.

{% endcomment %}
<div id="CartSection" data-section-id="{{ section.id }}" data-section-type="cart-template" data-notes-enable="{{ section.settings.cart_notes_enable }}">
  {% if cart.item_count > 0 %}

    <form action="/cart" method="post" novalidate class="cart">
{{ pb_inside_cart }}
      <div class="section-header">
        <h1 class="section-header__title">{{ 'cart.general.title' | t }}</h1>
      </div>

      <div class="cart__row medium-down--hide cart__header-labels">
        <div class="grid--full">
          <div class="grid__item post-large--one-half push--post-large--one-half">
            <div class="grid--full">
              <div class="grid__item one-third medium-down--one-third">
                <span class="h4">{{ 'cart.label.price' | t }}</span>
              </div>
              <div class="grid__item one-third medium-down--one-third text-center">
                <span class="h4">{{ 'cart.label.quantity' | t }}</span>
              </div>
              <div class="grid__item one-third medium-down--one-third text-right">
                <span class="h4">{{ 'cart.label.total' | t }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {% comment %}
        Loop through products in the cart
      {% endcomment %}
      {% for item in cart.items %}{% include 'cart-item.pb', item: item %}
        <div class="cart__row">
          <div class="grid--full cart__row--table-large">

            <div class="grid__item post-large--one-half">
              <div class="grid">

                <div class="grid__item one-third">
                  <a href="{{ item.url | within: collections.all }}">
                    {% unless item.image == blank %}
                      {% capture img_id %}ProductImage-{{ item.id }}{% endcapture %}
                      {% capture wrapper_id %}ProductImageWrapper-{{ item.id }}{% endcapture %}
                      {%- assign img_url = item.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
                      {% include 'image-style' with image: item.image, width: 210, height: 245, wrapper_id: wrapper_id, img_id: img_id %}
                      <div id="{{ wrapper_id }}" class="cart__image-wrapper supports-js">
                        <div style="padding-top:{{ 1 | divided_by: item.image.aspect_ratio | times: 100}}%;">
                          <img id="{{ img_id }}"
                               class="cart__image lazyload"
                               data-src="{{ img_url }}"
                               data-widths="[40, 65, 90, 120, 150, 180, 360, 480, 600]"
                               data-aspectratio="{{ item.image.aspect_ratio }}"
                               data-sizes="auto"
                               alt="{{ item.title | escape }}">
                        </div>
                      </div>
                    {% else %}
                      <p><img src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}"></p>
                    {% endunless %}

                    <noscript>
                      <p><img src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}"></p>
                    </noscript>
                  </a>
                </div>

                <div class="grid__item two-thirds">
                  <a href="{{ item.url }}" class="h5">
                    {{ item.product.title }}
                  </a>
                  {% unless item.variant.title contains 'Default' %}
                    <br>
                    <small>{{ item.variant.title }}</small>
                  {% endunless %}

                  {% comment %}
                    Optional, loop through custom product line items if available

                    For more info on line item properties, visit:
                      - http://docs.shopify.com/support/your-store/products/how-do-I-collect-additional-information-on-the-product-page-Like-for-a-monogram-engraving-or-customization
                  {% endcomment %}
                  

                  {% for p in item.properties %}
                  
                  {% if p.first contains '_io_' %}
                  {% continue %}
                  {% endif %}
                  {% assign first_character_in_key = p.first | truncate: 1, '' %}
                  {% unless p.last == blank or first_character_in_key == '_' %}
                  {{p.first | split: " (+ " | first}}:
                  {% if p.last contains '//uploadery.s3' %}
                  <a href="{{ p.last }}">Link to your file</a>
                  {% else %}
                  {{ p.last }}
                  {% endif %}<br />
                  {% endunless %} 
                  {% endfor %}
                  

                  <a href="/cart/change?line={{ forloop.index }}&amp;quantity=0" class="cart__remove">
                    <small>{{ 'cart.general.remove' | t }}</small>
                  </a>
                </div>

              </div>
            </div>

            <div class="grid__item post-large--one-half">
              <div class="grid--full cart__row--table-large">

                <div class="grid__item one-third">
                  <span class="cart__mini-labels">{{ 'cart.label.price' | t }}</span>
                  <span class="h5">{{ pb_price | money }}</span>
                </div>

                <div class="grid__item one-third text-center">
                  <label for="updates_{{ item.key }}" class="cart__mini-labels">{{ 'cart.label.quantity' | t }}</label>
                  <input type="number" class="cart__quantity-selector" name="updates[]" id="updates_{{ item.key }}" value="{{ item.quantity }}" min="0" aria-label="{{ 'cart.label.quantity' | t }}">
                </div>

                <div class="grid__item one-third text-right">
                  <span class="cart__mini-labels">{{ 'cart.label.total' | t }}</span>
                  <span class="h5">
                    {% if pb_original_line_price != pb_line_price %}
                      <small class="cart-item__original-price"><s>{{ pb_original_line_price | money }}</s></small>
                    {% endif %}
                    {{ pb_line_price | money }}
                  </span>
                  {% if pb_original_line_price != pb_line_price %}
                    {% for discount in item.discounts %}
                      <small class="cart-item__discount">
                        {{ discount.title }}
                      </small>
                    {% endfor %}
                  {% endif %}
                </div>

              </div>
            </div>

          </div>
        </div>
      {% endfor %}

      <div class="cart__row">
        <div class="grid">
          {% comment %}
            Optional, add a textarea for special notes
              - Your theme settings can turn this on or off. Default is on.
              - Make sure you have name="note" for the message to be submitted properly
          {% endcomment %}
          {% if section.settings.cart_notes_enable %}
            {% assign noteSize = cart.note | size %}
            <div class="grid__item post-large--five-twelfths">
              <button type="button" class="text-link cart__note-add{% if noteSize > 0 %} is-hidden{% endif %}">
                {{ 'cart.label.add_note' | t }}
              </button>
              <div class="cart__note{% if noteSize > 0 %} is-active{% endif %}">
                <label for="CartSpecialInstructions">{{ 'cart.general.note' | t }}</label>
                <textarea name="note" class="input-full" id="CartSpecialInstructions">{{ cart.note }}</textarea>
              </div>
            </div>
          {% endif %}
          <div class="grid__item text-right{% if section.settings.cart_notes_enable %} post-large--seven-twelfths{% endif %}">
            <p class="cart__subtotal">
              <span class="cart__subtotal-title">{{ 'cart.general.subtotal' | t }}</span>
              <span class="h5 cart__subtotal-price">{{ pb_total_price | money }}</span>
              {% if cart.total_discounts > 0 %}
                {% assign savings = cart.total_discounts | money %}
                <small class="cart-subtotal__savings">{{ 'cart.general.savings_html' | t: price: savings }}</small>
              {% endif %}
            </p>

            {%- capture taxes_shipping_checkout -%}
              {%- if shop.taxes_included and shop.shipping_policy.body != blank -%}
                {{ 'cart.general.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
              {%- elsif shop.taxes_included -%}
                {{ 'cart.general.taxes_included_but_shipping_at_checkout' | t }}
              {%- elsif shop.shipping_policy.body != blank -%}
                {{ 'cart.general.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
              {%- else -%}
                {{ 'cart.general.taxes_and_shipping_at_checkout' | t }}
              {%- endif -%}
            {%- endcapture -%}

            <p class="cart__policies"><em>{{ taxes_shipping_checkout }}</em></p>

            {% comment %}
              Continue shopping button
            {% endcomment %}
            <a class="btn btn--secondary" href="/collections/all">{{ 'cart.general.continue_shopping' | t }}</a>

            <button type="submit" name="update" class="btn btn--secondary update-cart">{{ 'cart.general.update' | t }}</button>
            <button type="submit" name="checkout" class="btn">{{ 'cart.general.checkout' | t }}</button>

            {% if additional_checkout_buttons %}
              <div class="cart__additional_checkout">{{ content_for_additional_checkout_buttons }}</div>
            {% endif %}
          </div>
        </div>

      </div>

    </form>

  {% else %}
    {% comment %}
      The cart is empty
    {% endcomment %}
    <h2>{{ 'cart.general.title' | t }}</h2>
    <p class="cart--empty-message">{{ 'cart.general.empty' | t }}</p>
    <div class="cart--cookie-message">
      <p>{{ 'cart.general.cookies_required' | t }}</p>
    </div>
    <p class="cart__continue-btn">{{ 'cart.general.continue_browsing_html' | t }}</p>
  {% endif %}
</div>



{% schema %}
{
  "name": {
    "de": "Warenkorb-Seite",
    "en": "Cart page",
    "es": "Página de carrito",
    "fr": "Page du panier",
    "it": "Pagina del carrello",
    "ja": "カートページ",
    "pt-BR": "Página do carrinho"
  },
  "settings": [
    {
      "type": "checkbox",
      "id": "cart_notes_enable",
      "label": {
        "de": "Bestellhinweis aktivieren",
        "en": "Enable order notes",
        "es": "Habilitar notas de pedido",
        "fr": "Activer les notes de commande",
        "it": "Abilita le note sugli ordini",
        "ja": "注文メモを有効にする",
        "pt-BR": "Habilite observações sobre o pedido"
      }
    }
  ]
}
{% endschema %}
0 Likes
Highlighted
New Member
3 0 0

Hi Just checking if you have found a solution?

I'm having the same issue

0 Likes
Highlighted
Explorer
57 4 4
Spoiler
js  code
// quantity plusand minus js
 
$('.add').click(function () {
   //alert("plus");
  var th = $(this).closest('.addhere').find('.count');   
  th.val(+th.val() + 1);
});
$('.sub').click(function () {
  //alert("minus");
  var th = $(this).closest('.addhere').find('.count');   
    if (th.val() > 1) th.val(+th.val() - 1);
});
 
// cart updates price using js
///ajax
$(".js-qty__adjust").on("click", function (){
  var $this=$(this)
  setTimeout(function(){
  var lineno = $this.parents(".cartline").attr("data-line");
  var qty=$this.parents(".cartline").find(".jsqtynum").val();
  var price = parseInt($this.parents(".cartline").find(".finds_pricess").attr('data-line-price'));
  jQuery.ajax({
      type: 'POST',
      url: '/cart/change.js',
    data: { line:lineno,quantity:qty },
      dataType: 'json',
      success: function() {
        window.location.href = window.location.href
//         getCart(function(data){
//           var finaltotal = theme.Currency.formatMoney(data.total_price,theme.moneyFormat);
//         $('.cart-subtotal__price').html(finaltotal);
//         });
 
      }
   });
    },100);
});
 
 
CART page code
 


<!-- ***** cart Area Start ***** -->
<section class="section cart-area maleicon d-flex align-items-center">
<div class="container">
<div class="row justify-content-center">
<p class="d-none right22 d-sm-block">My Shopping Bag ({{cart.item_count}} Items)</p>
</div>
<div class="row cart_rowss">
<div class="col-12 col-md-9 col-lg-8">
<!-- single cart -->
{% if cart.item_count > 0 %}
<form action="{{ routes.cart_url }}" method="post" novalidate class="cart">
{% assign col = '' %}
{% for item in cart.items %}

{% if forloop.index == 1%}
{% for collection in item.product.collections %}
{% if collection.title contains "Home" or collection.title contains "BEST" or collection.title contains "Homepage" or collection.title contains "frontpage" %}
{% else %}
{% assign col = collections[collection.handle] %}
{% break %}
{% endif %}
{% endfor %}
{%endif%}
<div class="row cartline" data-line={{forloop.index}}>
<div class="col-12 col-md-3 col-lg-3 nopadleft">
<div class="single-product res-margin">
<img src="{{ item | img_url: '160x168x' }}" alt="{{ item.image.alt | escape }}">
</div>
</div>

<div class="col-12 col-md-6 col-lg-6">
<a href="{{ item.url }}">
<p class="carthead" style="color:black;">{{ item.product.title }}</p>
</a>
{% unless item.variant.title contains 'Default' %}
<div class="cart__meta-text">
{% for option in item.product.options %}
{{ option }}: {{ item.variant.options[forloop.index0] }}<br/>
{% endfor %}
</div>
{% endunless %}
{%- assign property_size = item.properties | size -%}
{% if property_size > 0 %}
<div class="cart__meta-text">
{% for p in item.properties %}
{% unless p.last == blank %}
{{ p.first }}:

{% comment %}
Check if there was an uploaded file associated
{% endcomment %}
{% if p.last contains '/uploads/' %}
<a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.last }}
{% endif %}
{% endunless %}
{% endfor %}
</div>
{% endif %}
<!---- variant and custom fields call ---->

<!--- cart item remove ---->
<a href="/cart/change?line={{ forloop.index }}&amp;quantity=0" class="cartbtn">Remove item</a>
</div>

<div class="col-12 col-md-3 col-lg-3">
<ul class="addhere">
<li class="sub adds js-qty__adjust" style="cursor: pointer;border: none;">
<img src="https://cdn.shopify.com/s/files/1/0427/0433/9102/files/open_bbce3bf5-c361-4b5e-a9ce-719f1718fb59.png" alt="">
</li>

<li class="qtyy">

<input style="border: none; width: 40px; text-align: center;color: #E31E25;font-size: 22px;line-height: 36px;padding: 0 11px;" class="count jsqtynum" type="text"
value="{{ item.quantity }}" min="1" data-id="" aria-label="quantity" pattern="[0-9]*" name="updates[]" id="updates_large_{{ item.key }}">

</li>

<li style="cursor: pointer;" class="add adds js-qty__adjust">
<img src="https://cdn.shopify.com/s/files/1/0427/0433/9102/files/close_c9a4307f-5336-4a96-9497-0c080f9a733b.pn..." alt="">
</li>

<li><span style="visibility: hidden;" data-line-price="{{ item.original_price}}" class="finds_pricess">{{ item.original_price | money }}</span></li>


</ul>

</div>
</div>
{% endfor %}

{%else%}

<p>Cart is Empty</p>

{%endif%}

</form>
<!---- end cart form ------>
</div>

<div class="col-12 col-md-3 col-lg-4">
<!-- cupons -->
<div class="cupons">
<script>
$(document).ready(function(){
$("#discount-coupon").keyup(function(){
var abc = $(this).val();
console.log("keyup" + abc);
$("#change-href-for-discount").prop('href', '/checkout/?discount=' + abc);
});

});
</script>
<p class="headt">COUPONS</p>

<input autocomplete="off" type="text" name="discount" id="discount-coupon" class="form-control cuponput1" placeholder="Paste Coupon Here"/>

<a id="change-href-for-discount" href="/checkout/?discount=">APPLY</a>

<p class="headtsmall">Price Details</p>

<ul class="cart-details">
<li class="dt">Total</li>
<li class="dd cart-subtotal__price">{{cart.items_subtotal_price | money}}</li>
</ul>
<ul class="cart-details">
{%- assign cartDiscounts = 'template ' | split: ' ' -%}
{%- if cart.cart_level_discount_applications.size > 0 -%}
{%- assign cartDiscounts = cart.cart_level_discount_applications -%}
{%- endif -%}
<div{% if cart.cart_level_discount_applications.size == 0 %} class="hide"{% endif %} data-cart-discount-wrapper>
<div class="order-discount-card-wrapper" data-cart-discount>
<ul class="cart-details">
{%- for discount_application in cartDiscounts -%}
<li class="dt">{% include 'icon-saletag' %}
<span class="dis_lvel" data-cart-discount-title>{{- discount_application.title -}}</span></li>
<li class="dd reda">-<span data-cart-discount-amount>{{ discount_application.total_allocated_amount | money }}</span></li>
{%- endfor -%}
</ul>
</div>
</div>


<ul class="cart-details totald">
<li class="dt">{{ 'cart.general.subtotal' | t }}</li>
<li class="dd cart-subtotal__price cart-subtotal__price" data-cart-subtotal>{{ cart.total_price | money_with_currency }}</li>
</ul>



<a href="/checkout">
<input type="submit"class="form-control cuponput3" value="PLACE ORDER"/>
</a>
</div>
</div>

</div>
</div>
</section>

<!-- ***** cart price Area Start ***** -->
<section class="section product-area femaleicon d-flex align-items-center">
<div class="container">
<div class="row justify-content-center">
<p class="d-none right22 d-sm-block">You Might Also Like These Products</p>
</div>
<div class="row">



{%- assign upsell_collection = col -%}
{%- for product in upsell_collection.products limit:4 -%}
{% unless cart.items contains product %}
{%- unless product.available -%}
{%- continue -%}
{%- endunless -%}

{%- assign include_product = true -%}

{%- for line_item in cart.items -%}
{%- if line_item.product_id == product.id -%}
{%- assign include_product = false -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}

<div class="col-12 col-md-6 col-lg-3">
<!-- Single Product -->
<div class="single-product res-margin">
<img src="{{ product.featured_image | img_url: '255x267' }}" alt="{{product.title}}">
</div>
<p class="pro-info">
{{product.title | truncate:20}}
<span>{{product.price | money }}</span>
</p>
<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<input type="submit" value="Add to cart" class="aaddbtn" style="display:none;" />
<a id="ads_carttriger" class="addbtn" href="#">ADD TO BAG</a>

</form>
</div>
{%- endunless -%}
{%- endfor -%}


</div>
</div>
</section>
<!-- ***** cart price Area end ***** -->

 

 

0 Likes
Highlighted
Highlighted
New Member
1 0 0
Where is the solution?
0 Likes