Product Page Colors as Swatches & Size as Dropdown

[AsadBaig]

Hey Community, I'm working on product options and i want to show my colors and buttons and size as dropdown. I'm using dawn theme default radio and select selectors. When i add only single option(color or size) it works good as color shows in buttons and size shows in dropdown. But when i use both options in my product page both options didn't work and my "add to cart button" shows unavailable. I have attached my code of variants. Please let me know if anyone can help

{%- when 'variant_picker' -%}
              {%- unless product.has_only_default_variant -%}
                {%- if block.settings.show_variants == true -%}
                  {%- for option in product.options_with_values -%}
                    {% if product.options.size > 1 -%}
                    {% if option.name == 'Color'%}
                      <variant-radios class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
                        <fieldset class="js product-form__input">
                          <legend class="form__label">{{ option.name }}</legend>
                          {%- for value in option.values -%}
                            <input type="radio" id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" name="{{ option.name }}" value="{{ value | escape }}" form="{{ product_form_id }}" {% if option.selected_value == value %}checked
                              {% endif %}><label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
                              {{ value }}
                            </label>
                          {%- endfor -%}
                        </fieldset>
                        <script type="application/json">
                          {{ product.variants | json }}
                        </script>
                      </variant-radios>
                    {% else %}
                      <variant-selects class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
                        <div class="product-form__input product-form__input--dropdown">
                          <label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
                            {{ option.name }}
                          </label>
                          <div class="select">
                            <select id="Option-{{ section.id }}-{{ forloop.index0 }}" class="select__select" name="options[{{ option.name | escape }}]" form="{{ product_form_id }}">
                              {%- for value in option.values -%}
                                <option value="{{ value | escape }}">
                                  {{ value }}
                                </option>
                              {%- endfor -%}
                            </select>
                            {% render 'icon-caret' %}
                          </div>
                        </div>

                        <script type="application/json">
                          {{ product.variants | json }}
                        </script>
                      </variant-selects>
                    {%- endif -%}
                  {% endif %}
                  {% endfor %}
                {% endif %}
                {%- endunless -%}

[AsadBaig]

Hey @Elite1, thanks for recommendation but she's marketing expert i need answer from developer who know about custom liquid development.

[Lucid_Polygon]

I think that's because you are using if and else meaning either if will show or else will show.

Instead use two if conditions one to check if it is colour and another to check if it is not colour

[AsadBaig]

I'm closed to the answer. As updateoption() function is not complete but i tried to change it still get undefined in console.

[maapaa02]

try to use this code this will work perfectly

{%- unless product.has_only_default_variant -%}
<variant-radios class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
{%- for option in product.options_with_values -%}
<fieldset class="js product-form__input {% unless forloop.first %}hidden{% endunless %}">
<legend class="form__label">{{ option.name }}</legend>
{%- for value in option.values -%}
<input type="radio" id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
name="{{ option.name }}"
value="{{ value | escape }}"
form="{{ product_form_id }}"
data-handle="trigger-input"
{% if option.selected_value == value %}checked{% endif %}
>
<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
{{ value }}
</label>
{%- endfor -%}
</fieldset>
{%- endfor -%}
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-radios>
<variant-selects class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }} data-update-url="false">
{%- for option in product.options_with_values -%}
<div class="product-form__input product-form__input--dropdown {% if forloop.first %}hidden{% endif %}">
<label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
{{ option.name }}
</label>
<div class="select">
<select id="Option-{{ section.id }}-{{ forloop.index0 }}"
class="select__select"
name="options[{{ option.name | escape }}]"
form="{{ product_form_id }}"
data-handle="trigger-select"
>
{%- for value in option.values -%}
<option value="{{ value | escape }}" {% if option.selected_value == value %}selected="selected"{% endif %}>
{{ value }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
</div>
{%- endfor -%}

<script type="application/json">
{{ product.variants | json }}
</script>
</variant-selects>
{%- endunless -%}

<noscript class="product-form__noscript-wrapper-{{ section.id }}">
<div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %}">
<label class="form__label" for="Variants-{{ section.id }}">{{ 'products.product.product_variants' | t }}</label>
<div class="select">
<select name="id" id="Variants-{{ section.id }}" class="select__select" form="{{ product_form_id }}">
{%- for variant in product.variants -%}
<option
{% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %}
{% if variant.available == false %}disabled{% endif %}
value="{{ variant.id }}"
>
{{ variant.title }}
{%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
- {{ variant.price | money | strip_html }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
</div>
</noscript>

<script>
for (let i = 0; i < 3; i++) {
$('input[data-handle="trigger-input"][name="Color"]').click((e) => {
const value = e.currentTarget.value;
$('select[data-handle="trigger-select"][name="options[Color]"]').val(value )
});
}
$('select[data-handle="trigger-select"][name="options[Size]"]').change((e) => {
const value = e.currentTarget.value;
$(`input[type="radio"][name="Size"][value="${value}"]`).trigger("click")
});
</script>