From 2b9040641c7bc85d541491b19b065c582dd0d2e5 Mon Sep 17 00:00:00 2001
From: alexanderroese <github@roese.dev>
Date: Sat, 13 Jul 2024 18:43:01 +0200
Subject: [PATCH] dropdown for product variant picker

---
 snippets/product-variant-picker.liquid | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/snippets/product-variant-picker.liquid b/snippets/product-variant-picker.liquid
index dbb5f1c..be68bdf 100644
--- a/snippets/product-variant-picker.liquid
+++ b/snippets/product-variant-picker.liquid
@@ -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');
-      
-        document.getElementById('shx-custom-selected').addEventListener('click', function() {
+        const customSelectedValue = document.getElementById('shx-custom-selected-value')
+        
+        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) {