Add link to SOLD OUT button?

Anybody know how to add a link to the "SOLD OUT" button? I thought I had a solution but it didn't work well with variants.

Using the debut theme.

0 Likes
whiteoctopuswd
Tourist
8 0 1

Hi Smilingdog,

Yea, if you have some variants available and some sold-out, then the only thing I can think of is that you will have no other way but to loop thru each product's variant and make sure none of them are available in order to skip those from view.

Pierre-Luc

0 Likes

Just to be clear, what I'm looking to do is have the SOLD OUT button change to CONTACT US (which I've done through languages... and that works just fine including the variants) AND have it link to a contact page. Right now, anything sold out has a disabled button, and no link.

Make sense?

0 Likes

I was doing something simple like this, but it just breaks when a user goes back and forth between variants. 

Button section below is all the same. The "unless" is all I added which should determine if the current variant is available, and if not display a link to the contact page (href that looks like a button). But, again, it doesn't seem to work if the user goes back and forth selecting different variant options.

 

{% unless current_variant.available %}
                <div id="contact-us-button">
                  <a href="/pages/contact-us" class="btn product-form__cart-submit">Contact us</a></div>
				{%- else -%}
                <button type="submit" name="add"
                  {% unless current_variant.available %} aria-disabled="true"{% endunless %}
                  aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
                  class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"
                  data-add-to-cart>
                  <span data-add-to-cart-text>
                    {% unless current_variant.available %}
                      {{ 'products.product.sold_out' | t }}
                    {% else %}
                      {{ 'products.product.add_to_cart' | t }}
                    {% endunless %}
                  </span>
                  <span class="hide" data-loader>
                    {% include 'icon-spinner' %}
                  </span>
                </button>
{% endunless %}                

 

0 Likes

Has anybody done this with debut?

0 Likes
tristancliffe
Tourist
15 0 1

@smilingdog Did you ever resolve this? I am trying to the same thing and variants always break it.

Feels like a simple change, but the button seems to generated elsewhere when selecting a new variant. Product-template.liquid code is only, apparently, used on first load of the page. 

tristancliffe
Tourist
15 0 1

Dang!

0 Likes