Need Help with Dynamic Liquid Code Update for Variant Switching

Store Design
7

Hello!

I’m trying to adapt this solution, to my problem, but I’m lost when it comes to JS.
I need to update the Add to Cart button label, based on the variant that customers choose on the product page.
Since the page updates every time the variant changes, I thought that this solution might be close to what I need.

In my buy-buttons.liquid file, I’ve modified the span to output different labels for a button, depending on variant condition:


    {%- if product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
        {{ 'products.product.sold_out' | t }}
    {%- else -%}
        {% if product.selected_or_first_available_variant.inventory_policy == 'continue' and product.selected_or_first_available_variant.inventory_quantity < 1 %}
            {{ 'products.product.preorder' | t }} 
        {%- else -%}
            {{ 'products.product.add_to_cart' | t  }}
        {%- endif -%}
    {%- endif -%}

It’s working, but only on the page load and it doesn’t work when variant is changed.
Could you please help me adapt your solution to this issue?

Thank you!