dp_cookieconsent v1.0.0

DP Cookie Consent

This Plugin includes the most popular solution to the EU Cookie law JavaScript Plugin Cookie Consent. I extended it with Script and iFrame helper, so it works with the ePrivacy law.

Though don't care about the latest EU laws and handle you Cookies with this Plugins.

Config

window.cookieconsent_options.

types

the screenshots are basesd one the window.cookieconsent_options.layout = dpextend

info	opt-out	opt-in

Features

load scripts after accepting

load script sources If you want to load JavaScript resources after the Cookie is accepted you can use this snipped

<script data-cookieconsent="statistics" type="text/plain" data-src="{YOUR_LINK_TO_JS}"></script>

load inline script If you want to load Inline JavaScript after the Cookie is accepted use this snipped.

<script data-cookieconsent="statistics" type="text/plain">
{YOUT_DYN_JS_CODE}
</script>

Checkboxe mode

You can extend the default cookie message with checkboxes, by activiating the layout in the TYPO3 constants window.cookieconsent_options.layout = dpextend. Now your customer can choose what types of scripts/cookies he want to allow.

This 3 types are possible and handled by the consent:

load iframe after accepting

If you want to load iFrame's (YouTube, GMap, ..) after the Cookie is accepted you can use this snipped

<iframe width="560" height="315" 
    data-cookieconsent="statistics" 
    data-src="https://www.youtube-nocookie.com/embed/XXXXXX?autoplay=1" 
    class="dp--iframe"
    frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreenn >
</iframe>

With the class="dp--iframe" the iFrame is hidden in default and would be shown after the cookie acceptioning.

iframe overlay

if you want to add an overlay to accept Cookies outside from the cookie hint you can enable this feature in the TYPO3-constants window.cookieconsent_options.overlay.notice = true

you also can modify the text in this hint individuel per iframe

<iframe
    data-cookieconsent="statistics" 
    data-src="https://www.youtube-nocookie.com/embed/XXXXXX?autoplay=1" 
    class="dp--iframe"

    data-cookieconsent-notice="Cookie Notice"
    data-cookieconsent-description="Loading this...."
    data-cookieconsent-btn="allow cookies and load this ...."
>
</iframe>

build your own overlay

or accept/deny cookies outside of the cookie hin, you can use the followed example

<button 
    onclick="window.DPCookieConsent.forceAccept(this)" 
    data-cookieconsent="statistics" 
>allow cookies and play video</button>

allow cookies window.DPCookieConsent.forceAccept(this)

deny cookies window.DPCookieConsent.forceDeny(this)

Events

document.addEventListener('dp--cookie-fire', function (e) {
    console.log('dp--cookie-fire', e.detail.$el);
});
document.addEventListener('dp--cookie-accept', function (e) {
    console.log('dp--cookie-accept', e);
});
document.addEventListener('dp--cookie-deny', function (e) {
    console.log('dp--cookie-deny', e);
});
document.addEventListener('dp--cookie-revoke', function (e) {
    console.log('dp--cookie-deny', e);
});

Custom Design

<script type="text/plain" data-dp-cookiedesc="layout">
    {{message}}
    <a aria-label="learn more about cookies"
       role=button tabindex="0"
       class="cc-link"
       href="{{href}}"
       rel="noopener noreferrer nofollow"
       target="{{target}}"
    >
        {{link}}
    </a>
</script>

<script type="text/plain" data-dp-cookieselect="layout">
    <div class="dp--cookie-check" xmlns:f="http://www.w3.org/1999/html">
        <label for="dp--cookie-require">
            <input type="checkbox" id="dp--cookie-require" class="dp--check-box" checked="checked" disabled="disabled" />
            {{dpRequire}}
        </label>
        <label for="dp--cookie-statistics">
            <input type="checkbox" id="dp--cookie-statistics" class="dp--check-box" {{checked.statistics}} value="" />
            {{dpStatistik}}
        </label>
        <label for="dp--cookie-marketing">
            <input type="checkbox" id="dp--cookie-marketing" class="dp--check-box" {{checked.marketing}} value="" />
            {{dpMarketing}}
        </label>
    </div>
</script>

<script type="text/plain" data-dp-cookierevoke="layout">
    <div class="cc-revoke dp--revoke {{classes}}">
        <i class="dp--icon-fingerprint"></i>
        <span class="dp--sr-only">{{policy}}</span>
    </div>
</script>

Dynamic Checkboxes

With this feature you can add or modify the checkbox types by configuration. All you have to do is setting your new checkbox in TS and add it to the partial template:

<script type="text/plain" data-dp-cookieselect="layout">
    ...
        <label for="dp--cookie-statistics">
            <input type="checkbox" id="dp--cookie-thirdparty" class="dp--check-box" {{checked.thirdparty}} value="" />
            TEXT
        </label>
     ...
</script>

window.cookieconsent_options.checkboxes = {
    statistics = true
    marketing = false
    thirdparty = false
}

Please give me feedback

I would appreciate any kind of feedback or ideas for further developments to keep improving the extension for your needs.

Say thanks! and support me

You like this extension? Get something for me (surprise!) from my wishlist on Amazon or the next pizza. Thanks a lot!

Contact us

• E-Mail
• GitHub
• Homepage
• TYPO3 PlugIn