336 lines
12 KiB
Plaintext
336 lines
12 KiB
Plaintext
{% comment %}
|
|
Renders product variant-picker
|
|
|
|
Accepts:
|
|
- product: {Object} product object.
|
|
- block: {Object} passing the block information.
|
|
- product_form_id: {String} Id of the product form to which the variant picker is associated.
|
|
- update_url: {Boolean} whether or not to update url when changing variants. If false, the url isn't updated. Default: true (optional).
|
|
Usage:
|
|
{% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}
|
|
{% endcomment %}
|
|
{%- unless product.has_only_default_variant -%}
|
|
<variant-selects
|
|
id="variant-selects-{{ section.id }}"
|
|
class="no-js-hidden"
|
|
data-section="{{ section.id }}"
|
|
data-url="{{ product.url }}"
|
|
{% if update_url == false %}
|
|
data-update-url="false"
|
|
{% endif %}
|
|
{{ block.shopify_attributes }}
|
|
>
|
|
{%- for option in product.options_with_values -%}
|
|
{%- 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
|
|
-%}
|
|
|
|
{% liquid
|
|
capture shx_current_page
|
|
render "shx-get-current-page"
|
|
endcapture
|
|
%}
|
|
|
|
<script>
|
|
console.log("1 product variant", "{{ picker_type }}", {{ product | json }}, {{ shx_current_page }})
|
|
</script>
|
|
|
|
<style>
|
|
/* Custom dropdown button styling */
|
|
.shx-custom-dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.shx-custom-dropdown-content {
|
|
display: none;
|
|
position: absolute;
|
|
background-color: #f9f9f9;
|
|
min-width: 160px;
|
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
|
z-index: 10000;
|
|
width: 100%;
|
|
padding: 6px 0;
|
|
}
|
|
|
|
.shx-custom-dropdown-content div {
|
|
color: black;
|
|
padding: 2px 12px;
|
|
text-decoration: none;
|
|
display: flex;
|
|
flex-direction: row;
|
|
cursor: pointer;
|
|
gap: 12px;
|
|
align-items: center;
|
|
}
|
|
|
|
.shx-custom-dropdown-content div:hover {
|
|
background-color: #e9e9e9;
|
|
}
|
|
|
|
.shx-custom-dropbtn {
|
|
width: 100%;
|
|
padding: 16px 24px;
|
|
font-size: 16px;
|
|
border: none;
|
|
background-color: transparent;
|
|
text-align: left;
|
|
color: rgb(var(--color-foreground));
|
|
}
|
|
|
|
.shx-custom-dropbtn:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.shx-custom-dropdown-variant {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.shx-custom-selected-variant {
|
|
background-color: #e9e9e9;
|
|
}
|
|
|
|
.shx-dummy-select {
|
|
display: none;
|
|
}
|
|
</style>
|
|
|
|
{% if shx_current_page contains "texte" %}
|
|
{% comment %}
|
|
<div class="field custom">
|
|
<select
|
|
id="Option-{{ section.id }}-{{ forloop.index0 }}"
|
|
class="field__input"
|
|
name="options[{{ option.name | escape }}]"
|
|
form="{{ product_form_id }}"
|
|
>
|
|
{% for product_variant in product.variants %}
|
|
<option value="{{ product_variant.title }}">
|
|
<div style="display: flex; flex-direction: column">
|
|
<span>{{ product_variant.title }}</span>
|
|
</div>
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
{% endcomment %}
|
|
|
|
<div class="shx-custom-dropdown field custom">
|
|
<select
|
|
id="Option-{{ section.id }}-{{ forloop.index0 }}"
|
|
class="shx-dummy-select field__input"
|
|
name="options[{{ option.name | escape }}]"
|
|
form="{{ product_form_id }}"
|
|
>
|
|
{% for product_variant in product.variants %}
|
|
<option value="{{ product_variant.title }}">{{ product_variant.title }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
|
|
<button class="shx-custom-dropbtn" id="shx-custom-selected">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; pointer-events: none">
|
|
<span id="shx-custom-selected-value">Produktvariante auswählen</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#131213"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>
|
|
</div>
|
|
</button>
|
|
<div class="shx-custom-dropdown-content" id="shx-custom-dropdown-content">
|
|
{% for product_variant in product.variants %}
|
|
<div data-value="{{ product_variant.title }}">
|
|
<img src="{{ product_variant.featured_image.src | image_url }}" height="100" width="100" style="border-radius: 4px">
|
|
|
|
<div style="display: flex; justify-content: space-between; align-items: center">
|
|
<span style="color: rgb(var(--color-foreground));">{{ product_variant.title }}</span>
|
|
<span>{{ product_variant.price | money }}</span>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<script>
|
|
const selectElement = document.querySelector('.shx-dummy-select');
|
|
const dropdownContent = document.getElementById('shx-custom-dropdown-content');
|
|
const selectedButton = document.getElementById('shx-custom-selected');
|
|
const customSelectedValue = document.getElementById('shx-custom-selected-value')
|
|
|
|
selectedButton.addEventListener('click', function() {
|
|
dropdownContent.style.display = dropdownContent.style.display === 'block' ? 'none' : 'block';
|
|
});
|
|
|
|
document.querySelectorAll('.shx-custom-dropdown-content div').forEach(item => {
|
|
item.addEventListener('click', event => {
|
|
const selectedVariant = event.currentTarget.getAttribute('data-value');
|
|
customSelectedValue.innerText = event.currentTarget.innerText;
|
|
|
|
// Set the selected option in the original select element
|
|
selectElement.value = selectedVariant;
|
|
|
|
// Trigger change event
|
|
const eventChange = new Event('change', { bubbles: true });
|
|
selectElement.dispatchEvent(eventChange);
|
|
|
|
// Remove the selected style from all items
|
|
document.querySelectorAll('.shx-custom-dropdown-content div').forEach(div => {
|
|
div.classList.remove('shx-custom-selected-variant');
|
|
});
|
|
|
|
// Add the selected style to the clicked item
|
|
event.currentTarget.classList.add('shx-custom-selected-variant');
|
|
|
|
dropdownContent.style.display = 'none';
|
|
console.log('Selected variant:', selectedVariant);
|
|
// Additional code to handle the selected variant can go here
|
|
});
|
|
});
|
|
|
|
// Close the dropdown if the user clicks outside of it
|
|
window.addEventListener('click', function(event) {
|
|
if (!event.target.matches('.shx-custom-dropbtn')) {
|
|
if (dropdownContent.style.display === 'block') {
|
|
dropdownContent.style.display = 'none';
|
|
}
|
|
}
|
|
});
|
|
|
|
// Set the initial value when the page loads
|
|
window.addEventListener('load', function() {
|
|
const selectedValue = selectElement.value;
|
|
customSelectedValue.innerText = selectedValue;
|
|
|
|
document.querySelectorAll('.shx-custom-dropdown-content div').forEach(div => {
|
|
if (div.getAttribute('data-value') === selectedValue) {
|
|
div.classList.add('shx-custom-selected-variant');
|
|
} else {
|
|
div.classList.remove('shx-custom-selected-variant');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
{%- if picker_type == 'swatch' -%}
|
|
<fieldset class="js product-form__input product-form__input--swatch">
|
|
<legend class="form__label">
|
|
{{ option.name }}:
|
|
<span data-selected-swatch-value="{{ option.name }}">
|
|
{{- 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">
|
|
<legend class="form__label">{{ option.name }}</legend>
|
|
{% render 'product-variant-options',
|
|
product: product,
|
|
option: option,
|
|
block: block,
|
|
picker_type: picker_type
|
|
%}
|
|
</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-dropdown-swatch="options[{{ option.name | escape }}]"
|
|
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>
|
|
{% render 'icon-caret' %}
|
|
</div>
|
|
</div>
|
|
{%- endif -%}
|
|
{%- 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 }}"
|
|
>
|
|
{%- liquid
|
|
echo variant.title
|
|
echo variant.price | money | strip_html | prepend: ' - '
|
|
if variant.available == false
|
|
echo 'products.product.sold_out' | t | prepend: ' - '
|
|
endif
|
|
if variant.quantity_rule.increment > 1
|
|
echo 'products.product.quantity.multiples_of' | t: quantity: variant.quantity_rule.increment | prepend: ' - '
|
|
endif
|
|
if variant.quantity_rule.min > 1
|
|
echo 'products.product.quantity.minimum_of' | t: quantity: variant.quantity_rule.min | prepend: ' - '
|
|
endif
|
|
if variant.quantity_rule.max != null
|
|
echo 'products.product.quantity.maximum_of' | t: quantity: variant.quantity_rule.max | prepend: ' - '
|
|
endif
|
|
# TODO: enable theme-check once `item_count_for_variant` is accepted as valid filter
|
|
# theme-check-disable
|
|
assign cart_quantity = cart | item_count_for_variant: variant.id
|
|
# theme-check-enable
|
|
if cart_quantity > 0
|
|
echo 'products.product.quantity.in_cart_html' | t: quantity: cart_quantity | prepend: ' - '
|
|
endif
|
|
-%}
|
|
</option>
|
|
{%- endfor -%}
|
|
</select>
|
|
{% render 'icon-caret' %}
|
|
</div>
|
|
</div>
|
|
</noscript>
|