Disable Add To Cart if Add-On Items Are Not In Stock

This is an advanced JavaScript  snippet

Overview:

This code block will run an ajax get request to the Shopify Products API each time an option which adds a product is selected by the customer. It will then check the inventory of that add-on product, and if that product is out of stock, it will disable the add to cart button, and notify the customer that they must make another selection. Once the customer has made their selections, it will check inventory levels one final time once the customer clicks the Add to Cart button. If all add-ons are in stock, the items will be added to the cart! This all happens within a fraction of a second, and should not interrupt the shopping experience of the customer.

Since this is an advanced JavaScript snippet, it will require the ability to swap out your add to cart variable values in the code below. 

If you have any trouble with this snippet, or if you require any guidance at all, please feel free to submit a support ticket, and we would be happy to help!

---

Code:

Add this to your Theme.liquid file just before the closing body tag element.

Be sure to wrap your function in a script tag and change the variables to match the classes/ids within your theme.

    $(function() {
      var productIDList = [];
      var outofstock = false;

      $("body").on("productOptionsLoaded", function(e,container) {
        var form = container.closest("form");
        var cartBtn = form.find(".product-form__cart-submit"); //Swap this value out with your add to cart button class
        $(cartBtn).click(function(e){
          e.preventDefault();
          inventoryCheck(form, productIDList, true);
        })
      });
      
      $('body').on('productOptionsPriceChange', function(e, price, container, products) {
        var form = container.closest("form");
        if(form.find(".product-form__cart-submit")[0].hasAttribute("disabled") && !form.find(".product-form__cart-submit").hasClass("options-disabled")) {
          return;
        }
        productIDList = products;
	inventoryCheck(form, products, false);
      });
      
      function inventoryCheck(form, products, isSubmit){
        var outofstockTitle = [];
        var cartBtn = form.find(".product-form__cart-submit"); //Swap this value out with your add to cart button class
        var spanStockMsg = form.find("#options-stock-msg");
        var ajaxRequests = [];

        outofstock = false;
        spanStockMsg.css("padding", "10px 0px");
        spanStockMsg.css("display", "block");
        spanStockMsg.show();
        cartBtn.hide();
        spanStockMsg.text("Checking inventory...");
        
        if(products == null) {
          products = [];
        }

        $.each(products, function(i, product) {
          var req = $.ajax({
            method: "GET",
            url: "/products/" + product.handle + ".js",
            dataType: "json",
            success: function (shopifyProduct) {
              var variant = getVariant(product.variantID);
              var productTitle = product.title;
              if(!shopifyProduct.available || variant == null) {
                outofstock = true;
                outofstockTitle.push(productTitle);
              }
              if(variant != null) {
                if(!variant.available) {
                  outofstock = true;
                  outofstockTitle.push(variant.title);
                }
              }
              function getVariant(id) {
                var returnVariant = null;
                $.each(shopifyProduct.variants, function(i, variant) {
                  if(variant.id == id) {
                    returnVariant = variant;
                    return;
                  }
                });
                return returnVariant;
              }
            }
          });
          ajaxRequests.push(req);
        });

        $.when.apply($, ajaxRequests).then(function() {
          if(outofstock) {
            form.find(".product-form__cart-submit").find("span").text("Unavailable");
            form.find(".product-form__cart-submit").attr("disabled", "disabled");
            form.find(".product-form__cart-submit").addClass("options-disabled");
            cartBtn.show();

            if (outofstockTitle.length == 1){
              spanStockMsg.html("This product is out of stock:" + outofstockTitle + " ");
            } else {
              spanStockMsg.html("These products are out of stock:" + outofstockTitle.join(", ") + " ");
            }
          } else {
            spanStockMsg.hide();
            form.find(".product-form__cart-submit").find("span").text("Add to cart");
            form.find(".product-form__cart-submit").removeAttr("disabled");
            cartBtn.show();
            if (isSubmit){
              form.submit();
            }
          }
        });
      }
    });