• Resolved rd78

    (@rd78)


    Hi there!

    My website theme includes AJAX page transitions. When I activate the Cookie Banner and click a link, the AJAX-loaded pages display with a large section of white space at the top.

    Enabling safe mode or disabling the Cookie Blocker fail to fix this. However, disabling the Cookie Banner in settings does fix this.

    It seems to be the Cookie Banner that’s causing the issue.

    Are you able to help please?

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter rd78

    (@rd78)

    I’ve decided to switch to another GDPR plugin and it seems to be working with that one.

    Plugin Contributor Jarno Vos

    (@jarnovos)

    Hi @rd78,

    To correctly handle this content, you may additionally have to enable the “Cookie blocker for AJAX loaded content” option.

    You can do this by enabling “Enable advanced features” under Complianz > Settings > General, then scrolling down to the Advanced Features section and enable “Cookie blocked for AJAX loaded content”.

    Kind regards, Jarno

    Thread Starter rd78

    (@rd78)

    Hi there,

    Thanks for your reply. I have that enabled but the issue persists. It seems to be the cookie popup part and not the blocker that’s causing the issue.

    If I disable the cookie popup in settings, the issue is fixed. However, if I disable the blocker part (and keep the popup turned on) I have the issue.

    I’ve re-added Complianz to the site referenced above. The cookie popup is enabled but the blocker is turned off. If you click any (internal) link, you should see what I mean. There’s a huge amount of blank space added to the top of each page.

    Thanks

    Plugin Contributor Rogier Lankhorst

    (@rogierlankhorst)

    @rd78
    When the page loads initially, if you look in the developer console, ‘elements’, you will see that the last css reference in the <head> element is for
    /wp-content/uploads/complianz/css/banner-1-optin.css, and the banner is visible. After clicking to a new page, this line is gone.

    This means the banner CSS wiped by the ajax code as soon as the ajax loaded page loads. This results in the banner html being on the page without any css, and as such it takes space (there is no “position:absolute” css anymore for example).

    Maybe the theme developer has a hook, or the theme has a setting you can use to trigger the banner again after loading the page with ajax.

    This function could be used to achieve that:

    window.conditionally_show_banner();

    If the banner css is loaded successfully, the issue will be gone.

    The reason other plugins do not have this issue, is because we load the css dynamically after the page has loaded completely, for both performance reasons, and to be able to show different banners for different regions (opt in vs opt out) based on GEO ip.

    As we can’t prevent another scripts from wiping out our css, this is not something we can do anything about from our end I’m afraid.

    If you need any assistance with triggering the mentioned function, we are happy to help. All that is needed is a script hook or setting where this function can be added.

    Thread Starter rd78

    (@rd78)

    Thank you. I’ve added that to my theme and it works brilliantly!

    • This reply was modified 2 years, 4 months ago by rd78.
    Plugin Contributor Rogier Lankhorst

    (@rogierlankhorst)

    @rd78 great to hear!

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Cookie Banner Breaks AJAX Page Transitions’ is closed to new replies.