CODEWITHSUNDEEP
jqueryshopifyliquid
Caroline Elisa
Caroline Elisa

Reputation: 1246

Hide add to cart button when quantity max value is 0 (Shopify)

I am trying out Shopify and BookThatApp to hire products online.

The app forces the quantity field to have a max value of 0 when it is booked out, meaning you can't proceed to purchase. For usability I would like to grey out the add to cart button when this is the case.

See for yourself selecting May 13 then 3 days:

http://propeller-6.myshopify.com/products/007-never-say-never-again-sign

I was thinking, and tried, something along these lines:

jQuery(document).ready(function($){
    $( "#product-select-option-0" ).change(function() {
      var maxquantity = $('#quantity').attr('max');
      if  (maxquantity = 0) {
         // hide button
      }
    });
});

Am I close? :)

Thanks Caroline

Upvotes: 2

Views: 2030

Answers (2)

Caroline Elisa
Caroline Elisa

Reputation: 1246

Ok, the main issue was with the change function. I got it working like this:

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

Also changed = to == and .attr('max'); to .attr('value'); (as max is only supported in Internet Explorer 10, Opera, Chrome, and Safari).

Upvotes: 2

Daan
Daan

Reputation: 2799

I think it doesn't work because you aren't using a right Javascript condition.

if (maxquantity = 0) { is not correct Javascript, you probably would want to change the condition to either <= which means: less or equal to 0 or == which means: equal to 0.

jQuery(document).ready(function($){
    $( "#product-select-option-0" ).change(function() {
      var maxquantity = $('#quantity').attr('max');
      if  (maxquantity <= 0) {
         // hide button
      }
    });
});

Upvotes: 1

Related Questions