Introducing v3.0.0 with a new JSON-format for the cookies

scify · Jan 30, 2025 · ba08c5f · ba08c5f
1 parent de10cc3
commit ba08c5f
Show file tree

Hide file tree

Showing 13 changed files with 246 additions and 148 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,89 @@ All notable changes to `laravel-cookies-consent` will be documented in this file
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## v3.0.0 - Major Release - JSON Cookie Storage & Configuration Changes - 2025-01-30
+
+### Breaking Changes
+
+* JSON Cookie Storage: Cookies are now stored in a JSON object under a single key with the prefix specified in the
+  configuration file. This change improves the structure and management of cookies.
+
+* Configuration File Changes: The configuration file format has been updated to reflect the new JSON cookie storage
+  method. The `cookie_prefix` is now used to store cookies in a JSON object.
+
+### Migration Guide
+
+1. Update the configuration file to reflect the new JSON cookie storage method:
+
+* Ensure the `cookie_prefix` is set in the `config/cookies_consent.php` file.
+* Update the `name` field of each cookie in the `cookies` array to reflect the new JSON storage format.
+
+Example:
+
+```php
+'cookie_prefix' => 'my_app_',
+'cookies' => [
+    'strictly_necessary' => [
+        [
+            'name' => 'my_app_cookies_consent',
+            '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.',
+            'duration' => '2 years',
+            'policy_external_link' => null,
+        ],
+        // other cookies...
+    ],
+    'targeting' => [
+        // cookies...
+    ],
+],
+```
+
+2. Update Blade Files
+
+* Update the Blade files to reflect the new JSON cookie storage method. The `cookie` helper function is used to set and
+  retrieve cookies from the JSON object.
+
+Example:
+
+```php
+@if(isset($_COOKIE[config('cookies_consent.cookie_prefix') . 'cookies_consent']))
+    @php
+        $cookiesConsent = json_decode($_COOKIE[config('cookies_consent.cookie_prefix') . 'cookies_consent'], true);
+    @endphp
+    @if(isset($cookiesConsent['targeting']) && $cookiesConsent['targeting'] && config('app.google_analytics_id'))
+        <!-- Google Analytics -->
+        <script defer async>
+            (function (i, s, o, g, r, a, m) {
+                i['GoogleAnalyticsObject'] = r;
+                i[r] = i[r] || function () {
+                    (i[r].q = i[r].q || []).push(arguments)
+                }, i[r].l = 1 * new Date();
+                a = s.createElement(o),
+                    m = s.getElementsByTagName(o)[0];
+                a.async = 1;
+                a.src = g;
+                m.parentNode.insertBefore(a, m)
+            })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
+
+            window.ga('create', '{{ config('app.google_analytics_id') }}', 'auto');
+            window.ga('set', 'anonymizeIp', true);
+            window.ga('send', 'pageview');
+        </script>
+    @endif
+@endif
+```
+
+3. Publish the front-end assets
+
+* Run the following command to publish the updated assets:
+`php artisan vendor:publish --provider="SciFY\LaravelCookiesConsent\LaravelCookiesConsentServiceProvider" --tag="
+cookies-consent-assets" --force`
+
+4. Test your application
+
+* Ensure that the cookies consent functionality works as expected with the new JSON storage format.
+* Verify that the cookies are correctly set and retrieved in the browser.
+
 ## v2.0.7 - UI Improvements for smaller screens - 2024-01-27
 
 - Improved the UI design for smaller screens (phones & tablets)
@@ -65,6 +148,7 @@ php artisan vendor:publish \
 --tag="cookies-consent-assets"
 
 ```
+
 ## v1.0.1 - Fixed bug on setting "all" cookies button - 2023-03-16
 
 This release addresses [this issue](https://github.com/scify/laravel-cookies-consent/issues/4), regarding the cookie

diff --git a/README.md b/README.md
@@ -224,31 +224,32 @@ For example, An application that wants to load the Google Analytics script only
 the `targeting` cookie category,
 might do the following:
 
-```bash
-google-analytics.blade.php
-
+```php
 <!-- Check the 'targeting' cookie: -->
-@if(isset($_COOKIE[config('cookies_consent.cookie_prefix') 
-. 'cookies_consent_targeting']) && config('app.google_analytics_id'))
-    
-    <!-- Google Analytics -->
-    <script defer async>
-        (function (i, s, o, g, r, a, m) {
-            i['GoogleAnalyticsObject'] = r;
-            i[r] = i[r] || function () {
-                (i[r].q = i[r].q || []).push(arguments)
-            }, i[r].l = 1 * new Date();
-            a = s.createElement(o),
-                m = s.getElementsByTagName(o)[0];
-            a.async = 1;
-            a.src = g;
-            m.parentNode.insertBefore(a, m)
-        })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
-
-        window.ga('create', '{{ config('app.google_analytics_id') }}', 'auto');
-        window.ga('set', 'anonymizeIp', true);
-        window.ga('send', 'pageview');
-    </script>
+@if(isset($_COOKIE[config('cookies_consent.cookie_prefix') . 'cookies_consent']))
+    @php
+        $cookiesConsent = json_decode($_COOKIE[config('cookies_consent.cookie_prefix') . 'cookies_consent'], true);
+    @endphp
+    @if(isset($cookiesConsent['targeting']) && $cookiesConsent['targeting'] && config('app.google_analytics_id'))
+        <!-- Google Analytics -->
+        <script defer async>
+            (function (i, s, o, g, r, a, m) {
+                i['GoogleAnalyticsObject'] = r;
+                i[r] = i[r] || function () {
+                    (i[r].q = i[r].q || []).push(arguments)
+                }, i[r].l = 1 * new Date();
+                a = s.createElement(o),
+                    m = s.getElementsByTagName(o)[0];
+                a.async = 1;
+                a.src = g;
+                m.parentNode.insertBefore(a, m)
+            })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
+
+            window.ga('create', '{{ config('app.google_analytics_id') }}', 'auto');
+            window.ga('set', 'anonymizeIp', true);
+            window.ga('send', 'pageview');
+        </script>
+    @endif
 @endif
 ```
 
