Your Cart Quantity can't be greater than whats in stock

New Member
1 0 0

I'm using the Debut theme and have changed the product-template to not allow add to cart quantity greater than the quantity in stock.

I noticed on your cart page that you can change the product quantity and they can be greater than the in stock quantity.

In cart-template.liquid line 93 is the cart qty input and want to set the max amount to equal the product quantity in stock.

How do I set this max to the in stock value of the product?

Thanks

0 Likes
Shopify Partner
2522 25 549

Something like this? 

 <input class="cart__qty-input" 
 		type="number" 
 		name="updates[]" 
 		id="updates_{{ item.key }}" 
 		value="{{ item.quantity }}" 
 		min="0" 
 		pattern="[0-9]*"
 		{% if item.variant.inventory_management == 'shopify' and 
 			  item.variant.inventory_policy == 'deny'
 			%}
 		  max="{{- item.variant.inventory_quantity -}}"
 		{% endif %}
 		>

For fast selling shops it may be necessary to check the current inventory with Ajax, but otherwise this should be fine.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
1 Like
Highlighted
New Member
19 0 0

Worked great Tim.

Thanks for the help.

0 Likes
New Member
5 0 0

Hi, i know that this post is already outdated. But im trying my luck here, if anyone knows how to implement Tim's code in product page instead of cart page ? Because our store didn't use cart page anymore. We just rely on cart drawer. So, we need to setup those thing in product page. 

Thank you.

0 Likes
Shopify Partner
125 0 12

Hello Kamilia, the code won't change much... but it's hard to offer much detail without access to the front end of your store at least.

0 Likes
Tourist
22 0 1

@tim I tried to replicate that in my cart.liquid and have followed this guide: https://help.shopify.com/en/themes/customization/cart/prevent-orders-for-out-of-stock-items

 

Neither seem to be working for me, I have added my cart.liquid below with the code still added from the tutorial. Would you have any idea of how to get this working? Any help is greatly appreciated :)

 

 

            <!-- /templates/cart.liquid -->
{% comment %}

  For info on test orders:
    - General http://docs.shopify.com/manual/your-store/orders/test-orders
    - Shopify Payments - http://docs.shopify.com/manual/more/shopify-payments/testing-shopify-payments

{% endcomment %}
<div class="grid">
  <div class="grid__item large--five-sixths push--large--one-twelfth">
    {% if cart.item_count > 0 %}
      <header class="section-header text-center">
        <h1 class="text-center">{{ 'cart.general.title' | t }}</h1>
      </header>

      <form action="/cart" method="post" novalidate class="cart">
        
<form action="/cart" method="post" id="cartform">
        <div class="cart__row medium-down--hide cart__header-labels">
          <div class="grid--full">
            <div class="grid__item large--two-fifths push--large--three-fifths">
              <div class="grid--full">
                <div class="grid__item one-third medium-down--half text-center">
                  {{ 'cart.label.quantity' | t }}
                </div>
                <div class="grid__item two-thirds medium-down--half text-right">
                  {{ 'cart.label.total' | t }}
                </div>
              </div>
            </div>
          </div>
        </div>

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

              <div class="grid__item large--three-fifths">
                <div class="grid">

                  <div class="grid__item one-third">
                    <a href="{{ item.url | within: collections.all }}" class="cart__image">

                      {% comment %}
                        More image size options at:
                          - http://docs.shopify.com/themes/filters/product-img-url
                      {% endcomment %}
                      <img src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}">
                    </a>
                  </div>

                  <div class="grid__item two-thirds">
                    <a href="{{ item.url }}" class="h1 cart__product-name" style="font-size:18px;">    
                      {{ item.product.title }}



<span class="so-cart-discount-notes" data-key="{{item.key}}"></span><span class="so-cart-item-up-notes" data-key="{{item.key}}"></span>



