Skip to content

Instantly share code, notes, and snippets.

@dpw1
Last active March 18, 2024 10:34
Show Gist options
  • Save dpw1/814795c4fbac6a95a27e7539a324e6b9 to your computer and use it in GitHub Desktop.
Save dpw1/814795c4fbac6a95a27e7539a324e6b9 to your computer and use it in GitHub Desktop.
{%- liquid
assign variants_available_arr = product.variants | map: 'available'
assign variants_option1_arr = product.variants | map: 'option1'
assign variants_option2_arr = product.variants | map: 'option2'
assign variants_option3_arr = product.variants | map: 'option3'
assign product_form_id = 'product-form-' | append: section.id
-%}
<style>
.EzfyColorVariants{
display: flex;
opacity: 0;
transition: all .32s;
align-items: center;
}
.EzfyColorVariants--loaded{
opacity: 1;
}
.EzfyColorVariants-swatch--has-color{
width: 33px;
height: 33px;
border-radius: 50%;
position: relative;
display: inline-block;
overflow: hidden;
margin: 3px 5px;
}
.EzfyColorVariants-swatch--has-color label >span{
display: none;
}
.EzfyColorVariants-swatch--has-color label{
width: 33px;
height: 33px;
border-radius: 50%;
margin: unset !important;
padding: unset !important;
font-size: 0 !important;
background: unset !important;
}
.EzfyColorVariants-swatch--has-color .EzfyColorVariants-color{
position: absolute;
width: 26px;
height: 26px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
display: inline-block;
display: block !important;
pointer-events: none;
object-fit: contain;
}
.EzfyColorVariants-swatch--has-color{
display: flex;
}
.product-form__input--pill .EzfyColorVariants .EzfyColorVariants-swatch--has-color input[type=radio]+label{
border: 2px solid rgba(0, 0, 0, 0.1) !important;
}
.product-form__input--pill .EzfyColorVariants .EzfyColorVariants-swatch--has-color input[type=radio]:checked+label{
background: unset !important;
border: 2px solid rgba(0, 0, 0, 0.4) !important;
}
</style>
{% if old_dawn %}
<div class="EzfyColorVariants">
{%- for value in option.values -%}
<div class="EzfyColorVariants-swatch"
data-tippy-content="{{ value }}"
>
<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>
<div
class="EzfyColorVariants-color"
></div>
</div>
{% endfor %}
</div>
{% else %}
<div class="EzfyColorVariants">
{%- for value in option.values -%}
{%- liquid
assign option_disabled = true
for option1_name in variants_option1_arr
case option.position
when 1
if variants_option1_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
assign option_disabled = false
endif
when 2
if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
assign option_disabled = false
endif
when 3
if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
assign option_disabled = false
endif
endcase
endfor
if value.swatch.image
assign image_url = value.swatch.image | image_url: width: 50
assign swatch_value = 'url(' | append: image_url | append: ')'
elsif value.swatch.color
assign swatch_value = 'rgb(' | append: value.swatch.color.rgb | append: ')'
else
assign swatch_value = null
endif
-%}
{%- capture input_id -%}
{{ section.id }}-{{ option.position }}-{{ forloop.index0 -}}
{%- endcapture -%}
{%- capture label_unavailable %}
<span class="visually-hidden label-unavailable">
{{- 'products.product.variant_sold_out_or_unavailable' | t -}}
</span>
{%- endcapture %}
{%- if picker_type == 'swatch' -%}
{% assign checked = false %}
{% if option.selected_value == value %}
{% assign checked = true %}
{% endif %}
{%
render 'swatch-input',
id: input_id,
name: option.name,
value: value | escape,
product_form_id: product_form_id,
checked: checked,
disabled: option_disabled,
shape: block.settings.swatch_shape,
help_text: label_unavailable
%}
{%- elsif picker_type == 'button' -%}
<div
class="EzfyColorVariants-swatch"
data-tippy-content="{{ value }}"
>
<input
type="radio"
id="{{ input_id }}"
name="{{ option.name }}"
value="{{ value | escape }}"
form="{{ product_form_id }}"
{% if option.selected_value == value %}
checked
{% endif %}
{% if option_disabled %}
class="disabled"
{% endif %}
>
<label for="{{ input_id }}">
<span>{{ value }}</span></label
>
{% assign color_name = value | downcase %}
<div
class="EzfyColorVariants-color"
></div>
</div>
{%- elsif picker_type == 'dropdown' or picker_type == 'swatch_dropdown' -%}
<option
value="{{ value | escape }}"
{% if option.selected_value == value %}
selected="selected"
{% endif %}
{% if swatch_value and picker_type == 'swatch_dropdown' %}
data-option-swatch-value="{{ swatch_value }}"
{% endif %}
>
{% if option_disabled -%}
{{- 'products.product.value_unavailable' | t: option_value: value -}}
{%- else -%}
{{- value -}}
{%- endif %}
</option>
{%- endif -%}
{%- endfor -%}
</div>
{% endif %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment