Looking to add a "You've already subscribed!" message for users who are already subscribed

[avaskye]

We’re looking to add a "You've already subscribed!" message for users who have already signed up for our newsletter (both through our pop-up newsletter form and the sign-up form at the bottom of our homepage). This is for a Symmetry theme, and we’re happy to compensate for the work. If any developer can assist with this, we would greatly appreciate it—thank you in advance!

[rajweb]

Hey @avaskye ,

To implement a "You've already subscribed!" message in the Symmetry theme, the process involves detecting whether a user is already subscribed and then displaying the appropriate message. Here’s a general outline of how this can be done:

1. Front-End Message Display:

Add a dynamic message display using Javascript:

document.getElementById('newsletter-form').addEventListener('submit', function(e) {
    e.preventDefault();
    const email = document.querySelector('#email-input').value;

    fetch('/check-subscription', { method: 'POST', body: JSON.stringify({ email }) })
        .then(response => response.json())
        .then(data => {
            if (data.alreadySubscribed) {
                document.querySelector('#newsletter-message').textContent = "You've already subscribed!";
            } else {
                document.querySelector('#newsletter-message').textContent = "Thank you for subscribing!";
            }
        });
});

Add CSS to style the message so that it fits your theme's design

#newsletter-message {
    color: #d9534f;
    font-size: 14px;
    margin-top: 10px;
}

If you’d like, I can provide the exact Liquid and JavaScript code based on how your current forms are structured. Let me know if you'd like further assistance with implementation, and we can work out the details!

Thanks