diff --git a/assets/global.js b/assets/global.js index d513cc6..113369b 100644 --- a/assets/global.js +++ b/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) => { diff --git a/snippets/shx-product-desc.liquid b/snippets/shx-product-desc.liquid index 2a4704b..b00d711 100644 --- a/snippets/shx-product-desc.liquid +++ b/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 = `
Hello, world!
`; // 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 = `
Current variant: ${this.currentVariant}
`; + } } customElements.define('shx-drehteller', MyCustomElement); diff --git a/snippets/shx-video.liquid b/snippets/shx-video.liquid index 3ebebcd..aefc59e 100644 --- a/snippets/shx-video.liquid +++ b/snippets/shx-video.liquid @@ -6,7 +6,7 @@ {% if video_src != 'none' %}
- {%- 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" -%}
{% endif %}