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 <div class="position-fixed bottom-0 w-100 shadow bg-body" id="dwCookieBanner">
22 <div class="align-items-center grid p-3">
23 @if (layout == "banner")
24 {
25 <div class="g-col-12 g-col-md-6 g-col-lg-8">
26 <span>@Translate("By clicking 'Accept All' you consent that we may collect information about you for various purposes, including: Statistics and Marketing")</span>
27 </div>
28 <div class="g-col-12 g-col-md-6 g-col-lg-4">
29 <div class="grid grid-1 grid-sm-2">
30 <button type="button" onclick="setOptInCookie(2)" class="btn btn-primary" data-dw-button="primary" id="CookiesAcceptAll">
31 @Translate("Accept all")
32 </button>
33 <button type="button" onclick="setOptInCookie(1)" class="btn btn-secondary" data-dw-button="secondary" id="CookiesDeclineAll">
34 @Translate("Decline")
35 </button>
36 </div>
37 </div>
38 }
39 @if (layout == "both")
40 {
41 <div class="g-col-12 g-col-lg-6 g-col-xxl-8">
42 <span>@Translate("By clicking 'Accept All' you consent that we may collect information about you for various purposes, including: Statistics and Marketing")</span>
43 </div>
44 <div class="g-col-12 g-col-lg-6 g-col-xxl-4">
45 <div class="grid grid-1 grid-sm-3">
46 <button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#dwCookieModal">
47 @Translate("Customize settings")
48 </button>
49 <button type="button" onclick="setOptInCookie(2)" class="btn btn-secondary" data-dw-button="secondary" id="CookiesAcceptAll">
50 @Translate("Accept all")
51 </button>
52 <button type="button" onclick="setOptInCookie(1)" class="btn btn-secondary" data-dw-button="secondary" id="CookiesDeclineAll">
53 @Translate("Decline")
54 </button>
55 </div>
56 </div>
57 }
58 </div>
59 </div>
60 }
61
62 if (layout == "modal" || layout == "both")
63 {
64 <div class="modal fade" id="dwCookieModal">
65 <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" style="max-width:560px;">
66 <div class="modal-content bg-body">
67 <div style="overflow-y:auto;overflow-x:hidden">
68 <div class="p-3 p-md-4 overflow-auto" style="max-height:50vh;">
69 <div class="h3 mb-3">@Translate("You control your data")</div>
70 <p>@Translate("We and our partners use technologies, including cookies, to collect information about you for various purposes, including"):</p>
71 <ol>
72 <li>@Translate("Functionality")</li>
73 <li>@Translate("Statistics")</li>
74 <li>@Translate("Marketing")</li>
75 </ol>
76 <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>
77
78 @if (!string.IsNullOrEmpty(cookieNoticeLink) || !string.IsNullOrEmpty(privacyPolicyLink))
79 {
80 <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>
81 }
82
83 @if (!string.IsNullOrEmpty(cookieNoticeLink))
84 {
85 <a href="@cookieNoticeLink" class="d-block mb-3" id="CookiesReadModeAbout">@Translate("Read more about Cookies")</a>
86 }
87 @if (!string.IsNullOrEmpty(privacyPolicyLink))
88 {
89 <a href="@privacyPolicyLink" class="d-block" id="CookiesPrivacyPolicy">@Translate("Our privacy policy")</a>
90 }
91 </div>
92
93 <div class="p-3 px-md-4 border-top">
94 <div class="grid grid-1 grid-sm-2 gap-3">
95 <button type="button" onclick="setOptInCookie(1)" class="btn btn-secondary" data-bs-dismiss="modal" id="dwCookieDeclineAll">@Translate("Decline")</button>
96 @if (categories.Any())
97 {
98 <button type="button" onclick="acceptCustomSetup()" class="btn btn-secondary d-none" data-bs-dismiss="modal" id="dwCookieAcceptSelected">@Translate("Accept selected")</button>
99 }
100 <button type="button" onclick="setOptInCookie(2)" class="btn btn-secondary" data-bs-dismiss="modal" id="dwCookieAcceptAll">@Translate("Accept All")</button>
101 </div>
102 </div>
103
104 @if (categories.Any())
105 {
106 int categoriesCount = 0;
107 int totalCategories = categories.Count();
108
109 <form id="dwCookieModalCustomForm" method="post" action="/Admin/Public/CookieOptInLevelConfig.aspx">
110 <input type="hidden" name="cmd" value="SetCookieOptInLevel">
111 <input type="hidden" name="OptInLevel" id="OptInLevel" value="1">
112 <div class="grid grid-2 grid-sm-4 gap-0 px-md-3 border-top border-1">
113 <div class="p-3">
114 <label class="form-check-label" for="dwCookieNecessary"><span>@Translate("Necessary")</span></label>
115 <div class="form-check form-switch form-control-lg py-0">
116 <input class="form-check-input opacity-100" type="checkbox" id="dwCookieNecessary" checked disabled style="background-color: rgba(0,0,0,0.1);">
117 </div>
118 </div>
119 @foreach (var category in categories)
120 {
121 string border = categoriesCount < (totalCategories - 1) ? "" : "";
122
123 <div class="p-3 @(border)">
124 <label class="form-check-label" for="CookieCategory_@category"><span>@Translate(category)</span></label>
125 <div class="form-check form-switch form-control-lg py-0">
126 <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);">
127 </div>
128 </div>
129 categoriesCount++;
130 }
131 </div>
132 </form>
133 }
134 </div>
135 </div>
136 </div>
137 </div>
138 }
139
140
141 <script>
142 async function setOptInCookie(optInLevel) {
143 let response = await fetch("/admin/public/CookieOptInLevelConfig.aspx?cmd=SetCookieOptInLevel&OptInLevel=" + optInLevel);
144 @if (!string.IsNullOrWhiteSpace(googleTagManagerID)){
145 <text>
146 if (optInLevel == '2') {
147 consentGrantedAll();
148 }
149 </text>
150 }
151
152 if (response.ok) {
153 if (document.querySelector("#dwCookieBanner")) {
154 document.querySelector("#dwCookieBanner").classList.add("d-none");
155 }
156 document.location.reload();
157 return false;
158 } else {
159 return false;
160 }
161 }
162
163 async function acceptCustomSetup() {
164 var form = document.querySelector("#dwCookieModalCustomForm");
165
166 let formData = new FormData(form);
167 var fetchOptions = {
168 method: 'POST',
169 body: formData
170 };
171
172 for (const value of formData.values()) {
173 console.log(value);
174 if (value == 'Marketing') {
175 console.log('Granting marketing cookies')
176 consentGrantedMarketing();
177 }
178 if (value == 'Statistical') {
179 console.log('Granting statistical cookies')
180 consentGrantedAnalyticsStorage();
181 }
182 }
183
184
185 let response = await fetch(form.action, fetchOptions);
186
187 if (response.ok) {
188 if (document.querySelector("#dwCookieBanner")) {
189 document.querySelector("#dwCookieBanner").classList.add("d-none");
190 }
191 document.location.reload();
192 return false;
193 } else {
194 return false;
195 }
196 }
197
198
199 function consentGrantedAll() {
200 consentGrantedMarketing();
201 consentGrantedAnalyticsStorage();
202 }
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