test

assets/global.js

@@ -1090,6 +1090,10 @@ class VariantSelects extends HTMLElement {
       }
       );
 
+      document.querySelectorAll('shx-drehteller').forEach((drehteller) => {
+        drehteller.reloadCurrentVariant(this.currentVariant.featured_image.alt);
+      });
+
     } else {
       // show all thumbnails
       document.querySelectorAll('[thumbnail-alt]').forEach((thumbnail) => {

snippets/shx-product-desc.liquid

@@ -9,12 +9,24 @@
             constructor() {
                 super();
                 // element functionality written in here
+                this.currentVariant = null;
             }
 
             connectedCallback() {
                 this.attachShadow({ mode: 'open' }); // Attach a shadow root to the element.
                 this.shadowRoot.innerHTML = `<div>Hello, world!</div>`; // Add a div to the shadow DOM.
             }
+
+            disconnectedCallback() {
+                // Clean up the element when it is removed from the DOM.
+            }
+
+            reloadCurrentVariant(id) {
+                this.currentVariant = id;
+
+                // edit inner html
+                this.shadowRoot.innerHTML = `<div>Current variant: ${this.currentVariant}</div>`;
+            }
         }
 
         customElements.define('shx-drehteller', MyCustomElement);

snippets/shx-video.liquid

@@ -6,7 +6,7 @@
   {% if video_src != 'none' %}
     <div class="shx-video">
       <div class="shx-video__wrapper">
-        {%- echo media | media_tag: image_size: "2048x", autoplay: true, loop: true, controls: false, preload: "none" -%}
+        {%- echo media | media_tag: image_size: "2048x", autoplay: true, muted: true, loop: true, controls: false, preload: "none" -%}
       </div>
     </div>
   {% endif %}