这是我的代码:
if (!customElements.get('product-form')) {
customElements.define('product-form'，类ProductForm扩展HTMLElement {
构造函数(){
超级();
这一点。form = this.querySelector('form');
this.form。addEventListener('submit'， this. onsubmithandler .bind(this));/* this.form。addEventListener(‘提交’,this.onSubmitHandler.bind(这));* /
这一点。cartNotification = document.querySelector('cart-notification');
}
onSubmitHandler (evt) {
evt.preventDefault ();
const submitButton = this.querySelector('[type="submit"]');
if (submitButton.classList.contains('loading'))返回;
this.handleErrorMessage ();
this.cartNotification.setActiveElement (document.activeElement);
submitButton。setAttribute(“aria-disabled”,真正的);
submitButton.classList.add(“加载”);
const config = fetchConfig('javascript');
配置。headers['X-Requested-With'] = 'XMLHttpRequest';
配置。body = JSON.stringify({
…JSON.parse (serializeForm (this.form)),
section: this.cartNotification.getSectionsToRender().map((section) => section.id)，
sections_url: window.location.pathname
});
fetch(“${路线。cart_add_url}”,配置)
.then((response) => response.json())
.then((response) => {
If (response.status) {
this.handleErrorMessage (response.description);
返回;
}
this.cartNotification.renderContents(响应);
})
.catch((e) => {
console.error (e);
})
.finally(() => {
submitButton.classList.remove(“加载”);
submitButton.removeAttribute(“aria-disabled”);
});
}
handleErrorMessage(errorMessage = false) {
这一点。errorMessageWrapper =此。errorMessageWrapper || this.querySelector('.product-form__error-message-wrapper');
这一点。errorMessage =这个。this.errorMessageWrapper.querySelector('.product-form__error-message');
this.errorMessageWrapper。toggleAttribute(“隐藏”! errorMessage);
if (errorMessage) {
this.errorMessage.textContent = errorMessage;
}
}
});
}
祝你愉快