<span class='booster-cart-item-success-notes' data-key='{{item.key}}'></span><span class='booster-cart-item-upsell-notes' data-key='{{item.key}}'></span>
                    </a>
                    {% unless item.variant.title contains 'Default' %}
                      <p class="cart__product-meta">
                        {{ item.variant.title }}
                      </p>
                    {% endunless %}

                    
                    {% for p in item.properties %}
	{% if p.first contains '_io_' %}
		{% continue %}
	{% endif %}
	{% unless p.last == blank %}
		<br />{{p.first}}: {{ p.last }}
	{% endunless %}
{% endfor %}
                    
     
                    
                    
                    
                    
                    {% if settings.product_vendor_enable %}
                      <p class="cart__product-meta">{{ item.vendor }}</p>
                    {% endif %}

                    {% assign property_size = item.properties | size %}
                    {% if property_size > 0 %}
                      {% for p in item.properties %}
				{%- if p.first.first == '_' -%}{%- continue -%}{%- endif -%}
                        {% assign first_character_in_key = p.first | truncate: 1, '' %}
                        {% unless p.last == blank or first_character_in_key == '_' %}
                          {{ p.first }}:

                          {% if p.last contains '/uploads/' %}
                            <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
                          {% else %}
                            {{ p.last }}
                          {% endif %}

                          <br>
                        {% endunless %}
                      {% endfor %}
                    {% endif %}

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

                </div>
              </div>

              <div class="grid__item large--two-fifths">
                <div class="grid--full cart__row--table">

                  <div class="grid__item three-quarter text-center">

                    <label for="updates_{{ item.key }}" class="visually-hidden">{{ 'cart.label.quantity' | t }}</label>
                     <button type="button" id="sub" class="sub" >-</button>
                    <input type="text"  name="updates[]" id="updates_{{ item.key }}" class="cart__product-qty qtyinbox" value="{{ item.quantity }}" {% unless item.variant.inventory_management == blank or item.variant.inventory_policy == 'continue' %} max="{{ item.variant.inventory_quantity }}" {% endunless %} />
 					
                    <button type="button" id="add" class="add" >+</button>
                  </div>

                  <div class="grid__item two-thirds text-right">
                    {% if item.original_line_price != item.line_price %}
                      <small class="cart__price cart__price--strikethrough">{{ item.original_line_price | money }}</small>
                    {% endif %}

                    <span class="cart__price"><span class='booster-cart-item-line-price' data-key='{{item.key}}'><span class="so-cart-item-line-price" data-key="{{item.key}}">{{ item.line_price | money }}</span></span></span>

                    {% assign discounts_size = item.discounts | size %}
                    {% if discounts_size > 0 %}
                      {% for discount in item.discounts %}
                        <small class="cart__discount">{{ discount.title }}</small>
                      {% endfor %}
                    {% endif %}
                  </div>
                </div>
              </div>

            </div>
          </div>
        {% endfor %}
        
                
        
        
        <div class="cart__row">
          <div class="grid--full cart__row--table-large">
            {% 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 settings.cart_notes_enable %}
              <div class="grid__item large--seven-twelfths">
                <div class="cart__note">
                  <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 large--five-twelfths text-center large--text-right{% unless settings.cart_notes_enable %} push--large--seven-twelfths{% endunless %}">
              <div class="grid--full cart__row--table">
                <div class="grid__item one-half large--two-thirds large--text-center">
                  <p class="cart__subtotal"><span id="bk-cart-subtotal-label">{{ 'cart.general.subtotal' | t }}</span></p>
                </div>
                <div class="grid__item one-half large--one-third">
                  <p class="cart__subtotal">
                    {% comment %}
                    <span id="bk-cart-subtotal-price">{% endcomment %}
                      
                      <span class="wh-original-cart-total"><span class="so-cart-original-total">{{ cart.total_price | money }}</span><div class="so-summary"></div><span class="so-cart-total"></span></span>
                      <span class="wh-cart-total"></span>
                      <div class="additional-notes">
                        <span class="wh-minimums-note"></span>
                        <span class="wh-extra-note "></span>
                      </div>
                      
                    {% comment %}</span>{% endcomment %}
                  </p>
                </div>
              </div>

              {% if cart.total_discounts > 0 %}
                {% assign cartTotalDiscounts = cart.total_discounts | money %}
                <p class="cart__savings">{{ 'cart.general.savings_html' | t: savings: cartTotalDiscounts }}</p>
              {% endif %}
              <p><em>{{ 'cart.general.shipping_at_checkout' | t }}</em></p>
              
                             {% comment %} the code below is for cart weight. The 220 is for 220grams. This is our packaging weight {% endcomment %}
              
              
              
              <p>Total cart weight: {{ cart.total_weight| plus:220| weight_with_unit }}</p>

            
              
              <button type="submit" name="update" class="btn--secondary update-cart">{{ 'cart.general.update' | t }}</button>
              <button type="submit" name="checkout" class="btn cart__checkout">
                {{ 'cart.general.checkout' | t }} <span class="icon icon-arrow-right" aria-hidden="true"></span>

              </button>



              {% if additional_checkout_buttons and settings.cart_type != 'drawer' %}
                <div class="additional_checkout_buttons">{{ content_for_additional_checkout_buttons }}</div>
              {% endif %}
            </div>
            

          </div>

        </div>

      </form>
    
    {% include 'cross-sell' %}


    {% else %}
      {% comment %}
        The cart is empty
      {% endcomment %}
      <header class="section-header text-center">
        <h1 class="text-center">{{ 'cart.general.title' | t }}</h1>
        <p class="cart--empty-message">{{ 'cart.general.empty' | t }}</p>
        <p class="cart--continue-browsing">{{ 'cart.general.continue_browsing_html' | t }}</p>
        <p class="cookie-message">{{ 'cart.general.cookies_required' | t }}</p>
      </header>

    {% endif %}
  </div>
