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
}
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 infoSelect "More info" text and <SPAN>
Add a Button component.
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.
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
Comments
Provide a URL of your site/webpage if something is not working.
4 comments on “Cookie Info Bar in Oxygen”
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 …)
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.
[…] visible. This makes sense when using modals for certain popups or forms, but not for site messages, cookie consents, […]
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/
});