Skip to content

Commit

Permalink
- Enriched cookies separate page
Browse files Browse the repository at this point in the history 
- Updated the design of the cookies component
  • Loading branch information
@PavlosIsaris
PavlosIsaris committed Jul 29, 2024
1 parent 06d8784 commit 8c04be3
Show file tree
Hide file tree
Showing 4 changed files with 160 additions and 130 deletions.
31 changes: 19 additions & 12 deletions config/cookies_consent.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
*/
'cookie_prefix' => '',
'display_floating_button' => false, // Set to false to display the footer link instead
'use_separate_page' => false, // Set to true to use a separate page for cookies explanation
'use_separate_page' => true, // Set to true to use a separate page for cookies explanation
/*
|--------------------------------------------------------------------------
| Editor
Expand All @@ -22,30 +22,37 @@
| publish the translation files and add a "cookie_marketing" key in the translation file,
| since the plugin will try to display the cookie name by this convention.
|
| Built-in: "strictly_necessary", "performance", "targeting", "functionality"
| Built-in: "strictly_necessary"
|
*/
'cookies' => [
'strictly_necessary' => [
[
'name' => 'cookies_consent_selection',
'name' => 'cookieConsent',
'description' => 'This cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.',
'policy' => 'https://www.example.com/privacy-policy',
'duration' => '2 years',
'policy_external_link' => null,
],
[
'name' => 'XSRF-TOKEN',
'description' => 'This cookie is set by Laravel to prevent Cross-Site Request Forgery (CSRF) attacks.',
'duration' => '2 hours',
'policy_external_link' => null,
],
[
'name' => 'laravel_session',
'description' => 'This cookie is set by Laravel to identify a session instance for the user.',
'duration' => '2 hours',
'policy_external_link' => null,
],
],
'targeting',
'performance',
'functionality',
],
'enabled' => [
'strictly_necessary',
'targeting',
'performance',
'functionality',
],
'required' => ['strictly_necessary'],
/*
* Set the cookie duration in days. Default is 365 * 10.
* Set the cookie duration in days. Default is 365 days.
*/
'cookie_lifetime' => 365 * 10,
'cookie_lifetime' => 365,
];
27 changes: 18 additions & 9 deletions resources/scss/cookies-consent.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,21 +22,30 @@
margin: 0;
}

// Container
.container {
width: 100%;
padding-right: $gutter;
padding-left: $gutter;
margin-right: auto;
margin-left: auto;
}

// Row
.row {
display: flex;
flex-wrap: wrap;
margin-right: calc($gutter / -2);
margin-left: calc($gutter / -2);
align-items: center;
justify-content: center;
}

/* Define the col-6 class */
.col-6 {
width: 50%;
padding-right: 15px;
padding-left: 15px;
box-sizing: border-box;
}

/* Define the col class */
.col {
flex: 1;
padding-right: 15px;
padding-left: 15px;
box-sizing: border-box;
}

