Ajax for newsletter signup in Shopify?

Highlighted
New Member
1 0 0

I'm attempting to make a modal popup newsletter signup form that provides a promotional code after the newsletter signup form has been submit. The problem is that the page reloads on submit and closes the box with the code instantaneously.

I was wondering if it was possible to submit to the Shopify newsletter signup using AJAX? If so, what URL do I post to and what format does the string need to be in?

I looked in the documentation but saw nothing about AJAX with newsletter signups (or even where to post to).

{% form 'customer' %}
    <input type="hidden" id="contact_tags" name="contact[tags]" value="prospect,newsletter"/>
    <input type="email" id="contact_email" class="newsletter input-lg" name="contact[email]" placeholder="{{ settings.footer_newsletter_placeholder }}"/>
    <button type="submit" name="submit" class="signup" onClick="$.fancybox.close(); $.fancybox('#Promo');"><i class="fa fa-angle-right"></i></button>
{% endform %}
0 Likes
Highlighted
Shopify Expert
463 0 84

If you look at the HTML that {% form 'customer' %} outputs, the action is "/contact". Here's a quick ajax submit setup that does a basic validation that the email field is not empty.

$('form.contact-form').submit( function(){
  $('p.error, p.success').remove();
  if($(this).find('input[type="email"]').val() !== ''){
    var data = $(this).serialize();
    $.ajax({  
      type: "POST",  
      url: "/contact",  
      data: data,  
      success: function() { 
        $('.contact-form').append('<p class="success">Thanks for signing up! Here is your promo code: 123456</p>');
      },
      error: function() {
        $('.contact-form').append('<p class="errror">There was an error in submitting the form.</p>');
      }    
    }); 
  }
  else {
    $(this).append('<p class="error">Please fill in your email address.</p>');  
  }
  return false;
});

 

0 Likes
Highlighted
Shopify Partner
2 0 0

I've tried this aproach but /contact has a redirect to a "Check you are not a robot" page which does not work of coures. 

Is there any other url used to directly hit the subscirbers list?

 

0 Likes
Highlighted
Shopify Partner
6 0 0

This can be disabled under Online Store > Preferences at the bottom of the page.

0 Likes