disable add to cart button if variant out of stock

New Member
51 0 0

Hello.

 

On my wishlist page I have a size selector dropdown and an add to cart button below it for each product, and I want it so when a user selects a variant from the dropdown that is out of stock the disabled class is added to the button (I have already styled the disabled class in my css). I will add my code below for the full section if anyone could help me? Thanks. 

 

My code:

<tbody>
                {%- assign wishlist_size = customer.metafields.wishlist | size -%}
                
                {%- for metafield in customer.metafields.wishlist -%}
                {%- assign product_handle = metafield | last -%}
                {%- assign my_product = all_products[product_handle] -%}
                {%- assign current_variant = my_product.selected_or_first_available_variant -%}
                {%- assign featured_image = current_variant.featured_image | default:my_product.featured_image -%}
                <tr class="small-12 medium-6 large-4 columns product wishlistTR">
                  <td class="product-remove">
                    <form method="post" action="/contact" class="wishlist-form" enctype="multipart/form-data">
                      <input type="hidden" name="customer" value="{{ customer.id }}" />
                      <input type="hidden" name="shop" value="{{ shop.permanent_domain }}" />
                      <input type="hidden" name="product" value="{{ my_product.id }}" />
                      <a href="javascript&colon;;" class="remove remove_from_wishlist" title="{{ 'wishlists.wishlist.remove_product' | t }}">×</a>
                    </form>
                  </td>
                  <td class="product-thumbnail">
                    <a href="{{ my_product.url | within: collections.all }}">
                      <img src="{{ featured_image | img_url:'550x' }}" alt="{{ my_product.title | escape }}" /></a>
                  </td>
                  <td class="product-name">
                    <a href="{{ my_product.url | within: collections.all }}">{{ my_product.title | escape }}</a>
                  </td>
                  <td class="product-price">
                    {%- if current_variant.compare_at_price > current_variant.price -%}
                    <del style="font-weight:400;font-size:0.8333rem;color:#666!important"><span style="font-size:0.8333rem;" class="wishlist-price-old money">{{ current_variant.compare_at_price | money }}</span></del>&nbsp;&nbsp;
                    {%- endif -%}
                    <ins style="font-size:0.8333rem;text-decoration:none"><span style="font-size:0.8333rem;font-weight:400" class="price-new money">{{ current_variant.price | money }}</span></ins>
                    <!--<p style="color:#ff1a3a;font-size:0.833rem;font-weight:400;text-transform:uppercase" class="productSaver{% if current_variant.compare_at_price < current_variant.price %} hide{% endif %}">{% if current_variant.compare_at_price %}<span>YOU SAVE: </span>{{ current_variant.compare_at_price | minus: item.variant.price | money }}{% endif %}</p>-->
                    <p style="visibility:hidden;color:#ff1a3a;font-size:0.833rem;font-weight:400;text-transform:uppercase;margin:0;{% if current_variant.compare_at_price %}visibility:visible!important;{% endif %}" class="productSaver"><span>YOU SAVE: </span>{{ current_variant.compare_at_price | minus: current_variant.price | money }}</p>
                    <!--<span class="product-stock-status">
                    {%- if current_variant -%}
                      {%- if current_variant.available -%}
                        {%- if current_variant.inventory_management == "shopify" and current_variant.inventory_policy != "continue" -%}
                          {%- if current_variant.inventory_quantity > 0 -%}
                            <span class="stock in-stock">{{ 'products.product.in_stock' | t | escape }}</span>
                          {%- else -%}
                            <span class="stock out-of-stock">{{ 'products.product.out_of_stock' | t | escape }}</span>
                          {%- endif -%}
                        {%- else -%}
                          <span class="stock in-stock">{{ 'products.product.in_stock' | t | escape }}</span>
                        {%- endif -%}
                      {%- else -%}
                        <span class="stock out-of-stock">{{ 'products.product.out_of_stock' | t | escape }}</span>
                      {%- endif -%}
                    {%- else -%}
                      <span class="stock out-of-stock">{{ 'products.product.unavailable' | t | escape }}</span>
                    {%- endif -%}
                  </span>-->
                  </td>
                  {%- if settings.catalog_mode == '' -%}
                  <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 variant.inventory_quantity < 0 %} 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>
                  {%- endif -%}
                </tr>
                {%- endfor -%}
                <tr class="wishlist-empty{% if wishlist_size > 0 %} hide{% endif %}">
                  <td style="text-align:center;font-size:0.8333rem" colspan="6">{{ 'wishlists.wishlist.no_products' | t }}</td>
                </tr>
              </tbody>
0 Likes