Skip to content

Commit

Permalink
Adds Style Siblings
Browse files Browse the repository at this point in the history
  • Loading branch information
@nathan-scheele
nathan-scheele committed Jul 24, 2024
1 parent 504c53c commit c5768d9
Show file tree
Hide file tree
Showing 4 changed files with 157 additions and 102 deletions.
9 changes: 9 additions & 0 deletions assets/base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3566,3 +3566,12 @@ details-disclosure > details {
transform: translateX(100%) scaleX(0);
}
}

/* Custom */
.is-flex {
display: flex;
}

.is-flex-wrap {
flex-wrap: wrap;
}
32 changes: 22 additions & 10 deletions assets/component-product-variant-picker.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,8 @@ variant-selects {
}

/* Custom styles for Pill display type */
.product-form__input--pill input[type='radio'] + label {
.product-form__input--pill input[type='radio'] + label,
.product-form__input--pill a label {
border: var(--variant-pills-border-width) solid rgba(var(--color-foreground), var(--variant-pills-border-opacity));
background-color: rgb(var(--color-background));
color: rgba(var(--color-foreground));
Expand All @@ -75,7 +76,8 @@ variant-selects {
position: relative;
}

.product-form__input--pill input[type='radio'] + label:before {
.product-form__input--pill input[type='radio'] + label:before,
.product-form__input--pill a label:before {
content: '';
position: absolute;
top: calc(var(--variant-pills-border-width) * -1);
Expand All @@ -88,47 +90,57 @@ variant-selects {
var(--variant-pills-shadow-blur-radius) rgba(var(--color-shadow), var(--variant-pills-shadow-opacity));
}

.product-form__input--pill input[type='radio'] + label:hover {
.product-form__input--pill input[type='radio'] + label:hover,
.product-form__input--pill a label:hover {
border-color: rgb(var(--color-foreground));
}

.product-form__input--pill input[type='radio']:checked + label {
.product-form__input--pill input[type='radio']:checked + label,
.product-form__input--pill a.checked label {
background-color: rgb(var(--color-foreground));
color: rgb(var(--color-background));
}

@media screen and (forced-colors: active) {
.product-form__input--pill input[type='radio']:checked + label {
.product-form__input--pill input[type='radio']:checked + label,
.product-form__input--pill a.checked label {
text-decoration: underline;
}

.product-form__input--pill input[type='radio']:focus-visible + label {
.product-form__input--pill input[type='radio']:focus-visible + label,
.product-form__input--pill a:focus-visible label {
outline: transparent solid 1px;
outline-offset: 2px;
}
}

.product-form__input--pill input[type='radio']:checked + label::selection {
.product-form__input--pill input[type='radio']:checked + label::selection,
.product-form__input--pill a.checked label::selection {
background-color: rgba(var(--color-background), 0.3);
}

.product-form__input--pill input[type='radio']:disabled + label,
.product-form__input--pill input[type='radio'].disabled + label {
.product-form__input--pill input[type='radio'].disabled + label,
.product-form__input--pill a.disabled label {
border-color: rgba(var(--color-foreground), 0.1);
color: rgba(var(--color-foreground), 0.6);
text-decoration: line-through;
}

.product-form__input--pill input[type='radio'].disabled:checked + label,
.product-form__input--pill input[type='radio']:disabled:checked + label {
.product-form__input--pill input[type='radio']:disabled:checked + label,
.product-form__input--pill a.disabled.checked label {
color: rgba(var(--color-background), 0.6);
}
.product-form__input--pill input[type='radio']:focus-visible + label {

.product-form__input--pill input[type='radio']:focus-visible + label,
.product-form__input--pill a:focus-visible label {
box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.55);
}

/* Fallback */
.product-form__input--pill input[type='radio'].focused + label {
.product-form__input--pill a.focused label {
box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.55);
}

Expand Down
207 changes: 117 additions & 90 deletions snippets/product-variant-options.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,101 +20,128 @@
assign product_form_id = 'product-form-' | append: section.id
-%}

{%- for value in option.values -%}
{%- liquid
assign swatch_focal_point = null
if value.swatch.image
assign image_url = value.swatch.image | image_url: width: 50
assign swatch_value = 'url(' | append: image_url | append: ')'
assign swatch_focal_point = value.swatch.image.presentation.focal_point
elsif value.swatch.color
assign swatch_value = 'rgb(' | append: value.swatch.color.rgb | append: ')'
else
assign swatch_value = null
endif
{%- if option.name == 'Color' -%}
{%- assign siblings = product.metafields.product_page.style_siblings.value -%}
{%- for sibling in siblings -%}
{%- liquid
assign option_disabled = true
if sibling.available
assign option_disabled = false
endif
-%}

assign option_disabled = true
if value.available
assign option_disabled = false
endif
-%}
{%- capture label_unavailable -%}
<span class="visually-hidden label-unavailable">
{{- 'products.product.variant_sold_out_or_unavailable' | t -}}
</span>
{%- endcapture -%}
<a
href="{{ sibling.url }}"
class="{% if sibling.id == product.id %}checked{% endif %}{% if option_disabled %} disabled{% endif %}"
>
<label>
{{ sibling.options_by_name.Color.values[0] }}
{{ label_unavailable }}
</label>
</a>
{%- endfor -%}
{%- else -%}
{%- for value in option.values -%}
{%- liquid
assign swatch_focal_point = null
if value.swatch.image
assign image_url = value.swatch.image | image_url: width: 50
assign swatch_value = 'url(' | append: image_url | append: ')'
assign swatch_focal_point = value.swatch.image.presentation.focal_point
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 -%}
assign option_disabled = true
if value.available
assign option_disabled = false
endif
-%}

{%- capture input_name -%}
{{ option.name }}-{{ option.position }}
{%- endcapture -%}
{%- capture input_id -%}
{{ section.id }}-{{ option.position }}-{{ forloop.index0 -}}
{%- endcapture -%}

{%- capture input_dataset -%}
data-product-url="{{ value.product_url }}"
data-option-value-id="{{ value.id }}"
{%- endcapture -%}
{%- capture input_name -%}
{{ option.name }}-{{ option.position }}
{%- endcapture -%}

{%- capture label_unavailable -%}
<span class="visually-hidden label-unavailable">
{{- 'products.product.variant_sold_out_or_unavailable' | t -}}
</span>
{%- endcapture -%}
{%- capture input_dataset -%}
data-product-url="{{ value.product_url }}"
data-option-value-id="{{ value.id }}"
{%- endcapture -%}

{%- if picker_type == 'swatch' -%}
{%- capture help_text -%}
<span class="visually-hidden">{{ value | escape }}</span>
{{ label_unavailable }}
{%- capture label_unavailable -%}
<span class="visually-hidden label-unavailable">
{{- 'products.product.variant_sold_out_or_unavailable' | t -}}
</span>
{%- endcapture -%}
{%
render 'swatch-input',
id: input_id,
name: input_name,
value: value | escape,
swatch: value.swatch,
product_form_id: product_form_id,
checked: value.selected,
visually_disabled: option_disabled,
shape: block.settings.swatch_shape,
help_text: help_text,
additional_props: input_dataset
%}
{%- elsif picker_type == 'button' -%}
<input
type="radio"
id="{{ input_id }}"
name="{{ input_name }}"
value="{{ value | escape }}"
form="{{ product_form_id }}"
{% if value.selected %}
checked
{% endif %}
{% if option_disabled %}
class="disabled"
{% endif %}
{{ input_dataset }}
>
<label for="{{ input_id }}">
{{ value -}}
{{ label_unavailable }}
</label>
{%- elsif picker_type == 'dropdown' or picker_type == 'swatch_dropdown' -%}
<option
id="{{ input_id }}"
value="{{ value | escape }}"
{% if value.selected %}
selected="selected"
{% endif %}
{% if swatch_value and picker_type == 'swatch_dropdown' %}
data-option-swatch-value="{{ swatch_value }}"
{% if swatch_focal_point %}
data-option-swatch-focal-point="{{ swatch_focal_point }}"

{%- if picker_type == 'swatch' -%}
{%- capture help_text -%}
<span class="visually-hidden">{{ value | escape }}</span>
{{ label_unavailable }}
{%- endcapture -%}
{%
render 'swatch-input',
id: input_id,
name: input_name,
value: value | escape,
swatch: value.swatch,
product_form_id: product_form_id,
checked: value.selected,
visually_disabled: option_disabled,
shape: block.settings.swatch_shape,
help_text: help_text,
additional_props: input_dataset
%}
{%- elsif picker_type == 'button' -%}
<input
type="radio"
id="{{ input_id }}"
name="{{ input_name }}"
value="{{ value | escape }}"
form="{{ product_form_id }}"
{% if value.selected %}
checked
{% endif %}
{% endif %}
{{ input_dataset }}
>
{% if option_disabled -%}
{{- 'products.product.value_unavailable' | t: option_value: value -}}
{%- else -%}
{{- value -}}
{%- endif %}
</option>
{%- endif -%}
{%- endfor -%}
{% if option_disabled %}
class="disabled"
{% endif %}
{{ input_dataset }}
>
<label for="{{ input_id }}">
{{ value -}}
{{ label_unavailable }}
</label>
{%- elsif picker_type == 'dropdown' or picker_type == 'swatch_dropdown' -%}
<option
id="{{ input_id }}"
value="{{ value | escape }}"
{% if value.selected %}
selected="selected"
{% endif %}
{% if swatch_value and picker_type == 'swatch_dropdown' %}
data-option-swatch-value="{{ swatch_value }}"
{% if swatch_focal_point %}
data-option-swatch-focal-point="{{ swatch_focal_point }}"
{% endif %}
{% endif %}
{{ input_dataset }}
>
{% if option_disabled -%}
{{- 'products.product.value_unavailable' | t: option_value: value -}}
{%- else -%}
{{- value -}}
{%- endif %}
</option>
{%- endif -%}
{%- endfor -%}
{%- endif -%}
11 changes: 9 additions & 2 deletions snippets/product-variant-picker.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,12 @@
endif
endif
-%}
{%- if picker_type == 'swatch' -%}
{%- if option.name == 'Color' -%}
<fieldset class="js product-form__input product-form__input--pill is-flex is-flex-wrap">
<legend class="form__label">{{ option.name }}</legend>
{% render 'product-variant-options', product: product, option: option, block: block, picker_type: 'button' %}
</fieldset>
{%- elsif picker_type == 'swatch' -%}
<fieldset class="js product-form__input product-form__input--swatch">
<legend class="form__label">
{{ option.name }}:
Expand Down Expand Up @@ -85,6 +90,8 @@
{%- endif -%}
{%- endfor -%}

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

0 comments on commit c5768d9

Please sign in to comment.