@@ -324,7 +325,8 @@ Make sure that the `composer.json` file of the Laravel app has the following ent
                 "symlink": true
             }
         }
-    ]
+    ],
+"minimum-stability": "dev",
 ```
 
 This will tell composer that the code for the package is of the `"@dev"` version and that it exists in the specified

diff --git a/config/cookies_consent.php b/config/cookies_consent.php
@@ -5,11 +5,18 @@
      * This prefix will be applied when setting and getting all cookies.
      * If not set, the cookies will not be prefixed.
      * If set, a good strategy is to also add a trailing underscore "_", that will be added between the field value, and each cookie.
-     * For example, if `cookie_prefix` is set to `my_app_`, then the targeting cookie will have a value of `my_app_cookies_consent_targeting`.
-     * When using this plugin for multiple apps, it is a good strategy to set a prefix that is relevant to the app
-     * (for example "my_app_", in order for the cookies not to be mingled when running locally.
+     * For example, if `cookie_prefix` is set to `my_app_`, then the cookies will be stored in a JSON object with the key `my_app_cookies_consent_selection`.
+     * Example:
+     *
+     * {
+     *    "my_app_cookies_consent_selection": {
+     *       "strictly_necessary": true,
+     *      "performance": false,
+     *     "targeting": false
+     *   }
+     * }
      */
-    'cookie_prefix' => '',
+    'cookie_prefix' => 'my_app_',
     'display_floating_button' => true, // Set to false to display the footer link instead
     'use_separate_page' => false, // Set to true to use a separate page for cookies explanation
     /*
@@ -18,17 +25,15 @@
     |--------------------------------------------------------------------------
     |
     | Choose your preferred cookies to be shown. You can add more cookies as desired.
-    | If, for example you add another cookie with the name "marketing", then you should also
-    | 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"
     |
     */
     'cookies' => [
         'strictly_necessary' => [
             [
-                'name' => 'cookieConsent',
+                // you need to change this in order to reflect the cookie_prefix from above
+                'name' => 'my_app_cookies_consent',
                 '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.',
                 'duration' => '2 years',
                 'policy_external_link' => null,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "laravel-cookies-consent",
-  "version": "2.0.8",
+  "version": "3.0.0",
   "description": "<p align=\"center\"> <img src=\"logo.jpg\" alt=\"logo\" width=\"400\"> </p>",
   "main": "index.js",
   "directories": {

diff --git a/public/cookies-consent.css b/public/cookies-consent.css
diff --git a/public/cookies-consent.js b/public/cookies-consent.js
diff --git a/resources/js/cookies-consent.js b/resources/js/cookies-consent.js
@@ -3,13 +3,25 @@ import '../scss/cookies-consent.scss';
 document.addEventListener('DOMContentLoaded', function () {
 
     // Add event listeners to all accordion buttons to toggle the accordion content
-    document.querySelectorAll('.accordion-button').forEach(button => {
-        button.addEventListener('click', function () {
-            const target = document.querySelector(button.dataset.target);
-            if (target) {
-                target.classList.toggle('show');
-                button.classList.toggle('collapsed');
-            }
+    document.addEventListener('DOMContentLoaded', function () {
+        document.querySelectorAll('.accordion-button').forEach(button => {
+            button.addEventListener('click', function () {
+                const target = document.querySelector(button.dataset.target);
+
+                // Close all accordion items
+                document.querySelectorAll('.accordion-collapse').forEach(collapse => {
+                    collapse.classList.remove('show');
+                });
+                document.querySelectorAll('.accordion-button').forEach(btn => {
+                    btn.classList.add('collapsed');
+                });
+
+                // Open the clicked accordion item
+                if (target) {
+                    target.classList.toggle('show');
+                    button.classList.toggle('collapsed');
+                }
+            });
         });
     });
 
@@ -94,7 +106,9 @@ document.addEventListener('DOMContentLoaded', function () {
         }).then(response => response.json())
             .then(data => {
                 if (data.success) {
-                    setCookie('cookieConsent', JSON.stringify(consent), 30);
+                    // get the 'cookie_prefix' from config file
+                    const cookiePrefix = cookieBanner.dataset.cookiePrefix;
+                    setCookie(cookiePrefix + 'cookies_consent', JSON.stringify(consent), 30);
                     setSliders();
                     if (!onCookiesPage()) {
                         cookieBanner.style.display = 'none';