Adding Mailchimp

Follow

Comments

5 comments

  • Avatar
    Info

    Hi -

     

    The code below from MailChimp doesn't look like the same as your example above.  This is code for a pop up email signup box.  I tried to paste it as is into the theme.liquid, but rather than popping up a new overlay window, it just places the signup box in the header.  Any ideas?

    thanks!

     

     

    <!-- Begin MailChimp Signup Form -->

    <link href="http://cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">

    <style type="text/css">

    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }

    /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.

    We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */

    </style>

    <div id="mc\_embed\_signup">

    <form action="http://XXXXXXXX.us1.list-manage1.com/subscribe/post?u=b1dab14b4fff8182fa586fe6b&amp;id=2d9c7bd484" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="\_blank">

    <label for="mce-EMAIL">Subscribe to our mailing list</label>

    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>

    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

    </form>

    </div>

    <!--End mc_embed_signup-->

  • Avatar
    Zetya Support

    Hi there,

    Mailchimp have changed their code. Good news is that it looks like they have removed jQuery.

    The code should go in sign-up-form-widget.liquid.

    To stop it popping up you can remove target="_blank".

    Thanks, Gavin.

  • Avatar
    Karin Lang

    Hey Gavin,

    I have a question about this same thing. I'm not sure why the mailchimp popup form does not close after the subscribe button is clicked on the lily theme. This is for pinkdoordecor.com. I created a snippet named mailchimp-popup.liquid and added the snippet in the body area of the theme.liquid file. I'm not sure if where I placed it within the theme.liquid file is causing it issues not to close. Can you help PLEASE? lol...have to laugh since I've been trying to figure this out for 2 weeks.

     

    <!-- Begin MailChimp Signup Form -->

    <link href="http://cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">

    <style type="text/css">

        #mc_embed_signup{position:fixed; top:0; left:0; width:1300px; height:100%; background-color:rgba(0,0,0,.6);display:none;z-index:10000; }

        #mc_embed_signup form{position:fixed; top:25%; left:55%; width:400px; margin-left:-25%; font:normal 100% Helvetica,Arial,sans-serif; font-size:14px; border-radius:4px; border:solid; border-color:#F781F3; padding:10px 20px; background-color:#fff; color:#000; text-align:left;max-height:400px;overflow-y:auto;overflow-x:hidden;}

        #mc_embed_signup a.mc_embed_close{background:transparent url(http://downloads.mailchimp.com/img/closebox.png) no-repeat; display:block; height:30px; width:30px; text-indent:-999em; position:absolute; top:-10px; right:-10px; display:none; }

        /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.

           We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */

    </style>

    <div id="mc\_embed\_signup">

    <form action="http://pinkdoordecor.us7.list-manage.com/subscribe/post?u=72b35d8772dd9dab908fa6c23&amp;id=47f3af1f22" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="\_blank" novalidate>

        <img src="https://cdn.shopify.com/s/files/1/0069/0962/assets/pink\_door\_signup\_image-01.png?781" >

    <center><p>Receive exclusive deals, product previews and more.</p></center>

    <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>

    <div class="mc-field-group">

        <label for="mce-EMAIL">Email Address  <span class="asterisk">*</span>

    </label>

        <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">

    </div>

    <a href="#" id="mc\_embed\_close" class="mc\_embed\_close">Close</a>    <div id="mce-responses" class="clear">

            <div class="response" id="mce-error-response" style="display:none"></div>

            <div class="response" id="mce-success-response" style="display:none"></div>

        </div>    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

    </form>

    </div>

    <script type="text/javascript">

    var fnames = new Array();var ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';

    try {

        var jqueryLoaded=jQuery;

        jqueryLoaded=true;

    } catch(err) {

        var jqueryLoaded=false;

    }

    var head= document.getElementsByTagName('head')[0];

    if (!jqueryLoaded) {

        var script = document.createElement('script');

        script.type = 'text/javascript';

        script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js';

        head.appendChild(script);

        if (script.readyState && script.onload!==null){

            script.onreadystatechange= function () {

                  if (this.readyState == 'complete') mce_preload_check();

            }    

        }

    }

    var script = document.createElement('script');

    script.type = 'text/javascript';

    script.src = 'http://downloads.mailchimp.com/js/jquery.form-n-validate.js';

    head.appendChild(script);

    var err_style = '';

    try{

        err_style = mc_custom_error_style;

    } catch(e){

        err_style = '#mc_embed_signup input.mce_inline_error{border-color:#6B0505;} #mc_embed_signup div.mce_inline_error{margin: 0 0 1em 0; padding: 5px 10px; background-color:#6B0505; font-weight: bold; z-index: 1; color:#fff;}';

    }

    var head= document.getElementsByTagName('head')[0];

    var style= document.createElement('style');

    style.type= 'text/css';

    if (style.styleSheet) {

      style.styleSheet.cssText = err_style;

    } else {

      style.appendChild(document.createTextNode(err_style));

    }

    head.appendChild(style);

    setTimeout('mce_preload_check();', 250);

    var mce_preload_checks = 0;

    function mce_preload_check(){

        if (mce_preload_checks>40) return;

        mce_preload_checks++;

        try {

            var jqueryLoaded=jQuery;

        } catch(err) {

            setTimeout('mce_preload_check();', 250);

            return;

        }

        try {

            var validatorLoaded=jQuery("#fake-form").validate({});

        } catch(err) {

            setTimeout('mce_preload_check();', 250);

            return;

        }

        mce_init_form();

    }

    function mce_init_form(){

        jQuery(document).ready( function($) {

          var options = { errorClass: 'mce_inline_error', errorElement: 'div', onkeyup: function(){}, onfocusout:function(){}, onblur:function(){}  };

          var mce_validator = $("#mc-embedded-subscribe-form").validate(options);

          $("#mc-embedded-subscribe-form").unbind('submit');//remove the validator so we can get into beforeSubmit on the ajaxform, which then calls the validator

          options = { url: 'http://pinkdoordecor.us7.list-manage.com/subscribe/post-json?u=72b35d8772dd9dab908fa6c23&id=47f3af1f22&c=?', type: 'GET', dataType: 'json', contentType: "application/json; charset=utf-8",

                        beforeSubmit: function(){

                            $('#mce_tmp_error_msg').remove();

                            $('.datefield','#mc_embed_signup').each(

                                function(){

                                    var txt = 'filled';

                                    var fields = new Array();

                                    var i = 0;

                                    $(':text', this).each(

                                        function(){

                                            fields[i] = this;

                                            i++;

                                        });

                                    $(':hidden', this).each(

                                        function(){

                                            var bday = false;

                                            if (fields.length == 2){

                                                bday = true;

                                                fields[2] = {'value':1970};//trick birthdays into having years

                                            }

                                            if ( fields[0].value=='MM' && fields[1].value=='DD' && (fields[2].value=='YYYY' || (bday && fields[2].value==1970) ) ){

                                                this.value = '';

                                            } else if ( fields[0].value=='' && fields[1].value=='' && (fields[2].value=='' || (bday && fields[2].value==1970) ) ){

                                                this.value = '';

                                            } else {

                                                if (/[day]/.test(fields[0].name)){

                                                    this.value = fields[1].value+'/'+fields[0].value+'/'+fields[2].value;                                            

                                                } else {

                                                    this.value = fields[0].value+'/'+fields[1].value+'/'+fields[2].value;

                                                }

                                            }

                                        });

                                });

                            return mce_validator.form();

                        },

                        success: mce_success_cb

                    };

          $('#mc-embedded-subscribe-form').ajaxForm(options);

          

                  $('#mc_embed_signup').hide();

            cks = document.cookie.split( ';' );

            var show=true;

            for(i=0;i<cks.length;i++){

                parts = cks[i].split('=');

                if( parts[0].indexOf('MCEvilPopupClosed')!= -1 ) show = false;

            }

            if (show){

                $('#mc_embed_signup a.mc_embed_close').show();

                setTimeout( function(){ $('#mc_embed_signup').fadeIn();} , 2000);

                $('#mc_embed_signup a.mc_embed_close').click(function(){ mcEvilPopupClose();});

            }

            $(document).keydown(function(e){

                if (e == null) {

                  keycode = event.keyCode;

                } else {

                  keycode = e.which;

                }

                if(keycode == 27){

                    mcEvilPopupClose();

                }

            });

            function mcEvilPopupClose(){

                $('#mc_embed_signup').hide();

                var now = new Date();

                var expires_date = new Date( now.getTime() + 31536000000 );

                document.cookie = 'MCEvilPopupClosed=yes;expires=' + expires_date.toGMTString()+';path=/';

            }

        });

    }

    function mce_success_cb(resp){

        $('#mce-success-response').hide();

        $('#mce-error-response').hide();

        if (resp.result=="success"){

            $('#mce-'+resp.result+'-response').show();

            $('#mce-'+resp.result+'-response').html(resp.msg);

            $('#mc-embedded-subscribe-form').each(function(){

                this.reset();

            });

        } else {

            var index = -1;

            var msg;

            try {

                var parts = resp.msg.split(' - ',2);

                if (parts[1]==undefined){

                    msg = resp.msg;

                } else {

                    i = parseInt(parts[0]);

                    if (i.toString() == parts[0]){

                        index = parts[0];

                        msg = parts[1];

                    } else {

                        index = -1;

                        msg = resp.msg;

                    }

                }

            } catch(e){

                index = -1;

                msg = resp.msg;

            }

            try{

                if (index== -1){

                    $('#mce-'+resp.result+'-response').show();

                    $('#mce-'+resp.result+'-response').html(msg);            

                } else {

                    err_id = 'mce_tmp_error_msg';

                    html = '<div id="'+err\_id+'" style="'+err\_style+'"> '+msg+'</div>';

                    

                    var input_id = '#mc_embed_signup';

                    var f = $(input_id);

                    if (ftypes[index]=='address'){

                        input_id = '#mce-'+fnames[index]+'-addr1';

                        f = $(input_id).parent().parent().get(0);

                    } else if (ftypes[index]=='date'){

                        input_id = '#mce-'+fnames[index]+'-month';

                        f = $(input_id).parent().parent().get(0);

                    } else {

                        input_id = '#mce-'+fnames[index];

                        f = $().parent(input_id).get(0);

                    }

                    if (f){

                        $(f).append(html);

                        $(input_id).focus();

                    } else {

                        $('#mce-'+resp.result+'-response').show();

                        $('#mce-'+resp.result+'-response').html(msg);

                    }

                }

            } catch(e){

                $('#mce-'+resp.result+'-response').show();

                $('#mce-'+resp.result+'-response').html(msg);

            }

        }

    }

    </script>

    <!--End mc_embed_signup-->

     

    Thank you for your time.

     

    Karin

  • Avatar
    Karin Lang

    Snippet code {% include 'mailchimp-popup' %}

  • Avatar
    Zetya Support

    Hi Karin,

    I'd love to help you out but Mailchimp have changed their code so much that it doesn't look anything like what it did when I wrote this article in 2010. Have you asked them why it isn't working?

    Thanks, Gavin.

Please sign in to leave a comment.