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:39:57 +02:00
parent 79b192ad1c
commit 00db1e4b55
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -107,10 +107,10 @@
<legend class="form__label">{{ option.name }}</legend> <legend class="form__label">{{ option.name }}</legend>
<div class="shx-custom-variant-picker-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-variant-picker-dummy-select field__input" class="shx-custom-enhanced-dropdown-hide-dummy-select field__input"
name="options[{{ option.name | escape }}]" name="options[{{ option.name | escape }}]"
form="{{ product_form_id }}" form="{{ product_form_id }}"
> >
@ -119,7 +119,7 @@
{% endfor %} {% endfor %}
</select> </select>
<button class="shx-custom-variant-picker-dropbtn" id="shx-custom-variant-picker-selected"> <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"> <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-variant-picker-selected-value">{{ option.selected_value }}</span>
@ -134,7 +134,7 @@
</div> </div>
</div> </div>
</button> </button>
<div class="shx-custom-variant-picker-dropdown-content" id="shx-custom-variant-picker-dropdown-content"> <div class="shx-custom-enhanced-dropdown-content" id="shx-custom-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">
@ -172,11 +172,11 @@
// 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-variant-picker-dropdown-content div').forEach(div => {
div.classList.remove('shx-custom-variant-picker-selected-variant'); div.classList.remove('shx-custom-enhanced-dropdown-variant-selected');
}); });
// Add the selected style to the clicked item // Add the selected style to the clicked item
event.currentTarget.classList.add('shx-custom-variant-picker-selected-variant'); event.currentTarget.classList.add('shx-custom-enhanced-dropdown-variant-selected');
dropdownContent.style.display = 'none'; dropdownContent.style.display = 'none';
@ -190,7 +190,7 @@
// Close the dropdown if the user clicks outside of it // Close the dropdown if the user clicks outside of it
window.addEventListener('click', function(event) { window.addEventListener('click', function(event) {
if (!event.target.matches('.shx-custom-variant-picker-dropbtn')) { if (!event.target.matches('.shx-custom-enhanced-dropdown-dropbtn')) {
if (dropdownContent.style.display === 'block') { if (dropdownContent.style.display === 'block') {
dropdownContent.style.display = 'none'; dropdownContent.style.display = 'none';
} }