Analytics checkbox selected by default

[FalcoFr]

Hey there, i have a question about the cookie bar. I chose the opt-in variant and it all works.

I want the checkbox by default to be selected. So if you just click on Accept button the cookies for Google Analytics are set. I wrote the following code in the cookiebar template: <input type = "checkbox" class = "cookiebar__analytics-checkbox" checked value = "" data-cookiebar-analytics> <span class = "cookiebar__analytics-text"> <? = $ this-> analyticsCheckbox ['label']?> </span> I used the "checked" attribute to preselect the button. Unfortunately, he still does not set the cookies. Do you have any ideas?

[qzminski]

What cookies do you actually expect? The cookiebar itself does not use cookies but stores its data in localStorage in order to not break your website caching.

[FalcoFr]

Basically again: Google Analytics cookies are only set if you have selected the checkbox field and then clicked Accept. It works wonderfully.

But I want the checkbox to be preselected so that the user of the website only has to click "Accept" and the cookies are set. I tried that as written above with the attribute "checked". But unfortunately it doesn't work.

I hope I could now describe my problem a little better

[qzminski]

Ah, you meant the analytics cookies. If you followed the guide in the docs, then they should be set after you reload the page – can you confirm this behavior?

[FalcoFr]

Yes, everything works without my adjustment.

But it is not recognized by the cookie bar that the checkbox is already selected with my attribute "Checked" which I have inserted into the template.

As in the picture, the check is already set. But he doesn't recognize this when i click "Accept"

[qzminski]

Can you post a complete source code of your modified cookiebar template? The code you have added looks strange as it contains some unnecessary spaces…

[FalcoFr]

Here is the code:

<?php

if ($this->includeCss) {
    $GLOBALS['TL_CSS'][] = 'system/modules/cookiebar/assets/dist/cookiebar.min.css|all' . ($this->combineAssets ? '|static' : '');
}

if ($this->combineAssets) {
    $GLOBALS['TL_JAVASCRIPT'][] = 'system/modules/cookiebar/assets/dist/cookiebar.min.js|static';
}
?>

<!-- indexer::stop -->
<div class="cookiebar cookiebar--position-<?= $this->position ?>" role="complementary" aria-describedby="cookiebar-text" style="display:none;" data-cookiebar="<?= $this->cookie ?>"<?php if ($this->ttl): ?> data-cookiebar-ttl="<?= $this->ttl ?>"<?php endif; ?>>
    <div id="cookiebar-text" class="cookiebar__text" aria-live="assertive" role="alert">
        <span class="cookiebar__message"><?= $this->message ?></span>

        <?php if ($this->more): ?>
            <a href="<?= $this->more['url'] ?>" class="cookiebar__link" title="<?= specialchars($this->more['label']) ?>"><?= $this->more['label'] ?></a>
        <?php endif ?>
    </div>

    <?php if ($this->analyticsCheckbox): ?>
        <div class="cookiebar__analytics">
            <label class="cookiebar__analytics-label">
                <input type="checkbox" class="cookiebar__analytics-checkbox" checked value="" data-cookiebar-analytics> <span class="cookiebar__analytics-text" ><?= $this->analyticsCheckbox['label'] ?></span>
            </label>
        </div>
    <?php endif; ?>

    <button class="cookiebar__button" data-cookiebar-accept><?= $this->button ?></button>
</div>

<?php if (!$this->combineAssets): ?>
    <script src="system/modules/cookiebar/assets/dist/cookiebar.min.js" defer></script>
<?php endif; ?>
<!-- indexer::continue -->

I only added the "checked" value in the input type="checkbox".... But it wont work..

[qzminski]

I forgot that the checkbox updates the localStorage immediately on change event and without waiting for the button click. Try to put the below code in your custom cookiebar template:

<script>
    document.addEventListener('DOMContentLoaded', function () {
        if (!window.localStorage.getItem('<?= $this->cookie ?>') || window.localStorage.getItem('<?= $this->cookie ?>') <= Math.round(Date.now() / 1000)) {
            document.querySelector('[data-cookiebar-analytics]').checked = true;
            window.localStorage.setItem('COOKIEBAR_ANALYTICS', 1);
        }
    });
</script>

[qzminski]

You know what, I will release a new hotfix version in a few minutes that should fix this automatically, so your code will work without that ugly JS.

[qzminski]

This bug should be fixed in 2.3.1 and your code should work now :+1: