Solved

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

ollivtheone
Visitor
2 0 3

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!

Accepted Solution (1)
dmwwebartisan
Shopify Partner
12280 2546 3693

This is an accepted solution.

@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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 30 (30)

okt
Visitor
2 0 1

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
Shopify Partner
12280 2546 3693

This is an accepted solution.

@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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
okt
Visitor
2 0 1

Thanks man, you're so good !

ollivtheone
Visitor
2 0 3

Thank you!

VuongTuanAnh
Explorer
50 0 16

Thank you! It helps

Casper0301
New Member
10 0 0

Thanks!

BenTiemann
Shopify Partner
20 0 3

like this? because it doesnt work for me 😞

frage 17.10.PNG

Thank you for your help

Best regards

Ben

dmwwebartisan
Shopify Partner
12280 2546 3693

@BenTiemann 

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

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
BenTiemann
Shopify Partner
20 0 3

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
Shopify Partner
12280 2546 3693

@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;
}
}
});
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
BenTiemann
Shopify Partner
20 0 3

Thank you it works 🙂 Have a great day

dmwwebartisan
Shopify Partner
12280 2546 3693

@ollivtheone 

Welcome again.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
EChandra
New Member
5 0 0

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

 

EChandra_0-1640062881473.png

 

dmwwebartisan
Shopify Partner
12280 2546 3693

@EChandra 

Please share your store URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
EChandra
New Member
5 0 0

Hi @dmwwebartisan 

 

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

Use this password to enter: mooski

 

Thanks!

dmwwebartisan
Shopify Partner
12280 2546 3693

@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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
EChandra
New Member
5 0 0

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
Shopify Partner
12280 2546 3693

@EChandra 

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

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
EChandra
New Member
5 0 0

@dmwwebartisan 

I have replaced the code with the original product-form.js. I've also attached the code zip file in case you need it.

 

Thanks.

dmwwebartisan
Shopify Partner
12280 2546 3693

@EChandra 

I have checked your store add to cart is working I think your problem is solved.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
EChandra
New Member
5 0 0

Hi @dmwwebartisan 

 

Yes. But I would like the add to cart button behavior to redirect users to the "cart page" instead of showing a pop-up.

 

Any advice on how to do it? I tried the code you suggested previously but as you can see it broke the add to cart functionality.

 

Thanks!

dmwwebartisan
Shopify Partner
12280 2546 3693

@EChandra 

I have checked your theme code but with more bugs in your theme is not possible to share solutions.

Please PM me.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
MVUILL
Explorer
66 0 17

That's perfect, thank you!

Rafael01
Visitor
1 0 0

Thank you so much!

flower4kb
Visitor
3 0 0

I have been searching for hours for this solution - thank you so much for posting.  You are my quan!

Kenny20
Visitor
1 0 0

Is there a new solution to skip cart because this code isnt working for me I want the add to cart button to go straight to check out if possible 

Shanto36
Shopify Partner
2 0 0

Love Love Love for you. 

After 4.30 hours later I found this article and its work

Klodi
New Member
6 0 0

Ciao there,

 

First of all, I would like to thank you so much for your support and effort in order to help all of us to solve these problems with the theme codes.

 

 Now I am currently working with Dawn Theme version 7.0.0 and I just applied your solution to my website code, but for me, it is not working. 

When I click add to cart it still automatically redirects me to the Cart Page.

 

Klodi_0-1670501147942.png

This is the code placed as a comment as you suggest.

 

Please if you can just tell me what can be the problem that it is not working, you would help me so much!

 

Thanks in advance for your help & support.

 

Have a nice day,

Klodi

noahmulder
Visitor
1 0 0

how can I do this for the debutify theme? When I click atc it sends me straight to the checkout page. And I want it to go to the cart page isntead. Any help @dmwwebartisan ?

Jahid-KlinKode
Excursionist
145 1 4

Hi @ollivtheone, check out this YouTube video (https://www.youtube.com/watch?v=5SefePWS5as) for a quick fix on enabling the side drawer cart or cart page redirect after clicking "Add to Cart" in Shopify Dawn theme.