How to re-order product options using liquid

Online Store and Theme Development
1

So imagine this scenario

Merchant wants to display Color option values first in the form even if the VAs messed up the order in the product admin

So even if they set it up Size then Color it should always display Color first

{% assign actual_order = "Fit, Size, Color" | strip | split: ',' %}
{% assign preferred_order = "Color, Size, Fit" | strip | split: ',' %}

{% assign final_order = "" %}

{% for value in preferred_order %}
  {% if actual_order contains value %}
    {% assign final_order = final_order | append: value | append: ',' %}
  {% endif %}
{% endfor %}

But my God, it’s prone to so much bugs, we could forget values, they could misspel the options, etc.. let alone the unneccissary looping

If you had this challenge, how would you approach it?

2

Solved it,

{% liquid
   assign prod = all_products['dark-denim-top']
   assign preferred_order = "   Color, Size    , Fit    " | remove: ' ' | split: ','
   assign combined_options = preferred_order | concat: prod.options | uniq
%}

{% for option in combined_options %}

    {% # skip if the product doesn't have this option %}
    {% unless prod.options contains option %}
      {% continue %}
    {% endunless %}

    {% for value in prod.options_by_name[option].values %}
      {% # code related to the option_value %}
    {% endfor %}

{% endfor %}