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/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","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/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","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?
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/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","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/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","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?
Share Improve this question edited May 27, 2019 at 3:50 Jacob Peattie 44.2k10 gold badges50 silver badges64 bronze badges asked May 27, 2019 at 3:06 huntlakehuntlake 11 Answer
Reset to default 0I found solution using bootstrap popup and mailchimp shortcode.
You need to install mailchimp plugin. https://wordpress/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 -->