orestbida / cookieconsent

:cookie: Simple cross-browser cookie-consent plugin written in vanilla js

Home Page:https://playground.cookieconsent.orestbida.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Bug]: autoDetect with value 'document' is not working

jackdeguest opened this issue · comments

Expected Behavior

I would expect cookieconsent to take the language value from <html lang="ja-JP"> for example, as advertised, when the value of autoDetect is set to document

Current Behavior

I am using Firefox version 120.0.1 on a MacOS Ventura on a MacBook Pro M2.

When autoDetect is set to document, no cookies notification is displayed.

If I change the settings to browser, then the cookies notification is displayed, but in the browser language, not the user preferred language on the website.

Steps to reproduce

  1. Set your browser prime language to anything but English.
  2. Ensure the property autoDetect is set to document
  3. Create an HTML file, such as:
<!DOCTYPE html>
<html lang="en-GB">
    <head>
        <meta charset="utf-8" />
        <title>Cookies Consent</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v3.0.0-rc.17/dist/cookieconsent.css">
    </head>
    <body>
        <script type="module" src="cookieconsent-config.js"></script>
    </body>
</html>
  1. Load the page, of course using an http location.

Proposed fix or additional info.

No response

Version

v3.0.0-rc.17

On which browser do you see the issue?

Firefox

This works just fine on my end, can you post your configuration?

Sure, here it is below. Here the value is set to browser, because otherwise it would not work:

import 'https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v3.0.0-rc.17/dist/cookieconsent.umd.js';

CookieConsent.run({
    root: '#wrapper',
    cookie: {
        name: 'ai_gdpr',
        domain: ( window.DOMAIN_NAME || window.location.hostname ),
        path: '/',
        expiresAfterDays: function(acceptType)
        {
            return( acceptType === 'all' ? 400 : 182 );
        },
        sameSite: 'Lax',
    },
    onFirstConsent: function(cookie)
    {
        // todo
    },
    onConsent: function(cookie)
    {
    },
    onChange: function(cookie, changedCategories, changedPreferences)
    {
        // todo
    },
    onModalShow: function(modalName)
    {
    },
    onModalHide: function(modalName)
    {
        // todo
    },
    onModalReady: function(modalName, modal)
    {
        // todo
    },
    guiOptions: {
        consentModal: {
            layout: "cloud inline",
            position: "bottom right",
            equalWeightButtons: true,
            flipButtons: false
        },
        preferencesModal: {
            layout: "box",
            position: "right",
            equalWeightButtons: true,
            flipButtons: false
        }
    },
    categories: {
        necessary: {
            readOnly: true
        },
        functionality: {
            enabled: true,
            readOnly: false,
        },
        analytics: {
            enabled: true,
            readOnly: false,
            autoClear: {
                cookies: [
                    {
                        name: /^(_ga)/      // regex
                        // path: string
                        // domain: string
                    },
                    {
                        name: '_gid'        // string
                    }
                ]
            },
            services: {
                ga: {
                    label: 'Google Analytics',
                    onAccept: function()
                    {
                        // enable ga
                    },
                    onReject: function()
                    {
                        // disable ga
                    },
                    cookies: [
                        {
                            name: /^(_ga|_gid)/
                        }
                    ]
                },
            },
        },
        marketing: {
            enabled: true,
            readOnly: false,
        }
    },
    language: {
        default: "en",
        autoDetect: "browser",
        translations: {
            "en-GB": "/public/cookieconsent-en_GB.json",
            "fr-FR": "/public/cookieconsent-fr_FR.json",
            "ja-JP": "/public/cookieconsent-ja_JP.json",
        }
    }
});

Ok, I could pinpoint the root cause, which was a comma at the end of a line as last property of an hash in the JSON file. In the JavaScript configuration file, it is permissible, but not under JSON.

You can close it. Although I think it would be helpful if your software could log a warning or an error in the console if upon parsing the JSON data an error is caught.

You're right, it would be better to throw a visible error in the console since I also have encountered this issue.