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 17:55:50 +02:00
parent f02ddb20bc
commit 0c312a2fbb
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -156,6 +156,7 @@
{% endif %}
<script>
const selectElement = document.querySelector('.field__input');
const dropdownContent = document.getElementById('shx-custom-dropdown-content');
const selectedButton = document.getElementById('shx-custom-selected');
@ -168,6 +169,9 @@
const selectedVariant = event.currentTarget.getAttribute('data-value');
selectedButton.innerText = event.currentTarget.innerText;
// Set the selected option in the original select element
selectElement.value = selectedVariant;
// Remove the selected style from all items
document.querySelectorAll('.shx-custom-dropdown-content div').forEach(div => {
div.classList.remove('shx-custom-selected-variant');
@ -185,12 +189,8 @@
// Close the dropdown if the user clicks outside of it
window.addEventListener('click', function(event) {
if (!event.target.matches('.shx-custom-dropbtn')) {
const dropdowns = document.getElementsByClassName('shx-custom-dropdown-content');
for (let i = 0; i < dropdowns.length; i++) {
const openDropdown = dropdowns[i];
if (openDropdown.style.display === 'block') {
openDropdown.style.display = 'none';
}
if (dropdownContent.style.display === 'block') {
dropdownContent.style.display = 'none';
}
}
});