Redirect to cart page after I click add to cart button - Dawn Theme

[ollivtheone]

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!

[okt]

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 !

[dmwwebartisan]

@okt @ollivtheone

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!

[okt]

Thanks man, you’re so good !

[ollivtheone]

Thank you!

[VuongTuanAnh]

Thank you! It helps

[Casper0301]

Thanks!

[BenTiemann]

like this? because it doesnt work for me

Thank you for your help

Best regards

Ben

[dmwwebartisan]

@BenTiemann

Please share your Assets >product-form.js file code

[BenTiemann]

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;
}
}
});
}

[dmwwebartisan]

@BenTiemann

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;
}
}
});
}

[BenTiemann]

Thank you it works Have a great day

[dmwwebartisan]

@ollivtheone

Welcome again.

[MVUILL]

That’s perfect, thank you!

[EChandra]

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).

[dmwwebartisan]

@EChandra

Please share your store URL!

Thanks!

[EChandra]

Hi @dmwwebartisan

Here’s my store URL: https://ecshop101.myshopify.com/

Use this password to enter: mooski

Thanks!

[dmwwebartisan]

@EChandra

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!

[EChandra]

Hi @dmwwebartisan

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).

[dmwwebartisan]

@EChandra

yes, you are correct please replace the old code with your product-form.js file.