1 @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
2 @using Dynamicweb.Environment;
3
4 @{
5 var categories = CookieManager.GetCategories();
6
7 string cookieNoticeLink = Pageview.AreaSettings.GetLink("CookiePolicyLink") != null ? Pageview.AreaSettings.GetLink("CookiePolicyLink").Url : "";
8 string privacyPolicyLink = Pageview.AreaSettings.GetLink("PrivacyPolicyLink") != null ? Pageview.AreaSettings.GetLink("PrivacyPolicyLink").Url : "";
9 int cookieNoticePageID = Pageview.AreaSettings.GetLink("CookiePolicyLink") != null ? Pageview.AreaSettings.GetLink("CookiePolicyLink").PageId : 0;
10 int privacyPolicyPageID = Pageview.AreaSettings.GetLink("PrivacyPolicyLink") != null ? Pageview.AreaSettings.GetLink("PrivacyPolicyLink").PageId : 0;
11 string googleTagManagerID = Pageview.AreaSettings.GetString("GoogleTagManagerID");
12
13 string layout = Pageview.AreaSettings.GetRawValueString("CookieLayout", "modal");
14
15 layout = Pageview.Page.ID == cookieNoticePageID || Pageview.Page.ID == privacyPolicyPageID ? "both" : layout;
16 }
17
18 @if (!Pageview.IsVisualEditorMode) {
19 if (layout == "banner" || layout == "both")
20 {
21 string bannerTheme = !string.IsNullOrWhiteSpace(Pageview.AreaSettings.GetRawValueString("CookieBannerTheme")) ? " theme " + Pageview.AreaSettings.GetRawValueString("CookieBannerTheme").Replace(" ", "").Trim().ToLower() : "theme light";
22
23 <div class="position-fixed bottom-0 w-100 shadow @bannerTheme" id="dwCookieBanner">
24 <div class="align-items-center grid p-3">
25 @if (layout == "banner")
26 {
27 <div class="g-col-12 g-col-md-6 g-col-lg-8">
28 <span>@Translate("By clicking 'Accept All' you consent that we may collect information about you for various purposes, including: Statistics and Marketing")</span>
29 </div>
30 <div class="g-col-12 g-col-md-6 g-col-lg-4">
31 <div class="grid grid-1 grid-sm-2">
32 <button type="button" onclick="setOptInCookie(2)" class="btn btn-primary" id="CookiesAcceptAll">
33 @Translate("Accept all")
34 </button>
35 <button type="button" onclick="setOptInCookie(1)" class="btn btn-secondary" id="CookiesDeclineAll">
36 @Translate("Decline")
37 </button>
38 </div>
39 </div>
40 }
41 @if (layout == "both")
42 {
43 <div class="g-col-12 g-col-lg-6 g-col-xxl-8">
44 <span>@Translate("By clicking 'Accept All' you consent that we may collect information about you for various purposes, including: Statistics and Marketing")</span>
45 </div>
46 <div class="g-col-12 g-col-lg-6 g-col-xxl-4">
47 <div class="grid grid-1 grid-sm-3">
48 <button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#dwCookieModal">
49 @Translate("Customize settings")
50 </button>
51 <button type="button" onclick="setOptInCookie(2)" class="btn btn-secondary" id="CookiesAcceptAll">
52 @Translate("Accept all")
53 </button>
54 <button type="button" onclick="setOptInCookie(1)" class="btn btn-secondary" id="CookiesDeclineAll">
55 @Translate("Decline")
56 </button>
57 </div>
58 </div>
59 }
60 </div>
61 </div>
62 }
63
64 if (layout == "modal" || layout == "both")
65 {
66 string modalTheme = !string.IsNullOrWhiteSpace(Pageview.AreaSettings.GetRawValueString("CookieModalTheme")) ? " theme " + Pageview.AreaSettings.GetRawValueString("CookieModalTheme").Replace(" ", "").Trim().ToLower() : "theme light";
67
68 <div class="modal fade" id="dwCookieModal">
69 <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" style="max-width:560px;">
70 <div class="modal-content @modalTheme">
71 <div style="overflow-y:auto;overflow-x:hidden">
72 <div class="p-3 p-md-4 overflow-auto" style="max-height:50vh;">
73 <div class="h3 mb-3">@Translate("You control your data")</div>
74 <p>@Translate("We and our partners use technologies, including cookies, to collect information about you for various purposes, including"):</p>
75 <ol>
76 <li>@Translate("Functionality")</li>
77 <li>@Translate("Statistics")</li>
78 <li>@Translate("Marketing")</li>
79 </ol>
80 <p>@Translate("By clicking 'Accept All' you consent to all these purposes. You can also choose to indicate what purposes you will consent to using the custom selections and then click 'Accept selected'").</p>
81
82 @if (!string.IsNullOrEmpty(cookieNoticeLink) || !string.IsNullOrEmpty(privacyPolicyLink))
83 {
84 <p>@Translate("You can read more about our use of cookies and other technologies, as well as our collection and processing of personal data by clicking here"):</p>
85 }
86
87 @if (!string.IsNullOrEmpty(cookieNoticeLink))
88 {
89 <a href="@cookieNoticeLink" class="d-block mb-3" id="CookiesReadModeAbout">@Translate("Read more about Cookies")</a>
90 }
91 @if (!string.IsNullOrEmpty(privacyPolicyLink))
92 {
93 <a href="@privacyPolicyLink" class="d-block" id="CookiesPrivacyPolicy">@Translate("Our privacy policy")</a>
94 }
95 </div>
96
97 <div class="p-3 px-md-4 border-top">
98 <div class="grid grid-1 grid-sm-2 gap-3">
99 <button type="button" onclick="setOptInCookie(1)" class="btn btn-secondary" data-bs-dismiss="modal" id="dwCookieDeclineAll">@Translate("Decline")</button>
100 @if (categories.Any())
101 {
102 <button type="button" onclick="acceptCustomSetup()" class="btn btn-secondary d-none" data-bs-dismiss="modal" id="dwCookieAcceptSelected">@Translate("Accept selected")</button>
103 }
104 <button type="button" onclick="setOptInCookie(2)" class="btn btn-secondary" data-bs-dismiss="modal" id="dwCookieAcceptAll">@Translate("Accept All")</button>
105 </div>
106 </div>
107
108 @if (categories.Any())
109 {
110 int categoriesCount = 0;
111 int totalCategories = categories.Count();
112
113 <form id="dwCookieModalCustomForm" method="post" action="/Admin/Public/CookieOptInLevelConfig.aspx">
114 <input type="hidden" name="cmd" value="SetCookieOptInLevel">
115 <input type="hidden" name="OptInLevel" id="OptInLevel" value="1">
116 <div class="grid grid-2 grid-sm-4 gap-0 px-md-3 border-top border-1">
117 <div class="p-3">
118 <label class="form-check-label" for="dwCookieNecessary"><span>@Translate("Necessary")</span></label>
119 <div class="form-check form-switch form-control-lg py-0">
120 <input class="form-check-input opacity-100" type="checkbox" id="dwCookieNecessary" checked disabled style="background-color: rgba(0,0,0,0.1);">
121 </div>
122 </div>
123 @foreach (var category in categories)
124 {
125 string border = categoriesCount < (totalCategories - 1) ? "" : "";
126
127 <div class="p-3 @(border)">
128 <label class="form-check-label" for="CookieCategory_@category"><span>@Translate(category)</span></label>
129 <div class="form-check form-switch form-control-lg py-0">
130 <input class="form-check-input js-checkbox" type="checkbox" name="OptInCategory" value="@category" id="CookieCategory_@category" onchange="toggleAcceptSelected()" style="background-color: rgba(0,0,0,0.1);">
131 </div>
132 </div>
133 categoriesCount++;
134 }
135 </div>
136 </form>
137 }
138 </div>
139 </div>
140 </div>
141 </div>
142 }
143
144
145 <script>
146 async function setOptInCookie(optInLevel) {
147 let response = await fetch("/admin/public/CookieOptInLevelConfig.aspx?cmd=SetCookieOptInLevel&OptInLevel=" + optInLevel);
148 @if (!string.IsNullOrWhiteSpace(googleTagManagerID)){
<text>
149 if (optInLevel == '2') {
150 consentGrantedAll();
151 }
152 </text>
153 }
154
155 if (response.ok) {
156 if (document.querySelector("#dwCookieBanner")) {
157 document.querySelector("#dwCookieBanner").classList.add("d-none");
158 }
159 document.location.reload();
160 return false;
161 } else {
162 return false;
163 }
164 }
165
166 async function acceptCustomSetup() {
167 var form = document.querySelector("#dwCookieModalCustomForm");
168
169 let formData = new FormData(form);
170 var fetchOptions = {
171 method: 'POST',
172 body: formData
173 };
174
175 for (const value of formData.values()) {
176 console.log(value);
177 if (value == 'Marketing') {
console.log('Granting marketing cookies')
consentGrantedMarketing();
178 }
179 if (value == 'Statistical') {
180 console.log('Granting statistical cookies')
181 consentGrantedAnalyticsStorage();
182 }
183 }
184
185
186 let response = await fetch(form.action, fetchOptions);
187
188 if (response.ok) {
189 if (document.querySelector("#dwCookieBanner")) {
190 document.querySelector("#dwCookieBanner").classList.add("d-none");
191 }
192 document.location.reload();
193 return false;
194 } else {
195 return false;
196 }
197 }
198
199
200 function consentGrantedAll() {
201 consentGrantedMarketing();
202 consentGrantedAnalyticsStorage();
203 }
204 function consentGrantedMarketing() {
205 consentGrantedAdStorage();
206 consentGrantedAdUserData();
207 consentGrantedAdPersonalization();
208 }
209
210 function consentGrantedAdStorage() {
211 if (!window.dataLayer) return;
212 gtag('consent', 'update', {
213 'ad_storage': 'granted'
214 });
215 }
216
217 function consentGrantedAdUserData() {
218 if (!window.dataLayer) return;
219 gtag('consent', 'update', {
220 'ad_user_data': 'granted'
221 });
222 }
223
224 function consentGrantedAdPersonalization() {
225 if (!window.dataLayer) return;
226 gtag('consent', 'update', {
227 'ad_personalization': 'granted'
228 });
229 }
230
231 function consentGrantedAnalyticsStorage() {
232 if (!window.dataLayer) return;
233 gtag('consent', 'update', {
234 'analytics_storage': 'granted'
235 });
236 }
237
238 function toggleAcceptSelected() {
239 var cookieCalegoriesElement = document.querySelector("#dwCookieModalCustomForm");
240 var enableAcceptSelected = false;
241
242 cookieCalegoriesElement.querySelectorAll(".js-checkbox").forEach(function (field) {
243 if (field.checked == true) {
244 enableAcceptSelected = true;
245 }
246 });
247
248 if (enableAcceptSelected) {
249 document.querySelector("#dwCookieDeclineAll").classList.add("d-none");
250 document.querySelector("#dwCookieAcceptSelected").classList.remove("d-none");
251 } else {
252 document.querySelector("#dwCookieDeclineAll").classList.remove("d-none");
253 document.querySelector("#dwCookieAcceptSelected").classList.add("d-none");
254 }
255 }
256
257 function showCookieModal() {
258 var cookieModal = new bootstrap.Modal(document.querySelector('#dwCookieModal'), {
259 backdrop: 'static'
260 });
261 cookieModal.show();
262 }
263 </script>
264
265 if (layout == "modal")
266 {
267 <script type="module">
268 showCookieModal();
269 </script>
270 }
271 }
272