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>
<div class="shx-custom-variant-picker-dropdown field custom">
<div class="shx-custom-enhanced-dropdown field custom">
<select
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 }}]"
form="{{ product_form_id }}"
>
@ -119,7 +119,7 @@
{% endfor %}
</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">
<span id="shx-custom-variant-picker-selected-value">{{ option.selected_value }}</span>
@ -134,7 +134,7 @@
</div>
</div>
</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 %}
<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">
@ -172,11 +172,11 @@
// Remove the selected style from all items
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
event.currentTarget.classList.add('shx-custom-variant-picker-selected-variant');
event.currentTarget.classList.add('shx-custom-enhanced-dropdown-variant-selected');
dropdownContent.style.display = 'none';
@ -190,7 +190,7 @@
// Close the dropdown if the user clicks outside of it
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') {
dropdownContent.style.display = 'none';
}