Shopify mailchimp integration

Question

Before I start, I found this: Create a basic MailChimp signup form using their API which seems to do what I want, but here's the caveat:

The form I have is on Shopify. It's an app that allows clients to be notified when a product comes back in stock. I'd like to have a checkbox to allow them to subscribe to our newsletter as well. So the end result is that it would still post to the app, but add them to our newsletter database.

Can the above solution be done remotely? i.e. I put the PHP files on my main website, and have the ajax point to the url? Is there a simpler way to do this?

<script type="text/javascript">
$(document).ready(function() {
      var create_callback = function(data) {
        if (data.status == 'OK') {
        $.fancybox({
            'href': '#inline_message'
            });                                
          //alert(data.message);
        } else {
          //alert("Oops! An error occurred. Please check the email address you entered and try again.");
        $.fancybox({
            'href': '#inline_message'
        });                               
          $("#inline_message").html('<h3>Oops! Looks like an error occurred.</h3> <p>Please check the email address you entered and try again.</p>');
        }
      }
      $('#notify_button').click(function(event) {
        event.preventDefault();
        BISPopover.create($('#notify_email').val(), $('#product-select :selected').val()).then(create_callback);
      });
    $('#BIS_form_submit').submit(function() {
        var isChecked = $('#chkSelect').is(':checked');
        if(isChecked){
            $.ajax({
                url: 'http://www.myURL.com/inc/store-address.php', // proper url to your "store-address.php" file
                data: $('#BIS_form_submit').serialize(),
                success: function(msg) {
                    $('#message').html(msg);
                }
            });
            return false;
        }
    });                       
});      
</script>

 <div id="BIS_form">
    <form id="BIS_form_submit">
    <input type="hidden" name="ajax" value="true" />
    <h3 id="notify-title">Notify me when this is back in stock:</h3>
    <input type="email" id="notify_email" value="Email address" onfocus="value=''"/>
    <button id="notify_button" class="first">Submit</button>
    <input type="checkbox" id="chkSelect" /><span style="font-size:10px;position:relative;top:3px;left:3px;">Add me to the Newsletter</span>
    </form>
</div>

score 0 · Answer 1 · edited May 23 '17 at 12:24

0

I don't think that you will be able to use the MailChimp API remotely: ie from the clients' browser. -- see jQuery Ajax POST not working with MailChimp

I think that your click event handler for #notify_button will need to AJAX the data to a handler on your server. It will be this handler that will interact with the MailChimp API to add the customers' email address to the newsletter.

edited May 23 '17 at 12:24

Community

1
1

answered May 03 '13 at 18:20

Craig

63
7

I guess I was under the impression that the store-address.php was doing exactly that. – Patrick May 03 '13 at 18:22

score 0 · Accepted Answer · answered May 30 '13 at 12:27

I hope it's not bad form to answer my own question, but I have it working. I know it's an edge case, but maybe someone will find it helpful.

Code:

<script type="text/javascript">
    $(document).ready(function() {
        var create_callback = function(data) {
            if (data.status == 'OK') {
                $.fancybox({'href': '#inline_message'});                                
            } else {
                $.fancybox({'href': '#inline_message'});                               
                $("#inline_message").html('<h3>Oops! Looks like an error occurred.</h3> <p>Please check the email address you entered and try again.</p>');
            }                       
        }

        $('#notify_button').click(function(event) {
        event.preventDefault();
        BISPopover.create($('#mce-EMAIL').val(), $('#product-select :selected').val()).then(function(data) {
            var BISData = data; // keep a reference to the response from the app
            var isChecked = $('#chkSelect').is(':checked');
                if(isChecked) {
                    url = 'http://YourListURL';
                    EMAIL = $("#mc_form input[name=EMAIL]").val();
                    $.ajax({
                      type: "POST",
                      url: url,
                      data: {EMAIL : EMAIL},
                      dataType: 'json',
                      complete: function(){
                        create_callback(BISData);
            if (BISData.status == 'OK') {
                $.fancybox({'href': '#inline_message'});                                
            } else {
                $.fancybox({'href': '#inline_message'});                               
                $("#inline_message").html('<h3>Oops! Looks like an error occurred.</h3> <p>Please check the email address you entered and try again.</p>');
            }                                       
                      }
                    });                                 
                }
                else {
                    create_callback(BISData);
                }
        });
        });

    });                 
</script>                   
<div id="BIS_form">
    <form id="mc_form">
    <h3 id="notify-title">Notify me when this is back in stock:</h3>
    <input type="email" id="mce-EMAIL" name="EMAIL" value="Email address" onfocus="value=''"/>
    <button id="notify_button" class="first">Submit</button>
     <input type="checkbox" id="chkSelect" /><span>Add me to the Newsletter</span>
    </form>
</div>

It throws an error in the console, but it still works. This is probably due to the origin being on a different server. I'm open to suggestions on how to improve this. You can see it functioning here (you might need to play around to find an out of stock variant):

http://store.manitobah.ca/collections/mukluks/

Shopify mailchimp integration

2 Answers2