.g-0 {
Expand Down
157 changes: 54 additions & 103 deletions resources/views/components/_cookie-categories.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,107 +1,58 @@
@php
$alwaysOpen = $alwaysOpen ?? false;
$cookieCategories = config('cookies_consent.cookies');
@endphp

<div class="accordion" id="cookieAccordion">
<div class="accordion-item cookies-consent-category-item">
<h5 class="accordion-header h5" id="heading-necessary">
<button class="accordion-button" type="button" data-toggle="collapse"
data-target="#collapse-necessary" aria-expanded="false" aria-controls="collapse-necessary">
Necessary
</button>
</h5>
<div id="collapse-necessary" class="accordion-collapse collapse" aria-labelledby="heading-necessary"
data-parent="#cookieAccordion">
<div class="accordion-body">
<div class="form-check form-switch">
<input class="form-check-input cookie-category" type="checkbox" id="necessary" checked=""
disabled="">
<label class="form-check-label" for="necessary">
Necessary </label>
@foreach($cookieCategories as $category => $cookies)
<div class="accordion-item cookies-consent-category-item">
<h5 class="accordion-header h5" id="heading-{{ $category }}">
<button class="accordion-button" type="button" data-toggle="collapse"
data-target="#collapse-{{ $category }}" aria-expanded="{{ $alwaysOpen ? 'true' : 'false' }}"
aria-controls="collapse-{{ $category }}">
{{ ucfirst(str_replace('_', ' ', $category)) }}
</button>
</h5>
<div id="collapse-{{ $category }}" class="accordion-collapse collapse {{ $alwaysOpen ? 'show' : '' }}"
aria-labelledby="heading-{{ $category }}"
data-parent="#cookieAccordion">
<div class="accordion-body">
<div class="form-check form-switch">
<input class="form-check-input cookie-category" type="checkbox"
id="{{ $category }}" {{ in_array($category, config('cookies_consent.required')) ? 'checked disabled' : '' }}>
<label class="form-check-label" for="{{ $category }}">
{{ ucfirst(str_replace('_', ' ', $category)) }}
</label>
</div>
<ul class="list-group mt-3">
@foreach($cookies as $cookie)
<li class="list-group-item cookie-content-text small">
<dl>
<dt>
<strong>Cookie: </strong>
<code>{{ $cookie['name'] }}</code>
</dt>
<dd>
<strong>Description: </strong>
{{ $cookie['description'] }}
</dd>
<dd>
<strong>Duration: </strong>
{{ $cookie['duration'] }}
</dd>
@if($cookie['policy_external_link'])
<dd>
<strong>Policy link: </strong>
<a href="{{ $cookie['policy_external_link'] }}"
target="_blank">{{ $cookie['policy_external_link'] }}</a>
</dd>
@endif
</dl>
</li>
@endforeach
</ul>
</div>
<ul class="list-group mt-3">
<li class="list-group-item cookie-content-text small">
<dl>
<dt>
<strong>Cookie: </strong>
<code>wp_consent_necessary</code>
</dt>
<dd>
<strong>Duration: </strong>
1 month <br>
</dd>
<dd>
<strong>Description: </strong>
Stores your Cookie Consent Settings for Necessary Cookies.
</dd>
</dl>
</li>
<li class="list-group-item cookie-content-text small">
<dl>
<dt>
<strong>Cookie: </strong>
<code>wp_consent_statistics</code>
</dt>
<dd>
<strong>Duration: </strong>
1 month <br>
</dd>
<dd>
<strong>Description: </strong>
Stores your Cookie Consent Settings for Statistics Cookies.
</dd>
</dl>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item cookies-consent-category-item">
<h5 class="accordion-header h5" id="heading-statistics">
<button class="accordion-button" type="button" data-toggle="collapse"
data-target="#collapse-statistics" aria-expanded="false" aria-controls="collapse-statistics">
Analytics (optional)
</button>
</h5>
<div id="collapse-statistics" class="accordion-collapse collapse" aria-labelledby="heading-statistics"
data-parent="#cookieAccordion">
<div class="accordion-body">
<div class="form-check form-switch">
<input class="form-check-input cookie-category" type="checkbox" id="statistics">
<label class="form-check-label" for="statistics">
Analytics (optional) </label>
</div>
<ul class="list-group mt-3">
<li class="list-group-item cookie-content-text small">
<dl>
<dt>
<strong>Cookie: </strong>
<code>_ga</code>
</dt>
<dd>
<strong>Duration: </strong>
2 years <br>
</dd>
<dd>
<strong>Description: </strong>
Used to distinguish users for Google Analytics.
</dd>
</dl>
</li>
<li class="list-group-item cookie-content-text small">
<dl>
<dt>
<strong>Cookie: </strong>
<code>_gid</code>
</dt>
<dd>
<strong>Duration: </strong>
24 hours <br>
</dd>
<dd>
<strong>Description: </strong>
Used to distinguish users for Google Analytics.
</dd>
</dl>
</li>
</ul>
</div>
</div>
</div>
</div>
@endforeach
</div>
75 changes: 69 additions & 6 deletions resources/views/cookie-policy.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!-- resources/views/cookie-policy.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
Expand All @@ -6,18 +7,80 @@
<title>Cookie Policy</title>
<link href="{{ asset('vendor/cookies_consent/css/cookies-consent.css') }}" rel="stylesheet">
</head>
<body class="cookies-policy-body">
<body class="cookies-policy-body cookies-consent-banner">
<div class="container">
<div class="row">
<div class="col">
<div class="col-6">
<h1>Cookie Policy</h1>
<p>This is the cookie policy page. Here you can explain in detail what cookies are used and for what purposes.</p>
<section class="cookies-consent-banner" id="cookies-consent-banner" role="dialog" aria-labelledby="cookie-consent-title"
<p>This is the cookie policy page. Here you can read about the Cookies that are used in the application and
select which cookies to allow.</p>

<h2>What Are Cookies?</h2>

<p>
A cookie is a small text file that a website or app sends to a user's device. This text file collects
information about user actions on your site.

Cookies store helpful information to enhance users' experiences with your site, and possibly to improve
your ability to reconnect with them later.

Information collected by cookies can include the user's preferred language, device settings, browsing
activities and other useful information.

Websites like Google use cookies to make ads more relevant to their users. They also track analytics
such as counting the number of visitors to a page, locations of visitors, search preferences and so on.

Cookies are not harmful to your device. They are not viruses or malware. They are just text files that
can be deleted at any time.
</p>

<h2>Use of Cookies</h2>
<p>Cookies generally are used to perform one or all of the following:</p>

<ul>
<li><b>Authentication:</b> Cookies help websites determine if a user is logged in, and then deliver the
right
experience and features to that unique user.
</li>
<li><b>Security:</b> Cookies help impose security measures on a website. They also help detect unusual
and
suspicious activities.
</li>
<li><b>Advertising:</b> Cookies deliver a better advertising experience for both users and advertisers.
Cookies
help connect advertisers to users who are most interested in their products based on the user's
browsing history.
</li>
<li><b>Performance:</b> Cookies help your website learn how services work for different people and how
to route
traffic between servers.
</li>
<li><b>Analytics and Research:</b> Websites and apps use cookies to learn which of their services are
most
used. This helps determine what to improve, what to remove and what to leave the same.
</li>
Some cookies can gather data across several websites in order to create user behavior profiles. These
profiles are then used to send targeted content and advertisement to users.
</ul>
</div>
</div>
<div class="row">
<div class="col-6">
<h2>Cookies used in this application</h2>
<p>
The following cookies are used in this application. Please select which cookies you would like to allow.
</p>
</div>
</div>
<div class="row">
<div class="col">
<section class="cookies-consent-banner" id="cookies-consent-banner" role="dialog"
aria-labelledby="cookie-consent-title"
aria-describedby="cookie-consent-description"
data-ajax-url="{{ url('/cookie-consent') }}"
data-show-floating-button="false"
data-use-separate-page="true">
@include('cookies_consent::components._cookie-categories')
@include('cookies_consent::components._cookie-categories', ['alwaysOpen' => true])
<div class="cookie-actions">
<div class="container-fluid p-0">
<div class="row g-0">
Expand Down Expand Up @@ -48,4 +111,4 @@
</div>
<script type="module" src="{{ asset('vendor/cookies_consent/js/cookies-consent.js') }}"></script>
</body>
</html>
</html>

0 comments on commit 8c04be3

Please sign in to comment.