</div>


{% comment %}
      Stop reaching inventory page
  {% endcomment %}


  <script>
jQuery('[max]').change(function() {
  var max = parseInt(jQuery(this).attr('max'), 10) || 10000;
  var value = parseInt(jQuery(this).val(), 10) || 0;
  if (value > max) { jQuery(this).val(max); }
});
</script>
          

 

0 Likes
Shopify Partner
2522 25 549

George,

I guess my recipe does not work because your form has novalidate property set:

 <form action="/cart" method="post" novalidate class="cart">

 Can't tell what are the reasons for novalidate, but try removing it and see what happens?

As to why the Javascript code does not run -- depending on your theme, this could be a popular problem of inlined javascript failure due to no jQuery available at this time because it is loaded with defer=defer

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes
Shopify Partner
2522 25 549

Ah yes, and do not forget that your Apps may significantly change the way your cart works.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes
Shopify Partner
15 0 0

Hi, 

 

I also tried this solution https://help.shopify.com/en/themes/customization/cart/prevent-orders-for-out-of-stock-items

It didn't work. 

Here is my 'cart-template.liquid' - 

 

<div class="central content" data-section-type="cart-template">
  <h1>{{ 'cart.general.title' | t }}</h1>

  {% if cart.item_count > 0 %}

  <form action="/cart" method="post" id="cartform">

    <ul class="cart-list clearfix">

      {% for item in cart.items %}

      {% comment %}
      Determining the handle of the collection that was last seen for the 'continue shopping' link.
      {% endcomment %}

      {% if forloop.first %}
      {% capture collection_url %}{{ item.product.collections.first.url }}{% endcapture %}
      {% if collection_url == empty or collection_url == '/collections/frontpage' %}{% assign collection_url = '/collections/all' %}{% endif %}
      {% endif %}

      <li class="item clearfix">
        <div class="col-desc">
          <a class="image" href="{{ item.url }}">
            {% include 'responsive-image', image: item.image %}
          </a>
          <div class="text">
            <div class="title">
              <a href="{{ item.url }}">
                {{ item.product.title }}
<span class="saso-cart-item-discount-notes" data-key="{{item.key}}"></span>
<span class="saso-cart-item-upsell-notes" data-key="{{item.key}}"></span>
                                <br/>
                {% unless item.variant.title contains 'Default' %}{{ item.variant.title }}{% endunless %}
              </a>
            </div>
            {% comment %}
            Line Item Properties
            {% endcomment %}
            {% if item.properties.size > 0 %}
            <div class="line-items">
              {% for p in item.properties %}
              {% unless p.last == blank %}
              {{ p.first }}:
              {% if p.last contains '/uploads/' %}
              <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
              {% else %}
              {{ p.last }}
              {% endif %}
              <br />
              {% endunless %}
              {% endfor %}
            </div>
            {% endif %}

            {% if item.variant.inventory_management == 'shopify' and item.variant.inventory_quantity < 1 %}
            <div class="backorder">
              <p>{{ 'cart.general.backorder' | t }}</p>
            </div>
            {% endif %}

            <div class="price"><span class="theme-money"><span class='hulkapps-cart-item-price' data-key='{{item.key}}'>
