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"> <div class="shx-custom-enhanced-dropdown field custom">
<select <select
id="Option-{{ section.id }}-{{ forloop.index0 }}" 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 }}]" name="options[{{ option.name | escape }}]"
form="{{ product_form_id }}" form="{{ product_form_id }}"
> >
@ -119,14 +119,14 @@
{% endfor %} {% endfor %}
</select> </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"> <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"> <div style="display: flex; align-items: center; gap: 8px">
{% for product_variant in product.variants %} {% for product_variant in product.variants %}
{% if option.selected_value == product_variant.title %} {% 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 %} {% endif %}
{% endfor %} {% endfor %}
@ -134,7 +134,7 @@
</div> </div>
</div> </div>
</button> </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 %} {% 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 %}> <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"> <img src="{{ product_variant.featured_image.src | image_url }}" height="100" width="100" style="border-radius: 4px">
@ -149,16 +149,16 @@
</div> </div>
<script> <script>
const selectElement = document.querySelector('.shx-custom-variant-picker-selected-hide-dummy-select'); const selectElement = document.querySelector('.shx-custom-enhanced-dropdown-variant-hide-dummy-select');
const dropdownContent = document.getElementById('shx-custom-variant-picker-dropdown-content'); const dropdownContent = document.getElementById('shx-custom-enhanced-dropdown-variant-picker-dropdown-content');
const selectedButton = document.getElementById('shx-custom-variant-picker-selected'); const selectedButton = document.getElementById('shx-custom-enhanced-dropdown-select-button');
const customSelectedValue = document.getElementById('shx-custom-variant-picker-selected-value') const customSelectedValue = document.getElementById('shx-custom-enhanced-dropdown-select-selected-value')
selectedButton.addEventListener('click', function() { selectedButton.addEventListener('click', function() {
dropdownContent.style.display = dropdownContent.style.display === 'block' ? 'none' : 'block'; 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 => { item.addEventListener('click', event => {
const selectedVariant = event.currentTarget.getAttribute('data-value'); const selectedVariant = event.currentTarget.getAttribute('data-value');
customSelectedValue.innerText = selectedVariant; customSelectedValue.innerText = selectedVariant;
@ -171,7 +171,7 @@
selectElement.dispatchEvent(eventChange); selectElement.dispatchEvent(eventChange);
// Remove the selected style from all items // 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'); div.classList.remove('shx-custom-enhanced-dropdown-variant-selected');
}); });
@ -183,7 +183,7 @@
const currentTargetImage = event.currentTarget.querySelector("img") const currentTargetImage = event.currentTarget.querySelector("img")
if (currentTargetImage !== null && currentTargetImage.src !== null) { 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
} }
}); });
}); });