Disable Add to cart button if quantity 0

New Member
5 0 0

I'm using Debut theme to build a website for a client and I have troubles to get this done.

 

I changed the quantity selector to dropdown using this code:

<div id="product-quantity-dropdown" class="product-form__item product-form__item--quantity">
  <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
  <select name="quantity" id="quantity">
    <option selected="true" value="0">Select Quantity</option>
    {% for i in (1..product.variants.first.inventory_quantity) %}
      <option value="{{ i }}">{{ i }}</option>
    {% endfor %}         
  </select>
</div>

When someone simply click the Add to cart button without changing the quantity, it goes to the Cart page. Product isn't added to the cart as the value for "Select Quantity" is 0 but I need to get the button disabled if the quantity value isn't at least 1.

I tried it with this script, but it didn't work:

$(document).on("change",'#quantity', function() { 
  var productquantity = $('#quantity').attr('value');
    if  (productquantity <= 0) {
        $('#add-to-cart').prop('disabled', true);
      }
})


Also tried updating add to cart button but without sucess:

<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available or products.product.quantity == '0' %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>


Is there any solution for this?

Thanks.

0 Likes
Shopify Partner
462 80 92
$(document).on("change",'#quantity', function() { 
  var productquantity = $('#quantity').attr('value');
    if  (productquantity <= 0) {
        $('#add-to-cart').prop('disabled', true);
      }
})

but your select tag doesn't have attribute value, you should check its val.

 

$(document).on("change",'#quantity', function() { 
  var productquantity = $('#quantity').val();
    if  (productquantity <= 0) {
        $('#add-to-cart').prop('disabled', true);
      }
})
Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes
New Member
5 0 0

Still not working, tried productquantity == 0 instead of productquantity <= 0 but it's the same.

0 Likes
Shopify Partner
462 80 92

Maybe you can provide url of your site so I can check it.

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes
New Member
5 0 0

https://marycobbdesign.com

password: preeti

 

Products under Wallpaper collection have variants and quantity dropdown.


Thanks.

0 Likes
Shopify Partner
462 80 92

Update your code which is watching for select changing.

replace it with this one.

$('#quantity').change(function(event) {
	var productquantity = $(this).val();
		//console.log(productquantity)
		if (productquantity == 0) {
			$('#AddToCart-product-template').prop('disabled', true);
		} else {
			$('#AddToCart-product-template').prop('disabled', false);
		}
});


at first I want to say that your id for ATC button was not correct, you were targeting '#add-to-cart' but your ATC button had another ID

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes
New Member
5 0 0

I see, I missed that...

 

It works now but not completely, if you set variant first, add to cart button is enabled, if you after that set quantity to any number and then set it back to "Select Quantity", then the button is disabled. So the variant dropdown is making a conflict here.

 

It the same if you try the opposite, if you fist select quantity, it enables the button without selecting the variant option.

 

The variant rule is set directly in button code, the code is my first post.

0 Likes
Shopify Partner
462 80 92

Yeah, I see, the variant select has its own script to update ATC button that's why we have this conflict. You should do check for quantity select value in script which is for variant select.

Unfortunately I can't provide any full code for it without looking at all source files.

I wil advise to look at theme.js file on line 2605, you have code variant select change.

F2s1Gxw

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes
Highlighted
New Member
5 0 0

Unfortunately, I can't give you access until I get permission for that.

 

This is the function I found in the theme.js

_updateAddToCart: function(evt) {
      var variant = evt.variant;

      if (variant) {
        $(this.selectors.productPrices)
          .removeClass('visibility-hidden')
          .attr('aria-hidden', 'true');

        if (variant.available) {
          $(this.selectors.addToCart).prop('disabled', false);
          $(this.selectors.addToCartText).text(theme.strings.addToCart);
        } else {
          // The variant doesn't exist, disable submit button and change the text.
          // This may be an error or notice that a specific variant is not available.
          $(this.selectors.addToCart).prop('disabled', true);
          $(this.selectors.addToCartText).text(theme.strings.soldOut);
        }
      } else {
        $(this.selectors.addToCart).prop('disabled', true);
        $(this.selectors.addToCartText).text(theme.strings.unavailable);
        $(this.selectors.productPrices)
          .addClass('visibility-hidden')
          .attr('aria-hidden', 'false');
      }
    }

I set this:

if (variant.available) {
          $('#quantity').change(function(event) {
              var productquantity = $(this).val();
                  //console.log(productquantity)
                  if (productquantity <= 0) {
                      $('#AddToCart-product-template').prop('disabled', true);
                  } else {
                      $('#AddToCart-product-template').prop('disabled', false);
                  }
          });
        } else {...

and it works, but only if you first select variant and then select quantity, it doesn't work if you fist select quantity.

EDIT: code updated.

0 Likes