CODEWITHSUNDEEP
shopifyvariant
Adam Bell
Adam Bell

Reputation: 1045

Displaying different button for specific variant

Having an issue where on this 2 variant product, the 100ml option when clicked should bring up Buy at Macy's. It only does if you go to the URL with the variant hard coded in.

This is my current liquid.

<div class="product-form__buttons">
  {%- assign variant_id_for_macy_link = 39326818664502 -%}

  <button
    id="ProductSubmitButton-{{ section_id }}"
    type="submit"
    name="add"
    class="product-form__submit button button--full-width {% if show_dynamic_checkout %}button--secondary{% else %}button--primary{% endif %}"
    {% if product.selected_or_first_available_variant.id != variant_id_for_macy_link %}
      {%- if product.selected_or_first_available_variant.available == false or quantity_rule_soldout or product.selected_or_first_available_variant == nil -%}
        disabled
      {%- endif -%}
    {% endif %}
  >
    <span>
      {%- if product.selected_or_first_available_variant.id == variant_id_for_macy_link -%}
        <a href="https://www.macys.com" class="button button--primary" style="color: inherit; text-decoration: none;">Buy at Macy's</a>
      {%- elsif product.selected_or_first_available_variant == nil -%}
        {{ 'products.product.unavailable' | t }}
      {%- elsif product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
        {{ 'products.product.sold_out' | t }}
      {%- else -%}
        {{ 'products.product.add_to_cart' | t }}
      {%- endif -%}
    </span>
    {%- render 'loading-spinner' -%}
  </button>

  {%- if show_dynamic_checkout -%}
    {{ form | payment_button }}
  {%- endif -%}
</div>

Upvotes: 0

Views: 89

Answers (1)

Bernardo Ayala
Bernardo Ayala

Reputation: 97

Liquid only works on the server side, so you can't change the button when a variant is selected using liquid. For that you'll need to add some JavaScript to handle the button content on variant change.

How you can do that will depend on the code that handles the variant selectors. Usually, theme developers dispatch custom events on variant change, but if the code is minified it will be hard to get the event's name.

If the URL changes on variant change, you could try using the postate event.

Upvotes: 1

Related Questions