Add to Cart and Sold Buttons Won't Change With Selections

namsterdamus
New Member
13 0 0

Hey there, I need some help, I'm using the free template Couture and it seems to have a bug and I don't know why. Basically, if the default product is sold out, it shows the sold out button but when I change to an in stock item the button still says sold out. The same goes the other way around, it only stay with what is default. The odd thing is the button itself works correctly regardless of what the actual button graphic says. The code is unchanged from the original template so I don't know what's going on.

      <form action="/cart/add" method="post" class="variants clearfix">
        {% if product.options.size > 1 %}
        <div class="select clearfix">
          <select id="product-select" name='id'>
            {% for variant in product.variants %}
            <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
            {% endfor %}
          </select>
        </div>
        {% elsif product.options.size == 1 and product.variants.size > 1 %}
        <div class="select clearfix">
          <label>{{ product.options[0] }}</label>
          <select id="product-select" name='id'>
            {% for variant in product.variants %}
            <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
            {% endfor %}
          </select>
        </div>
        {% else %}
        <div style="display:none;">
          <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
          <input type="radio" name="{{ product.handle }}" value="{{ product.variants.first.title }}" checked="checked" /> {{ product.variants.first.title }}
        </div>
        {% endif %}
        
        {% if product.price_min < product.compare_at_price_min %}
        <p class="price" id="price-preview">{{ product.price_min | money }} <span>was {{ product.compare_at_price_min | money }}</span></p>
        {% else %}
        <p class="price" id="price-preview">{{ product.price_min | money }}</p>
        {% endif %}
        
        <div class="purchase clearfix">
          {% if product.variants.first.available == true && product.variants.size == 1 %}
          <span><input type="submit" name="add" id="add-to-cart" value="Add to Cart" class="cart cufon" /></span>
          {% else %}
          <span><input type="submit" name="add" id="add-to-cart" value="Sold Out" disabled="disabled" class="cart cufon disabled" /></span>
          {% endif %}
        </div>
      </form>

you can check out the live site at www.soscloth.com. I have no idea what's going on here. Any help would be greatly appreciated.

Thanks,

Nam

0 Likes
Caroline_Schnap
Shopify Staff
Shopify Staff
5704 1 341

Hi Nam,

In your product.liquid template, I went ahead and replaced this line of JavaScript code:

jQuery('#add-to-cart').removeClass('disabled').removeAttr('disabled');

With that one:

jQuery('#add-to-cart').removeClass('disabled').removeAttr('disabled').val('Add to Cart');

Let me know if that solves the problem!

0 Likes
namsterdamus
New Member
13 0 0

 

Hi Caroline,

That worked, so right now it detects the change in stock and changes the button. The only thing however (minor) is that when changing back to an out of stock item, it still says add to cart.

So just followed your thinking and changed this

 

    // variant doesn't exist
    jQuery('#add-to-cart').addClass('disabled').attr('disabled', 'disabled');      // set add-to-cart button to unavailable class and disable button

to this:

 

    // variant doesn't exist
    jQuery('#add-to-cart').addClass('disabled').attr('disabled', 'disabled').val('Sold Out');      // set add-to-cart button to unavailable class and disable button

and it worked.

Thanks again for the help

0 Likes
Caroline_Schnap
Shopify Staff
Shopify Staff
5704 1 341

Awesome! :-)

PS. I emailed Ryan Langlois, the author of the theme, with a link to this thread, so that he fixes the theme in the store tomorrow.

0 Likes
uncle-seiko
New Member
3 0 0

Hi,

I'm having this same problem with the Debut theme. It seems like this thread is pretty old but hoping someone can help me. That theme doesn't have the line of code you'll are referring too.

0 Likes