test

assets/global.js

@@ -979,7 +979,10 @@ class VariantSelects extends HTMLElement {
 
     document.querySelectorAll('shx-drehteller').forEach((drehteller) => {
       drehteller.initCurrentVariant(this.currentVariant.featured_image.alt);
-      console.log("drehteller INIT", drehteller);
+    });
+
+    document.querySelectorAll('shx-variant-description').forEach((variantDescription) => {
+      variantDescription.initVariantDescription(this.currentVariant.featured_image.alt);
     });
   }
 
@@ -1102,6 +1105,10 @@ class VariantSelects extends HTMLElement {
         drehteller.reloadCurrentVariant(this.currentVariant.featured_image.alt);
       });
 
+      document.querySelectorAll('shx-variant-description').forEach((variantDescription) => {
+        variantDescription.updateVariantDescription(this.currentVariant.featured_image.alt);
+      });
+
     } else {
       // show all thumbnails
       document.querySelectorAll('[thumbnail-alt]').forEach((thumbnail) => {

snippets/shx-product-desc.liquid

@@ -5,7 +5,7 @@
   <script type="text/javascript">
         // create new html tag called "shx-drehteller"
 
-        class MyCustomElement extends HTMLElement {
+        class DrehTellerElement extends HTMLElement {
             constructor() {
                 super();
                 // element functionality written in here
@@ -107,7 +107,41 @@
             
         }
 
-        customElements.define('shx-drehteller', MyCustomElement);
+        class CustomVariantDescriptionElement extends HTMLElement {
+            constructor() {
+                super();
+                // "variant" is the id of the variant
+
+                this.variant = this.getAttribute('variant');
+                this.currentVariant = null;
+            }
+
+            initVariantDescription(id) {
+                this.currentVariant = id;
+
+                // edit inner html
+                this.updateVariantDescription(id);
+            }
+
+            disconnectedCallback() {
+                // Clean up the element when it is removed from the DOM.
+            }
+
+            updateVariantDescription(id) {
+                this.currentVariant = id;
+
+                if(this.variant === this.currentVariant) {
+                    this.style.display = 'block';
+                } else {
+                    this.style.display = 'none';
+                }
+            }
+
+            
+        }
+        
+        customElements.define('shx-drehteller', DrehTellerElement);
+        customElements.define('shx-variant-description', CustomVariantDescriptionElement);
   </script>