Used the answer found here: https://stackoverflow.com/a/49305110/16898548 to help me activate a function if someone’s visited a page for the first time, but I need it to store the cookie path as / regardless of what page they land on, as I only want them to see the popup it generates once per X amount of time. Currently if they visit example.com/shoes, it will set the path to be shoes/, so if they then visit example.com/bags, it will display the popup again.
Full code (Currently learning PHP + JS so am aware there is probably an easier way to do this whole popup, but would like to get full functionality then I’ll look at optimising):
<script>
function setCookie(c_name,value,exdays){var exdate=new Date();exdate.setDate(exdate.getDate() + exdays);var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());document.cookie=c_name + "=" + c_value;}
function getCookie(c_name){var c_value = document.cookie;var c_start = c_value.indexOf(" " + c_name + "=");if (c_start == -1){c_start = c_value.indexOf(c_name + "=");}if (c_start == -1){c_value = null;}else{c_start = c_value.indexOf("=", c_start) + 1;var c_end = c_value.indexOf(";", c_start);if (c_end == -1){c_end = c_value.length;}c_value = unescape(c_value.substring(c_start,c_end));}return c_value;}
checkSession();
function checkSession(){
var c = getCookie("visited");
if (c !== "yes") {
window.addEventListener('load', (event) => {
var windowSize = $(window).width();
if (windowSize >= 0) {
document.getElementById('discountweb').click();
setTimeout(popupstyle, 500); }
})
function popupstyle() {
var list, index;
list = document.getElementsByClassName("form-bottom");
for (index = 0; index < list.length; ++index) {
list[index].setAttribute('style', 'display:none');
}
var list, index;
list = document.getElementsByClassName("form-item");
for (index = 0; index < list.length; ++index) {
list[index].setAttribute('style', 'margin-bottom: 0');
}
var list, index;
list = document.getElementsByName("autoform_12");
for (index = 0; index < list.length; ++index) {
list[index].setAttribute('action', 'shoes/');
}
var list, index;
list = document.getElementsByClassName("modal__wrap");
for (index = 0; index < list.length; ++index) {
list[index].setAttribute('style', 'padding: 0');
}
};
}
setCookie("visited", "yes", 14, "/", "https://s4.laceandf.netbizpreview.co.uk"); // expire in 1 year; or use null to never expire
}
</script>
<div class="discountweb">
<button class="btn btn-default btn-sm" id="discountweb" data-modal-url="/_process/ajax_fetch_modal_content?type=discount" >
Discount Web
</button>
</div>
<style>
.discountmob {
display: none;
}
.discountweb {
display: none;
}
@media only screen and (max-width: 819px) {
.popup-img {
display: none !important;
}
.popup-main {
margin: 0 auto !important;
width: 100% !important;
}
.popup-main img {
margin: 0 auto;
}
.popup-main h3 {
margin-bottom: 0 !important;
}
}
form[name="autoform_10"] {
margin: 45px 40px;
}
</style>
NOTE Noticed if they visit the home page first it will store the path value as / and i will have no issues for the rest of the site. Same for if they visit example.com/shoes then visit example.com, they will see the popup on those 2 pages, but then the cookie path value is stored as / and wont display the popup on the rest of the site (which is exactly what i need)