Last active
April 22, 2021 01:34
-
-
Save doubleedesign/6c7e7f17db872ca367052de21e157369 to your computer and use it in GitHub Desktop.
Timed pop-up using Zurb Foundation Reveal (modal); stores whether the user has dismissed it or already subscribed in local storage. This example is built in WordPress using ACF to get values of what to store, when to show up etc (and Ninja Forms for the form but of course it doesn't have to be used for a form).
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Convert milliseconds to the desired format | |
* @param milliseconds | |
* @param format | |
* @returns {*} | |
* @see https://gist.github.com/flangofas/714f401b63a1c3d84aaa | |
*/ | |
function convertMilliseconds(milliseconds, format) { | |
var total_days, total_hours, total_minutes, total_seconds; | |
total_seconds = parseInt(Math.floor(milliseconds / 1000)); | |
total_minutes = parseInt(Math.floor(total_seconds / 60)); | |
total_hours = parseInt(Math.floor(total_minutes / 60)); | |
total_days = parseInt(Math.floor(total_hours / 24)); | |
switch(format) { | |
case 'seconds': | |
return total_seconds; | |
break; | |
case 'minutes': | |
return total_minutes; | |
break; | |
case 'hours': | |
return total_hours; | |
break; | |
case 'days': | |
return total_days; | |
break; | |
default: | |
console.log('No format parameter given to convertMilliseconds()'); | |
return; | |
break; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
window.addEventListener('load', function() { | |
initPopUpSubscription(); | |
/** | |
* Popup subscription form | |
*/ | |
function initPopUpSubscription() { | |
// Get elements | |
var popup = document.getElementById('subscribe-modal'); | |
var delay = popup.dataset.delay * 1000; // seconds to milliseconds | |
var frequency = popup.dataset.frequency; | |
var form_id = popup.dataset.form_id; | |
// Check if the user has already subscribed according to their local storage | |
var alreadySubscribed = localStorage.getItem('subscribed'); | |
// If a dismissed_date is stored in local storage, check how long ago it was | |
var alreadyDismissed = localStorage.getItem('dismissed_date'); | |
var howLongSinceDismissed = 100; | |
if (alreadyDismissed != null) { | |
var today = new Date().getTime(); | |
var dismissed = parseInt(alreadyDismissed); | |
var todayInDays = convertMilliseconds(today, 'days'); | |
var dismissedDays = convertMilliseconds(dismissed, 'days'); | |
howLongSinceDismissed = todayInDays - dismissedDays; | |
} | |
// So should we show the popup? | |
var show_popup = false; | |
if ((alreadySubscribed != null) || (howLongSinceDismissed > frequency)) { | |
show_popup = true; | |
} | |
// Show it if true | |
if (show_popup) { | |
// Show the popup after the delay time | |
if (popup != null) { | |
setTimeout(function () { | |
$('#subscribe-modal').foundation('open'); | |
}, delay); | |
} | |
// When the popup has appeared... | |
$('#subscribe-modal').on('open.zf.reveal', function () { | |
// When the form is submitted | |
$(document).on('nfFormSubmitResponse', function (event, response, id) { | |
// Make sure we're responding to the right form, using the form ID | |
if(response.id == form_id) { | |
// Save subscribed state to local storage | |
localStorage.setItem('subscribed', 'true'); | |
// Close the window after a couple of seconds | |
setTimeout(function () { | |
$('#subscribe-modal').foundation('close'); | |
}, 2000); | |
} | |
}); | |
// When the popup is dismissed | |
var closebutton = document.getElementById('dismiss-subscribe-popup'); | |
if (closebutton != null) { | |
closebutton.addEventListener('click', function () { | |
event.preventDefault(); | |
// Save timestamp in local storage if the user has not subscribed | |
// Note: We shouldn't actually get to this, because the modal should close after a successful subscription, | |
// but I'm putting it here just in case, to ensure we don't get both values stored unnecessarily | |
if (alreadySubscribed == null) { | |
var today = new Date().getTime(); | |
localStorage.setItem('dismissed_date', today.toString()); | |
} | |
// Close modal | |
$('#subscribe-modal').foundation('close'); | |
}); | |
} | |
}); | |
} | |
} // end subscription popup | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
$popup = get_field('popup', 'option'); | |
$headline = $popup['headline']; | |
$message = $popup['message']; | |
$form = $popup['form_shortcode']; | |
$form_id = str_replace('[ninja_form id=', '', $form); | |
$form_id = str_replace(']', '', $form_id); | |
$loading_delay = $popup['loading_delay']; | |
$frequency = $popup['frequency']; | |
// Note: data-delay, data-frequency, and data-form_id are not part of the Foundation Reveal spec. | |
// See theme.js for their usage. | |
?> | |
<div class="reveal" id="subscribe-modal" | |
data-reveal | |
data-close-on-click="false" | |
data-delay="<?php echo $loading_delay; ?>" | |
data-frequency="<?php echo $frequency; ?>" | |
data-form_id="<?php echo $form_id; ?>"> | |
<button id="dismiss-subscribe-popup" class="close-button" aria-label="Close modal" type="button"> | |
<span aria-hidden="true">×</span> | |
</button> | |
<h2><?php echo $headline; ?></h2> | |
<?php if($message) { | |
echo wpautop($message); | |
} ?> | |
<?php echo do_shortcode($form); ?> | |
</div> |
MvanVijfeijken
commented
Mar 25, 2020
via email
Ok tnx anyways, all the best !
Met vriendelijke groet/Kind regards,
Maurits van Vijfeijken
… Op 25 mrt. 2020 om 14:04 heeft Leesa Ward ***@***.***> het volgende geschreven:
***@***.*** commented on this gist.
Unfortunately I haven't used the F6 animations with this so I can't answer that, sorry!
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or unsubscribe.
Thanks for this, but I seem to be having an issue where it loads in right away.
I have edited the following line;
var delay = popup.dataset.delay * 1000; // seconds to milliseconds
However, no matter what I set here it still loads in right away.
What am I missing?
@BadScooter1980 what is popup.dataset.delay set to in your code?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment