WPDevDesign

Cookie Info Bar in Oxygen

This members-only tutorial provides the steps to show a cookie consent information bar without using a plugin or loading a 3rd party JS file in Oxygen.

We shall use the Modal and Conditions features with a few lines of custom JS.

When a user visits any page of the site for the first time, the modal is going to slide in from the bottom after a minute.

When the user dismisses it by pressing the “Got it!” button, a cookie will be created in the user’s browser that expires after 30 days.

During this time any time this user revisits any page of the site, the cookie we created will be checked against the list of cookies and only if it is NOT present will the modal appear.

Here’s the idea behind the implementation:

if button pressed {
create cookie
}

if cookie NOT present in the cookies list {
show the modal
}

Step 1

Edit the Main Catch All Oxygen Template.

a) Add a Modal component.

Trigger

Show when: After specified time
Open Modal After: 1 second
After Modal Is Shown: Show again on every page load

Content Styles

Layout Child Elements: Stack Child Elements Horizontally
Vertical Item Alignment: Middle
Horizontal Item Alignment: Space Between
Text Color: #ffffff
Background Color: #645862

Modal Styles

Width: 100%
Backdrop Color: transparent
Modal Position: (bottom center)

Closing

Close on ESC Key: No
Close Modal On Backdrop Click: No

Advanced > Size & Spacing

Padding: 10px at top and bottom and 20px at left and right
Width: 100%

Advanced > Effects

Animate on Scroll: Enable animation and set animation type to slide-up.

With the Modal selected, add a Text component.

Enter this sample text:

We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies. More info

Select “More info” text and click <SPAN> button in the top toolbar and set a URL to it that links to your Privacy Policy page or to http://wikipedia.org/wiki/HTTP_cookie.

With the Modal selected, add a Button component.

Change the text to something like “Got it!” or “Accept”.

Button Color: #f1d600
Button Hover Color: #f0d032
Text Color: #333333

Advanced > Size & Spacing

Padding: 4px at top and bottom and 20px at left and right
Margin: 40px at left
Width: 100%
Max-width: 100px (adjust according to the button text)

Let’s make responsive adjustments. Select “Less than 768px” breakpoint.

Modal / Content Styles: Stack Child Elements Vertically.

For the Text component, set Text Align to Center under Typography.

For the Button, set top margin to 20px and left margin to 0.

b) Bring up the Structure Panel, select Body element and add a Code Block so it is below all other components.

PHP & HTML

<?php
	// echo "hello world!";
?>

CSS

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $599 one-time).

Already a member? Log in below or here.

Posted

in

,

by

Sridhar Katakam

Tags:

, ,

Comments

8 responses to “Cookie Info Bar in Oxygen”

  1. Frank Avatar
    Frank

    Cool. But what if JS is disabled in the browser? (Despite the most recent changes where EU rules force you to demand consent for any tracking cookies and even any cookies at all but absolutely necessary ones, like login or cart cookies …)

    Reply
    1. Sridhar Katakam Avatar
      Sridhar Katakam

      I am not sure.

      With more and more reliance on JavaScript, I am guessing it is assumed nowadays that JS is enabled in visitors’ browsers.

      Reply
  2. Hide Modal Backdrop for Notifications & Site Messages in Oxygen – WPDevDesign

    […] visible. This makes sense when using modals for certain popups or forms, but not for site messages, cookie consents, […]

    Reply
  3. joris Avatar
    joris

    Settings the cookie (actually executing the JS does not seem to work on Android and iOS).
    I think the click event is not propagated to our own javascript function because of the js that is executed by Oxygen when adding the oxy-close-modal class to the button. What worked for me was not adding the oxy-close-modal class and changing the JS click function to this:

    $('.ct-modal').on('click', '#link_button-80-9', function(e) {
    // creates a cookie named "wpddcookieconsent" having a value of "acknowledged" that should last for 30 days in the browser.
    e.preventDefault();
    setAcknowledgedCookie(30);
    oxyCloseModal(); // if you only have 1 modal on the page, otherwise specify which modal to close. See https://oxygenbuilder.com/documentation/builder-elements/modal/
    });

    Reply
    1. Sridhar Katakam Avatar
      Sridhar Katakam

      Updated the tutorial accordingly, thanks.

      Reply
  4. gsibert Avatar
    gsibert

    What about closing the modal on scroll or continued navigation?

    Reply
  5. mario Avatar
    mario

    Hi,

    Which date of “update” is correct: sidebar or before the article?

    For me, this tutorial only works with fresh installation (WP + Oxy). I get an “error 200 while saving” when I have plugins turned on (Hydrogen, Advanced Scripts).

    Reply
    1. Sridhar Katakam Avatar
      Sridhar Katakam

      The updated date in the sidebar is the WP post modified date, not necessarily what should be shown there.

      Fixed it and now it should show the correct one.

      Coming to the issue, can you narrow it down to one of those 2 plugins? After that, is it possible to set up a reduced test case in the sandbox (https://oxygenbuilder.com/try/atomic/) and provide the URL?

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *