dropdown for product variant picker
alexanderroese
parent
7250301d8c
commit
559e403649
|
|
@ -34,78 +34,77 @@
|
|||
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" %}
|
||||
{% 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>
|
||||
{% comment %}
|
||||
<div class="field custom">
|
||||
<select
|
||||
|
|
@ -126,7 +125,7 @@
|
|||
{% endcomment %}
|
||||
|
||||
<legend class="form__label">{{ option.name }}</legend>
|
||||
|
||||
|
||||
<div class="shx-custom-dropdown field custom">
|
||||
<select
|
||||
id="Option-{{ section.id }}-{{ forloop.index0 }}"
|
||||
|
|
@ -158,124 +157,125 @@
|
|||
{% 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')
|
||||
<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 = 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-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');
|
||||
|
||||
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 = 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-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');
|
||||
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';
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
// 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>
|
||||
{% else %}
|
||||
|
||||
{%- 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 %}
|
||||
{%- 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>
|
||||
{%- 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' %}
|
||||
</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>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
{% endif %}
|
||||
{%- endfor -%}
|
||||
<script type="application/json">
|
||||
{{ product.variants | json }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue