Newsletter Language for Already Subscribed Users

Store Design
1

Hi,

In the theme language settings, it seems there’s only a post-submit message if someone has NOT subscribed to our mailing list.

But when a subscribed e-mail tries to sign up again, the page refreshes and does nothing and does not give an error message like “You have already subscribed!”

How can I add a “You have already subscribed!” post-message if someone tries to re-subscribe?

2

Hi @onyx_au ,

Newsletter Language for Already Subscribed users you need to add following code:

Add following script on this file: SALES CHANNELS > Online Store > Themes > Actions > Edit code > Assets > global.js

var live_url = window.location.href;
var result = live_url.includes('form_type=customer');
var input_val = document.querySelector('#NewsletterForm--footer').value.length;
if(result && input_val != 0){
    const add_ele = document.createElement("h3");
    add_ele.innerText = "You have already subscribed!";
    document.querySelector('.newsletter-form__field-wrapper').appendChild(add_ele);
    add_ele.classList.add('newsletter_already_subscribe','newsletter-form__message','form__message');
}

Add following CSS code on this file: SALES CHANNELS > Online Store > Themes > Actions > Edit code > Assets > component-newsletter.css

.newsletter_already_subscribe{
  color: red;
}

How it will looks like after adding above code in your Shopify Store:

image-20220524-070729.png
image-20220524-070729.png1489×662 27.4 KB

Thank you.

3

Worked perfectly for me!

4

Hi @SheetalZadfiya ! Would you happen to have an updated code for the Dawn theme? I tried using the code above to enable the “You’ve already subscribed!” message, but it doesn’t appear to work. Thank you so much in advance!

5

Hello, I had same issue, id values are different (added random id into the name)

use this one (original line of code is behind // as a comment)

var live_url = window.location.href;
var result = live_url.includes('form_type=customer');
//var input_val = document.querySelector('#NewsletterForm--footer').value.length;
var input_val = document.querySelector('[id*="NewsletterForm"]').value.length;

if(result && input_val != 0){
const add_ele = document.createElement("h3");
add_ele.innerText = "You have already subscribed!";
document.querySelector('.newsletter-form__field-wrapper').appendChild(add_ele);
add_ele.classList.add('newsletter_already_subscribe','newsletter-form__message','form__message');
}
6

You are the best, this worked for me!!

7

Hi

Hi, Pwfrancis

PREVIEW

I have theme.js which I modified.

rkshrivastaw_0-1712057475221.png
rkshrivastaw_0-1712057475221.png827×673 31.2 KB

8

Hello,

line 9693 should be

var input_val = document.querySelector('[id*="NewsletterForm"]').value.length;

in your case if contact id will change (this random number after Contact_), it won’t work

9

I modified the code as you said still it’s error message not reflecting.

rkshrivastaw_0-1712060585825.png
rkshrivastaw_0-1712060585825.png1019×693 33.7 KB

I am changing in the theme.js as In my theme no Global.js is present and theme.js is the file which is being called in theme.liquid file.

My store URL is https://mayandco.in/

10

Hi Pwfrancis

any update on it. as I modified the code, still it is not working

11

in global.js at the end add, I think you added it to theme.js:

var live_url = window.location.href;
var result = live_url.includes('form_type=customer');
//var input_val = document.querySelector('#NewsletterForm--footer').value.length;
var input_val = document.querySelector('[id*="NewsletterForm"]').value.length;

if(result && input_val != 0){
    const add_ele = document.createElement("h3");
    add_ele.innerText = "You have already subscribed!";
    document.querySelector('.newsletter-form__field-wrapper').appendChild(add_ele);
    add_ele.classList.add('newsletter_already_subscribe','newsletter-form__message','form__message');
}

just checked, still working in Dawn Theme

src.jpg
src.jpg850×282 17 KB

12

What theme are you using? This is for Dawn, maybe newsletter form field have different names than in Dawn so you should adjust them to mach or check if in your theme, this monit will work out of the box, in the settings etc.

13

My theme is “debut”

14

Hi, sorry, I didn’t use this one, check in theme settings, translate adapt → default theme content → newsletter, is there option for already subscribed message? I have only 3: Newsletter: Label, Newsletter: Success, Newsletter: Button Label so in theme itself there is no option to notify user about existing subscription.

for your try this one and check if it is working, if not I don’t think I will be able to help you more

var live_url = window.location.href;
var result = live_url.includes('form_type=customer');
var input_val = document.querySelector('#Contact_163955177715547d60-email').value.length;

if(result && input_val != 0){
    const add_ele = document.createElement("h3");
    add_ele.innerText = "You have already subscribed!";
    document.querySelector('.newsletter-form__field-wrapper').appendChild(add_ele);
    add_ele.classList.add('newsletter_already_subscribe','newsletter-form__message','form__message');
}

,

15

Hi avaskye,

can you please update me the exact code you used for “Newsletter Language for Already Subscribed Users” for dawn theme.
Thanks.

16

@pwfrancis Hi, would you happen to know what code we can use for the Symmetry theme? We’re no longer using Dawn, and it seems like this code no longer works :cry:

17

@SheetalZadfiya Hi, would you happen to have the code for Symmetry theme so that those who already subscribed to our newsletter would see a “You’ve already subscribed!” message? Thank you so much in advance!