Cookies
About
What does it do?
- Allows users to accept or amend our website's cookie settings.
- Our cookie preferences should be confirmed before a user can use our website.
- The Manage cookies pattern allows users to change their cookie preferences.
Cookie banner
When to use it?
When a user first visits the West Midlands Network website and has not accepted or amended the cookie preferences.
The banner should be above the header on every page and only disappear when a user has accepted or amended their cookie preferences.
When not to use it?
- When a user has accepted or amended the website's cookies.
- When a returning user visits the West Midlands Network website and has already accepted or amended their cookies in a previous session.
How it works
- When a user has accepted or amended the website's cookies.
- When a returning user visits the West Midlands Network website and has already accepted or amended their cookies in a previous session.
The Cookies banner should be placed above the main header and be on every page
HTML markup
<div class="wmnds-bg-white wmnds-p-t-md wmnds-p-b-md wmnds-cookies-banner">
<div class="wmnds-container">
<div class="wmnds-col-1 wmnds-col-md-3-4 wmnds-col-lg-2-3">
<h3>Your privacy settings</h3>
<p>
We use cookies to help you with journey planning and relevant disruptions, remember your login and show you
content you might be interested in. If you’re happy with the use of cookies by West Midlands Combined Authority
and our selected partners, click ‘Accept all cookies’. Or click ‘Manage cookies’ to learn more.
</p>
<div class="wmnds-grid wmnds-grid--justify-between wmnds-cookies-banner__group-buttons">
<button class="wmnds-btn wmnds-col-1 wmnds-col-sm-1 wmnds-col-md-12-24 wmnds-cookies-banner__accept-all-cookies wmnds-text-align-center" type="button">
Accept all cookies
</button>
<a href="https://www.tfwm.org.uk/manage-cookies/" title="link title" target="_self" class="wmnds-btn wmnds-btn wmnds-col-1 wmnds-col-sm-1 wmnds-col-md-12-24 wmnds-text-align-center">
Manage Cookies
</a>
</div>
</div>
</div>
</div>
Nunjucks markup
{% from "wmnds/patterns/cookies/cookies-banner/_cookies-banner.njk" import wmndsCookiesBanner %}
{{
wmndsCookiesBanner()
}}Manage CookiesWhen to use it?
- Users can manage their cookies through the 'Manage cookies' button in the Cookie banner.
- The Manage cookies pattern is also accessible from the main Policies page, so users can amend their cookie preferences at any time.
HTML markup
<div class="wmnds-p-md wmnds-cookies-manager">
<div class="wmnds-container wmnds-col-1 wmnds-col-sm-1 wmnds-col-lg-3-4">
<h1 class="wmnds-p-t-lg wmnds-m-b-lg">Manage Cookies</h1>
<div class="wmnds-cookies-manager__success-message wmnds-m-b-md" style="display: none">
<div class="wmnds-msg-summary wmnds-msg-summary--success-fill ">
<div class="wmnds-msg-summary__header">
<svg class="wmnds-msg-summary__icon">
<use xlink:href="#wmnds-general-success" href="#wmnds-general-success"></use>
</svg>
<h3 class="wmnds-msg-summary__title">Your cookie settings were saved</h3>
</div>
<div class="wmnds-msg-summary__info">
<p>You can change these settings at any time by clicking the link in the page footer.</p>
<p class="wmnds-cookies-manager__previous-page">
<a class="wmnds-link wmnds-cookies-manager__previous-page" href="" style="color: white">Go back to the page you were looking at</a>
</p>
</div>
</div>
</div>
<form class="wmnds-cookies-manager__form" action="#">
<p class="wmnds-m-b-md">
Check your settings below and select the cookies you’re happy with.
</p>
<p>
These settings only apply to wmnetwork.co.uk
</p>
<div class="wmnds-cookies-manager__preferences wmnds-p-b-md wmnds-p-t-md">
<div class="wmnds-fe-group wmnds-m-none">
<div class="wmnds-fe-checkboxes">
<span class="wmnds-fe-checkboxes__desc">
</span>
<label class="wmnds-fe-checkboxes__container">
<div class="wmnds-m-b-lg">
<h3 class="wmnds-m-none wmnds-p-b-sm">Essential cookies</h3>Without these cookies our website won’t work properly. They help you to access secure areas like accounts and tools such as the journey planner.
</div>
<input id="essential-cookies" class="wmnds-fe-checkboxes__input" value="" name="essential-cookies" type="checkbox" checked="checked" disabled="disabled" />
<span class="wmnds-fe-checkboxes__checkmark">
<svg class="wmnds-fe-checkboxes__icon">
<use xlink:href="#wmnds-general-checkmark" href="#wmnds-general-checkmark"></use>
</svg>
</span>
</label>
<label class="wmnds-fe-checkboxes__container">
<div class="wmnds-m-b-lg">
<h3 class="wmnds-m-none wmnds-p-b-sm">Functional cookies</h3>These cookies help us to personalise our services to suit your needs, like saving your favourite transport services.
</div>
<input id="functional-cookies" class="wmnds-fe-checkboxes__input" value="" name="functional-cookies" type="checkbox" />
<span class="wmnds-fe-checkboxes__checkmark">
<svg class="wmnds-fe-checkboxes__icon">
<use xlink:href="#wmnds-general-checkmark" href="#wmnds-general-checkmark"></use>
</svg>
</span>
</label>
<label class="wmnds-fe-checkboxes__container">
<div class="wmnds-m-b-lg">
<h3 class="wmnds-m-none wmnds-p-b-sm">Performance cookies</h3>These cookies collect information about how you’re using our services, for instance popular pages or errors. We use this information to make decisions when improving our services. We do not use any information collected to identify you as an individual.
</div>
<input id="performance-cookies" class="wmnds-fe-checkboxes__input" value="" name="performance-cookies" type="checkbox" />
<span class="wmnds-fe-checkboxes__checkmark">
<svg class="wmnds-fe-checkboxes__icon">
<use xlink:href="#wmnds-general-checkmark" href="#wmnds-general-checkmark"></use>
</svg>
</span>
</label>
</div>
</div>
</div>
<div>
<button class="wmnds-btn" type="submit">
Save preferences
</button>
</div>
<div class="wmnds-m-t-lg">
<p>If you change your mind, <a href="https://www.tfwm.org.uk/policies/privacy-and-cookies-policy/">visit our Policies page</a> to change your cookie preferences.</p>
</div>
</form>
</div>
</div>
Nunjucks markup
{% from "wmnds/patterns/cookies/cookies-manager/_cookies-manager.njk" import wmndsCookiesManager %}
{{
wmndsCookiesManager({
showSuccessMessage: true
})
}}
Nunjucks properties
Name Type Description showSuccessMessage boolean If true, it will display a success message. Defaults to false.
Recommended javascript (browser compatible)
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var cookiesJS = function cookiesJS() {
var cookiesBanner = document.querySelector('header .wmnds-cookies-banner');
var hideCookieBanner = function hideCookieBanner() {
cookiesBanner.style.display = 'none';
};
var showCookieBanner = function showCookieBanner() {
cookiesBanner.style.display = 'block';
};
var setCookieDomain = function setCookieDomain() {
var url = window.location.host.split('.');
var urlLength = url.length;
return "".concat(url[urlLength - 3], ".").concat(url[urlLength - 2], ".").concat(url[urlLength - 1]);
};
// Set cookie based on name, value and expiry date supplied
var setCookie = function setCookie(cname, cvalue, exdays) {
var cookieDomain = setCookieDomain();
var d = new Date();
d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
var expires = "expires=".concat(d.toUTCString());
var domain = "domain=.".concat(cookieDomain);
document.cookie = "".concat(cname, "=").concat(cvalue, ";").concat(expires, ";").concat(domain, ";path=/");
};
// Get cookie based on name supplied
var getCookie = function getCookie(cname) {
var name = "".concat(cname, "=");
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i += 1) {
var c = ca[i];
while (c.charAt(0) === ' ') {
c = c.substring(1);
}
if (c.indexOf(name) === 0) {
return c.substring(name.length, c.length);
}
}
return '';
};
// Check if cookie(s) created or not
var checkCookie = function checkCookie(cname) {
var isCookieCreated = getCookie(cname);
if (isCookieCreated === '') {
return false;
}
return true;
};
var getCookiePolicy = function getCookiePolicy() {
return JSON.parse(getCookie('cookies-policy'));
};
var updateCookiePreferences = function updateCookiePreferences() {
if (document.querySelector('.wmnds-cookies-manager__preferences')) {
hideCookieBanner();
var cookiesOptions = document.querySelector('.wmnds-cookies-manager__preferences').querySelectorAll('.wmnds-fe-checkboxes__input');
var currentOptions = [getCookiePolicy().essential, getCookiePolicy().functional, getCookiePolicy().performance];
for (var i = 0; i < cookiesOptions.length; i += 1) {
cookiesOptions[i].checked = currentOptions[i];
}
}
};
var setCookiePolicy = function setCookiePolicy(essentialValue, functionalValue, performanceValue) {
var cookieValue = {
essential: essentialValue,
functional: functionalValue,
performance: performanceValue
};
setCookie('cookies-policy', JSON.stringify(cookieValue), 181);
updateCookiePreferences();
};
var acceptAllCookies = function acceptAllCookies() {
setCookiePolicy(true, true, true);
setCookie('cookies-preference', true, 181);
hideCookieBanner();
};
var updateAndShowSuccessMessage = function updateAndShowSuccessMessage() {
// searchs for the hidden message element
var message = document.querySelector('.wmnds-cookies-manager__success-message');
// if message exists, edit its button link and turn it visible
if (message) {
var link = message.querySelector('.wmnds-cookies-manager__previous-page a');
if (link) {
// if document referrer is empty (no reference of previous page) or if document referrer points to the cookies manager page then hide the button to go to previous page
if (document.referrer === '' || document.referrer === window.location.href) {
link.parentElement.style.display = 'none';
}
// else: change "go to previous page" button link using the document referrer information
// previous page is the page opened before user opened the cookies manager page
else {
link.href = document.referrer;
}
}
// display the success message (updated)
message.style.display = 'block';
}
};
var savePreferences = function savePreferences() {
if (document.querySelector('.wmnds-cookies-manager__form')) {
var elements = document.querySelector('.wmnds-cookies-manager__form').querySelectorAll('.wmnds-fe-checkboxes__input');
var selectedOptions = [];
for (var i = 0; i < elements.length; i += 1) {
selectedOptions[i] = elements.item(i).checked;
}
setCookiePolicy.apply(void 0, selectedOptions);
setCookie('cookies-preference', true, 181);
updateAndShowSuccessMessage();
}
};
var cookiesScan = function cookiesScan() {
// if cookies-preference doesn't exist, show cookie banner
if (!checkCookie('cookies-preference')) {
showCookieBanner();
setCookiePolicy(true, false, false);
}
// verify if we are at Cookies Manager page and update the selected options to match the already created cookie
updateCookiePreferences();
};
var isInIframe = window.frameElement && window.frameElement.nodeName === 'IFRAME'; // check if we are in an iframe
// Creation of default Cookies permissions when the DOM is fully loaded
if (!isInIframe) cookiesScan();
// When Accept all cookies button is triggered
var acceptAllCookiesBtn = document.querySelector('.wmnds-cookies-banner__accept-all-cookies');
if (!isInIframe) {
acceptAllCookiesBtn.addEventListener('click', acceptAllCookies);
acceptAllCookiesBtn.addEventListener('keydown', function(event) {
if (event.key === ' ' || event.key === 'Enter' || event.key === 'Spacebar') {
event.preventDefault();
acceptAllCookies();
}
});
}
// When Safe Preferences button is triggered
var cookieForm = document.querySelector('.wmnds-cookies-manager__form');
if (cookieForm) cookieForm.addEventListener('submit', savePreferences);
};
var _default = cookiesJS;
exports["default"] = _default;
Recommended javascript (ES6)
const cookiesJS = () => {
const cookiesBanner = document.querySelector('header .wmnds-cookies-banner');
const hideCookieBanner = () => {
cookiesBanner.style.display = 'none';
};
const showCookieBanner = () => {
cookiesBanner.style.display = 'block';
};
const setCookieDomain = () => {
const url = window.location.host.split('.');
const urlLength = url.length;
return `${url[urlLength - 3]}.${url[urlLength - 2]}.${url[urlLength - 1]}`;
};
// Set cookie based on name, value and expiry date supplied
const setCookie = (cname, cvalue, exdays) => {
const cookieDomain = setCookieDomain();
const d = new Date();
d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
const expires = `expires=${d.toUTCString()}`;
const domain = `domain=.${cookieDomain}`;
document.cookie = `${cname}=${cvalue};${expires};${domain};path=/`;
};
// Get cookie based on name supplied
const getCookie = cname => {
const name = `${cname}=`;
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i += 1) {
let c = ca[i];
while (c.charAt(0) === ' ') {
c = c.substring(1);
}
if (c.indexOf(name) === 0) {
return c.substring(name.length, c.length);
}
}
return '';
};
// Check if cookie(s) created or not
const checkCookie = cname => {
const isCookieCreated = getCookie(cname);
if (isCookieCreated === '') {
return false;
}
return true;
};
const getCookiePolicy = () => JSON.parse(getCookie('cookies-policy'));
const updateCookiePreferences = () => {
if (document.querySelector('.wmnds-cookies-manager__preferences')) {
hideCookieBanner();
const cookiesOptions = document
.querySelector('.wmnds-cookies-manager__preferences')
.querySelectorAll('.wmnds-fe-checkboxes__input');
const currentOptions = [
getCookiePolicy().essential,
getCookiePolicy().functional,
getCookiePolicy().performance
];
for (let i = 0; i < cookiesOptions.length; i += 1) {
cookiesOptions[i].checked = currentOptions[i];
}
}
};
const setCookiePolicy = (essentialValue, functionalValue, performanceValue) => {
const cookieValue = {
essential: essentialValue,
functional: functionalValue,
performance: performanceValue
};
setCookie('cookies-policy', JSON.stringify(cookieValue), 181);
updateCookiePreferences();
};
const acceptAllCookies = () => {
setCookiePolicy(true, true, true);
setCookie('cookies-preference', true, 181);
hideCookieBanner();
};
const updateAndShowSuccessMessage = () => {
// searchs for the hidden message element
const message = document.querySelector('.wmnds-cookies-manager__success-message');
// if message exists, edit its button link and turn it visible
if (message) {
const link = message.querySelector('.wmnds-cookies-manager__previous-page a');
if (link) {
// if document referrer is empty (no reference of previous page) or if document referrer points to the cookies manager page then hide the button to go to previous page
if (document.referrer === '' || document.referrer === window.location.href) {
link.parentElement.style.display = 'none';
}
// else: change "go to previous page" button link using the document referrer information
// previous page is the page opened before user opened the cookies manager page
else {
link.href = document.referrer;
}
}
// display the success message (updated)
message.style.display = 'block';
}
};
const savePreferences = () => {
if (document.querySelector('.wmnds-cookies-manager__form')) {
const elements = document
.querySelector('.wmnds-cookies-manager__form')
.querySelectorAll('.wmnds-fe-checkboxes__input');
const selectedOptions = [];
for (let i = 0; i < elements.length; i += 1) {
selectedOptions[i] = elements.item(i).checked;
}
setCookiePolicy(...selectedOptions);
setCookie('cookies-preference', true, 181);
updateAndShowSuccessMessage();
}
};
const cookiesScan = () => {
// if cookies-preference doesn't exist, show cookie banner
if (!checkCookie('cookies-preference')) {
showCookieBanner();
setCookiePolicy(true, false, false);
}
// verify if we are at Cookies Manager page and update the selected options to match the already created cookie
updateCookiePreferences();
};
const isInIframe = window.frameElement && window.frameElement.nodeName === 'IFRAME'; // check if we are in an iframe
// Creation of default Cookies permissions when the DOM is fully loaded
if (!isInIframe) cookiesScan();
// When Accept all cookies button is triggered
const acceptAllCookiesBtn = document.querySelector('.wmnds-cookies-banner__accept-all-cookies');
if (!isInIframe) {
acceptAllCookiesBtn.addEventListener('click', acceptAllCookies);
acceptAllCookiesBtn.addEventListener('keydown', event => {
if (event.key === ' ' || event.key === 'Enter' || event.key === 'Spacebar') {
event.preventDefault();
acceptAllCookies();
}
});
}
// When Safe Preferences button is triggered
const cookieForm = document.querySelector('.wmnds-cookies-manager__form');
if (cookieForm) cookieForm.addEventListener('submit', savePreferences);
};
export default cookiesJS;
Success Message
HTML markup
<div class="wmnds-p-md wmnds-cookies-manager">
<div class="wmnds-container wmnds-col-1 wmnds-col-sm-1 wmnds-col-lg-3-4">
<h1 class="wmnds-p-t-lg wmnds-m-b-lg">Manage Cookies</h1>
<div class="wmnds-cookies-manager__success-message wmnds-m-b-md" style="">
<div class="wmnds-msg-summary wmnds-msg-summary--success-fill ">
<div class="wmnds-msg-summary__header">
<svg class="wmnds-msg-summary__icon">
<use xlink:href="#wmnds-general-success" href="#wmnds-general-success"></use>
</svg>
<h3 class="wmnds-msg-summary__title">Your cookie settings were saved</h3>
</div>
<div class="wmnds-msg-summary__info">
<p>You can change these settings at any time by clicking the link in the page footer.</p>
<p class="wmnds-cookies-manager__previous-page">
<a class="wmnds-link wmnds-cookies-manager__previous-page" href="" style="color: white">Go back to the page you were looking at</a>
</p>
</div>
</div>
</div>
<form class="wmnds-cookies-manager__form" action="#">
<p class="wmnds-m-b-md">
Check your settings below and select the cookies you’re happy with.
</p>
<p>
These settings only apply to wmnetwork.co.uk
</p>
<div class="wmnds-cookies-manager__preferences wmnds-p-b-md wmnds-p-t-md">
<div class="wmnds-fe-group wmnds-m-none">
<div class="wmnds-fe-checkboxes">
<span class="wmnds-fe-checkboxes__desc">
</span>
<label class="wmnds-fe-checkboxes__container">
<div class="wmnds-m-b-lg">
<h3 class="wmnds-m-none wmnds-p-b-sm">Essential cookies</h3>Without these cookies our website won’t work properly. They help you to access secure areas like accounts and tools such as the journey planner.
</div>
<input id="essential-cookies" class="wmnds-fe-checkboxes__input" value="" name="essential-cookies" type="checkbox" checked="checked" disabled="disabled" />
<span class="wmnds-fe-checkboxes__checkmark">
<svg class="wmnds-fe-checkboxes__icon">
<use xlink:href="#wmnds-general-checkmark" href="#wmnds-general-checkmark"></use>
</svg>
</span>
</label>
<label class="wmnds-fe-checkboxes__container">
<div class="wmnds-m-b-lg">
<h3 class="wmnds-m-none wmnds-p-b-sm">Functional cookies</h3>These cookies help us to personalise our services to suit your needs, like saving your favourite transport services.
</div>
<input id="functional-cookies" class="wmnds-fe-checkboxes__input" value="" name="functional-cookies" type="checkbox" />
<span class="wmnds-fe-checkboxes__checkmark">
<svg class="wmnds-fe-checkboxes__icon">
<use xlink:href="#wmnds-general-checkmark" href="#wmnds-general-checkmark"></use>
</svg>
</span>
</label>
<label class="wmnds-fe-checkboxes__container">
<div class="wmnds-m-b-lg">
<h3 class="wmnds-m-none wmnds-p-b-sm">Performance cookies</h3>These cookies collect information about how you’re using our services, for instance popular pages or errors. We use this information to make decisions when improving our services. We do not use any information collected to identify you as an individual.
</div>
<input id="performance-cookies" class="wmnds-fe-checkboxes__input" value="" name="performance-cookies" type="checkbox" />
<span class="wmnds-fe-checkboxes__checkmark">
<svg class="wmnds-fe-checkboxes__icon">
<use xlink:href="#wmnds-general-checkmark" href="#wmnds-general-checkmark"></use>
</svg>
</span>
</label>
</div>
</div>
</div>
<div>
<button class="wmnds-btn" type="submit">
Save preferences
</button>
</div>
<div class="wmnds-m-t-lg">
<p>If you change your mind, <a href="https://www.tfwm.org.uk/policies/privacy-and-cookies-policy/">visit our Policies page</a> to change your cookie preferences.</p>
</div>
</form>
</div>
</div>
Nunjucks markup
{% from "wmnds/patterns/cookies/cookies-manager/_cookies-manager.njk" import wmndsCookiesManager %}
{{
wmndsCookiesManager({
showSuccessMessage: true
})
}}
Nunjucks properties
Name Type Description showSuccessMessage boolean If true, it will display a success message. Defaults to false.
HTML markup
<div class="wmnds-p-md wmnds-cookies-manager">
<div class="wmnds-container wmnds-col-1 wmnds-col-sm-1 wmnds-col-lg-3-4">
<h1 class="wmnds-p-t-lg wmnds-m-b-lg">Manage Cookies</h1>
<div class="wmnds-cookies-manager__success-message wmnds-m-b-md" style="display: none">
<div class="wmnds-msg-summary wmnds-msg-summary--success-fill ">
<div class="wmnds-msg-summary__header">
<svg class="wmnds-msg-summary__icon">
<use xlink:href="#wmnds-general-success" href="#wmnds-general-success"></use>
</svg>
<h3 class="wmnds-msg-summary__title">Your cookie settings were saved</h3>
</div>
<div class="wmnds-msg-summary__info">
<p>You can change these settings at any time by clicking the link in the page footer.</p>
<p class="wmnds-cookies-manager__previous-page">
<a class="wmnds-link wmnds-cookies-manager__previous-page" href="" style="color: white">Go back to the page you were looking at</a>
</p>
</div>
</div>
</div>
<form class="wmnds-cookies-manager__form" action="#">
<p class="wmnds-m-b-md">
Check your settings below and select the cookies you’re happy with.
</p>
<p>
These settings only apply to wmnetwork.co.uk
</p>
<div class="wmnds-cookies-manager__preferences wmnds-p-b-md wmnds-p-t-md">
<div class="wmnds-fe-group wmnds-m-none">
<div class="wmnds-fe-checkboxes">
<span class="wmnds-fe-checkboxes__desc">
</span>
<label class="wmnds-fe-checkboxes__container">
<div class="wmnds-m-b-lg">
<h3 class="wmnds-m-none wmnds-p-b-sm">Essential cookies</h3>Without these cookies our website won’t work properly. They help you to access secure areas like accounts and tools such as the journey planner.
</div>
<input id="essential-cookies" class="wmnds-fe-checkboxes__input" value="" name="essential-cookies" type="checkbox" checked="checked" disabled="disabled" />
<span class="wmnds-fe-checkboxes__checkmark">
<svg class="wmnds-fe-checkboxes__icon">
<use xlink:href="#wmnds-general-checkmark" href="#wmnds-general-checkmark"></use>
</svg>
</span>
</label>
<label class="wmnds-fe-checkboxes__container">
<div class="wmnds-m-b-lg">
<h3 class="wmnds-m-none wmnds-p-b-sm">Functional cookies</h3>These cookies help us to personalise our services to suit your needs, like saving your favourite transport services.
</div>
<input id="functional-cookies" class="wmnds-fe-checkboxes__input" value="" name="functional-cookies" type="checkbox" />
<span class="wmnds-fe-checkboxes__checkmark">
<svg class="wmnds-fe-checkboxes__icon">
<use xlink:href="#wmnds-general-checkmark" href="#wmnds-general-checkmark"></use>
</svg>
</span>
</label>
<label class="wmnds-fe-checkboxes__container">
<div class="wmnds-m-b-lg">
<h3 class="wmnds-m-none wmnds-p-b-sm">Performance cookies</h3>These cookies collect information about how you’re using our services, for instance popular pages or errors. We use this information to make decisions when improving our services. We do not use any information collected to identify you as an individual.
</div>
<input id="performance-cookies" class="wmnds-fe-checkboxes__input" value="" name="performance-cookies" type="checkbox" />
<span class="wmnds-fe-checkboxes__checkmark">
<svg class="wmnds-fe-checkboxes__icon">
<use xlink:href="#wmnds-general-checkmark" href="#wmnds-general-checkmark"></use>
</svg>
</span>
</label>
</div>
</div>
</div>
<div>
<button class="wmnds-btn" type="submit">
Save preferences
</button>
</div>
<div class="wmnds-m-t-lg">
<p>If you change your mind, <a href="https://www.tfwm.org.uk/policies/privacy-and-cookies-policy/">visit our Policies page</a> to change your cookie preferences.</p>
</div>
</form>
</div>
</div>
Nunjucks markup
{% from "wmnds/patterns/cookies/cookies-manager/_cookies-manager.njk" import wmndsCookiesManager %}
{{
wmndsCookiesManager({
showSuccessMessage: true
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| showSuccessMessage | boolean | If true, it will display a success message. Defaults to false. |
Recommended javascript (browser compatible)
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var cookiesJS = function cookiesJS() {
var cookiesBanner = document.querySelector('header .wmnds-cookies-banner');
var hideCookieBanner = function hideCookieBanner() {
cookiesBanner.style.display = 'none';
};
var showCookieBanner = function showCookieBanner() {
cookiesBanner.style.display = 'block';
};
var setCookieDomain = function setCookieDomain() {
var url = window.location.host.split('.');
var urlLength = url.length;
return "".concat(url[urlLength - 3], ".").concat(url[urlLength - 2], ".").concat(url[urlLength - 1]);
};
// Set cookie based on name, value and expiry date supplied
var setCookie = function setCookie(cname, cvalue, exdays) {
var cookieDomain = setCookieDomain();
var d = new Date();
d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
var expires = "expires=".concat(d.toUTCString());
var domain = "domain=.".concat(cookieDomain);
document.cookie = "".concat(cname, "=").concat(cvalue, ";").concat(expires, ";").concat(domain, ";path=/");
};
// Get cookie based on name supplied
var getCookie = function getCookie(cname) {
var name = "".concat(cname, "=");
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i += 1) {
var c = ca[i];
while (c.charAt(0) === ' ') {
c = c.substring(1);
}
if (c.indexOf(name) === 0) {
return c.substring(name.length, c.length);
}
}
return '';
};
// Check if cookie(s) created or not
var checkCookie = function checkCookie(cname) {
var isCookieCreated = getCookie(cname);
if (isCookieCreated === '') {
return false;
}
return true;
};
var getCookiePolicy = function getCookiePolicy() {
return JSON.parse(getCookie('cookies-policy'));
};
var updateCookiePreferences = function updateCookiePreferences() {
if (document.querySelector('.wmnds-cookies-manager__preferences')) {
hideCookieBanner();
var cookiesOptions = document.querySelector('.wmnds-cookies-manager__preferences').querySelectorAll('.wmnds-fe-checkboxes__input');
var currentOptions = [getCookiePolicy().essential, getCookiePolicy().functional, getCookiePolicy().performance];
for (var i = 0; i < cookiesOptions.length; i += 1) {
cookiesOptions[i].checked = currentOptions[i];
}
}
};
var setCookiePolicy = function setCookiePolicy(essentialValue, functionalValue, performanceValue) {
var cookieValue = {
essential: essentialValue,
functional: functionalValue,
performance: performanceValue
};
setCookie('cookies-policy', JSON.stringify(cookieValue), 181);
updateCookiePreferences();
};
var acceptAllCookies = function acceptAllCookies() {
setCookiePolicy(true, true, true);
setCookie('cookies-preference', true, 181);
hideCookieBanner();
};
var updateAndShowSuccessMessage = function updateAndShowSuccessMessage() {
// searchs for the hidden message element
var message = document.querySelector('.wmnds-cookies-manager__success-message');
// if message exists, edit its button link and turn it visible
if (message) {
var link = message.querySelector('.wmnds-cookies-manager__previous-page a');
if (link) {
// if document referrer is empty (no reference of previous page) or if document referrer points to the cookies manager page then hide the button to go to previous page
if (document.referrer === '' || document.referrer === window.location.href) {
link.parentElement.style.display = 'none';
}
// else: change "go to previous page" button link using the document referrer information
// previous page is the page opened before user opened the cookies manager page
else {
link.href = document.referrer;
}
}
// display the success message (updated)
message.style.display = 'block';
}
};
var savePreferences = function savePreferences() {
if (document.querySelector('.wmnds-cookies-manager__form')) {
var elements = document.querySelector('.wmnds-cookies-manager__form').querySelectorAll('.wmnds-fe-checkboxes__input');
var selectedOptions = [];
for (var i = 0; i < elements.length; i += 1) {
selectedOptions[i] = elements.item(i).checked;
}
setCookiePolicy.apply(void 0, selectedOptions);
setCookie('cookies-preference', true, 181);
updateAndShowSuccessMessage();
}
};
var cookiesScan = function cookiesScan() {
// if cookies-preference doesn't exist, show cookie banner
if (!checkCookie('cookies-preference')) {
showCookieBanner();
setCookiePolicy(true, false, false);
}
// verify if we are at Cookies Manager page and update the selected options to match the already created cookie
updateCookiePreferences();
};
var isInIframe = window.frameElement && window.frameElement.nodeName === 'IFRAME'; // check if we are in an iframe
// Creation of default Cookies permissions when the DOM is fully loaded
if (!isInIframe) cookiesScan();
// When Accept all cookies button is triggered
var acceptAllCookiesBtn = document.querySelector('.wmnds-cookies-banner__accept-all-cookies');
if (!isInIframe) {
acceptAllCookiesBtn.addEventListener('click', acceptAllCookies);
acceptAllCookiesBtn.addEventListener('keydown', function(event) {
if (event.key === ' ' || event.key === 'Enter' || event.key === 'Spacebar') {
event.preventDefault();
acceptAllCookies();
}
});
}
// When Safe Preferences button is triggered
var cookieForm = document.querySelector('.wmnds-cookies-manager__form');
if (cookieForm) cookieForm.addEventListener('submit', savePreferences);
};
var _default = cookiesJS;
exports["default"] = _default;
Recommended javascript (ES6)
const cookiesJS = () => {
const cookiesBanner = document.querySelector('header .wmnds-cookies-banner');
const hideCookieBanner = () => {
cookiesBanner.style.display = 'none';
};
const showCookieBanner = () => {
cookiesBanner.style.display = 'block';
};
const setCookieDomain = () => {
const url = window.location.host.split('.');
const urlLength = url.length;
return `${url[urlLength - 3]}.${url[urlLength - 2]}.${url[urlLength - 1]}`;
};
// Set cookie based on name, value and expiry date supplied
const setCookie = (cname, cvalue, exdays) => {
const cookieDomain = setCookieDomain();
const d = new Date();
d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
const expires = `expires=${d.toUTCString()}`;
const domain = `domain=.${cookieDomain}`;
document.cookie = `${cname}=${cvalue};${expires};${domain};path=/`;
};
// Get cookie based on name supplied
const getCookie = cname => {
const name = `${cname}=`;
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i += 1) {
let c = ca[i];
while (c.charAt(0) === ' ') {
c = c.substring(1);
}
if (c.indexOf(name) === 0) {
return c.substring(name.length, c.length);
}
}
return '';
};
// Check if cookie(s) created or not
const checkCookie = cname => {
const isCookieCreated = getCookie(cname);
if (isCookieCreated === '') {
return false;
}
return true;
};
const getCookiePolicy = () => JSON.parse(getCookie('cookies-policy'));
const updateCookiePreferences = () => {
if (document.querySelector('.wmnds-cookies-manager__preferences')) {
hideCookieBanner();
const cookiesOptions = document
.querySelector('.wmnds-cookies-manager__preferences')
.querySelectorAll('.wmnds-fe-checkboxes__input');
const currentOptions = [
getCookiePolicy().essential,
getCookiePolicy().functional,
getCookiePolicy().performance
];
for (let i = 0; i < cookiesOptions.length; i += 1) {
cookiesOptions[i].checked = currentOptions[i];
}
}
};
const setCookiePolicy = (essentialValue, functionalValue, performanceValue) => {
const cookieValue = {
essential: essentialValue,
functional: functionalValue,
performance: performanceValue
};
setCookie('cookies-policy', JSON.stringify(cookieValue), 181);
updateCookiePreferences();
};
const acceptAllCookies = () => {
setCookiePolicy(true, true, true);
setCookie('cookies-preference', true, 181);
hideCookieBanner();
};
const updateAndShowSuccessMessage = () => {
// searchs for the hidden message element
const message = document.querySelector('.wmnds-cookies-manager__success-message');
// if message exists, edit its button link and turn it visible
if (message) {
const link = message.querySelector('.wmnds-cookies-manager__previous-page a');
if (link) {
// if document referrer is empty (no reference of previous page) or if document referrer points to the cookies manager page then hide the button to go to previous page
if (document.referrer === '' || document.referrer === window.location.href) {
link.parentElement.style.display = 'none';
}
// else: change "go to previous page" button link using the document referrer information
// previous page is the page opened before user opened the cookies manager page
else {
link.href = document.referrer;
}
}
// display the success message (updated)
message.style.display = 'block';
}
};
const savePreferences = () => {
if (document.querySelector('.wmnds-cookies-manager__form')) {
const elements = document
.querySelector('.wmnds-cookies-manager__form')
.querySelectorAll('.wmnds-fe-checkboxes__input');
const selectedOptions = [];
for (let i = 0; i < elements.length; i += 1) {
selectedOptions[i] = elements.item(i).checked;
}
setCookiePolicy(...selectedOptions);
setCookie('cookies-preference', true, 181);
updateAndShowSuccessMessage();
}
};
const cookiesScan = () => {
// if cookies-preference doesn't exist, show cookie banner
if (!checkCookie('cookies-preference')) {
showCookieBanner();
setCookiePolicy(true, false, false);
}
// verify if we are at Cookies Manager page and update the selected options to match the already created cookie
updateCookiePreferences();
};
const isInIframe = window.frameElement && window.frameElement.nodeName === 'IFRAME'; // check if we are in an iframe
// Creation of default Cookies permissions when the DOM is fully loaded
if (!isInIframe) cookiesScan();
// When Accept all cookies button is triggered
const acceptAllCookiesBtn = document.querySelector('.wmnds-cookies-banner__accept-all-cookies');
if (!isInIframe) {
acceptAllCookiesBtn.addEventListener('click', acceptAllCookies);
acceptAllCookiesBtn.addEventListener('keydown', event => {
if (event.key === ' ' || event.key === 'Enter' || event.key === 'Spacebar') {
event.preventDefault();
acceptAllCookies();
}
});
}
// When Safe Preferences button is triggered
const cookieForm = document.querySelector('.wmnds-cookies-manager__form');
if (cookieForm) cookieForm.addEventListener('submit', savePreferences);
};
export default cookiesJS;
HTML markup
<div class="wmnds-p-md wmnds-cookies-manager">
<div class="wmnds-container wmnds-col-1 wmnds-col-sm-1 wmnds-col-lg-3-4">
<h1 class="wmnds-p-t-lg wmnds-m-b-lg">Manage Cookies</h1>
<div class="wmnds-cookies-manager__success-message wmnds-m-b-md" style="">
<div class="wmnds-msg-summary wmnds-msg-summary--success-fill ">
<div class="wmnds-msg-summary__header">
<svg class="wmnds-msg-summary__icon">
<use xlink:href="#wmnds-general-success" href="#wmnds-general-success"></use>
</svg>
<h3 class="wmnds-msg-summary__title">Your cookie settings were saved</h3>
</div>
<div class="wmnds-msg-summary__info">
<p>You can change these settings at any time by clicking the link in the page footer.</p>
<p class="wmnds-cookies-manager__previous-page">
<a class="wmnds-link wmnds-cookies-manager__previous-page" href="" style="color: white">Go back to the page you were looking at</a>
</p>
</div>
</div>
</div>
<form class="wmnds-cookies-manager__form" action="#">
<p class="wmnds-m-b-md">
Check your settings below and select the cookies you’re happy with.
</p>
<p>
These settings only apply to wmnetwork.co.uk
</p>
<div class="wmnds-cookies-manager__preferences wmnds-p-b-md wmnds-p-t-md">
<div class="wmnds-fe-group wmnds-m-none">
<div class="wmnds-fe-checkboxes">
<span class="wmnds-fe-checkboxes__desc">
</span>
<label class="wmnds-fe-checkboxes__container">
<div class="wmnds-m-b-lg">
<h3 class="wmnds-m-none wmnds-p-b-sm">Essential cookies</h3>Without these cookies our website won’t work properly. They help you to access secure areas like accounts and tools such as the journey planner.
</div>
<input id="essential-cookies" class="wmnds-fe-checkboxes__input" value="" name="essential-cookies" type="checkbox" checked="checked" disabled="disabled" />
<span class="wmnds-fe-checkboxes__checkmark">
<svg class="wmnds-fe-checkboxes__icon">
<use xlink:href="#wmnds-general-checkmark" href="#wmnds-general-checkmark"></use>
</svg>
</span>
</label>
<label class="wmnds-fe-checkboxes__container">
<div class="wmnds-m-b-lg">
<h3 class="wmnds-m-none wmnds-p-b-sm">Functional cookies</h3>These cookies help us to personalise our services to suit your needs, like saving your favourite transport services.
</div>
<input id="functional-cookies" class="wmnds-fe-checkboxes__input" value="" name="functional-cookies" type="checkbox" />
<span class="wmnds-fe-checkboxes__checkmark">
<svg class="wmnds-fe-checkboxes__icon">
<use xlink:href="#wmnds-general-checkmark" href="#wmnds-general-checkmark"></use>
</svg>
</span>
</label>
<label class="wmnds-fe-checkboxes__container">
<div class="wmnds-m-b-lg">
<h3 class="wmnds-m-none wmnds-p-b-sm">Performance cookies</h3>These cookies collect information about how you’re using our services, for instance popular pages or errors. We use this information to make decisions when improving our services. We do not use any information collected to identify you as an individual.
</div>
<input id="performance-cookies" class="wmnds-fe-checkboxes__input" value="" name="performance-cookies" type="checkbox" />
<span class="wmnds-fe-checkboxes__checkmark">
<svg class="wmnds-fe-checkboxes__icon">
<use xlink:href="#wmnds-general-checkmark" href="#wmnds-general-checkmark"></use>
</svg>
</span>
</label>
</div>
</div>
</div>
<div>
<button class="wmnds-btn" type="submit">
Save preferences
</button>
</div>
<div class="wmnds-m-t-lg">
<p>If you change your mind, <a href="https://www.tfwm.org.uk/policies/privacy-and-cookies-policy/">visit our Policies page</a> to change your cookie preferences.</p>
</div>
</form>
</div>
</div>
Nunjucks markup
{% from "wmnds/patterns/cookies/cookies-manager/_cookies-manager.njk" import wmndsCookiesManager %}
{{
wmndsCookiesManager({
showSuccessMessage: true
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| showSuccessMessage | boolean | If true, it will display a success message. Defaults to false. |