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 18:43:01 +02:00
parent 27579221cb
commit 2b9040641c
1 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -145,7 +145,7 @@
<button class="shx-custom-dropbtn" id="shx-custom-selected">
<div style="display: flex; justify-content: space-between; align-items: center">
<span>Produktvariante auswählen</span>
<span id="shx-custom-selected-value">Produktvariante auswählen</span>
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#131213"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>
</div>
</button>
@ -164,15 +164,16 @@
const selectElement = document.querySelector('.shx-dummy-select');
const dropdownContent = document.getElementById('shx-custom-dropdown-content');
const selectedButton = document.getElementById('shx-custom-selected');
const customSelectedValue = document.getElementById('shx-custom-selected-value')
document.getElementById('shx-custom-selected').addEventListener('click', function() {
selectedButton.addEventListener('click', function() {
dropdownContent.style.display = dropdownContent.style.display === 'block' ? 'none' : 'block';
});
document.querySelectorAll('.shx-custom-dropdown-content div').forEach(item => {
item.addEventListener('click', event => {
const selectedVariant = event.currentTarget.getAttribute('data-value');
selectedButton.innerText = event.currentTarget.innerText;
customSelectedValue.innerText = event.currentTarget.innerText;
// Set the selected option in the original select element
selectElement.value = selectedVariant;
@ -207,7 +208,7 @@
// Set the initial value when the page loads
window.addEventListener('load', function() {
const selectedValue = selectElement.value;
selectedButton.innerText = selectedValue;
customSelectedValue.innerText = selectedValue;
document.querySelectorAll('.shx-custom-dropdown-content div').forEach(div => {
if (div.getAttribute('data-value') === selectedValue) {