Launching a Mailchimp popup from a menu item

I'm trying to add a menu item that when clicked, will open a Mailchimp popup form. Although I'm familiar with VBA and Access Dev, I have limited knowledge of Web/WordPress Dev.

These are the snippets of code I've tried so far based on the research I've done online:

1) I found this one on several different sites. The problem with it is that it seems there isn't any way to get it to launch from a Menu item.

script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"/script

script type="text/javascript"
  function showPopup() {
      window.dojoRequire(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us20.list-manage.com","uuid":"YOUR_UUID_GOES_HERE","lid":"YOUR_LID_GOES_HERE","uniqueMethods":true}) });
//unsetting the cookie
  document.cookie = "MCPopupClosed=; expires=Thu, 01 Jan 1970 00:00:00 UTC";                  
  document.cookie = "MCPopupSubscribed=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
  }

  document.getElementById("show-popup").onclick = function() { showPopup(); }
/script

2) This is the second one I've tried.

script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"/script

script type="text/javascript"
  jQuery(document).ready(function($) {
      $("menu-item-364").on("click",function showPopup() {
      window.dojoRequire(["mojo/signup-forms/Loader"], function(L) { 
          e.preventDefault();
          L.start({"baseUrl":"mc.us20.list-manage.com","uuid":"YOUR_UUID_GOES_HERE","lid":"YOUR_LID_GOES_HERE","uniqueMethods":true}) });


////unsetting the cookie
  document.cookie = "MCPopupClosed=; expires=Thu, 01 Jan 1970 00:00:00 UTC";                  
  document.cookie = "MCPopupSubscribed=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
  });
 });


document.getElementById("show-popup").onclick = function() { showPopup(); }

I also read another post where someone recommended using the addEventListener onhashchange event to launch the function and a) I wasn't able to get it to work and b) I have a concern that it would then launch anytime the hashtag changes - causing issues if I use anchors to navigate in other areas of the site in the future.

What am I missing?

Topic plugin-mailchimp Wordpress

Category Web


I found solution using bootstrap popup and mailchimp shortcode.

You need to install mailchimp plugin. https://wordpress.org/plugins/mailchimp-for-wp/

Step 1 : Customise menu item

function nav_replace_wpse_189788( $item_output, $item, $depth, $args ) {
 //var_dump($item_output, $item);
    if( $args->theme_location != 'main_menu' ){
        return $item_output;
    }

    if ( $item->menu_order == '3' ) {
        $item_output .= '<li class="moblie-nav menu-item menu-item-type-custom menu-item-object-custom last-menu-item">';
        $item_output .= '<a href="JavaScript:Void(0)" data-toggle="modal" data-target="#myModal">Subscribe</a>';
        $item_output .= '</li>';
    }

    return $item_output;
 }
 add_filter('walker_nav_menu_start_el','nav_replace_wpse_189788',10,4);

Step 2 : Add popup with mailchimp shordcode

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                 <img src="images/close-icon.png">
            </button>
         </div>
         <div class="modal-body">
            <div class="exp_login_wrap">
                <h3>Subscribe</h3>
                <?php echo do_shortcode( '[mc4wp_form id="26125"]' );?>

            </div>
         </div>
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.