<script>
document.addEventListener("DOMContentLoaded", function() {
const productImg = '.product_img';
const formClass = '.form__main';
const optionSize = 'input[name="productimage"]';
function changePic(em){
const imgElem = document.querySelector('.product_img .tn-atom');
imgElem.style.backgroundImage = 'url('+em+')';
imgElem.setAttribute("data-original", em);
imgElem.setAttribute("data-img-zoom-url", em);
};
let formInput = document.querySelectorAll(formClass+' input');
formInput.forEach(function (el, index) {
el.addEventListener('change',function(e) {
let form = document.querySelector(formClass);
let imgBgimg = form.querySelector(optionSize+':checked').nextElementSibling;
let img = imgBgimg.getAttribute("data-original");
changePic(img);
let btnForm = form.querySelector('button');
let btnUrl = btnForm.getAttribute('href');
if(btnUrl){
setTimeout(function(){
btnForm.setAttribute('href', btnUrl.split(':::image=')[0]+':::image='+img);
}, 100)
};
});
});
});
</script>