I constructed slightly banner that seem on the prime of the web page till the consumer closes it. As soon as closed, it mustn’t present once more for twenty-four hours. I’ve tried to take action utilizing cookies – when the consumer x’s out the banner, a cookie known as “close_mobile_banner” with the date as the worth is saved for twenty-four hours. That is engaged on desktop, however not IOS (I have not tried different OS’s). When the consumer closes the banner on IOS, it seems once more when the web page is refreshed (must be hidden for twenty-four hours).
header.blade.php (it is a blade template – it is mainly PHP with a couple of variations)
Notice – I simplified the code a bit so it is simpler to skim. This code is totally practical (simply not on ios..)
...
@if (!isset($_COOKIE['close_mobile_banner']))
@php
$bg_color = get_sub_field('background_color');
$text_color = get_sub_field('text_color');
$copy = get_sub_field('copy');
@endphp
<div class="mobile-banner" type="background-color: {{ $bg_color }}; coloration: {{ $text_color }}">
<div class="wrapper">
<p class="mobile-banner-copy">{{ $copy }}</p>
<a href="{{ $google_play_link }}" class="android-image mobile-banner-image">
<svg width="108" top="32" viewBox="0 0 108 32" fill="none" xmlns="http://www.w3.org/2000/svg"></svg>
</a>
<button class="mobile-banner-close" onclick="occasion.preventDefault();$(this).closest('.mobile-banner').removeClass('lively'); setCookie('close_mobile_banner', new Date().toISOString(), 1)"></button>
</div>
</div>
@endif
...
cookies.js
perform setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = "expires="+d.toUTCString();
doc.cookie = cname + "=" + encodeURIComponent(cvalue) + ";" + expires + ";path=/";
window.alert(getCookie(cname));
}
// debugging
perform getCookie(title) {
const worth = `; ${doc.cookie}`;
const components = worth.break up(`; ${title}=`);
if (components.size === 2) return components.pop().break up(';').shift();
}
It is a WordPress website, utilizing Blade/Laravel, Superior Customized Fields, and checking on an iPhone SE (Safari and Chrome).
