Jannex
/
SHX-Theme
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

select with images

main
alexanderroese 2024-07-17 19:56:02 +02:00
parent 1f8b866bab
commit 791523447c
1 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
snippets/product-variant-picker.liquid
View File

@ -110,7 +110,7 @@
<div class="shx-custom-enhanced-dropdown field custom">
<select
id="Option-{{ section.id }}-{{ forloop.index0 }}"
class="shx-custom-enhanced-dropdown-hide-dummy-select shx-custom-variant-picker-selected-hide-dummy-select field__input"
class="shx-custom-enhanced-dropdown-hide-dummy-select shx-custom-enhanced-dropdown-variant-hide-dummy-select field__input"
name="options[{{ option.name | escape }}]"
form="{{ product_form_id }}"
>
@ -119,14 +119,14 @@
{% endfor %}
</select>
<button class="shx-custom-enhanced-dropdown-dropbtn" id="shx-custom-variant-picker-selected">
<button class="shx-custom-enhanced-dropdown-dropbtn" id="shx-custom-enhanced-dropdown-select-button">
<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>
<span id="shx-custom-enhanced-dropdown-select-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">
<img id="shx-custom-enhanced-dropdown-variant-selected-image" src="{{ product_variant.featured_image.src | image_url }}" height="40" width="40" style="border-radius: 4px">
{% endif %}
{% endfor %}
@ -134,7 +134,7 @@
</div>
</div>
</button>
<div class="shx-custom-enhanced-dropdown-content shx-custom-variant-picker-dropdown-content" id="shx-custom-variant-picker-dropdown-content">
<div class="shx-custom-enhanced-dropdown-content shx-custom-enhanced-dropdown-variant-picker-dropdown-content" id="shx-custom-enhanced-dropdown-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">
@ -149,16 +149,16 @@
</div>
<script>
const selectElement = document.querySelector('.shx-custom-variant-picker-selected-hide-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')
const selectElement = document.querySelector('.shx-custom-enhanced-dropdown-variant-hide-dummy-select');
const dropdownContent = document.getElementById('shx-custom-enhanced-dropdown-variant-picker-dropdown-content');
const selectedButton = document.getElementById('shx-custom-enhanced-dropdown-select-button');
const customSelectedValue = document.getElementById('shx-custom-enhanced-dropdown-select-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 => {
document.querySelectorAll('.shx-custom-enhanced-dropdown-variant-picker-dropdown-content div').forEach(item => {
item.addEventListener('click', event => {
const selectedVariant = event.currentTarget.getAttribute('data-value');
customSelectedValue.innerText = selectedVariant;
@ -171,7 +171,7 @@
selectElement.dispatchEvent(eventChange);
// Remove the selected style from all items
document.querySelectorAll('.shx-custom-variant-picker-dropdown-content div').forEach(div => {
document.querySelectorAll('.shx-custom-enhanced-dropdown-variant-picker-dropdown-content div').forEach(div => {
div.classList.remove('shx-custom-enhanced-dropdown-variant-selected');
});
@ -183,7 +183,7 @@
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
document.getElementById("shx-custom-enhanced-dropdown-variant-selected-image").src = event.currentTarget.querySelector("img").src
}
});
});