Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add variant picker sold out UI [temporary solution] #1407

Merged
merged 6 commits into from
Oct 12, 2022
Merged

Add variant picker sold out UI [temporary solution] #1407

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b8e2c6b
Add sold out variant picker UI in Liquid
cfxd Aug 13, 2021
9c3c745
Rebase + include changes from latest code review
cfxd Jun 29, 2022
089307b
Rebase and resolve all (except focus)
cfxd Jul 12, 2022
7f099ca
Implement the focus management fix Ludo provided, Address disabled co…
cfxd Sep 14, 2022
15cf880
Latest suggested changes
cfxd Sep 28, 2022
293d072
Merge branch 'main' into variant-picker-sold-out-ui-temporary-js
ludoboludo Sep 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions assets/global.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -840,18 +840,25 @@ class VariantSelects extends HTMLElement {
}

renderProductInfo() {
const activeElementId = document.activeElement.id;
fetch(`${this.dataset.url}?variant=${this.currentVariant.id}&section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`)
.then((response) => response.text())
.then((responseText) => {
const html = new DOMParser().parseFromString(responseText, 'text/html')
const destination = document.getElementById(`price-${this.dataset.section}`);
const source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`);
cfxd marked this conversation as resolved.
Show resolved Hide resolved
const variantPickerDestination = document.getElementById(`variant-radios-${this.dataset.section}`) || document.getElementById(`variant-selects-${this.dataset.section}`);
const variantPickerSource = html.getElementById(`variant-radios-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`) || html.getElementById(`variant-selects-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`);

if (source && destination) destination.innerHTML = source.innerHTML;
if (variantPickerSource && variantPickerDestination) variantPickerDestination.innerHTML = variantPickerSource.innerHTML;
ludoboludo marked this conversation as resolved.
Show resolved Hide resolved

const price = document.getElementById(`price-${this.dataset.section}`);

if (price) price.classList.remove('visibility-hidden');
this.toggleAddButton(!this.currentVariant.available, window.variantStrings.soldOut);

document.querySelector('variant-radios') ? this.querySelector(`[for="${activeElementId}"]`).focus() : this.querySelector(`#${activeElementId}`).focus();
});
}

Expand Down
10 changes: 8 additions & 2 deletions assets/section-main-product.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,11 +243,17 @@ fieldset.product-form__input .form__label {
background-color: rgba(var(--color-background), 0.3);
}

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

