shx-3d-render

layout/theme.liquid

@@ -316,6 +316,9 @@
     {% render 'shx-video-base'
       , content_type: 'init' %}
 
+    {% render 'shx-3d-render-input'
+      , content_type: 'init' %}
+
     <script
       src="{{ 'anime.min.js' | asset_url }}"
       defer="defer"

snippets/shx-3d-render-input.liquid

@@ -1,15 +1,70 @@
+{% assign content_type = content_type | default: 'body' %}
+
+{% if content_type == 'body' %}
+
+{% comment %}
+
 <div id="shx-3d-render-input-container">
     <style>.custom.form__label{margin-bottom: 0.6rem}.field.custom{margin-top:0}.custom .field__input{padding-top:0.8rem}</style>  
-    <label class="form__label custom" for="your-label">Dein Text :)</label>
+    <label class="form__label custom" for="your-label">Dein Text</label>
     <div class="field custom">
         <input class="field__input" form="{{ 'product-form-' | append: section.id }}" type="text" id="your-label" name="properties[Your label]">
     </div>
 </div>
 
+{% endcomment %}
+
+<shx-input-forms>
+    <p>shx-input-forms</p>
+</shx-input-forms>
+
 {% if product.images.size > 0 %}
   {% assign main_image = product.images.first %}
   <!-- Display the alt text -->
   <p>Main Image Alt Text: {{ main_image.alt }}</p>
 {% else %}
   <p>No images available for this product.</p>
-{% endif %}
+{% endif %}
+
+{% elsif content_type == 'init' %}
+
+<script type="text/javascript">
+
+    // create new html tag called "shx-input-forms"
+    class InputFormsElement extends HTMLElement {
+        constructor() {
+            super();
+            // element functionality written in here
+            this.currentVariant = null;
+        }
+
+        connectedCallback() {
+            this.innerHTML = "";
+        }
+
+        initCurrentVariant(id) {
+            this.currentVariant = id;
+
+            // edit inner html
+            this.reloadCurrentVariant(id, true);
+        }
+
+        disconnectedCallback() {
+            // Clean up the element when it is removed from the DOM.
+        }
+
+        reloadCurrentVariant(id, openAnimation = false) {
+            this.currentVariant = id;
+
+            // edit inner html
+            this.innerHTML = "";
+        }
+    }
+
+    customElements.define('shx-input-forms', InputFormsElement);
+
+
+</script>
+
+{% endif %}
+