152 lines
4.7 KiB
Plaintext
152 lines
4.7 KiB
Plaintext
{% 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>
|
|
<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>
|
|
</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 %}
|
|
|
|
{% elsif content_type == 'init' %}
|
|
|
|
<script type="text/javascript">
|
|
|
|
let globalInputFormsObjValues = {
|
|
"test1": {
|
|
"text1": "test"
|
|
}
|
|
};
|
|
|
|
let globalInputFormsObj = {
|
|
"test1": {
|
|
"renderHTML": () => {
|
|
console.log(this);
|
|
return `
|
|
<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>
|
|
<div class="field custom">
|
|
<input class="field__input" form="{{ 'product-form-' | append: section.id }}" type="text" id="your-label" name="properties[Your label]" value="${globalInputFormsObjValues.test1.text1}">
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
};
|
|
|
|
// create new html tag called "shx-input-forms"
|
|
class InputFormsElement extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
// element functionality written in here
|
|
this.currentVariant = null;
|
|
this.container = null;
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.innerHTML = '<div class="shx-input-forms-container"></div>';
|
|
this.container = this.querySelector('.shx-input-forms-container');
|
|
}
|
|
|
|
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;
|
|
let container = this.container;
|
|
|
|
// edit inner html
|
|
container.innerHTML = "";
|
|
|
|
for(let key in globalInputFormsObj) {
|
|
if(key === this.currentVariant) {
|
|
container.innerHTML = globalInputFormsObj[key].renderHTML();
|
|
}
|
|
}
|
|
|
|
if(!container) {
|
|
console.error('container not found');
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
console.log('reloadCurrentVariant', id, openAnimation);
|
|
|
|
|
|
if(openAnimation) {
|
|
// calculate of this height
|
|
let height = container.offsetHeight;
|
|
|
|
|
|
|
|
container.style.height = '0px';
|
|
|
|
function animate() {
|
|
anime({
|
|
targets: container,
|
|
height: height,
|
|
duration: 500,
|
|
easing: 'cubicBezier(0.590, 0.190, 0.050, 0.990)',
|
|
complete: function() {
|
|
container.style.height = 'auto';
|
|
}
|
|
});
|
|
}
|
|
|
|
//animejs fade in
|
|
//dom ready
|
|
|
|
if (document.getElementById('animejs-script').readyState === 'complete' || document.getElementById('animejs-script').readyState === 'loaded'){
|
|
animate();
|
|
} else {
|
|
document.getElementById('animejs-script').addEventListener('load', function() {
|
|
animate();
|
|
});
|
|
}
|
|
} else {
|
|
container.style.opacity = 0;
|
|
anime({
|
|
targets: container,
|
|
opacity: 1,
|
|
duration: 500,
|
|
easing: 'cubicBezier(0.590, 0.190, 0.050, 0.990)'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define('shx-input-forms', InputFormsElement);
|
|
|
|
|
|
</script>
|
|
|
|
{% endif %}
|
|
|