FROM CACHE - en_header

Cart - Prevent orders for out-of-stock items

TyW
Community Manager
Community Manager
416 40 1106

Shopify lets you edit the quantities on the cart page to whatever value the customer would like regardless of if the product is in stock. Even when clicking on the Update button, customers still get what they asked for — not what they can actually purchase.

 

It's only during checkout that customers get a reality check as to what's in stock:

 

oos-01.png

 

Silently correct quantities on the cart page

 

Caution: You can only add quantity correction to your cart page at /cart. Quantity correction will not work in a cart drawer or cart popup. You must disable any cart drawer or popup in your theme if you want to add silent quantity correction to your cart.

 

With the silent correction option, the default quantity value will return the absolute maximum a customer could purchase. For example, let's say you have a product called "Unicorn t-shirt" and the Unicorn t-shirt has only 10 in stock. When a customer tries to purchase 20 Unicorn t-shirts, the cart page will default to 10 under the quantity column. It will not allow the customer to purchase more Unicorn t-shirts.

 

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. Under the Templates folder, locate and click on cart.liquid to open it in the online code editor.
  4. At the bottom of the cart.liquid file, add the following:

    <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>

     

  5. In the same file, locate the following:

    value="{{ item.quantity }}"

     

  6. After value="{{ item.quantity }}", add the following:

    {% unless item.variant.inventory_management == blank or item.variant.inventory_policy == 'continue' %} max="{{ item.variant.inventory_quantity }}" {% endunless %}

     

    In the end, it should look like this:

    <input type="text" ... name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" {% unless item.variant.inventory_management == blank or item.variant.inventory_policy == 'continue' %} max="{{ item.variant.inventory_quantity }}" {% endunless %} />

     

  7. Click Save to confirm your changes to the file.

 

Tell customers when products are out of stock

 

If you prefer to throw an alert, and not just fix quantities silently, you can use this JavaScript solution instead of the one above.

 

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. Under the Templates folder, locate and click on cart.liquid to open it in the online code editor.
  4. At the bottom of the cart.liquid file, add the following:

    <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) {
        alert('We only have ' + max + ' of this item in stock');
        jQuery(this).val(max);
      }
    });
    </script>

     

  5. In the same file, locate the following:

    value="{{ item.quantity }}"

     

  6. After value="{{ item.quantity }}", add the following:

    {% unless item.variant.inventory_management == blank or item.variant.inventory_policy == 'continue' %} max="{{ item.variant.inventory_quantity }}" {% endunless %}

     

    In the end, it should look like this:

    <input type="text" ... name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" {% unless item.variant.inventory_management == blank or item.variant.inventory_policy == 'continue' %} max="{{ item.variant.inventory_quantity }}" {% endunless %} />

     

  7. Click Save to confirm your changes to the file.

TyW | Online Community Manager @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Replies 10 (10)
jkcdee
New Member
1 0 0

I opened the template cart.liquid as suggested, but there is a note that states:

"The contents of the cart.liquid template can be found in /sections/cart-template.liquid". 

 

Does this mean that the script should be added on Template > Sections > cart-template.liquid? 

JRT
New Member
1 0 1

Can this message work for a product that is set to sell into negative? It would be nice to have the "sell into negative" setting on a product for non-web sales channels, yet have the out of stock messaging  (shown in your tutorial) prevent the purchase of out-of-stock items on the web. 

thibaut_co
Tourist
4 0 0

Hi, 

I've tried your code but every time I change the quantity of an other product from my cart summary, the {{ item.quantity }} change too and become not relative with my item... I guess it's because of Ajax... Do you have a solution for that ?

Thanks 🙂 

gclass
New Member
1 0 0

5. In the same file, locate the following:

Where is this file?

 

After following the first step, the code looks like this:

 

{% comment %}
The contents of the cart.liquid template can be found in /sections/cart-template.liquid
{% endcomment %}

{% section 'cart-template' %}

<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>

appleyard
Tourist
10 1 0

I followed both methods exactly as instructed and they do not work whatsoever 

simonski
Shopify Partner
130 9 45

@TyW 

First of all, thank you for your great tutorial!

It used to work until a while ago, and it was a great solution. Unfortunately, it's not working anymore, and I can't find out what changed, maybe some shopify tags.

Do you have an update how to get your solution back working?

Thank you so much!

simonski
Shopify Partner
130 9 45

The problem is, the JQuery .change function will not be executed because of an error. The console says "max is not defined". The input field on the other hand is defining "max" and "value", this I also checked in console. The location of the JQuery script at the bottom of the cart-template.liquid file is also fine, if I put an alarm right after the script tag before the JQuery change function, it is executed.

Any ideas? Maybe because "max" is defined as "text"?

simonski
Shopify Partner
130 9 45

Ok, I found the problem. I had the execution of JQuery in the <head> in my theme.liquid, but moved it down in the <body> due to execution blocking. This was the problem, JQuery did not execute before the JQuery change function.

VegnHaus
Tourist
5 0 1

Cannot locate line value="{{ item.quantity }}" in step #6?

Screen Shot 2021-10-30 at 12.26.57 PM.pngScreen Shot 2021-10-30 at 12.27.42 PM.png

VegnHaus
Tourist
5 0 1

 Can you post screenshots of what the final code should look like within the correct template or section?