Cookie Info Bar in Oxygen

Updated on October 29, 2019

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