Shopify themes, liquid, logos, and UX
Return management just got easier! We’ve launched Customer Self-Serve Returns to all Shopify merchants. Click here to learn more!
I would like to skip the cart popup notification and redirect the customer directly to the cart page. I'm using the Dawn theme.
Thank you in advance!
Solved! Go to the solution
This is an accepted solution.
Step 1: Go to Online store > Themes > Actions > Edit code. -
Step 2: Go to Assets >product-form.js and find this code
this.form.addEventListener('submit', this.onSubmitHandler.bind(this));
comment this code like this
/* this.form.addEventListener('submit', this.onSubmitHandler.bind(this)); */
Thanks!
Hey,
I'm looking also for the exact same thing, there is no option in the theme editor that allows us to skip the cart notification.
Is there any code modification to do ?
Thanks !
This is an accepted solution.
Step 1: Go to Online store > Themes > Actions > Edit code. -
Step 2: Go to Assets >product-form.js and find this code
this.form.addEventListener('submit', this.onSubmitHandler.bind(this));
comment this code like this
/* this.form.addEventListener('submit', this.onSubmitHandler.bind(this)); */
Thanks!
Thanks man, you're so good !
Thank you!
Thank you! It helps
Thanks!
like this? because it doesnt work for me 😞
Thank you for your help
Best regards
Ben
Please share your Assets >product-form.js file code
Thats my code:
if (!customElements.get('product-form')) {
customElements.define('product-form', class ProductForm extends HTMLElement {
constructor() {
super();
this.form = this.querySelector('form');
this.form.addEventListener('submit', this.onSubmitHandler.bind(this));/* 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';
config.body = JSON.stringify({
...JSON.parse(serializeForm(this.form)),
sections: this.cartNotification.getSectionsToRender().map((section) => section.id),
sections_url: window.location.pathname
});
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;
}
}
});
}
Please remove old all code and add following new code your file
if (!customElements.get('product-form')) {
customElements.define('product-form', class ProductForm extends HTMLElement {
constructor() {
super();
this.form = this.querySelector('form');
/* 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';
config.body = JSON.stringify({
...JSON.parse(serializeForm(this.form)),
sections: this.cartNotification.getSectionsToRender().map((section) => section.id),
sections_url: window.location.pathname
});
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;
}
}
});
}
Thank you it works 🙂 Have a great day
Welcome again.
That's perfect, thank you!
Hi @dmwwebartisan ,
I replace all the product-form.js code with the one you posted. It resulted in an error whenever I click add to cart.
Please see the screenshot attached for the error.
Any idea how to fix or what might be the cause?
Thanks.
Note: my website is still in development mode (not sure if this is related to the issue).
Please share your store URL!
Thanks!
Hello,
I have checked your store and found add to cart button not working. I think this is a JS level issue and this creates a problem. please share your theme zip file I will check the code and send the correct solution for you.
Thanks!
Really appreciate your help! Please find attached the theme zip file.
Note: The "add to cart" button doesn't work when I replaced the old "product-form.js" code with the one you suggested above (which I'm using currently). If I revert using the old code, it works normally (add to cart button triggers pop-up).
yes, you are correct please replace the old code with your product-form.js file.
User | RANK |
---|---|
135 | |
91 | |
77 | |
68 | |
43 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022