Hi all
I am trying to get the picker order on my page to be
Colour (Swatch)
Size (Drop-down)
Material (Drop-down)
I can get the order working with items that do not have a material option but when an item has a material option the order changes to
Size (Drop-down)
Colour (Swatch)
Material (Drop-down)
It is driving me bonkers lol
Here is my product-variant-picker code
{%- unless product.has_only_default_variant -%}
<variant-selects
id="variant-selects-{{ section.id }}"
data-section="{{ section.id }}"
{{ block.shopify_attributes }}
>
{%- liquid
assign ordered_option_names = 'Colour,Shape,Material' | split: ','
assign ordered_options = '' | split: ','
for option_name in ordered_option_names
for option in product.options_with_values
if option.name == option_name
assign ordered_options = ordered_options | concat: [option]
endif
endfor
endfor
-%}
{%- for option in ordered_options -%}
{%- liquid
assign swatch_count = option.values | map: 'swatch' | compact | size
assign picker_type = block.settings.picker_type
if swatch_count > 0 and block.settings.swatch_shape != 'none'
if block.settings.picker_type == 'dropdown'
assign picker_type = 'swatch_dropdown'
else
assign picker_type = 'swatch'
endif
endif
if option.name == 'Size'
assign picker_type = 'dropdown'
endif
if option.name == 'Material'
assign picker_type = 'dropdown'
endif
-%}
{%- if picker_type == 'swatch' -%}
<fieldset class="js product-form__input product-form__input--swatch">
<legend class="form__label">
{{ option.name }}:
<span data-selected-value>
{{- option.selected_value -}}
</span>
</legend>
{% render 'product-variant-options',
product: product,
option: option,
block: block,
picker_type: picker_type
%}
</fieldset>
{%- elsif picker_type == 'button' -%}
<fieldset class="js product-form__input product-form__input--pill add-new">
<legend class="form__label">{{ option.name }}</legend>
{% render 'product-variant-options',
product: product,
option: option,
block: block,
picker_type: picker_type
%}
</fieldset>
<fieldset class="js product-form__input product-form__input--pill">
{%- liquid
assign optionNames = settings.optionName | split:","
assign useColor = false
for optionColor in optionNames
if optionColor == option.name
assign useColor = true
break
endif
endfor
-%}
{%- if useColor -%}
<legend class="form__label">{{ option.name }}:<span id="selected-{{ option.name }}"> {{ option.selected_value }}</span></legend>
{% render 'color-option', product: product, option: option, block: block %}
{%- else -%}
<legend class="form__label">{{ option.name }}</legend>
{% render 'product-variant-options',
product: product,
option: option,
block: block,
picker_type: picker_type
%}
{%- endif -%}
</fieldset>
{%- else -%}
<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">
{%- if picker_type == 'swatch_dropdown' -%}
<span
data-selected-value
class="dropdown-swatch"
>
{% render 'swatch', swatch: option.selected_value.swatch, shape: block.settings.swatch_shape %}
</span>
{%- endif -%}
<select
id="Option-{{ section.id }}-{{ forloop.index0 }}"
class="select__select"
name="options[{{ option.name | escape }}]"
form="{{ product_form_id }}"
>
{% render 'product-variant-options',
product: product,
option: option,
block: block,
picker_type: picker_type
%}
</select>
<span class="svg-wrapper">
{{- 'icon-caret.svg' | inline_asset_content -}}
</span>
</div>
</div>
{%- endif -%}
{%- endfor -%}
<script type="application/json" data-selected-variant>
{{ product.selected_or_first_available_variant | json }}
</script>
</variant-selects>
{%- endunless -%}
Thank you in advance all
