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

Solved
ollivtheone
New Member
2 0 2

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!

Replies 23 (23)
dmwwebartisan
Shopify Partner
10190 2279 3179

@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 | Bag is a cart drawer that maximizes your sales. View app →
BenTiemann
Excursionist
16 0 3

Thank you it works Have a great day

dmwwebartisan
Shopify Partner
10190 2279 3179

@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 | Bag is a cart drawer that maximizes your sales. View app →
MVUILL
Explorer
47 0 15

That's perfect, thank you!

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
10190 2279 3179

@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 | Bag is a cart drawer that maximizes your sales. View 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
10190 2279 3179

@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 | Bag is a cart drawer that maximizes your sales. View 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
10190 2279 3179

@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 | Bag is a cart drawer that maximizes your sales. View app →