<span class="saso-cart-item-price" data-key="{{item.key}}">{{ item.price | money }}</span>
</span></span></div>
          </div>
        </div>
        <div class="col-notdesc">
          <span class="quantity">
            <a class="minus" href="/cart/change?line={{ forloop.index }}&quantity={{ item.quantity | minus: 1 }}"><span>-</span></a>
            <input class="select-on-focus" type="text" size="2" id="updates_{{ item.id }}" name="updates[]" value="{{ item.quantity }}"/>
            <a class="plus" href="/cart/change?line={{ forloop.index }}&quantity={{ item.quantity | plus: 1 }}"><span>+</span></a>
          </span>
          <a class="remove" href="/cart/change?line={{ forloop.index }}&quantity=0">{% include 'svg-close' %}</a>
        </div>
      </li>
      {% endfor %}

    </ul>

    <div class="update-continue">
      <input class="update textbutton" type="submit" name="update" value="{{ 'cart.general.update' | t | escape }}" />
      <span>|</span>
      <a class="continue" href="{{ collection_url }}">{{ 'cart.general.continue' | t }}</a>
    </div>

    <div class="under-cart">
      <div class="subtotal">
        <span class="label">{{ 'cart.label.subtotal' | t }}</span>
        <span class="amount theme-money"><span id=""><span class='hulkapps-cart-original-total'>
<span class="saso-cart-original-total"><span id="bk-cart-subtotal-price">{{ cart.total_price | money }}</span></span>
<span class="saso-cart-total"></span>
</span></span></span>
      </div>

      {% if section.settings.cart_note_show %}
      <p class="note-area">
        <label for="note">{{ 'cart.label.note' | t }}</label>
        <textarea id="note" name="note">{{ cart.note }}</textarea>
      </p>
      {% endif %}

      {% if section.settings.cart_terms_show %}
      <p class="terms rte">
        <input type="checkbox" id="terms" />
        {% assign terms_url = pages[section.settings.cart_terms_page].url %}
        {% capture terms_label_html %}<label for="terms">{{ 'cart.terms.agreement_html' | t: terms_url: terms_url }}</label>{% endcapture %}
        {% if section.settings.cart_terms_page == blank %}
        {{ terms_label_html | replace: '<a ', '<span ' | replace: '</a>', '</span>' }}
        {% else %}
        {{ terms_label_html }}
        {% endif %}
      </p>
      {% endif %}

      {% if settings.show_multiple_currencies %}
      <p class="comment rte currency-different">
        {{ 'cart.multi_currency.notice_html' | t: shop_name: shop.name, shop_currency: shop.currency, selected_currency: '<strong class="selected-currency"></strong>' }}
      </p>
      {% endif %}

      <input type="submit" class="checkout-btn" name="checkout" value="{{ 'cart.general.checkout' | t | escape }}" />

      {% comment %}Paypal and Google checkout buttons{% endcomment %}
      {% if additional_checkout_buttons %}
      <p class="additional-checkout-buttons">
        {{ content_for_additional_checkout_buttons }}
      </p>
      {% endif %}

      <p class="comment">{{ 'cart.general.message' | t }}</p>
    </div>

  </form>

  {% else %}

  <div>
    <h2>{{ 'cart.general.empty' | t }}</h2>
    <div class="rte">
      <p class="align-center">{{ 'cart.general.continue_browsing_html' | t }}</p>
    </div>
  </div>

  {% endif %}
</div>


{% schema %}
  {
    "name": "Cart page",
    "settings": [
      {
        "type": "checkbox",
        "id": "cart_terms_show",
        "label": "Show Terms and Conditions checkbox",
		"default": false
      },
      {
        "type": "page",
        "id": "cart_terms_page",
        "label": "Page for Terms and Conditions link"
      },
      {
        "type": "checkbox",
        "id": "cart_note_show",
        "label": "Enable order notes",
		"default": true
      }
	]
  }
{% endschema %}


Any help please?

0 Likes