Skip to content

Commit d609269

Browse files
committed
Hook up cookie banner
The buttons on the cookie banner will now set a couple of cookies indicating that cookie preferences have been set and what the user's preference is regarding usage tracking The preference cookie "cookies_policy" follows the pattern of govuk_publishing_components: a stringified object. We only set the `usage` property on this object for now, but the approach provides some extensibility in case there's later a use for other preference-tracking properties like those included in govuk_publishing_components https://github.com/alphagov/govuk_publishing_components/blob/a35e0852f02f1fcfc1036ec2e254477e65b44e17/app/assets/javascripts/govuk_publishing_components/lib/cookie-functions.js#L7-L12 The cookie banner is now hidden by default and only shown if cookie preferences haven't been set (in addition to the required config being set, which is checked in the Ruby/ERB code)
1 parent 60034d5 commit d609269

File tree

3 files changed

+43
-3
lines changed

3 files changed

+43
-3
lines changed
Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
(function ($, Modules) {
2+
'use strict'
3+
4+
Modules.CookieBanner = function () {
5+
let $cookieBanner
6+
7+
this.start = function ($element) {
8+
$cookieBanner = $('.govuk-cookie-banner')
9+
10+
if ($cookieBanner && getCookie('cookies_preferences_set') !== 'true') {
11+
$('#cookie-banner__accept').on('click', acceptCookies)
12+
$('#cookie-banner__reject').on('click', rejectCookies)
13+
14+
$cookieBanner.removeAttr('hidden')
15+
}
16+
}
17+
18+
function acceptCookies () {
19+
document.cookie = 'cookies_preferences_set=true'
20+
document.cookie = 'cookies_policy={"usage":true}'
21+
22+
$cookieBanner.attr('hidden', 'hidden')
23+
}
24+
25+
function rejectCookies () {
26+
document.cookie = 'cookies_preferences_set=true'
27+
document.cookie = 'cookies_policy={"usage":false}'
28+
29+
$cookieBanner.attr('hidden', 'hidden')
30+
}
31+
32+
function getCookie (name) {
33+
return document.cookie
34+
.split('; ')
35+
.find(cookie => cookie.split('=')[0] === name)
36+
?.split('=')[1]
37+
}
38+
}
39+
})(jQuery, window.GOVUK.Modules)

lib/assets/javascripts/_start-modules.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
//= require _govuk/modules
22
//= require _modules/anchored-headings
3+
//= require _modules/cookie-banner
34
//= require _modules/in-page-navigation
45
//= require _modules/navigation
56
//= require _modules/page-expiry

lib/source/layouts/core.erb

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353

5454
<div class="app-pane">
5555
<% if config[:tech_docs][:ga4_gtm_tracking_id].is_a?(String) && !config[:tech_docs][:ga4_gtm_tracking_id].empty? %>
56-
<div class="govuk-cookie-banner" data-nosnippet role="region" aria-label="Cookies on <%= config[:tech_docs][:service_name] %>">
56+
<div class="govuk-cookie-banner" data-nosnippet role="region" aria-label="Cookies on <%= config[:tech_docs][:service_name] %>" hidden="hidden" data-module="cookie-banner">
5757
<div class="govuk-cookie-banner__message govuk-width-container">
5858
<div class="govuk-grid-row">
5959
<div class="govuk-grid-column-two-thirds">
@@ -66,10 +66,10 @@
6666
</div>
6767
</div>
6868
<div class="govuk-button-group">
69-
<button type="button" class="govuk-button" data-module="govuk-button">
69+
<button id="cookie-banner__accept" type="button" class="govuk-button" data-module="govuk-button">
7070
Accept analytics cookies
7171
</button>
72-
<button type="button" class="govuk-button" data-module="govuk-button">
72+
<button id="cookie-banner__reject" type="button" class="govuk-button" data-module="govuk-button">
7373
Reject analytics cookies
7474
</button>
7575
<a class="govuk-link" href="#">View cookies</a>

0 commit comments

Comments
 (0)