Making Mailchimp pop-up work on-click for Jekyll/Github Pages

Question

Trying to make Mailchimp's pop-up form work on-click for my Jekyll Powered Github Page.

Steps I've followed:

I've created a link on my site to trigger the pop-up with:
```
 <a href="#" id="open-popup" onclick ="showMailingPopUp(); return false;">Join Newsletter</a> 
```
The above sits in the HTML for my navigation bar ( masthead.html ).

I've then created an HTML for the mailchimp pop-up code ( newsletter.html ). And yes, uuids and lids were replaced by my own hashes

 <script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script> <script> function showMailingPopUp() { require( ["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us12.list-manage.com","uuid":"myuuid","lid":"mylid"}) } ); document.cookie = "MCPopupClosed=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;"; document.cookie = "MCPopupSubscribed=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;"; } document.getElementById("open-popup").onclick = function() {showMailingPopUp()}; </script>

Calling newsletter.html with an include added to masthead.html right before </body> with:
```
 {% include newsletter.html %} 
```
No luck with all above :-(

Any pointers on how to fix it?

Answer 1

You have a problem with javascript loading order. Jquery loads after your newsletter code, that's what creates an error.

remove {% include newsletter.html %} in _includes/masthead.html
add {% include newsletter.html %} in layout/default.html , just before the closing </body>

And it works !

Bonus : You can also remove extra <body> and </body> tags in _includes/masthead.html

Making Mailchimp pop-up work on-click for Jekyll/Github Pages

Question

1 answers

solution1
0 ACCPTED 2018-04-19 19:21:00

Making Mailchimp pop-up work on-click for Jekyll/Github Pages

Question

1 answers

solution1 0 ACCPTED 2018-04-19 19:21:00

solution1
0 ACCPTED 2018-04-19 19:21:00