Patrick Patrick - 21 days ago 7
PHP Question

Shopify mailchimp integration

Before I start, I found this: Some basic Mailchimp API examples required 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>

Answer

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/

Comments