Newsletter Language for Already Subscribed Users

Newsletter Language for Already Subscribed Users

onyx_au
Explorer
68 1 23

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?

Replies 14 (14)

SheetalZadfiya
Explorer
70 15 19

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

Thank you.

If our answer is helpful then please feel free to Like and Accept it as solution!
Hire our Shopify Developers for all your small & big needs:
New Store Development | Custom Theme Development | Site Speed Optimization
Email: hello@mintyourstore.com | Instagram: @mintyourstore
atlanticmorning
Tourist
4 0 0

Worked perfectly for me!

avaskye
Excursionist
36 0 7

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! 

pwfrancis
Tourist
5 0 1

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

 

avaskye
Excursionist
36 0 7

You are the best, this worked for me!! 

Vpitcher
Visitor
2 0 0

Hi avaskye,

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

rkshrivastaw
New Member
5 0 0

Hi 

Hi, Pwfrancis

@pwfrancis wrote:

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

 


PREVIEW
I have theme.js which I modified.  
rkshrivastaw_0-1712057475221.png

 

 
pwfrancis
Tourist
5 0 1

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 

rkshrivastaw
New Member
5 0 0

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

 

rkshrivastaw_0-1712060585825.png

 

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/

 

rkshrivastaw
New Member
5 0 0

Hi Pwfrancis 

 

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

pwfrancis
Tourist
5 0 1

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

pwfrancis
Tourist
5 0 1

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.

rkshrivastaw
New Member
5 0 0

My theme is "debut"

pwfrancis
Tourist
5 0 1

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