Personalized checkout and custom promotions with Shopify Scripts
Hello,
I have a newsletter in a shopify website using Pipeline theme, and the newsletter functions properly with the exception that the form refreshes the page when submitting an email. Be that the submission is successful or no.
The appropriate message shows on the form after the page refreshes (success or error)
I am looking into stopping the form from refreshing the form
class NewsletterCheckForResult { constructor(newsletter) { this.sessionStorage = window.sessionStorage; this.newsletter = newsletter; this.stopSubmit = true; this.isChallengePage = false; this.formID = null; this.checkForChallengePage(); this.newsletterSubmit = (e) => this.newsletterSubmitEvent(e); if (!this.isChallengePage) { this.init(); } } init() { this.newsletter.addEventListener('submit', this.newsletterSubmit); this.showMessage(); } newsletterSubmitEvent(e) { if (this.stopSubmit) { e.preventDefault(); this.removeStorage(); this.writeStorage(); this.stopSubmit = false; this.newsletter.submit(); } } checkForChallengePage() { this.isChallengePage = window.location.pathname === '/challenge'; } writeStorage() { if (this.sessionStorage !== undefined) { this.sessionStorage.setItem('newsletter_form_id', this.newsletter.id); } } readStorage() { this.formID = this.sessionStorage.getItem('newsletter_form_id'); } removeStorage() { this.sessionStorage.removeItem('newsletter_form_id'); } showMessage() { this.readStorage(); if (this.newsletter.id === this.formID) { const newsletter = document.getElementById(this.formID); if (window.location.search.indexOf('?customer_posted=true') !== -1) { newsletter.classList.remove(classes$1.error); newsletter.classList.add(classes$1.success); } else if (window.location.search.indexOf('accepts_marketing') !== -1) { newsletter.classList.remove(classes$1.success); newsletter.classList.add(classes$1.error); } this.scrollToForm(newsletter); } } scrollToForm(newsletter) { const rect = newsletter.getBoundingClientRect(); const isVisible = rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth); if (!isVisible) { setTimeout(() => { window.scroll({ top: rect.top, left: 0, behavior: 'smooth', }); }, 400); } } unload() { this.newsletter.removeEventListener('submit', this.newsletterSubmit); } } const newsletterCheckForResultSection = { onLoad() { sections$1[this.id] = []; const newsletters = this.container.querySelectorAll(selectors$1.newsletterForm); newsletters.forEach((form) => { sections$1[this.id].push(new NewsletterCheckForResult(form)); }); }, onUnload() { sections$1[this.id].forEach((form) => { if (typeof form.unload === 'function') { form.unload(); } }); }, };
The images above show the submitnewsletter function in theme.js
It is clear that the method (e.preventDefault();) is already in use and i understand that should stop the page from refreshing, However, the refresh happens and also the scroll down to form is not working properly. it does not scroll down after the page refreshes.
Any advice how can I stop the page from refreshing on submit?
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025