Posted on 23/04/2020 12:51:48
Hi Claus
Thank you for the input. Something will happen in this area as we have new EU legislation due next year related to this - going from the cookie directive to the cookie regulation. But right now we are awaiting exactly what will be the new rules.
Meanwhile, find a template attached that handles category opt-ins.
And the code:
@using Dynamicweb.Environment;
@{
var categories = CookieManager.GetCategories();
}
<div id="cookieWarningContainer">
<form id="cookieWarningForm" method="post" action="/Admin/Public/CookieOptInLevelConfig.aspx">
<input type="hidden" name="cmd" value="SetCookieOptInLevel" />
<input type="hidden" name="OptInLevel" id="OptInLevel" value="0" />
<fieldset>
<legend>Cookies</legend>
<p>
This website uses cookies to continuously improve the user experience and performance as well as make relevant marketing based on your interests.
Your information will be shared with 3rd parties such as LinkedIn and Google.
You may withdraw your consent at any time. Read more on our cookie and personal data policy.
</p>
<div style="text-align: right;">
<button type="button" onclick="setOptInCookie(1);">Allow selection</button>
<button type="button" onclick="setOptInCookie(2);">Allow all</button>
</div>
@if(categories.Any()){
<div class="cookieCategoryList">
@foreach (var category in categories)
{
<div><label><input type="checkbox" name="OptInCategory" value="@category" /> @category</label></div>
}
<div style="float:right;margin: 4px;">
<a id="cookieShowDetailsButton" href="javascript:toggleCategoryDetails(true);">Show details</a>
<a id="cookieHideDetailsButton" style="display:none;" href="javascript:toggleCategoryDetails(false);">Hide details</a>
</div>
</div>
}
<div id="cookieCategoryDetails" style="display:none;overflow:auto;">
<fieldset>
<legend>Cookie declaration</legend>
<div class="cookieCategoryMenu">
@foreach (var category in categories)
{
var cookies = CookieManager.GetCategoryCookies(category);
if (cookies.Count > 0){
<a id="cookieCategoryMenuButton_@category" name="cookieCategoryMenuButton" href="javascript:showCategoryDetail('@category');"><label> </label>@category (@cookies.Count)</a>
}
}
</div>
<div style="overflow:auto;">
@foreach (var category in categories)
{
<div id="cookieCategoryDetail_@category" name="cookieCategoryDetail" style="display:none;">
<ul>
@foreach (var cookieName in CookieManager.GetCategoryCookies(category))
{
<li>
@cookieName
</li>
}
</ul>
</div>
}
</div>
</fieldset>
</div>
</fieldset>
</form>
<script>
function toggleCategoryDetails(show) {
document.getElementById("cookieCategoryDetails").style.display = show ? "" : "none";
document.getElementById("cookieShowDetailsButton").style.display = show ? "none" : "";
document.getElementById("cookieHideDetailsButton").style.display = show ? "" : "none";
}
function showCategoryDetail(categoryName) {
var menuButtons = document.querySelectorAll('#cookieCategoryDetails a[name=cookieCategoryMenuButton]');
menuButtons.forEach(function(e){
e.classList.remove("active");
});
document.getElementById("cookieCategoryMenuButton_" + categoryName).classList.add("active");
var details = document.querySelectorAll('#cookieCategoryDetails div[name=cookieCategoryDetail]');
details.forEach(function(e){
e.style.display = "none";
});
document.getElementById("cookieCategoryDetail_" + categoryName).style.display = "";
}
function setOptInCookie(optInLevel) {
document.getElementById("OptInLevel").value = optInLevel;
var formElement = document.getElementById("cookieWarningForm");
var formData = new FormData(formElement);
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var container = document.getElementById("cookieWarningContainer");
container.parentNode.removeChild(container);
return false;
}
}
xmlhttp.open(formElement.method, formElement.action);
xmlhttp.send(formData);
return false;
}
</script>
<style>
#cookieWarningContainer{
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color: rgba(0, 0, 0, .3);
}
#cookieWarningForm{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
color: #000;
background-color: #fff;
border: 1px solid #999;
border-radius: 10px;
box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, .1);
}
#cookieWarningContainer .cookieCategoryList{
overflow:auto;
}
#cookieWarningContainer .cookieCategoryList div{
float:left;
margin-right:10px;
font-weight: bold;
}
.cookieCategoryMenu {
float:left;
white-space: nowrap;
}
.cookieCategoryMenu a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
}
.cookieCategoryMenu a:hover {
background-color: #ccc;
}
.cookieCategoryMenu a.active {
background-color: #4CAF50;
color: white;
}
</style>
</div>
