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

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

diff --git a/snippets/product-variant-picker.liquid b/snippets/product-variant-picker.liquid
index 31ca847..550287a 100644
--- a/snippets/product-variant-picker.liquid
+++ b/snippets/product-variant-picker.liquid
@@ -107,10 +107,10 @@
 
         <legend class="form__label">{{ option.name }}</legend>
 
-        <div class="shx-custom-variant-picker-dropdown field custom">
+        <div class="shx-custom-enhanced-dropdown field custom">
           <select
             id="Option-{{ section.id }}-{{ forloop.index0 }}"
-            class="shx-custom-variant-picker-dummy-select field__input"
+            class="shx-custom-enhanced-dropdown-hide-dummy-select field__input"
             name="options[{{ option.name | escape }}]"
             form="{{ product_form_id }}"
           >
@@ -119,7 +119,7 @@
             {% endfor %}
           </select>
 
-          <button class="shx-custom-variant-picker-dropbtn" id="shx-custom-variant-picker-selected">
+          <button class="shx-custom-enhanced-dropdown-dropbtn" id="shx-custom-variant-picker-selected">
             <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>
               
@@ -134,7 +134,7 @@
               </div>
             </div>
           </button>
-          <div class="shx-custom-variant-picker-dropdown-content" id="shx-custom-variant-picker-dropdown-content">
+          <div class="shx-custom-enhanced-dropdown-content" id="shx-custom-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">
@@ -172,11 +172,11 @@
         
               // Remove the selected style from all items
               document.querySelectorAll('.shx-custom-variant-picker-dropdown-content div').forEach(div => {
-                div.classList.remove('shx-custom-variant-picker-selected-variant');
+                div.classList.remove('shx-custom-enhanced-dropdown-variant-selected');
               });
         
               // Add the selected style to the clicked item
-              event.currentTarget.classList.add('shx-custom-variant-picker-selected-variant');
+              event.currentTarget.classList.add('shx-custom-enhanced-dropdown-variant-selected');
         
               dropdownContent.style.display = 'none';
 
@@ -190,7 +190,7 @@
         
           // Close the dropdown if the user clicks outside of it
           window.addEventListener('click', function(event) {
-            if (!event.target.matches('.shx-custom-variant-picker-dropbtn')) {
+            if (!event.target.matches('.shx-custom-enhanced-dropdown-dropbtn')) {
               if (dropdownContent.style.display === 'block') {
                 dropdownContent.style.display = 'none';
               }