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)){
149 <text>
150 if (optInLevel == '2') {
151 consentGrantedAll();
152 }
153 </text>
154 }
155
156 if (response.ok) {
157 if (document.querySelector("#dwCookieBanner")) {
158 document.querySelector("#dwCookieBanner").classList.add("d-none");
159 }
160 document.location.reload();
161 return false;
162 } else {
163 return false;
164 }
165 }
166
167 async function acceptCustomSetup() {
168 var form = document.querySelector("#dwCookieModalCustomForm");
169
170 let formData = new FormData(form);
171 var fetchOptions = {
172 method: 'POST',
173 body: formData
174 };
175
176 for (const value of formData.values()) {
177 console.log(value);
178 if (value == 'Marketing') {
179 console.log('Granting marketing cookies')
180 consentGrantedMarketing();
181 }
182 if (value == 'Statistical') {
183 console.log('Granting statistical cookies')
184 consentGrantedAnalyticsStorage();
185 }
186 }
187
188
189 let response = await fetch(form.action, fetchOptions);
190
191 if (response.ok) {
192 if (document.querySelector("#dwCookieBanner")) {
193 document.querySelector("#dwCookieBanner").classList.add("d-none");
194 }
195 document.location.reload();
196 return false;
197 } else {
198 return false;
199 }
200 }
201
202
203 function consentGrantedAll() {
204 consentGrantedMarketing();
205 consentGrantedAnalyticsStorage();
206 }
207
208 function consentGrantedMarketing() {
209 consentGrantedAdStorage();
210 consentGrantedAdUserData();
211 consentGrantedAdPersonalization();
212 }
213
214 function consentGrantedAdStorage() {
215 if (!window.dataLayer) return;
216 gtag('consent', 'update', {
217 'ad_storage': 'granted'
218 });
219 }
220
221 function consentGrantedAdUserData() {
222 if (!window.dataLayer) return;
223 gtag('consent', 'update', {
224 'ad_user_data': 'granted'
225 });
226 }
227
228 function consentGrantedAdPersonalization() {
229 if (!window.dataLayer) return;
230 gtag('consent', 'update', {
231 'ad_personalization': 'granted'
232 });
233 }
234
235 function consentGrantedAnalyticsStorage() {
236 if (!window.dataLayer) return;
237 gtag('consent', 'update', {
238 'analytics_storage': 'granted'
239 });
240 }
241
242 function toggleAcceptSelected() {
243 var cookieCalegoriesElement = document.querySelector("#dwCookieModalCustomForm");
244 var enableAcceptSelected = false;
245
246 cookieCalegoriesElement.querySelectorAll(".js-checkbox").forEach(function (field) {
247 if (field.checked == true) {
248 enableAcceptSelected = true;
249 }
250 });
251
252 if (enableAcceptSelected) {
253 document.querySelector("#dwCookieDeclineAll").classList.add("d-none");
254 document.querySelector("#dwCookieAcceptSelected").classList.remove("d-none");
255 } else {
256 document.querySelector("#dwCookieDeclineAll").classList.remove("d-none");
257 document.querySelector("#dwCookieAcceptSelected").classList.add("d-none");
258 }
259 }
260
261 function showCookieModal() {
262 var cookieModal = new bootstrap.Modal(document.querySelector('#dwCookieModal'), {
263 backdrop: 'static'
264 });
265 cookieModal.show();
266 }
267 </script>
268
269 if (layout == "modal")
270 {
271 <script type="module">
272 showCookieModal();
273 </script>
274 }
275 }
276
