my add to cart button does not working when i try to switch variants
my store: https://the-gadgetorium.com/
if i am adding a product to the cart without switching variants the button works
the problem begins when i try to switch variants
1 Like
Hi @GTGTGT12 Hope you are doing well the error is due to
/**
at the the start of product-form.js file remove this and variant picker will work fine.
If helpful, please Like and Accept Solution.
Hi @GTGTGT12 ,
Please go to product-form.js file and change the whole code to the following code:
https://raw.githubusercontent.com/Shopify/dawn/main/assets/product-form.js
Because I checked and your file’s code is not correct, it’s redundant code:
Hope it helps!
@LitExtension i replacet the code but now when i press the add to cart button there is infinte loading
Hi @GTGTGT12 ,
Because you removed the ‘loading-overlay spinner’ icon, it caused JS error, now please change the whole JS file code to the following code, it will work fine:
if (!customElements.get('product-form')) {
customElements.define('product-form', class ProductForm extends HTMLElement {
constructor() {
super();
this.form = this.querySelector('form');
this.form.querySelector('[name=id]').disabled = false;
this.form.addEventListener('submit', this.onSubmitHandler.bind(this));
this.cartNotification = document.querySelector('cart-notification');
}
onSubmitHandler(evt) {
evt.preventDefault();
const submitButton = this.querySelector('[type="submit"]');
if (submitButton.classList.contains('loading')) return;
this.handleErrorMessage();
this.cartNotification.setActiveElement(document.activeElement);
submitButton.setAttribute('aria-disabled', true);
submitButton.classList.add('loading');
const config = fetchConfig('javascript');
config.headers['X-Requested-With'] = 'XMLHttpRequest';
delete config.headers['Content-Type'];
const formData = new FormData(this.form);
formData.append('sections', this.cartNotification.getSectionsToRender().map((section) = > section.id));
formData.append('sections_url', window.location.pathname);
config.body = formData;
fetch(`$ {
routes.cart_add_url
}`, config)
.then((response) = > response.json())
.then((response) = > {
if (response.status) {
this.handleErrorMessage(response.description);
return;
}
this.cartNotification.renderContents(response);
})
.
catch ((e) = > {
console.error(e);
})
.
finally(() = > {
submitButton.classList.remove('loading');
submitButton.removeAttribute('aria-disabled');
});
}
handleErrorMessage(errorMessage = false) {
this.errorMessageWrapper = this.errorMessageWrapper || this.querySelector('.product-form__error-message-wrapper');
this.errorMessage = this.errorMessage || this.errorMessageWrapper.querySelector('.product-form__error-message');
this.errorMessageWrapper.toggleAttribute('hidden', !errorMessage);
if (errorMessage) {
this.errorMessage.textContent = errorMessage;
}
}
});
}
Hope it helps!
Hello! I am having the same issue and tried this solution, but did not work for me. Any other suggestions?
Test – Aroma Vibes Co. - this is a product I am testing a size variant with
Hi @aromavibes ,
You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.
1 Like
Hi @GTGTGT12 ,
If it helped you solve your issue, please mark it as a solution. Thank you and good luck.