Cookie bar not hiding when cookie set

[Noppy]

Hi,
we have a shop (https://www.mcsuk.org/shop) and currently the cookie bar does not want to stay hidden. If you press ‘got it’ it disappears but then you go to another page and it pops back up again. I think it used to work but not 100% sure as i didn’t implement it and i am now trying to fix it.

There is a cookie A3prompt that is set but the code does not seem to take this into account. Can you see anything obvious i am missing, i’m not very good with JS. (source - https://www.mcsuk.org/shop/catalog/view/javascript/cookiebar.js or as below)

(function e(t, n, r) { function s(o, u) { if (!n[o]) { if (!t[o]) { var a = typeof require == "function" && require; if (!u && a) return a(o, !0); if (i) return i(o, !0); var f = new Error("Cannot find module '" + o + "'"); 
throw f.code = "MODULE_NOT_FOUND", f } var l = n[o] = {exports: {}}; t[o][0].call(l.exports, function (e) { var n = t[o][1][e]; return s(n ? n : e) }, l, l.exports, e, t, n, r) } return n[o].exports } var i = typeof require == "function" && require; 
for (var o = 0; o < r.length; o++) s(r[o]); return s })({ 1: [function (require, module, exports) { function CookieBar() { "use strict"; var bOptIn; var bOptOut; var container; var xhr; 
var eventListenersSet = false; function initialise() { findContainer(); createXhr(); loadPanel() } function addEventListeners() { bOptIn.addEventListener("click", onOptIn); 
bOptOut.addEventListener("click", onOptOut); eventListenersSet = true } function removeEventListeners() { if (eventListenersSet) { bOptIn.removeEventListener("click", onOptIn); 
bOptOut.removeEventListener("click", onOptOut); eventListenersSet = false } } function findContainer() { container = document.querySelector("#a3prompt") } function findButtons() { bOptIn = document.querySelector("#cookie-opt-in"); 
bOptOut = document.querySelector("#cookie-opt-out") } function createXhr() { xhr = new XMLHttpRequest } function loadPanel() { xhr.onreadystatechange = function () { if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { container.innerHTML = xhr.responseText; 
findButtons(); addEventListeners(); window.setTimeout(showPanel, 2e3) } }; xhr.open("GET", "/ajax/cookies/prompt"); xhr.send() } function showPanel() { container.classList.remove("hide") } function hidePanel() { removeEventListeners(); 
container.classList.add("hide") } function onOptIn() { xhr.onreadystatechange = function () { }; xhr.open("GET", "/ajax/cookies/opt-in"); xhr.send(); hidePanel() } function onOptOut() { xhr.onreadystatechange = function () { }; 
xhr.open("GET", "/ajax/cookies/opt-out"); xhr.send(); hidePanel() } initialise() } module.exports = CookieBar }, {}], 2: [function (require, module, exports) { "use strict"; 
var CookieBar = require("./CookieBar"); document.addEventListener("DOMContentLoaded", function () { if (document.getElementById("a3prompt")) { CookieBar() } }) }, {"./CookieBar": 1}] }, {}, [2]);

any ideas?

many thanks.

p.s. I know the styling is awful on the cookie bar but i’ll sort that once this is working.

[m3g4p0p]

That code does not appear to check for any cookies… maybe the script is not supposed to be loaded at all when that cookie is set. Do you have a link to the documentation of that cookie bar?

[Noppy]

hmm that’s along the lines of what i was thinking but wanted to check. I wonder if it is done serverside then. I’ll have to delve into that and see what is happening. It’s a bit of a mess as it is tacked on the side of our website which has loads of things locked down. I’ve just spotted that if you load it without the www. it still works but according to the console a load of files are now disabled due to security reasons e.g.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.mcsuk.org/ajax/cookies/prompt. (Reason: CORS header 'Access-Control-Allow-Origin' missing).
which i don’t think is the cause of this problem but adds to the list. I did ask our developer for non-www to be redirected to www. ages ago but was told it didn’t matter?!

Thanks for checking though that’s really helpful as it narrows it down a bit.

[m3g4p0p]

Ah so this isn’t a 3rd party code? Well then you’d indeed have to check with your developer. At a 2nd look though the cookie bar also wouldn’t show if the #a3prompt container is not present on the page… but we’d have to see the backend code that renders that element to help you with that.

@Noppy

which i don’t think is the cause of this problem

No, that is just the contents of the prompt… actually you might as well add it to the markup from the start, but of course I don’t know the motivation for loading it via AJAX.