Size variant active state on a custom size drawer modal

[Zeuligan]

How can I identify the variant clicked for size pills, to use that variants size as a button text?

I have built an extension of the product-variant-picker and product-variant-options to include a drawer design of the sizes. So if I pick "Combo" (added choice next to pills or dropdown) in my admin of variant picker block I get a button named "Pick Size" (in storefront) and if I pick that I get a modal drawer animating in from the side showing all variants sizes. So far pretty simple and working as intended. 

Problem I'm unable to solve is that when I click any of the size variants in that list I need to find the variable or state of that variant so I also can write a conditional statement of the button "Pick size" text, to after a variatn size is clicked, display that variants size inside the button. 

In short, how can I change the text "Pick size" to "XL" if I click a variants size named "XL?

Hope I explain this clear enough, my own head is spinning 🙂

[Zeuligan · Accepted solution]

I actually managed to solve it myself with a little help of ChatGPT. 

{% assign first_variant_size = product.variants.first.options[1] %}

{% if product.selected_or_first_available_variant.options[1] != first_variant_size %}

Size picked: {{ product.selected_or_first_available_variant.options[1] }}

{% else %}

Pick a size

{% endif %}