diff --git a/snippets/shx-product-desc.liquid b/snippets/shx-product-desc.liquid index e44b127..50204fd 100644 --- a/snippets/shx-product-desc.liquid +++ b/snippets/shx-product-desc.liquid @@ -10,6 +10,8 @@ super(); // element functionality written in here this.currentVariant = null; + + this.videoClones = {}; } connectedCallback() { @@ -20,7 +22,7 @@ this.currentVariant = id; // edit inner html - this.innerHTML = `
Init variant: ${this.currentVariant}
`; + reloadCurrentVariant(id); } disconnectedCallback() { @@ -41,13 +43,19 @@ if (video) { // clone video to shadow dom - let videoClone = video.cloneNode(true); - this.appendChild(videoClone); + let videoClone = null; + if (this.videoClones[this.currentVariant]) { + videoClone = this.videoClones[this.currentVariant]; + } else { + videoClone = video.cloneNode(true); + this.videoClones[this.currentVariant] = videoClone; + } + + this.appendChild(videoClone); // get video element let videoElement = this.querySelector('.shx-video'); - videoElement.classList.add('shx-video-for-desc'); - + videoElement.classList.add('shx-video-for-desc'); } }