From 791523447c70ead7169a04dbd72d4189d2870f32 Mon Sep 17 00:00:00 2001
From: alexanderroese <github@roese.dev>
Date: Wed, 17 Jul 2024 19:56:02 +0200
Subject: [PATCH] select with images

---
 snippets/product-variant-picker.liquid | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/snippets/product-variant-picker.liquid b/snippets/product-variant-picker.liquid
index 2320cd7..219e7db 100644
--- a/snippets/product-variant-picker.liquid
+++ b/snippets/product-variant-picker.liquid
@@ -110,7 +110,7 @@
         <div class="shx-custom-enhanced-dropdown field custom">
           <select
             id="Option-{{ section.id }}-{{ forloop.index0 }}"
-            class="shx-custom-enhanced-dropdown-hide-dummy-select shx-custom-variant-picker-selected-hide-dummy-select field__input"
+            class="shx-custom-enhanced-dropdown-hide-dummy-select shx-custom-enhanced-dropdown-variant-hide-dummy-select field__input"
             name="options[{{ option.name | escape }}]"
             form="{{ product_form_id }}"
           >
@@ -119,14 +119,14 @@
             {% endfor %}
           </select>
 
-          <button class="shx-custom-enhanced-dropdown-dropbtn" id="shx-custom-variant-picker-selected">
+          <button class="shx-custom-enhanced-dropdown-dropbtn" id="shx-custom-enhanced-dropdown-select-button">
             <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>
+              <span id="shx-custom-enhanced-dropdown-select-selected-value">{{ option.selected_value }}</span>
               
               <div style="display: flex; align-items: center; gap: 8px">
                 {% for product_variant in product.variants %}
                   {% if option.selected_value == product_variant.title %}
-                    <img id="shx-custom-variant-picker-selected-image" src="{{ product_variant.featured_image.src | image_url }}" height="40" width="40" style="border-radius: 4px">
+                    <img id="shx-custom-enhanced-dropdown-variant-selected-image" src="{{ product_variant.featured_image.src | image_url }}" height="40" width="40" style="border-radius: 4px">
                   {% endif %}
                 {% endfor %}
 
@@ -134,7 +134,7 @@
               </div>
             </div>
           </button>
-          <div class="shx-custom-enhanced-dropdown-content shx-custom-variant-picker-dropdown-content" id="shx-custom-variant-picker-dropdown-content">
+          <div class="shx-custom-enhanced-dropdown-content shx-custom-enhanced-dropdown-variant-picker-dropdown-content" id="shx-custom-enhanced-dropdown-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">
@@ -149,16 +149,16 @@
         </div>
 
         <script>
-          const selectElement = document.querySelector('.shx-custom-variant-picker-selected-hide-dummy-select');
-          const dropdownContent = document.getElementById('shx-custom-variant-picker-dropdown-content');
-          const selectedButton = document.getElementById('shx-custom-variant-picker-selected');
-          const customSelectedValue = document.getElementById('shx-custom-variant-picker-selected-value')
+          const selectElement = document.querySelector('.shx-custom-enhanced-dropdown-variant-hide-dummy-select');
+          const dropdownContent = document.getElementById('shx-custom-enhanced-dropdown-variant-picker-dropdown-content');
+          const selectedButton = document.getElementById('shx-custom-enhanced-dropdown-select-button'); 
+          const customSelectedValue = document.getElementById('shx-custom-enhanced-dropdown-select-selected-value')
           
           selectedButton.addEventListener('click', function() {
             dropdownContent.style.display = dropdownContent.style.display === 'block' ? 'none' : 'block';
           });
         
-          document.querySelectorAll('.shx-custom-variant-picker-dropdown-content div').forEach(item => {
+          document.querySelectorAll('.shx-custom-enhanced-dropdown-variant-picker-dropdown-content div').forEach(item => {
             item.addEventListener('click', event => {
               const selectedVariant = event.currentTarget.getAttribute('data-value');
               customSelectedValue.innerText = selectedVariant;
@@ -171,7 +171,7 @@
               selectElement.dispatchEvent(eventChange);
         
               // Remove the selected style from all items
-              document.querySelectorAll('.shx-custom-variant-picker-dropdown-content div').forEach(div => {
+              document.querySelectorAll('.shx-custom-enhanced-dropdown-variant-picker-dropdown-content div').forEach(div => {
                 div.classList.remove('shx-custom-enhanced-dropdown-variant-selected');
               });
         
@@ -183,7 +183,7 @@
               const currentTargetImage = event.currentTarget.querySelector("img")
 
               if (currentTargetImage !== null && currentTargetImage.src !== null) {
-                document.getElementById("shx-custom-variant-picker-selected-image").src = event.currentTarget.querySelector("img").src 
+                document.getElementById("shx-custom-enhanced-dropdown-variant-selected-image").src = event.currentTarget.querySelector("img").src 
               }
             });
           });