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

dropdown for product variant picker

main
alexanderroese 2024-07-13 16:26:54 +02:00
parent 23868a5e63
commit 1c29391029
1 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -98,21 +98,32 @@
</div>
<div class="shx-custom-dropdown">
<button class="shx-custom-dropbtn">Select Product Variant</button>
<div class="shx-custom-dropdown-content">
<div>
<button class="shx-custom-dropbtn" id="shx-custom-selected">Select Product Variant</button>
<div class="shx-custom-dropdown-content" id="shx-custom-dropdown-content">
<div data-value="variant1">
<span>Variant 1</span>
</div>
<div>
<div data-value="variant2">
<span>Variant 2</span>
</div>
<div>
<div data-value="variant3">
<span>Variant 3</span>
</div>
</div>
</div>
{% endif %}
<script>
document.querySelectorAll('.shx-custom-dropdown-content div').forEach(item => {
item.addEventListener('click', event => {
const selectedVariant = event.currentTarget.getAttribute('data-value');
document.getElementById('shx-custom-selected').innerText = event.currentTarget.innerText;
console.log('Selected variant:', selectedVariant);
// Additional code to handle the selected variant can go here
});
});
</script>
{%- if picker_type == 'swatch' -%}
<fieldset class="js product-form__input product-form__input--swatch">
<legend class="form__label">