.product-form__input input[type='radio'].disabled:checked + label,
.product-form__input input[type='radio']:disabled:checked + label {
color: rgba(var(--color-background), 0.6);
}
.product-form__input input[type='radio']:focus-visible + label {
cfxd marked this conversation as resolved.
Show resolved Hide resolved
box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
0 0 0 0.5rem rgba(var(--color-foreground), 0.55);
Expand Down
3 changes: 2 additions & 1 deletion locales/en.default.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,8 +143,9 @@
},
"share": "Share this product",
"sold_out": "Sold out",
"unavailable": "Unavailable",
"unavailable": "{{ option_value }} [Unavailable]",
cfxd marked this conversation as resolved.
Show resolved Hide resolved
"vendor": "Vendor",
"variant_sold_out_or_unavailable": "Variant sold out or unavailable",
"video_exit_message": "{{ title }} opens full screen video in same window.",
"view_full_details": "View full details",
"xr_button": "View in your space",
Expand Down
6 changes: 6 additions & 0 deletions locales/en.default.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -787,6 +787,9 @@
"options__2": {
"label": "Pills"
}
},
"show_soldout": {
"label": "Show sold out and unavailable variants indicator"
}
}
},
Expand Down Expand Up @@ -1659,6 +1662,9 @@
"options__2": {
"label": "Pills"
}
},
"show_soldout": {
"label": "Show sold out and unavailable variants indicator"
}
}
},
Expand Down
48 changes: 16 additions & 32 deletions sections/featured-product.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,21 +217,11 @@
{%- for option in product.options_with_values -%}
<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 -%}
{% render 'product-variant-options',
product: product,
option: option,
block: block
%}
</fieldset>
{%- endfor -%}
<script type="application/json">
Expand All @@ -258,16 +248,11 @@
name="options[{{ option.name | escape }}]"
form="{{ product_form_id }}"
>
{%- for value in option.values -%}
<option
value="{{ value | escape }}"
{% if option.selected_value == value %}
selected="selected"
{% endif %}
>
{{ value }}
</option>
{%- endfor -%}
{% render 'product-variant-options',
product: product,
option: option,
block: block
%}
</select>
{% render 'icon-caret' %}
</div>
Expand Down Expand Up @@ -720,6 +705,12 @@
],
"default": "button",
"label": "t:sections.featured-product.blocks.variant_picker.settings.picker_type.label"
},
{
"type": "checkbox",
"id": "show_soldout_variants",
"default": false,
"label": "t:sections.featured-product.blocks.variant_picker.settings.show_soldout.label"
}
]
},
Expand Down Expand Up @@ -894,13 +885,6 @@
{
"type": "title"
},
{
"type": "text",
"settings": {
"text": "{{ section.settings.product.metafields.descriptors.subtitle.value }}",
"text_style": "subtitle"
}
},
ludoboludo marked this conversation as resolved.
Show resolved Hide resolved
{
"type": "price"
},
Expand Down
41 changes: 16 additions & 25 deletions sections/main-product.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -480,21 +480,11 @@
{%- for option in product.options_with_values -%}
<fieldset class="js product-form__input">
cfxd marked this conversation as resolved.
Show resolved Hide resolved
<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 -%}
{% render 'product-variant-options',
product: product,
option: option,
block: block
%}
</fieldset>
{%- endfor -%}
<script type="application/json">
Expand All @@ -520,16 +510,11 @@
name="options[{{ option.name | escape }}]"
form="{{ product_form_id }}"
>
{%- for value in option.values -%}
<option
value="{{ value | escape }}"
{% if option.selected_value == value %}
selected="selected"
{% endif %}
>
{{ value }}
</option>
{%- endfor -%}
{% render 'product-variant-options',
product: product,
option: option,
block: block
%}
</select>
{% render 'icon-caret' %}
</div>
Expand Down Expand Up @@ -1236,6 +1221,12 @@
],
"default": "button",
"label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.label"
},
{
"type": "checkbox",
"id": "show_soldout_variants",
"default": false,
"label": "t:sections.main-product.blocks.variant_picker.settings.show_soldout.label"
}
]
},
Expand Down
71 changes: 71 additions & 0 deletions snippets/product-variant-options.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
{% comment %}
Renders product variant options

Accepts:
- product: {Object} product object.
- option: {Object} current product_option object.
- block: {Object} block object.


Usage:
{% render 'product-variant-options',
product: product,
option: option,
block: block
%}
{% endcomment %}
{%- 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

assign button_options_html = ''
assign dropdown_options_html = ''
cfxd marked this conversation as resolved.
Show resolved Hide resolved
-%}

{%- for value in option.values -%}
{%- liquid
assign option_disabled = false
if block.settings.show_soldout_variants
assign option_disabled = true
endif

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 block.settings.picker_type == 'button' -%}
<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 %}
{% if option_disabled %}class="disabled"{% endif %}
>
<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
{{ value }}{% if option_disabled %}<span class="visually-hidden">{{ 'products.product.variant_sold_out_or_unavailable' | t }}</span>{% endif %}
</label>
{%- elsif block.settings.picker_type == 'dropdown' -%}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>
{% if option_disabled %}{{ 'products.product.unavailable' | t: option_value: value }}{% else %}{{ value }}{% endif %}
cfxd marked this conversation as resolved.
Show resolved Hide resolved
</option>
{%- endif -%}
{%- endfor -%}