328 lines
13 KiB
Plaintext
328 lines
13 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
|
|
-%}
|
|
|
|
{% comment %}
|
|
SHX custom code
|
|
{% endcomment %}
|
|
|
|
{% liquid
|
|
capture shx_current_page
|
|
render "shx-get-current-page"
|
|
endcapture
|
|
%}
|
|
|
|
{% if shx_current_page contains "texte" %}
|
|
<style>
|
|
/* Custom dropdown button styling */
|
|
/*.shx-custom-variant-picker-dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.shx-custom-variant-picker-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-variant-picker-dropdown-content div {
|
|
color: black;
|
|
padding: 2px 12px;
|
|
text-decoration: none;
|
|
display: flex;
|
|
flex-direction: row;
|
|
cursor: pointer;
|
|
align-items: center;
|
|
}
|
|
|
|
.shx-custom-variant-picker-dropdown-content div:hover {
|
|
background-color: #ededed;
|
|
}
|
|
|
|
.shx-custom-variant-picker-dropbtn {
|
|
width: 100%;
|
|
padding: 4px 14px 4px 24px;
|
|
font-size: 16px;
|
|
border: none;
|
|
background-color: transparent;
|
|
text-align: left;
|
|
color: rgb(var(--color-foreground));
|
|
}
|
|
|
|
.shx-custom-variant-picker-dropbtn:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.shx-custom-variant-picker-dropdown-variant {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.shx-custom-variant-picker-selected-variant {
|
|
background-color: #e9e9e9;
|
|
}
|
|
|
|
.shx-custom-variant-picker-dummy-select {
|
|
display: none;
|
|
}*/
|
|
</style>
|
|
|
|
<legend class="form__label">{{ option.name }}</legend>
|
|
|
|
<div class="shx-custom-enhanced-dropdown field custom">
|
|
<select
|
|
id="Option-{{ section.id }}-{{ forloop.index0 }}"
|
|
class="shx-custom-enhanced-dropdown-hide-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-enhanced-dropdown-dropbtn" id="shx-custom-variant-picker-selected">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; pointer-events: none">
|
|
<span id="shx-custom-variant-picker-selected-value">{{ option.selected_value }}</span>
|
|
|
|
<div style="display: flex; align-items: center; gap: 8px">
|
|
{% for product_variant in product.variants %}
|
|
{% if option.selected_value == product_variant.title %}
|
|
<img id="shx-custom-variant-picker-selected-image" src="{{ product_variant.featured_image.src | image_url }}" height="40" width="40" style="border-radius: 4px">
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
<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>
|
|
</div>
|
|
</button>
|
|
<div class="shx-custom-enhanced-dropdown-content" id="shx-custom-variant-picker-dropdown-content">
|
|
{% for product_variant in product.variants %}
|
|
<div data-value="{{ product_variant.title }}" {% if option.selected_value == product_variant.title %}class="shx-custom-variant-picker-selected-variant"{% endif %}>
|
|
<img src="{{ product_variant.featured_image.src | image_url }}" height="100" width="100" style="border-radius: 4px">
|
|
|
|
<div style="display: flex; flex-direction: column; align-items: flex-start">
|
|
<span style="color: rgb(var(--color-foreground)); font-weight: 600; {% if product_variant.available == false %}text-decoration: line-through;{% endif %}">{{ product_variant.title }}</span>
|
|
<span>{{ product_variant.price | money }}</span>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const selectElement = document.querySelector('.shx-custom-variant-picker-dummy-select');
|
|
const dropdownContent = document.getElementById('shx-custom-variant-picker-dropdown-content');
|
|
const selectedButton = document.getElementById('shx-custom-variant-picker-selected');
|
|
const customSelectedValue = document.getElementById('shx-custom-variant-picker-selected-value')
|
|
|
|
selectedButton.addEventListener('click', function() {
|
|
dropdownContent.style.display = dropdownContent.style.display === 'block' ? 'none' : 'block';
|
|
});
|
|
|
|
document.querySelectorAll('.shx-custom-variant-picker-dropdown-content div').forEach(item => {
|
|
item.addEventListener('click', event => {
|
|
const selectedVariant = event.currentTarget.getAttribute('data-value');
|
|
customSelectedValue.innerText = selectedVariant;
|
|
|
|
// 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-variant-picker-dropdown-content div').forEach(div => {
|
|
div.classList.remove('shx-custom-enhanced-dropdown-variant-selected');
|
|
});
|
|
|
|
// Add the selected style to the clicked item
|
|
event.currentTarget.classList.add('shx-custom-enhanced-dropdown-variant-selected');
|
|
|
|
dropdownContent.style.display = 'none';
|
|
|
|
const currentTargetImage = event.currentTarget.querySelector("img")
|
|
|
|
if (currentTargetImage !== null && currentTargetImage.src !== null) {
|
|
document.getElementById("shx-custom-variant-picker-selected-image").src = event.currentTarget.querySelector("img").src
|
|
}
|
|
});
|
|
});
|
|
|
|
// Close the dropdown if the user clicks outside of it
|
|
window.addEventListener('click', function(event) {
|
|
if (!event.target.matches('.shx-custom-enhanced-dropdown-dropbtn')) {
|
|
if (dropdownContent.style.display === 'block') {
|
|
dropdownContent.style.display = 'none';
|
|
}
|
|
}
|
|
});
|
|
|
|
window.addEventListener('load', function() {
|
|
selectElement.value = customSelectedValue.innerText;
|
|
|
|
// Trigger change event
|
|
const eventChange = new Event('change', { bubbles: true });
|
|
selectElement.dispatchEvent(eventChange);
|
|
});
|
|
</script>
|
|
{% else %}
|
|
{% comment %}
|
|
Theme default code
|
|
{% endcomment %}
|
|
{%- 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 %}
|
|
{% 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>
|