Add link to SOLD OUT button?

Highlighted

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
Highlighted
New Member
5 0 0

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
Highlighted

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
Highlighted

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
Highlighted

Has anybody done this with debut?

0 Likes