Cookie blocker not working in pop-ups

Hello @jecat01,

Was the pop-up created using a plugin? If so, what plugin did you use to create it?

Kind regards,
Jarno

Hello @jarnovos,

I used the theme Impreza and its built-in WPBakery popup element:
https://themeforest.net/item/impreza-retina-responsive-wordpress-theme/6434280

It’s reproducible on a clean and minimalistic install:
https://impreza-gmpwx01.themetest.net/
(I quickly created this via a time-limited test drive on themetest.net)

Is it up to the Theme creators then?

Thanks,
Johannes

Partially, it is a css issue. The cookie blocker tries to determine width and height of the blocked content automatically, but this doesn’t seem to work here.

This part can be fixed with some custom css.

But the most important issue seems to be that it’s not possible to enable it by clicking the element. It looks like something in the popup is blocking the click. This is probably done with javascript, because I don’t see any limitations with CSS. Maybe the theme creators can tell us a bit more about the click behaviour of the popup.

Hello @rogierlankhorst,

I don’t understand how CSS could possibly disable clicks, but if you let me know what you think about in detail, I can surely try to adjust the pop-up with custom CSS overrides.

I asked the theme authors, but they don’t see the problem on their end. This was their response:

We don’t block clicks in popups you can check it yourself by sending contact form data after deactivating Complianz plugin. So I think that this issue related to the Complianz, not Impreza. I recommend asking the author of the plugin to investigate the issue better.

Regards,
Johannes

Complianz works fine with other popups, like the Elementor popup for example, so there has to be something specific to this popup which is blocking things.

Clicking can be disabled with CSS with an overlay with a high z-index for example. You would then click on the overlay instead.

This does not seem to be the case. As far as I can see it’s possible to click the element, but it does not trigger the jquery event.

Alternatively you could try a different popup tool.

Hello again,

As a workaround, I added my own click action to this button via jQuery now. This way, when clicking on the button within a popup, the popup is now closed and the cookie banner is displayed:

var cmplzConsent = 0 <= document.cookie.indexOf('complianz_consent_status=allow');
jQuery(document).ready(function() {
    jQuery('.w-popup-box .cmplz-blocked-content-container .cmplz-blocked-content-notice').click(function() {
        console.log('Toni: "click"');
        if (!cmplzConsent) {
            jQuery('.w-popup-closer, .cc-revoke').click();
        }
    });
})

It works now, however I would still be interested in why the original click action is not passed on to buttons within popups.

Regards,
Johannes

@rogierlankhorst,

Sorry, I only saw your reply after posting mine. Thanks for your investigation. It works as a quick fix, but I’ll give other popup tools a try as you suggested.

Thanks,
Johannes

Hello @rogierlankhorst and @jarnovos,

One more question: How is the consent triggered? My workaround above displays the cookie banner again, but clicking that button should actually accept cookies right away. How can I trigger this?

Thanks,
Johannes

@jecat01 a simple method to trigger the consent is to use:

$('.cc-allow').click();

This will consent, and dismiss the banner.

Hello @rogierlankhorst,

This click doesn’t seem to fire. It seems I can revoke any consent and show the cookie banner again using:
$('.cc-revoke').click();
It fires the click and then reloads the page. But both .cc-dismiss and .cc-allow don’t fire that way. I tested it with two browsers with a default theme and all plug-ins disabled except Complianz. Using the console, I always get the same results: calling the revoke button’s click event brings back the cookie banner, but calling any of the consent button’s click events doesn’t do anything. However, clicking one of these buttons with the mouse works as expected.

Screenshot: https://www.dropbox.com/s/ns084et5x3i2jsn/complianz-not-fired.png?dl=0

Regards,
Johannes

Alternatively you can also try using this function:

cmplzAcceptAllCookies();

Thanks, but that only outputs Uncaught ReferenceError: cmplzAcceptAllCookies is not defined, on my site as well as on a fresh installation with not much more than Complianz enabled. Does it require any specific settings to load this JavaScript?

@jecat01,

The problem is that your code is outside the scope of the Complianz code, so can’t access this function.

I have created an event to trigger categories in Complianz, which you can install by downloading the Github version (it will be shipped with the next release):

https://github.com/Really-Simple-Plugins/complianz-gdpr/

You can then trigger the consent as follows:

document.addEventListener('cmplzCookieWarningLoaded', function (e) {
    var details = new Object();
    details.category = 'marketing';
    var event = new CustomEvent('cmplz_consent_action', { detail: details });
    document.dispatchEvent(event);
});

If it is in response to a user click, you can assume the banner already has loaded, and you can just use:

    var details = new Object();
    details.category = 'marketing';
    var event = new CustomEvent('cmplz_consent_action', { detail: details });
    document.dispatchEvent(event);

Hi @jecat01,

Have you tried implementing Rogier’s suggestion? I assume that this suggestion is what you are looking for, so I’m marking this as resolved for now.

If there is anything else we can assist with, let us know.
Kind regards,
Jarno

Hi,

Sorry for the late reply, I only tested it today.
Yes, it works perfectly. Thanks a lot!

Johannes