Disable add to cart button if size selected not in stock

New Member
51 0 0

Hello all, 

 

On my wishlist page I am attempting to add a .disabled class to the add to cart button when a variant is not in stock, for example when a customer clicks on the drop down arrow and selects 'Medium' the add to cart button is disabled because it is out of stock, and then becomes clickable again when they select another size which is in stock. 

 

The code for my buttons and soze selector etc is below. Thanks. 

<td class="product-add-to-cart">
                    <div class="product_after_shop_loop_buttons">
                      {%- if my_product.available -%}
                        {%- if my_product.variants.size > 1 -%}
                        <form action="/cart/add" method="post" enctype="multipart/form-data">
                          <input type="hidden" name="quantity" value="1" />
                          <span class="sizeSelector">
                          <select class="wishlistSelector-button button dropdown" name="id">
                            {%- for variant in my_product.variants -%}
                            <option value="{{variant.id}}"  {% if variant == product.selected_or_first_available_variant %} selected {%endif %}>{{ variant.title }}</option>{%- endfor -%}
                          </select>
                          </span>
                          <a rel="nofollow" href="{{ my_product.url | within: collection }}"class="button product_type_simple add_to_cart_button ajax_add_to_cart {% if current_varient.available == true %}disabled{% endif %}">
                            <span class="button-loader"></span>
                            {{- 'products.product.add_to_cart' | t | escape -}}
                          </a>
                        </form>
                        {%- endif -%}
                      {%- else -%}
                      <a rel="nofollow" href="{{ my_product.url | within: collection }}" class="button product_type_simple">
                        <span class="button-loader"></span>
                        {{- 'products.product.read_more' | t | escape -}}
                      </a>
                      {%- endif -%}
                    </div>
                  </td>
0 Likes
Shopify Expert
2467 414 519

Hi @DEAUXTECH 

Thats depend on your theme variants select callback function. which theme you have ?

find your callback function in Asset->theme.js and find if(variant) or "_onSelectChange" or variants in file and manage code to add disable class. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
New Member
51 0 0

Hello, 

 

This is all my code for the _OnSelectChange call back. I have tried to add a disabled class using Shopify 'if statements' but have had no luck? 

 slate.Variants = function() {
    function p(v) {
      this.$container = v.$container, this.product = v.product, this.singleOptionSelector = v.singleOptionSelector, this.originalSelectorId = v.originalSelectorId, this.enableHistoryState = v.enableHistoryState, this.currentVariant = this._getVariantFromOptions(), $(this.singleOptionSelector, this.$container).on('change', this._onSelectChange.bind(this))
    }
    return p.prototype = _.assignIn({}, p.prototype, {
      _getCurrentOptions: function() {
        var v = _.map($(this.singleOptionSelector, this.$container), function(y) {
          var C = $(y),
            k = C.attr('type'),
            x = {};
          return 'radio' === k || 'checkbox' === k ? !!C[0].checked && (x.value = C.val(), x.index = C.data('index'), x) : (x.value = C.val(), x.index = C.data('index'), x)
        });
        return v = _.compact(v), v
      },
      _getVariantFromOptions: function() {
        var v = this._getCurrentOptions(),
          y = this.product.variants,
          C = _.find(y, function(k) {
            return v.every(function(x) {
              return _.isEqual(k[x.index], x.value)
            })
          });
        return C
      },
      _onSelectChange: function() {
        var v = this._getVariantFromOptions();
        this.$container.trigger({
          type: 'variantChange',
          variant: v
        }), v && (this._updateMasterSelect(v), this._updateImages(v), this._updatePrice(v), this._updateSKU(v), this.currentVariant = v, this.enableHistoryState && this._updateHistoryState(v))
      },
0 Likes
Shopify Expert
2467 414 519

Now you have to check bellow condition in this code and check what you get

if (variant && variant.available == true) {
//available
}else{
//not available so add disable class
}

 First console 'variant.available' so you get idea what you get in this variable 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
51 0 0

Would this be in the liquid or the .js file? Thanks. 

0 Likes