1 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel> 2 @using Dynamicweb; 3 @using Bluedesk.Tools.Generic; 4 @using System.Globalization; 5 @using Dynamicweb.Content.Items; 6 @using Bluedesk.DynamicWeb.ItemTypes; 7 @using Bluedesk.DynamicWeb.ItemTypes.Settings; 8 @using Bluedesk.DynamicWeb.ItemTypes.Settings.Configuration; 9 @using KoksGroup.DynamicWeb.ItemTypes.Settings; 10 11 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel> 12 @using System; 13 @using System.IO; 14 @using Dynamicweb; 15 @using Bluedesk.DynamicWeb.ItemTypes.Configuration; 16 @using Bluedesk.DynamicWeb.ItemTypes.Settings.Configuration; 17 @using Bluedesk.DynamicWeb.ItemTypes.BaseSolution; 18 @using Dynamicweb.Content.Items.Activation; 19 @using Dynamicweb.Content.Items.Annotations; 20 @using Bluedesk.Tools.Generic; 21 @using System.Globalization; 22 @using Dynamicweb.Content.Items; 23 @using Bluedesk.DynamicWeb.ItemTypes; 24 @using Bluedesk.DynamicWeb.ItemTypes.Settings; 25 26 @{ 27 28 var colorService = new ColorSwatchService(); 29 30 var master_configuration = Services.Pages.GetPageByNavigationTag(Pageview.AreaID, "MasterConfiguration"); 31 32 MasterConfig mc = master_configuration.Item.ToCodeFirstItem<MasterConfig>(); 33 34 string MasterConfigCssClass = !string.IsNullOrWhiteSpace(mc.CssClass) ? mc.CssClass : ""; 35 36 var corporate_settings = Services.Pages.GetPageByNavigationTag(Pageview.AreaID, "CorporateSettingsPage"); 37 CorporateSettingsPage cs = corporate_settings.Item.ToCodeFirstItem<CorporateSettingsPage>(); 38 39 FeatureConfig FeatureConfiguration = mc.FeatureConfiguration; 40 41 HeaderConfig HeaderConfiguration = mc.HeaderConfiguration; 42 StickyheaderConfig StickyheaderConfiguration = mc.StickyheaderConfiguration; 43 FooterConfig FooterConfiguration = mc.FooterConfiguration; 44 45 GeneralConfig GeneralConfiguration = mc.GeneralConfiguration; 46 47 EcomConfig EcommerceConfiguration = mc.EcomConfiguration; 48 ProductDetailConfig ProductDetailConfiguration = mc.ProductDetailConfiguration; 49 ProductOverviewConfig ProductOverviewConfiguration = mc.ProductOverviewConfiguration; 50 51 string General__bodyFontFamily = GeneralConfiguration.FontConfigurationGeneralBody.FontConfiguration.FontFamily; 52 string General__headerFontFamily = GeneralConfiguration.FontConfigurationGeneralHeader.FontConfiguration.FontFamily; 53 54 } 55 56 @* 57 [Include file 'components/master/MasterFunctions.cshtml' not found in 'Templates/Designs/KoksGroup/Masterpage/MasterVisualEditor.cshtml'] 58 [Include file 'components/master/MasterHelpers.cshtml' not found in 'Templates/Designs/KoksGroup/Masterpage/MasterVisualEditor.cshtml'] 59 [Include file 'components/master/MasterSnippets.cshtml' not found in 'Templates/Designs/KoksGroup/Masterpage/MasterVisualEditor.cshtml'] 60 [Include file 'components/master/MasterJavascript.cshtml' not found in 'Templates/Designs/KoksGroup/Masterpage/MasterVisualEditor.cshtml'] 61 *@ 62 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel> 63 @using Dynamicweb; 64 @using Dynamicweb.Content.Items; 65 66 @{ 67 68 string RoundedCornersValue = "0px"; 69 string ButtonHeight = GeneralConfiguration.ButtonHeight.ToString() != "0" ? GeneralConfiguration.ButtonHeight.ToString() + "px" : ""; 70 71 switch (GeneralConfiguration.RoundedCorners) { 72 73 case "rounded": 74 RoundedCornersValue = GeneralConfiguration.RoundedCornerValue.ToString() + "px"; 75 break; 76 77 case "round": 78 RoundedCornersValue = ButtonHeight; 79 break; 80 81 default: 82 RoundedCornersValue = "0px"; 83 break; 84 } 85 } 86 87 <style> 88 body { 89 font-family: @General__bodyFontFamily; 90 } 91 92 h1, 93 h2, 94 h3, 95 h4, 96 h5, 97 h6 { 98 /*color: $general-heading-color;*/ 99 font-family: @General__headerFontFamily; 100 } 101 102 103 .productdetails__add-to-cart, 104 .searchbox__input, 105 .default-btn { 106 border-radius: @RoundedCornersValue !important; 107 } 108 109 .default-btn { 110 @if(ButtonHeight != "") 111 { 112 <text> height: @ButtonHeight; </text> 113 } 114 } 115 116 .default-btn, 117 .default-btn:hover { 118 transistion: all .3s ease-in; 119 } 120 121 .default-btn .btn__icon { 122 display: flex; 123 justify-content: center; 124 width: 50px; 125 align-items: center; 126 } 127 128 .btn { 129 display: flex !important; 130 justify-content: space-between !important; 131 padding: 0 25px !important; 132 } 133 134 .cta-paragraph__text p a { 135 color: #ff5800 !important; 136 } 137 138 .cta-paragraph__text p a:hover { 139 color: #445055 !important; 140 } 141 142 </style> 143 144 145 @{ 146 var websitesettings = Services.Items.GetItemById<WebsiteSettings>(Model.Area.Item.Id); 147 148 var MasterConfig = Services.Items.GetItemById<Bluedesk.DynamicWeb.ItemTypes.Settings.Configuration.FeatureConfig>(Model.Area.Item.Id); 149 150 var font_configuration = Services.Pages.GetPageByNavigationTag(Pageview.AreaID, "FontConfiguration"); 151 152 var httpdomain = Dynamicweb.Environment.Helpers.LinkHelper.GetHttpDomain(); 153 var lang = Pageview.Area.CultureInfo.TwoLetterISOLanguageName; 154 var langName = Pageview.Area.Culture; 155 156 var csrftoken = application._webapi.Helper.CSRFHelper.TokenHeaderValue(); 157 var designRoot = "/Files/Templates/Designs/" + Pageview.Area.Layout.Design.Name; 158 var designtools = "/Files/Templates/Designs/ridgidkollmann_generated"; 159 string logo = websitesettings.Logo; 160 var phonenumber = cs.Phonenumber; 161 var formattedPhonenumber = phonenumber.Replace(" ", String.Empty); 162 var emailadress = cs.Emailadress; 163 var buttonIconClass = Pageview.Area.Item["Global_button_icon"] != null ? Pageview.Area.Item["Global_button_icon"].ToString().Replace("+", " ") : "fal fa-arrow-right"; 164 var callmebackformlink = cs.Call_me_back_form; 165 var mobileThemeColor = websitesettings.Mobile_Theme_Color; 166 167 bool isOffline = false; 168 DateTime workingHoursStart = cs.OpeningTime; 169 DateTime workingHoursEnd = cs.ClosingTime; 170 DateTime today = DateTime.Now; 171 var cHour = DateTime.Now.TimeOfDay; 172 int cDay = (int)DateTime.Now.DayOfWeek; 173 string availableToHour24hFormat = workingHoursEnd.TimeOfDay.ToString().Substring(0, 5); 174 var timeFromInput = DateTime.ParseExact(availableToHour24hFormat, "H:m", null, DateTimeStyles.None); 175 string availableToHour12hFormat = timeFromInput.ToString("hh:mm tt", CultureInfo.InvariantCulture); 176 var availableToHour = lang == "en" ? availableToHour12hFormat : availableToHour24hFormat; 177 bool isOvertime = cHour >= workingHoursEnd.TimeOfDay || cHour <= workingHoursStart.TimeOfDay; 178 bool isNoValidDate = today < workingHoursStart || today > workingHoursEnd; 179 if (isNoValidDate || isOvertime) 180 { 181 isOffline = true; 182 } 183 184 Boolean showBreadcrumbs = Pageview.Page.PropertyItem != null && Pageview.Page.PropertyItem["ShowBreadcrumbs"] != null ? Convert.ToBoolean(Pageview.Page.PropertyItem["ShowBreadcrumbs"]) : false; 185 } 186 187 <!DOCTYPE html> 188 <html lang="@lang" prefix="og: http://ogp.me/ns#"> 189 <head> 190 <meta charset="utf-8"> 191 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 192 <meta name="viewport" content="width=device-width, initial-scale=1"> 193 <meta name="theme-color" content="@mobileThemeColor"> 194 <meta name="description" content="@Model.Description"> 195 <meta name="keywords" content="@Model.Keywords"> 196 197 @RenderSnippet("canonical") 198 199 @RenderSnippet("ogTags") 200 201 <title>@Model.Title</title> 202 203 <link rel="preconnect" href="https://fonts.googleapis.com"> 204 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 205 206 @{ 207 var appcss = Cache.VersionedFile(designtools + "/dist/app.css"); 208 //var CustomCss = Cache.VersionedFile(designRoot + "/dist/CustomCSS.css"); 209 var ToolsAndParts = Cache.VersionedFile(designRoot + "/dist/stylesTools.css"); 210 <link href="@appcss" rel="stylesheet" /> 211 //<link href="@CustomCss" rel="stylesheet" /> 212 <link href="@ToolsAndParts" rel="stylesheet" /> 213 214 var favicon32 = Cache.VersionedFile(designRoot + "/assets/img/favicon-32.png", true); 215 var favicon16 = Cache.VersionedFile(designRoot + "/assets/img/favicon-16.png", true); 216 var favico = Cache.VersionedFile(designRoot + "/assets/img/favicon.ico", true); 217 218 if (!string.IsNullOrWhiteSpace(favicon32)) 219 { 220 <link rel="icon" type="image/png" sizes="32x32" href="@favicon32"> 221 } 222 if (!string.IsNullOrWhiteSpace(favicon16)) 223 { 224 <link rel="icon" type="image/png" sizes="16x16" href="@favicon16"> 225 } 226 if (!string.IsNullOrWhiteSpace(favico)) 227 { 228 <link rel="shortcut icon" href="@favico"> 229 } 230 } 231 232 @foreach (var language in Model.Area.Languages) 233 { 234 int pageid = language.FirstActivePage.ID; 235 string domainProxy = HttpContext.Current.Request.IsSecureConnection ? "https://" : "http://"; 236 string primaryDomain = !string.IsNullOrWhiteSpace(language.PrimaryDomain) ? domainProxy + language.PrimaryDomain : language.PrimaryDomain; string url = primaryDomain + Dynamicweb.Frontend.SearchEngineFriendlyURLs.GetFriendlyUrl(pageid); 237 <link rel="alternate" href="@url" hreflang="@language.Culture.Split('-')[0]" /> 238 } 239 240 <script> 241 window.globals = { 242 pageId: '@Pageview.ID', 243 Token: '@csrftoken', 244 DW_AREA_CULTURE: '@langName', 245 DW_AREA_CULTURE_SHORT: '@lang', 246 globalIconClass: '@buttonIconClass', 247 DW_USERID: '@Dynamicweb.Security.UserManagement.User.GetCurrentExtranetUserId()' 248 }; 249 </script> 250 251 @websitesettings.HeadScript 252 253 @{ 254 var _cookieOptinLevel = Dynamicweb.Environment.CookieManager.GetCookieOptInLevel(); 255 var _enabledCookieCategories = Dynamicweb.Environment.CookieManager.GetCookieOptInCategories(); 256 if (_cookieOptinLevel.ToString() == "All" || _enabledCookieCategories.Contains("Marketing_Cookies")) 257 { 258 @websitesettings.HeadScriptAfterConsent; 259 } 260 } 261 262 @{ 263 264 var reviewName = websitesettings.Review_Name != null ? websitesettings.Review_Name : ""; 265 var reviewBestRating = websitesettings.Review_Best_Rating != null ? websitesettings.Review_Best_Rating : ""; 266 var reviewWorstRating = websitesettings.Review_Worst_Rating != null ? websitesettings.Review_Worst_Rating : ""; 267 var reviewRatingValue = websitesettings.Review_Rating_Value != null ? websitesettings.Review_Rating_Value : ""; 268 var reviewCount = websitesettings.Review_Count != null ? websitesettings.Review_Count : ""; 269 var reviewUrl = websitesettings.Review_URL != null ? websitesettings.Review_URL : ""; 270 271 var searchPageID = Bluedesk.Tools.DynamicWeb.Generic.PageHelper.GetPageIDByNavigationTag("searchresults", Pageview.AreaID); 272 var domain = Dynamicweb.Environment.Helpers.LinkHelper.GetHttpDomain(); 273 } 274 275 <script type="application/ld+json"> 276 [{ 277 "@@context": "https://schema.org", 278 "@@type": "Organization", 279 "name" : "@cs.CompanyName", 280 "url": "@domain", 281 "sameAs" : "@cs.Facebook", 282 "logo": "@domain@websitesettings.Logo", 283 "contactPoint" : [{ 284 "@@type" : "ContactPoint", 285 "telephone" : "@cs.Phonenumber", 286 "contactType" : "customer service" , 287 "@@context": "https://schema.org", 288 "@@id": "@domain", 289 "name": "@cs.CompanyName" 290 }], 291 "address": { 292 "@@type": "PostalAddress", 293 "streetAddress": "@cs.Address", 294 "addressLocality": "@cs.City", 295 "postalCode": "@cs.Zipcode", 296 "addressRegion": "@cs.Region", 297 "addressCountry": "@cs.Country" 298 } 299 }, 300 { 301 "@@context": "https://schema.org", 302 "@@type": "WebSite", 303 "name" : "@cs.CompanyName", 304 "alternateName" : "@cs.AltCompanyName", 305 "url": "@domain", 306 "potentialAction": { 307 "@@type": "SearchAction", 308 "target": "@domain/Default.aspx?ID=@searchPageID&q={search_term_string}", 309 "query-input": "required name=search_term_string" 310 } 311 }] 312 </script> 313 314 <script type="application/ld+json"> 315 { 316 "@@context": "https://schema.org", 317 "@@type": "Product", 318 "name": "@reviewName", 319 "url":"@reviewUrl", 320 "aggregateRating": { 321 "@@type": "AggregateRating", 322 "bestRating": "@reviewBestRating", 323 "worstRating": "@reviewWorstRating", 324 "ratingValue": "@reviewRatingValue", 325 "reviewCount": "@reviewCount" 326 } 327 } 328 </script> 329 330 331 @RenderSnippet("DataLayer") 332 333 @RenderSnippet("GoogleMapsScript") 334 335 @{ 336 // TODO: Add there options to master config for product overview 337 bool hidePricesForGuests = false; 338 bool hideShoppingCartForGuests = false; 339 340 bool enableShoppingCart = hideShoppingCartForGuests && Pageview.User == null ? false : websitesettings.ConfigModuleShoppingCart; 341 bool enableLogin = websitesettings.ConfigModuleLogin; 342 bool enableQuickOrder = websitesettings.ConfigModuleQuickOrder; 343 bool enableAdvancedSearch = websitesettings.ConfigModuleAdvancedSearch; 344 bool enableCallMeBack = websitesettings.ConfigModuleCallMeBack; 345 bool enableDyslexicFont = websitesettings.ConfigModuleDyslexicFont; 346 bool enableProductCompare = websitesettings.ConfigModuleProductCompare; 347 } 348 349 350 351 </head> 352 <body class="@MasterConfigCssClass"> 353 @websitesettings.BodyScript 354 @{ 355 if (_cookieOptinLevel.ToString() == "All" || _enabledCookieCategories.Contains("Marketing_Cookies")) 356 { 357 @websitesettings.BodyScriptAfterConsent; 358 } 359 } 360 @websitesettings.TailScript 361 362 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel> 363 @using Dynamicweb; 364 @using Dynamicweb.Content.Items; 365 366 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel> 367 @using Dynamicweb; 368 @using Dynamicweb.Content.Items; 369 @using Bluedesk.DynamicWeb.ItemTypes.Settings.Configuration; 370 371 372 @{ 373 374 375 bool userLoggedIn = false; 376 377 if (enableLogin) 378 { 379 if (Pageview.User == null) 380 { 381 // <a href="#" class="mainmenu__list-item mainmenu__list-item--contrast topmenu__link topmenu__link--login"><i class="fal fa-user" style="position:relative; display: flex; flex-direction:column; font-size: 1.2rem;"></i></a> 382 userLoggedIn = false; 383 } 384 else 385 { 386 // <a href="/Admin/Public/ExtranetLogoff.aspx?ID=@Pageview.Page.ID" class="topmenu__link">@Translate("User.Logout", "Logout")</a> 387 userLoggedIn = true; 388 } 389 } 390 391 /*********** Header ***********/ 392 393 var header__custom_menu_items = mc.HeaderConfiguration.CustomMenuItems; 394 395 // Display 396 397 bool header__top_bar_display = mc.HeaderConfiguration.TopBarDisplay.ToString() == "True" ? true : false; 398 bool header__middle_bar_display = mc.HeaderConfiguration.MiddleBarDisplay.ToString() == "True" ? true : false; 399 bool header__bottom_bar_display = mc.HeaderConfiguration.BottomBarDisplay.ToString() == "True" ? true : false; 400 bool header__stickyheader_display = mc.HeaderConfiguration.StickyheaderDisplay.ToString() == "True" ? true : false; 401 402 bool header__mainmenu_display = mc.HeaderConfiguration.MainmenuDisplay.ToString() == "True" ? true : false; 403 bool header__search_display = mc.HeaderConfiguration.SearchDisplay.ToString() == "True" ? true : false; 404 405 // General 406 407 string header__BackgroundColor = colorService.GetHexColor(Pageview.AreaID, mc.HeaderConfiguration.BackgroundColor.ToString()); 408 string header__ContainerSize = mc.HeaderConfiguration.ContainerSize.ToString() == "0" ? "100%" : mc.HeaderConfiguration.ContainerSize.ToString() + "px"; 409 410 // Header Custom Elements 411 412 string header__CustomTemplate = !string.IsNullOrWhiteSpace(mc.HeaderConfiguration.CustomTemplate) ? mc.HeaderConfiguration.CustomTemplate.ToString() : ""; 413 414 string header__CustomMenuItemColor = colorService.GetHexColor(Pageview.AreaID, mc.HeaderConfiguration.CustomMenuItemColor.ToString()); 415 416 // Positions 417 418 var header__mainmenu_position = GetDisplayBoolArray(mc.HeaderConfiguration.PositionMainmenu.ToString()); 419 var header__search_position = GetDisplayBoolArray(mc.HeaderConfiguration.PositionSearch.ToString()); 420 var header__login_position = GetDisplayBoolArray(mc.HeaderConfiguration.PositionLogin.ToString()); 421 var header__shoppingcart_position = GetDisplayBoolArray(mc.HeaderConfiguration.PositionShoppingcart.ToString()); 422 var header__langauage_switch_position = GetDisplayBoolArray(mc.HeaderConfiguration.PositionLanguageSwitch.ToString()); 423 var header__added_menu_position = GetDisplayBoolArray(mc.HeaderConfiguration.PositionAddedMenu.ToString()); 424 //var header__custom_template_position = GetDisplayBoolArray(mc.HeaderConfiguration.PositionCustomTemplate.ToString()); 425 var header__custom_template_position = GetDisplayBoolArray("middle-bar"); 426 427 // Mainmenu 428 429 /*** Mainmenu general settings ***/ 430 string header_mainmenu__Color = colorService.GetHexColor(Pageview.AreaID, mc.HeaderConfiguration.MainmenuColor.ToString()); 431 string header_mainmenu__BackgroundColor = colorService.GetHexColor(Pageview.AreaID, mc.HeaderConfiguration.MainmenuBackgroundColor.ToString()); 432 433 string header_mainmenu__ColorHover = colorService.GetHexColor(Pageview.AreaID, mc.HeaderConfiguration.MainmenuColorHover.ToString()); 434 string header_mainmenu__BackgroundColorHover = colorService.GetHexColor(Pageview.AreaID, mc.HeaderConfiguration.MainmenuBackgroundColorHover.ToString()); 435 436 string header_mainmenu__ColorActive = colorService.GetHexColor(Pageview.AreaID, mc.HeaderConfiguration.MainmenuColorActive.ToString()); 437 string header_mainmenu__BackgroundColorActive = colorService.GetHexColor(Pageview.AreaID, mc.HeaderConfiguration.MainmenuBackgroundColorActive.ToString()); 438 439 string header_mainmenu__textTransform = mc.HeaderConfiguration.MainmenuTextTransform.ToString(); 440 header_mainmenu__textTransform = !string.IsNullOrWhiteSpace(header_mainmenu__textTransform) ? header_mainmenu__textTransform : "uppercase"; 441 442 bool header_mainmenu__FullWidthMainmenu = mc.HeaderConfiguration.FullWidthMainmenu; 443 444 /* Font */ 445 446 string header_mainmenu__FontFamily = HeaderConfiguration.FontConfigurationMainmenu.FontConfiguration.FontFamily; 447 string header_mainmenu__FontSize = HeaderConfiguration.FontConfigurationMainmenu.FontSize; 448 string header_mainmenu__FontStyle = HeaderConfiguration.FontConfigurationMainmenu.FontStyle; 449 string header_mainmenu__FontWeight = HeaderConfiguration.FontConfigurationMainmenu.FontWeight; 450 451 // Searchbar 452 453 string header_searchbar__BackgroundColor = colorService.GetHexColor(Pageview.AreaID, mc.HeaderConfiguration.SearchBarBackgroundColor.ToString()); 454 string header_searchbar__Color = colorService.GetHexColor(Pageview.AreaID, mc.HeaderConfiguration.SearchBarColor.ToString()); 455 456 // Top 457 458 /*** Top bar general settings ***/ 459 string header_top__Color = colorService.GetHexColor(Pageview.AreaID, mc.HeaderConfiguration.TopColor.ToString()); 460 string header_top__BackgroundColor = colorService.GetHexColor(Pageview.AreaID, mc.HeaderConfiguration.TopBackgroundColor.ToString()); 461 string header_top__link_text_color = colorService.GetHexColor(Pageview.AreaID, mc.HeaderConfiguration.TopLinkTextColor.ToString()); 462 463 // Top | USP 464 465 string header_top__USP_text_color = colorService.GetHexColor(Pageview.AreaID, mc.HeaderConfiguration.TopUSPTextColor.ToString()); 466 string header_top__USP_icon_color = colorService.GetHexColor(Pageview.AreaID, mc.HeaderConfiguration.TopUSPIconColor.ToString()); 467 468 bool header_USP_top_bar__display = mc.HeaderConfiguration.TopBarUSPDisplay.ToString() == "True" ? true : false; 469 470 // Middle 471 472 /*** Middle bar general settings ***/ 473 474 string header_main__Color = colorService.GetHexColor(Pageview.AreaID, mc.HeaderConfiguration.MiddleColor.ToString()); 475 string header_main__BackgroundColor = colorService.GetHexColor(Pageview.AreaID, mc.HeaderConfiguration.MiddleBackgroundColor.ToString()); 476 477 string header_main__BackgroundGradient = !string.IsNullOrWhiteSpace(mc.HeaderConfiguration.MiddleBackgroundGradient.ToString()) ? mc.HeaderConfiguration.MiddleBackgroundGradient.ToString() : null; 478 string header_main__BackgroundImage = !string.IsNullOrWhiteSpace(mc.HeaderConfiguration.MiddleBackgroundImage.ToString()) ? mc.HeaderConfiguration.MiddleBackgroundImage.ToString() : null; 479 480 string header_main__height = mc.HeaderConfiguration.MiddleBarHeight == 0 ? "auto" : mc.HeaderConfiguration.MiddleBarHeight.ToString() + "px"; 481 482 /*** Desktop logo Settings ***/ 483 string header_logo__top = mc.HeaderConfiguration.LogoTop.ToString(); 484 header_logo__top = !string.IsNullOrWhiteSpace(header_logo__top) ? header_logo__top + "px" : "auto"; 485 486 string header_logo__left = mc.HeaderConfiguration.LogoLeft.ToString(); 487 header_logo__left = !string.IsNullOrWhiteSpace(header_logo__left) ? header_logo__left + "px" : "auto"; 488 489 string header_logo__width = mc.HeaderConfiguration.LogoWidth.ToString(); 490 header_logo__width = !string.IsNullOrWhiteSpace(header_logo__width) && header_logo__width != "0" ? header_logo__width + "px" : "auto"; 491 492 string header_logo__height = mc.HeaderConfiguration.LogoHeight.ToString(); 493 header_logo__height = !string.IsNullOrWhiteSpace(header_logo__height) && header_logo__height != "0" ? header_logo__height + "px" : "auto"; 494 495 string header_desktop__logo = mc.HeaderConfiguration.LogoDesktopImage.ToString(); 496 497 /*** Mobile logo Settings ***/ 498 string header_mobile_logo__top = mc.HeaderConfiguration.LogoMobileTop.ToString(); 499 header_mobile_logo__top = !string.IsNullOrWhiteSpace(header_mobile_logo__top) ? header_mobile_logo__top + "px" : "auto"; 500 501 string header_mobile_logo__left = mc.HeaderConfiguration.LogoMobileLeft.ToString(); 502 header_mobile_logo__left = !string.IsNullOrWhiteSpace(header_mobile_logo__left) ? header_mobile_logo__left + "px" : "auto"; 503 504 string header_mobile_logo__height = mc.HeaderConfiguration.LogoMobileHeight.ToString(); 505 header_mobile_logo__height = !string.IsNullOrWhiteSpace(header_mobile_logo__height) && header_mobile_logo__height != "0" ? header_mobile_logo__height + "px" : "auto"; 506 507 string header_mobile_logo__width = mc.HeaderConfiguration.LogoMobileWidth.ToString(); 508 header_mobile_logo__width = !string.IsNullOrWhiteSpace(header_mobile_logo__width) && header_mobile_logo__width != "0" ? header_mobile_logo__width + "px" : "auto"; 509 510 string header_mobile__logo = mc.HeaderConfiguration.LogoMobileImage.ToString(); 511 512 // Bottom 513 514 /*** General settings ***/ 515 string header_bottom__Color = colorService.GetHexColor(Pageview.AreaID, mc.HeaderConfiguration.BottomColor.ToString()); 516 string header_bottom__BackgroundColor = colorService.GetHexColor(Pageview.AreaID, mc.HeaderConfiguration.BottomBackgroundColor.ToString()); 517 518 519 // Stickyheader 520 521 /*** display ***/ 522 bool header_stickyheader_top_bar__display = mc.HeaderConfiguration.StickyheaderTopBarDisplay.ToString() == "True" ? true : false; 523 bool header_stickyheader_middle_bar__display = mc.HeaderConfiguration.StickyheaderMiddleBarDisplay.ToString() == "True" ? true : false; 524 bool header_stickyheader_bottom_bar__display = mc.HeaderConfiguration.StickyheaderBottomBarDisplay.ToString() == "True" ? true : false; 525 526 /*** Stickyheader general Settings ***/ 527 string header_stickyheader_color = colorService.GetHexColor(Pageview.AreaID, mc.HeaderConfiguration.StickyheaderColor.ToString()); 528 string header_stickyheader_background_color = colorService.GetHexColor(Pageview.AreaID, mc.HeaderConfiguration.StickyheaderBackgroundColor.ToString()); 529 530 531 /*** Stickyheader logo Settings ***/ 532 string header_stickyheader_logo__top = mc.HeaderConfiguration.LogoStickyheaderTop.ToString(); 533 header_stickyheader_logo__top = !string.IsNullOrWhiteSpace(header_stickyheader_logo__top) ? header_stickyheader_logo__top + "px" : "auto"; 534 535 string header_stickyheader_logo__left = mc.HeaderConfiguration.LogoStickyheaderLeft.ToString(); 536 header_stickyheader_logo__left = !string.IsNullOrWhiteSpace(header_stickyheader_logo__left) ? header_stickyheader_logo__left + "px" : "auto"; 537 538 string header_stickyheader_logo__width = mc.HeaderConfiguration.LogoStickyheaderWidth.ToString(); 539 header_stickyheader_logo__width = !string.IsNullOrWhiteSpace(header_stickyheader_logo__width) && header_stickyheader_logo__width != "0" ? header_stickyheader_logo__width + "px" : "auto"; 540 541 string header_stickyheader_logo__height = mc.HeaderConfiguration.LogoStickyheaderHeight.ToString(); 542 header_stickyheader_logo__height = !string.IsNullOrWhiteSpace(header_stickyheader_logo__height) && header_stickyheader_logo__height != "0" ? header_stickyheader_logo__height + "px" : "auto"; 543 544 string header_desktop_stickyheader__logo = mc.HeaderConfiguration.LogoStickyheaderImage.ToString(); 545 546 /*********** Footer ***********/ 547 548 /*** General Setting ***/ 549 bool header__main_menu_display = true; 550 bool header__main_cta_button_display = true; 551 bool header__main_menu_custom_display = true; 552 553 bool header__main_search_display = true; 554 bool header__main_mainmenu_display = true; 555 bool header__bottom_mainmenu_display = true; 556 557 558 /*** Searchbar ***/ 559 560 string search_bar__max_width = HeaderConfiguration.SearchbarMaxWidth.ToString() != "0" ? HeaderConfiguration.SearchbarMaxWidth + "px" : "none"; 561 562 int SearchPageID = Bluedesk.Tools.DynamicWeb.Generic.PageHelper.GetPageIDByNavigationTag("searchresults", Pageview.AreaID); 563 var SearchPlaceholder = Translate("Searchbox.PlaceholderValue", "Search..."); 564 var SearchPlaceholderHover = Translate("Search.PlaceholderValue2", "Zoekt u misschien een ...?"); 565 var SearchPrefill = Dynamicweb.Context.Current.Request["q"]; 566 var SearchboxClass = !string.IsNullOrWhiteSpace(SearchPrefill) ? "open" : ""; 567 var SearchtoggleClass = !string.IsNullOrWhiteSpace(SearchPrefill) ? "close" : ""; 568 569 // cp = currentpage 570 var cp_default = System.Web.HttpContext.Current.Items["defaultActive"]; 571 var cp_productOverview = System.Web.HttpContext.Current.Items["productOverviewActive"]; 572 var cp_productDetail = System.Web.HttpContext.Current.Items["productDetailActive"]; 573 574 string stickyHeaderCTAText = websitesettings.Sticky_header_cta_text; 575 string stickyHeaderCTALink = websitesettings.Sticky_header_cta_link; 576 577 string stickyHeaderCTAIcon = websitesettings.Sticky_header_cta_icon; 578 string stickyHeaderCTAIconClass = (!string.IsNullOrWhiteSpace(stickyHeaderCTAIcon)) ? stickyHeaderCTAIcon : "fal fa-shopping-cart"; 579 580 string stickyLogo = websitesettings.StickyLogo; 581 582 string PageTypeClass = ""; 583 584 if (cp_productDetail != null && (bool)cp_productDetail) 585 { 586 PageTypeClass = "productDetail "; 587 } 588 else if (cp_productOverview != null && (bool)cp_productOverview) 589 { 590 PageTypeClass = "productOverview "; 591 } 592 593 string headerMainMenu_buttonLoginUrl = ""; 594 string headerMainMenu_buttonLoginLabel = ""; 595 string headerMainMenu_buttonLoginClass = ""; 596 597 // Set logged in status for header main menu button 598 if (Pageview.User == null) 599 { 600 headerMainMenu_buttonLoginUrl = "javascript:void(0);"; 601 headerMainMenu_buttonLoginLabel = Translate("User.Login", "Login"); 602 headerMainMenu_buttonLoginClass = "topmenu__link--login"; 603 } 604 else 605 { 606 headerMainMenu_buttonLoginUrl = "/Admin/Public/ExtranetLogoff.aspx?ID=" + Pageview.Page.ID; 607 headerMainMenu_buttonLoginLabel = Translate("User.Logout", "Logout"); 608 headerMainMenu_buttonLoginClass = ""; 609 } 610 611 string mainmenu_sublinks_padding = "25px"; 612 613 /*** Code Dump *** 614 615 // var masterconfig = Services.Pages.GetPageByNavigationTag(Pageview.AreaID, "MasterConfig"); 616 // var headerconfig = Services.Items.GetItem("HeaderConfiguration", masterconfig.Item["HeaderConfiguration"].ToString()); 617 618 // bool header__main_search_display = headerconfig["HeaderMainSearchDisplay"].ToString() == "True" ? true : false; 619 // bool header__main_mainmenu_display = headerconfig["HeaderMainMainmenuDisplay"].ToString() == "True" ? true : false; 620 // bool header__bottom_mainmenu_display = headerconfig["HeaderBottomMainmenuDisplay"].ToString() == "True" ? true : false; 621 622 // string header_main_custom_menu__Color = colorService.GetHexColor(Pageview.AreaID, headerconfig["HeaderMainCustomButtonsColor"].ToString()); 623 // string header_main_custom_menu__BackgroundColor = colorService.GetHexColor(Pageview.AreaID, headerconfig["HeaderMainCustomButtonsBackgroundColor"].ToString()); 624 625 // string header_bottom_mainmenu__Color = colorService.GetHexColor(Pageview.AreaID, headerconfig["HeaderBottomMainmenuColor"].ToString()); 626 // string header_bottom_mainmenu__BackgroundColor = colorService.GetHexColor(Pageview.AreaID, headerconfig["HeaderBottomMainmenuBackgroundColor"].ToString()); 627 628 // string header_stickyheader_mainmenu__BackgroundColor = colorService.GetHexColor(Pageview.AreaID, headerconfig["HeaderStickyheaderMainmenuBackgroundColor"].ToString()); 629 630 ******************/ 631 632 var AddedMenu = RenderNavigation( 633 new 634 { 635 StartLevel = 1, 636 EndLevel = 4, 637 ParentTag = "topmenu-nav", 638 blockclass = "addedmenu", 639 Template = "AddedNavigation.xslt", 640 expandmode = "all" 641 }); 642 643 //websitesettings.Review_URL 644 //websitesettings.Review_Name 645 //websitesettings.Review_Best_Rating 646 //websitesettings.Review_Worst_Rating 647 648 var ReviewRatingValue = cs.Review_Rating_Value != null ? cs.Review_Rating_Value : ""; 649 string ReviewCompanyRating = !string.IsNullOrWhiteSpace(cs.Review_Rating_Value) ? (double.Parse(ReviewRatingValue) * 10) + "%" : ""; 650 651 bool headerTransparent = Pageview.Page.PropertyItem != null && Pageview.Page.PropertyItem["HeaderTransparent"] != null ? Convert.ToBoolean(Pageview.Page.PropertyItem["HeaderTransparent"]) : false; 652 653 string cssHeaderTransparent = headerTransparent ? "transparent " : ""; 654 655 string AddToCartButtonBackgroundColor = EcommerceConfiguration.AddToCartButtonBackgroundColor; 656 657 if (!string.IsNullOrWhiteSpace(AddToCartButtonBackgroundColor)) 658 { 659 AddToCartButtonBackgroundColor = !AddToCartButtonBackgroundColor.Contains("#") ? colorService.GetHexColor(Pageview.AreaID, AddToCartButtonBackgroundColor) : AddToCartButtonBackgroundColor; 660 } 661 662 } 663 664 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel> 665 @using Dynamicweb; 666 @using Dynamicweb.Content.Items; 667 668 @functions { 669 670 Dictionary<string, bool> GetDisplayBoolArray(string Position) 671 { 672 673 bool top = false; 674 bool middle = false; 675 bool bottom = false; 676 677 switch (Position) 678 { 679 case "top-bar": 680 top = true; 681 break; 682 case "middle-bar": 683 middle = true; 684 break; 685 case "bottom-bar": 686 bottom = true; 687 break; 688 } 689 690 Dictionary<string, bool> header__position = new Dictionary<string, bool>() 691 { 692 { "top" , top }, 693 { "middle" , middle }, 694 { "bottom" , bottom } 695 }; 696 697 return header__position; 698 } 699 700 } 701 702 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel> 703 @using Dynamicweb; 704 @using Dynamicweb.Content.Items; 705 706 @helper RenderHeaderBackground(string BackgroundImage) 707 { 708 <figure class="headerNew__middle-background-container"> 709 @if (!string.IsNullOrWhiteSpace(BackgroundImage)) 710 { 711 <img src="@BackgroundImage" alt="" /> 712 } 713 </figure> 714 } 715 716 @helper RenderHelperSearchBox(string SearchPrefill, string SearchPlaceholder, int SearchPageID) 717 { 718 <form class="searchbox__form" method="get" action="/Default.aspx" style="display: flex; flex-grow: 1;"> 719 <input type="text" name="q" value="@SearchPrefill" class="searchbox__input" placeholder="@SearchPlaceholder" aria-label="Search through site content" style="display: flex; flex-grow: 1;" /> 720 <div class="searchbox__button"> 721 <button type="submit" class="searchbox__form__submit icon icon--medium icon__search input__icon" aria-label="Search"> 722 <i class="fal fa-search"></i> 723 <label style="position: absolute; bottom: 0px;">Zoeken</label> 724 </button> 725 </div> 726 <input type="hidden" name="ID" value="@SearchPageID" /> 727 </form> 728 } 729 730 @helper RenderReview(string ReviewRatingValue) 731 { 732 <section class="reviews"> 733 <div class="reviews__indicator"> 734 <div class="reviews__indicator-progressbar"></div> 735 <ul class="reviews__indicator-star-list"> 736 <li class="reviews__indicator-star-list-item"></li> 737 <li class="reviews__indicator-star-list-item"></li> 738 <li class="reviews__indicator-star-list-item"></li> 739 <li class="reviews__indicator-star-list-item"></li> 740 <li class="reviews__indicator-star-list-item"></li> 741 </ul> 742 </div> 743 744 <label class="reviews__label">@ReviewRatingValue</label> 745 </section> 746 } 747 748 @helper RenderSocialLink(string socialLink, string socialName) 749 { 750 if (!string.IsNullOrWhiteSpace(socialLink)) 751 { 752 <a href="@socialLink" target="_blank" title="@socialName" class="footer__social"><i class="fab fa-@socialName"></i></a> 753 } 754 } 755 756 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel> 757 @using Dynamicweb; 758 @using Dynamicweb.Content.Items; 759 760 @SnippetStart("HeaderLogoDesktop") 761  762 763 <a href="/" class="flex items-center"> 764 <img class="header__logo" src="@logo" alt="Logo" width="400" height="200"> 765 </a> 766 767  768 @SnippetEnd("HeaderLogoDesktop") 769 770 @SnippetStart("HeaderBackground") 771 772 <figure class="mc-header__main-background-container"> 773 @if (!string.IsNullOrWhiteSpace(header_main__BackgroundImage)) 774 { 775 <img src="@header_main__BackgroundImage" alt="" /> 776 } 777 </figure> 778 779 @SnippetEnd("HeaderBackground") 780 781 @SnippetStart("HeaderLogo") 782 783 <figure class="mc-header__logo"> 784 @{var logoLinkToolsHeaderSnippets = "/Default.aspx?ID=" + @GetPageIdByNavigationTag("LogoLinkTools");} 785 <a href="@logoLinkToolsHeaderSnippets" aria-label="Logo"> 786 @if (!string.IsNullOrWhiteSpace(header_desktop__logo)) 787 { 788 <img class="mc-header__logo-image" src="@header_desktop__logo" alt="" /> 789 <img class="mc-header__logo-image stickyheader" src="@header_desktop_stickyheader__logo" alt="" /> 790 } 791 else 792 { 793 <img class="mc-header__logo-image" src="@logo" alt="" /> 794 } 795 </a> 796 </figure> 797 798 @SnippetEnd("HeaderLogo") 799 800 @SnippetStart("HeaderCTAButton") 801 802 @if (!string.IsNullOrWhiteSpace(stickyHeaderCTAText) && header__main_cta_button_display) 803 { 804 <a href="@stickyHeaderCTALink" class="btn stickymenu__cta-btn mc-header__main-CTAbutton"> 805 <span class="btn__text stickymenu__cta-btn-label">@stickyHeaderCTAText</span> 806 <i class="btn__icon @stickyHeaderCTAIconClass stickymenu__cta-btn-icon"></i> 807 </a> 808 } 809 810 @SnippetEnd("HeaderCTAButton") 811 812 @SnippetStart("HeaderMainAddedMenu") 813 814 @if (header__added_menu_position["middle"]) 815 { 816 <ul class="addedmenu">@AddedMenu</ul> 817 } 818 819 @SnippetEnd("HeaderMainAddedMenu") 820 821  822  823  824 825 @SnippetStart("HeaderAddedMenu") 826 827 <ul class="addedmenu">@AddedMenu</ul> 828 829 @SnippetEnd("HeaderAddedMenu") 830 831 @SnippetStart("HeaderCustomTemplate") 832 833 <div class="mc-header__main-custom-template"> 834 @header__CustomTemplate 835 </div> 836 837 @SnippetEnd("HeaderCustomTemplate") 838 839 @SnippetStart("HeaderShoppingcart") 840 841 <a href="#" class="mc-header__main-menu-link app-shopping-cart" data-cart-location="header-desktop"> 842 <i class="fal fa-shopping-cart"></i> 843 <label>@Translate("Shoppingcart", "Shoppingcart")</label> 844 </a> 845 846 @SnippetEnd("HeaderShoppingcart") 847 848 @SnippetStart("HeaderLogin") 849 850 <a href="@headerMainMenu_buttonLoginUrl" class="mc-header__main-menu-link @headerMainMenu_buttonLoginClass" aria-label="@headerMainMenu_buttonLoginLabel"> 851 <i class="fal fa-user"></i> 852 <label>@headerMainMenu_buttonLoginLabel</label> 853 </a> 854 855 @SnippetEnd("HeaderLogin") 856 857  858  859  860 861 @SnippetStart("HeaderLanguage") 862 863 @if (header__langauage_switch_position["middle"] && LanguageSwitcher.GetLanguages().Count > 1) 864 { 865 866 <div class="top-toggles"> 867 <div class="language"> 868 <div class="language-dropdown"> 869 <button class="language-dropdown__toggle mc-header__main-menu-link @headerMainMenu_buttonLoginClass" type="button" aria-label="Change language"> 870 <i class="fal fa-globe"></i> 871 @*<span class="flag flag-icon flag-icon-@Pageview.Area.Culture.Substring(3,2).ToLower()"></span>*@ 872 @*<i class="fal fa-chevron-down"></i>*@ 873 </button> 874 <ul class="language-dropdown__options"> 875 @foreach (var l in LanguageSwitcher.GetLanguages()) 876 { 877 string languageName = @l.NativeName.ToString().Split('(')[0]; 878 <li class="language-dropdown__item"> 879 <a href='@l.Url' title="@languageName"> 880 <span class="flag-icon flag-icon-@l.CountryCode"></span> 881 <span class="language-dropdown__item-code">@languageName</span> 882 </a> 883 </li> 884 } 885 </ul> 886 </div> 887 </div> 888 </div> 889 890 } 891 892 @SnippetEnd("HeaderLanguage") 893 894 @SnippetStart("HeaderSearchbox") 895 896 @if (header__main_menu_display == true) 897 { 898 899 if (header__main_search_display == true && header__search_position["middle"]) 900 { 901 if (enableAdvancedSearch) 902 { 903 904 <script> 905 906 var openSearchBar = true; 907 908 function toggleSearchButton() { 909 910 var SearchButtonDOM = document.querySelector('.search__visibility-toggle-icon').classList; 911 var SearchWrapperDOM = document.querySelector('.searchbox__wrapper'); 912 913 914 if (openSearchBar){ SearchButtonDOM.remove('fa-search'); SearchButtonDOM.add('fa-times') } else { SearchButtonDOM.remove('fa-times'); SearchButtonDOM.add('fa-search'); } 915 SearchWrapperDOM.style.display = openSearchBar ? "flex" : "none"; 916 917 document.querySelector('.mainmenu').style.display = openSearchBar ? "none" : "flex"; 918 document.querySelector('.mc-header__main-custom-template').style.display = openSearchBar ? "none" : "flex"; 919 document.querySelector('.mc-header__main-menu').style.width = openSearchBar ? "calc(100% - @header_logo__width - @header_logo__left - 25px)" : "auto"; 920 921 openSearchBar = openSearchBar ? false : true; 922 923 } 924 925 </script> 926 927 <div id="advanced-search"></div> 928 <a href="javascript:void(0)" onclick="toggleSearchButton()" class="mc-header__main-menu-link search__visibility-toggle"> 929 <i class="fal fa-search search__visibility-toggle-icon"></i> 930 @*<svg id="Laag_1" data-name="Laag 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250"> 931 <circle class="cls-1" cx="101.25" cy="101.25" r="43.64" /> 932 <path class="cls-1" d="M80.53 80.53a29.31 29.31 0 0 0 0 41.44M144.31 144.31l-12.12-12.12M137.93 150.69 176.25 189c4 4 9.59 4.74 13.54.78h0c4-3.95 3.17-9.58-.78-13.54l-38.32-38.32-6.38 6.38" /> 933 </svg>*@ 934 <label>Search</label> 935 </a> 936 937 } 938 else 939 { 940 @RenderHelperSearchBox(SearchPrefill, SearchPlaceholder, SearchPageID) 941 } 942 } 943 944 } 945 @SnippetEnd("HeaderSearchbox") 946 947 @SnippetStart("CallMeBackSnippet") 948  949 @if (enableCallMeBack) 950 { 951 952 <div class="header__cta"> 953 954 @if (!isOffline) 955 { 956 957 <a href="tel:@formattedPhonenumber" class="header__cta--phone phone-cta"> 958 <p class="phone-cta__number"><i class="fas fa-phone-alt"></i> @Translate("Header.CallUsOn", "Call us on")<span>@phonenumber</span></p> 959 <div class="phone-cta__availability__wrapper"> 960 <i class="fas fa-circle phone-cta__availability__icon"></i> 961 <p class="phone-cta__availability__description">@Translate("Header.AvailableUntill", "We are available until") @availableToHour</p> 962 </div> 963 </a> 964 965 } 966 else 967 { 968 969 <div class="header__cta--callmeback callmeback-cta"> 970 <a href="@callmebackformlink" class="btn btn__outline btn--callmeback"> 971 <span class="btn__text">@Translate("Header.CallMeBack", "Call me back")</span> 972 <i class="btn__icon fas fa-phone"></i> 973 </a> 974 </div> 975 976 } 977 </div> 978 979 } 980 981  982 @SnippetEnd("CallMeBackSnippet") 983 984 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel> 985 @using Dynamicweb; 986 @using Dynamicweb.Content.Items; 987 988 <script> 989 function setImagesSizes(Classname) { 990 var Images = document.querySelectorAll(Classname); 991 for (var index = 0; index < Images.length; index++) { 992 if(!Images[index].hasAttribute("height")) { 993 Images[index].setAttribute("height", Images[index].offsetHeight); 994 } 995 if(!Images[index].hasAttribute("width")) { 996 Images[index].setAttribute("width", Images[index].offsetWidth); 997 } 998 } 999 } 1000 1001 window.addEventListener('load', function () { 1002 setImagesSizes("img"); 1003 setImagesSizes(".mc-header__logo-image"); 1004 }); 1005 </script> 1006 1007 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel> 1008 @using Dynamicweb; 1009 @using Dynamicweb.Content.Items; 1010 @using Bluedesk.DynamicWeb.ItemTypes.Settings.Configuration; 1011 1012 @{ 1013 string header_top__height = header__top_bar_display ? "50px" : "0px"; 1014 string header_bottom__height = header__bottom_bar_display ? "50px" : "0px"; 1015 } 1016 1017 <style> 1018 1019 /*** Header Base Configuration ***/ 1020 1021 1022 /*** Stickyheader***/ 1023 /*** Stickyheader Structure ***/ 1024 1025 1026 /*** Stickyheader Base Configuration ***/ 1027 1028 1029 .stickyheader .mc-header__hamburger-menu, 1030 .megamenu-wrapper.stickyheader { 1031 @if (header_main__height != "auto") 1032 { 1033 <text> top: calc(@header_main__height + @header_bottom__height + 20px); </text> 1034 } 1035 } 1036 1037 @if(header_main__height != "auto") 1038 { 1039 <text> 1040 .mc-header__hamburger-menu { 1041 top: calc(@header_main__height + @header_top__height); 1042 } 1043 </text> 1044 } 1045 1046 @if (header_stickyheader_top_bar__display != true) { 1047 <text> 1048 .stickyheader .mc-header__topmenu{ height: 0; } 1049 </text> 1050 } 1051 @if (header_stickyheader_middle_bar__display != true) { 1052 <text> 1053 .stickyheader .mc-header__main { height: 0; } 1054 </text> 1055 } 1056 @if (header_stickyheader_bottom_bar__display != true) { 1057 <text> 1058 .stickyheader .mc-header__bottom { height: 0; } 1059 </text> 1060 } 1061 1062 .mainmenu__list-container { 1063 height: 100%; 1064 } 1065 1066 .mc-header__main-menu { 1067 width: auto; 1068 } 1069 1070 @if (header__mainmenu_position["top"]) 1071 { 1072 <text> </text> 1073 } 1074 @if (header__mainmenu_position["middle"]) 1075 { 1076 <text> </text> 1077 } 1078 1079 @if (header__mainmenu_position["bottom"]) 1080 { 1081 <text> </text> 1082 } 1083 1084 .mc-header--desktop.mc-header.transparent { 1085 position: absolute; 1086 background-color: transparent; 1087 } 1088 1089 .mc-header--desktop.mc-header.transparent .mc-header__topmenu, 1090 .mc-header--desktop.mc-header.transparent .mc-header__main, 1091 .mc-header--desktop.mc-header.transparent .mc-header__bottom { 1092 background-color: transparent; 1093 color: white !important; 1094 } 1095 1096 .mc-header--desktop.mc-header.transparent .mainmenu, 1097 .mc-header--desktop.mc-header.transparent .mainmenu__link, 1098 .mc-header--desktop.mc-header.transparent .addedmenu__link, 1099 .mc-header--desktop.mc-header.transparent .usp__item { 1100 background-color: transparent !important; 1101 color: white !important; 1102 } 1103 1104 1105 1106 .mc-header__main-background-container { 1107 position: absolute; 1108 top:0; 1109 left:0; 1110 height: 100%; 1111 width: 100%; 1112 } 1113 1114 .stickyheader .mainmenu{ 1115 background-color : @header_stickyheader_background_color; 1116 color : @header_stickyheader_color; 1117 } 1118 1119 .productDetail.stickyheader .mc-header__bottom { 1120 background-color: white; 1121 } 1122 1123 .stickyheader .mainmenu__label { 1124 color: @header_stickyheader_color !important; 1125 } 1126 1127 .stickyheader .mc-header__bottom { 1128 min-height: unset; 1129 background-color: @header_bottom__BackgroundColor; 1130 } 1131 1132 .mc-header__logo { 1133 top: @header_logo__top !important; 1134 left: @header_logo__left !important; 1135 margin: 0; 1136 } 1137 1138 .mc-header__logo, .mc-header__logo img { 1139 height: @header_logo__height !important; 1140 width: @header_logo__width !important; 1141 } 1142 1143 .stickyheader .mc-header__stickyheader-image, 1144 .stickyheader .headerNew__logo, 1145 .stickyheader .headerNew__logo img { 1146 position: relative; 1147 top : @header_stickyheader_logo__top !important; 1148 left : @header_stickyheader_logo__left !important; 1149 height : @header_stickyheader_logo__height !important; 1150 width : @header_stickyheader_logo__width !important; 1151 } 1152 1153 1154 1155 </style> 1156 @if (!string.IsNullOrWhiteSpace(header_desktop_stickyheader__logo)) 1157 { 1158 <style> 1159 .headerNew__logo-image { 1160 display: flex; 1161 } 1162 1163 .headerNew__logo-image.stickyheader { 1164 display: none; 1165 } 1166 1167 .stickyheader .headerNew__logo-image { 1168 display: none; 1169 } 1170 1171 .stickyheader .headerNew__logo-image.stickyheader { 1172 display: flex; 1173 } 1174 </style> 1175 } 1176 <style> 1177 1178 .mainmenu__link:hover { 1179 background-color: #CCC !important; 1180 } 1181 1182 @@media screen and (max-width: 992px) { 1183 1184 .header.header--mobile .header__logo { 1185 top : @header_mobile_logo__top; 1186 height : @header_mobile_logo__height; 1187 width : @header_mobile_logo__width; 1188 } 1189 1190 } 1191 1192 @@media screen and (min-width: 992px){ 1193 1194 .mainmenu .mainmenu__link { 1195 background-color: @header_mainmenu__BackgroundColor !important; 1196 text-transform: @header_mainmenu__textTransform; 1197 } 1198 1199 .mainmenu .mainmenu__link .mainmenu__label { 1200 color: @header_mainmenu__Color !important; 1201 } 1202 1203 .mainmenu .mainmenu__link:hover { 1204 background-color: @header_mainmenu__BackgroundColorHover !important; 1205 } 1206 1207 .mainmenu .mainmenu__link:hover .mainmenu__label { 1208 color: @header_mainmenu__ColorHover !important; 1209 } 1210 1211 .mainmenu .mainmenu__link--active { 1212 background-color: @header_mainmenu__BackgroundColorActive !important; 1213 } 1214 1215 .mainmenu .mainmenu__link--active .mainmenu__label { 1216 color: @header_mainmenu__ColorActive !important; 1217 } 1218 1219 .mc-header__topmenu-container, 1220 .mc-header__main-container, 1221 .mc-header__bottom-container { 1222 width: @header__ContainerSize; 1223 } 1224 1225 } 1226 1227 @@media screen and (min-width: 992px) { 1228 .mc-header__topmenu-container { 1229 min-width: 1200px; 1230 } 1231 1232 .mc-header__topmenu-container, 1233 .mc-header__main-container, 1234 .mc-header__bottom-container { 1235 position: relative; 1236 display: flex; 1237 height: inherit; 1238 margin: 0 auto; 1239 } 1240 } 1241 1242 .sublinks { 1243 padding: @mainmenu_sublinks_padding; 1244 1245 @if (header__mainmenu_position["top"]) 1246 { 1247 <text> top: 50px; </text> 1248 } 1249 @if (header__mainmenu_position["middle"]) 1250 { 1251 <text> top: 75px; </text> 1252 } 1253 } 1254 1255 .mainmenu__item:first-child { 1256 display: none; 1257 } 1258 1259 .mc-header .mc-header__hamburger-menu { 1260 position: fixed; 1261 } 1262 1263 </style> 1264 1265 @* 1266 1267 /**** CODE DUMP ****/ 1268 1269 .headerNew .searchbox .icon__search, 1270 .headerNew__main-menu .searchbox__form__submit, 1271 .headerNew__main-menu .topmenu__shoppingcart, 1272 .headerNew__main-menu-link{ 1273 color: @header_main_custom_menu__Color; 1274 background-color: @header_main_custom_menu__BackgroundColor; 1275 } 1276 1277 .headerNew__bottom .mainmenu { 1278 background-color: @header_bottom_mainmenu__BackgroundColor; 1279 } 1280 1281 .headerNew__bottom .mainmenu__label { 1282 color: @header_bottom_mainmenu__Color !important; 1283 } 1284 1285 *@ 1286 1287 <style> 1288 1289 .mc-header.stickyheader { 1290 height: auto !important; 1291 box-shadow: 10px 10px 10px rgb(153 153 255 / 10%); 1292 } 1293 1294 .mc-header__stickyheader { 1295 display: flex; 1296 flex-direction: row; 1297 flex-grow: 1; 1298 justify-content: space-between; 1299 align-items: center; 1300 max-height: 0; 1301 width: 100%; 1302 background-color: white; 1303 overflow: unset; 1304 } 1305 1306 .mc-header__stickyheader *{ 1307 opacity: 0; 1308 } 1309 1310 .stickyheader .mc-header__stickyheader * { 1311 opacity: 1; 1312 /* transition: all 0.5s ease-in; */ 1313 /* transition-delay: 0.5s; */ 1314 } 1315 1316 .mc-header__stickyheader-container { 1317 position: relative; 1318 display: flex; 1319 flex-grow: 1; 1320 } 1321 1322 .mc-header__stickyheader-image { 1323 top: @header_stickyheader_logo__top; 1324 left: @header_stickyheader_logo__left; 1325 height: @header_stickyheader_logo__height; 1326 width: @header_stickyheader_logo__width; 1327 } 1328 1329 .stickyheader .mc-header__stickyheader { 1330 max-height: 75px; 1331 /* transition: all 0.5s ease-in; */ 1332 } 1333 1334 /* 1335 .stickyheader .mc-header__topmenu, 1336 .stickyheader .mc-header__main, 1337 .stickyheader .mc-header__bottom { 1338 display: none; 1339 } 1340 */ 1341 1342 </style> 1343 1344 <style> 1345 1346 /*** Header ***/ 1347 /*** Header Structure ***/ 1348 1349 .mc-header { 1350 background-color: @header__BackgroundColor; 1351 } 1352 1353 .mc-header__topmenu { 1354 background-color : @header_top__BackgroundColor; 1355 color : @header_top__Color; 1356 } 1357 1358 .mc-header__topmenu-container { 1359 width : @header__ContainerSize; 1360 justify-content : space-between; 1361 } 1362 1363 .mc-header__main { 1364 1365 @if (!string.IsNullOrWhiteSpace(header_main__height)) { 1366 <text>height : @header_main__height ;</text> 1367 } 1368 1369 background-color : @header_main__BackgroundColor; 1370 @header_main__BackgroundGradient 1371 color : @header_main__Color; 1372 } 1373 1374 .mc-header__main-container { 1375 width : @header__ContainerSize; 1376 justify-content : space-between; 1377 } 1378 1379 .mc-header__bottom { 1380 background-color : @header_bottom__BackgroundColor; 1381 color : @header_bottom__Color; 1382 } 1383 1384 .mc-header__bottom-container { 1385 width : @header__ContainerSize; 1386 justify-content : space-between; 1387 } 1388 1389 .mc-header__stickyheader { 1390 background-color : @StickyheaderConfiguration.BackgroundColor; 1391 color : @StickyheaderConfiguration.Color; 1392 } 1393 1394 .mc-header__stickyheader-container { 1395 width : @header__ContainerSize; 1396 justify-content : space-between; 1397 } 1398 1399 /* 1400 .stickyheader .mc-header__topmenu, 1401 .stickyheader .mc-header__main, 1402 .stickyheader .mc-header__bottom { 1403 display: none; 1404 } 1405 */ 1406 1407 /*** Mainmenu ***/ 1408 1409 .mainmenu__label { 1410 font-family: @header_mainmenu__FontFamily; 1411 font-size: @header_mainmenu__FontSize; 1412 font-weight: @header_mainmenu__FontWeight; 1413 text-transform: @header_mainmenu__FontStyle; 1414 } 1415 1416 .stickyheader .mainmenu__label { 1417 color: @header_stickyheader_color; 1418 } 1419 1420 </style> 1421 <style> 1422 1423 .stickyheader .searchbox__form { 1424 height: 100%; 1425 } 1426 1427 .section--center { 1428 display: flex; 1429 flex-grow: 1; 1430 color: white; 1431 align-items: center; 1432 justify-content: space-around; 1433 } 1434 1435 .section--center * { 1436 flex-grow: 0; 1437 } 1438 1439 1440 .section--right { 1441 display: flex; 1442 flex-grow: 0; 1443 justify-content: center; 1444 align-items: center; 1445 } 1446 1447 .p-filter { 1448 max-width: 250px; 1449 } 1450 1451 @@media only screen and (min-width: 975px) { 1452 /* styles for browsers larger than 960px; */ 1453 .p-overview__content--is-active { 1454 transform: translateX(250px); 1455 width: calc(100% - 250px); 1456 } 1457 } 1458 </style> 1459 <style> 1460 1461 /*** Search ***/ 1462 1463 .searchbox__input { 1464 color: @header_searchbar__Color !important; 1465 } 1466 1467 .searchbox__input::-webkit-input-placeholder { /* Edge */ 1468 color: @header_searchbar__Color; 1469 } 1470 1471 .searchbox__input:-ms-input-placeholder { /* Internet Explorer 10-11 */ 1472 color: @header_searchbar__Color; 1473 } 1474 1475 .searchbox__input::placeholder { 1476 color: @header_searchbar__Color; 1477 } 1478 1479 .mc-header .mc-header__topmenu .searchbox .icon__search, 1480 .mc-header .mc-header__main .searchbox .icon__search, 1481 .mc-header .mc-header__topmenu .input.form__input.input--text.searchbox__input, 1482 .mc-header .mc-header__main .input.form__input.input--text.searchbox__input { 1483 background-color: @header_searchbar__BackgroundColor !important; 1484 } 1485 1486 .searchbox__input { 1487 background-color: @header_searchbar__BackgroundColor !important; 1488 color: @header_searchbar__Color !important; 1489 } 1490 1491 .searchbox .icon__search { 1492 background-color: @header_searchbar__BackgroundColor; 1493 color: @header_searchbar__Color !important; 1494 } 1495 1496 .searchbox__wrapper { 1497 display: none; 1498 } 1499 1500 .searchbox__input { 1501 border: 1px solid #023B7E !important; 1502 height: 50px; 1503 border-radius: 5px; 1504 } 1505 1506 .searchbox__input:focus { 1507 border-radius: 5px 5px 0 0; 1508 } 1509 1510 .search-results { 1511 border: 1px solid #023B7E !important; 1512 border-radius: 0 0 5px 5px; 1513 box-shadow: 0 0 0 0; 1514 left: -50%; 1515 right: -50%; 1516 } 1517 1518 .mc-header__logo { 1519 margin: 0; 1520 } 1521 1522 .searchbox__form { 1523 height: 50px; 1524 } 1525 1526 .mc-header__main-menu .searchbox__form__submit { 1527 height: 100%; 1528 color: @header__CustomMenuItemColor; 1529 } 1530 1531 .searchbox, 1532 .searchbox__wrapper { 1533 display: flex; 1534 height: 100%; 1535 align-items: center; 1536 } 1537 1538 @if (HeaderConfiguration.SearchbarFullWidth) { 1539 <text> 1540 1541 .searchbox__form { 1542 width: 100%; 1543 } 1544 1545 .searchbox { 1546 flex-grow: 1; 1547 max-width: none; 1548 } 1549 1550 .searchbox__wrapper { 1551 flex-grow: 1; 1552 max-width: @search_bar__max_width; 1553 } 1554 1555 </text> 1556 } 1557 1558 @if (HeaderConfiguration.SearchbarFullHeight) { 1559 <text> 1560 1561 .searchbox__form { 1562 height: 100%; 1563 } 1564 1565 </text> 1566 } 1567 1568 /* clears the 'X' from Internet Explorer */ 1569 input[type=search]::-ms-clear { 1570 display: none; 1571 width: 0; 1572 height: 0; 1573 } 1574 1575 input[type=search]::-ms-reveal { 1576 display: none; 1577 width: 0; 1578 height: 0; 1579 } 1580 1581 /* clears the 'X' from Chrome */ 1582 input[type="search"]::-webkit-search-decoration, 1583 input[type="search"]::-webkit-search-cancel-button, 1584 input[type="search"]::-webkit-search-results-button, 1585 input[type="search"]::-webkit-search-results-decoration { 1586 display: none; 1587 } 1588 1589 .form__input { 1590 min-height: unset; 1591 } 1592 1593 </style> 1594 <style> 1595 1596 .phone-cta__availability__wrapper { 1597 display: flex; 1598 } 1599 1600 @if (GeneralConfiguration.HideCallMeBackAvailability) { 1601 <text> 1602 .phone-cta__availability__wrapper { 1603 display: none; 1604 } 1605 </text> 1606 } 1607 1608 </style> 1609 <style> 1610 1611 /*** E-commerce ***/ 1612 1613 .productdetails__add-to-cart { 1614 background-color: @AddToCartButtonBackgroundColor; 1615 } 1616 </style> 1617 <style> 1618 1619 /**** Custom ****/ 1620 1621 @@media screen and (min-width: 992px){ 1622 /* 1623 .stickyheader .mainmenu .mainmenu__link .mainmenu__label { 1624 color: #666666 !important; 1625 } 1626 */ 1627 1628 .stickyheader .mainmenu .mainmenu__link .mainmenu__label:hover, 1629 .stickyheader .mainmenu .mainmenu__link.mainmenu__link--active .mainmenu__label, 1630 .stickyheader .mainmenu .mainmenu__link.mainmenu__link--active:hover .mainmenu__label{ 1631 color: white !important; 1632 } 1633 } 1634 1635 a.icon.icon--large.topmenu__shoppingcart { 1636 background: white; 1637 color: #666666; 1638 } 1639 1640 .bottombar__button a.icon.icon--large.topmenu__shoppingcart { 1641 background: transparent !important; 1642 color: white !important; 1643 } 1644 a.default-btn { 1645 text-transform: none; 1646 } 1647 1648 .search-results__product-price{ 1649 display : none; 1650 } 1651 1652 .search-results{ 1653 border: 0 !important; 1654 width: 750px !important; 1655 left: -500px !important; 1656 } 1657 1658 .search-results__button{ 1659 display: none; 1660 } 1661 1662 .section--center{ 1663 justify-content: space-between !important; 1664 padding-left: 50px !important; 1665 } 1666 1667 .mc-header .mainmenu__link{ 1668 padding-left: 12px !important; 1669 padding-right: 12px !important; 1670 } 1671 1672 .addedmenu__link { 1673 font-weight: normal !important; 1674 } 1675 1676 .productDetail.stickyheader .mc-header__bottom{ 1677 display: none; 1678 } 1679 1680 .productDetail.stickyheader .stickymenu_product__price--old, 1681 .productDetail.stickyheader .stickymenu_product__price--suffix{ 1682 color: black; 1683 } 1684 1685 .productDetail.stickyheader .mc-header__stickyheader-image{ 1686 display: none; 1687 } 1688 1689 .productDetail.stickyheader .mc-header__stickyheader-container { 1690 width: 100% !important; 1691 max-width: 1200px !important; 1692 margin: 0 auto !important; 1693 } 1694 1695 .productDetail.stickyheader .mini-shoppingcart-list__line span { 1696 color: black; 1697 } 1698 1699 .productDetail.stickyheader .shoppingcart{ 1700 top: 62px; 1701 } 1702 1703 .productDetail.stickyheader .inputstepper__input { 1704 color: black; 1705 } 1706 1707 </style> 1708 1709 1710 1711  1716 1717 @if (cp_productDetail != null && (bool)cp_productDetail) 1718 { 1719 header__stickyheader_display = StickyheaderConfiguration.ProductDetailDisplay; 1720 } 1721 else if (cp_productOverview != null && (bool)cp_productOverview) 1722 { 1723 header__stickyheader_display = StickyheaderConfiguration.ProductOverviewDisplay; 1724 } 1725 else 1726 { 1727 header__stickyheader_display = StickyheaderConfiguration.ContentpageDisplay; 1728 } 1729 1730 <header class="mc-header mc-header--desktop @PageTypeClass @cssHeaderTransparent"> 1731 1732 @if (header__top_bar_display) 1733 { 1734 <nav class="mc-header__topmenu"> 1735 <section class="mc-header__topmenu-container"> 1736 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel> 1737 @using Dynamicweb; 1738 @using Dynamicweb.Content.Items; 1739 1740 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel> 1741 @using Dynamicweb; 1742 @using Dynamicweb.Content.Items; 1743 1744 @{ 1745 int MyAccountPageID = Bluedesk.Tools.DynamicWeb.Generic.PageHelper.GetPageIDByNavigationTag("CustomerProfile", Pageview.AreaID); 1746 } 1747 1748 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel> 1749 @using Dynamicweb; 1750 @using Dynamicweb.Content.Items; 1751 1752 @helper RenderHeaderUSP(string USP_content, string USP_icon) 1753 { 1754 if (!string.IsNullOrWhiteSpace(USP_content)) 1755 { 1756 var usp_icon_class = (!string.IsNullOrWhiteSpace(USP_icon)) ? USP_icon : "fal fa-check"; 1757 1758 <li class="usp__item"> 1759 <i class="@usp_icon_class usp__icon"></i> 1760 <span>@USP_content</span> 1761 </li> 1762 } 1763 } 1764 1765 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel> 1766 @using Dynamicweb; 1767 @using Dynamicweb.Content.Items; 1768 @using KoksGroup.DynamicWeb.ItemTypes.Settings 1769 1770 @SnippetStart("TopmenuDyslexicFont") 1771 1772 @if (enableDyslexicFont) 1773 { 1774 <div class="app-font-toggle" data-standardfont="Maven Pro"></div> 1775 } 1776 1777 @SnippetEnd("TopmenuDyslexicFont") 1778 1779 @SnippetStart("TopmenuReview") 1780 1781 @if(!string.IsNullOrWhiteSpace(ReviewRatingValue)) 1782 { 1783 <li class="topmenu__renderReview">@RenderReview(ReviewRatingValue)</li> 1784 } 1785 1786 @SnippetEnd("TopmenuReview") 1787 1788 @SnippetStart("TopmenuUSPList") 1789 1790 <ul class="usp__list"> 1791 @if (header_USP_top_bar__display == true) 1792 { 1793 <text> 1794 @RenderHeaderUSP(cs.USP_1, cs.USP_1_icon) 1795 @RenderHeaderUSP(cs.USP_2, cs.USP_2_icon) 1796 @RenderHeaderUSP(cs.USP_3, cs.USP_3_icon) 1797 @RenderHeaderUSP(cs.USP_4, cs.USP_4_icon) 1798 @RenderHeaderUSP(cs.USP_5, cs.USP_5_icon) 1799 </text> 1800 } 1801 </ul> 1802 1803 @SnippetEnd("TopmenuUSPList") 1804 1805 @SnippetStart("TopmenuLogin") 1806 1807 @if (Model.CurrentUser.ID != 0 && enableLogin) 1808 { 1809  1810 <li class="topmenu__item quickorder__toggle"> 1811 <a href="/Default.aspx?ID=@MyAccountPageID" class="topmenu__link">@Translate("User.MyAccount", "Dashboard")</a> 1812 </li> 1813 } 1814 1815 @if (enableLogin && header__login_position["top"]) 1816 { 1817 if (Pageview.User == null) 1818 { 1819 <li class="topmenu__item topmenu__login"> 1820 <a href="#" class="topmenu__link topmenu__link--login">@Translate("User.Login", "Login")</a> 1821 </li> 1822 } 1823 else 1824 { 1825 <li class="topmenu__item topmenu__login"> 1826 <a href="/Admin/Public/ExtranetLogoff.aspx?ID=@Pageview.Page.ID" class="topmenu__link">@Translate("User.Logout", "Logout")</a> 1827 </li> 1828 } 1829 } 1830 1831 @SnippetEnd("TopmenuLogin") 1832 1833 @SnippetStart("TopmenuLanguage") 1834 1835 @if (header__langauage_switch_position["top"] && LanguageSwitcher.GetLanguages().Count > 1) 1836 { 1837 <div class="top-toggles"> 1838 <div class="language"> 1839 <div class="language-dropdown"> 1840 <button class="language-dropdown__toggle" type="button" aria-label="Change language"> 1841 <i class="fal fa-globe"></i> 1842  1843 <i class="fal fa-chevron-down"></i> 1844 </button> 1845 <ul class="language-dropdown__options"> 1846 @foreach (var l in LanguageSwitcher.GetLanguages()) 1847 { 1848 if (!l.isActive) 1849 { 1850 string languageName = @l.NativeName.ToString().Split('(')[0]; 1851 <li class="language-dropdown__item"> 1852 <a href='@l.Url' title="@languageName"> 1853 1854 <span class="flag-icon flag-icon-@l.CountryCode"></span> 1855 <span class="language-dropdown__item-code">@languageName</span> 1856 </a> 1857 </li> 1858 } 1859 } 1860 </ul> 1861 </div> 1862 </div> 1863 </div> 1864 } 1865 1866 @SnippetEnd("TopmenuLanguage") 1867 1868 @SnippetStart("TopmenuShoppingcart") 1869 @if (enableShoppingCart && header__shoppingcart_position["top"]) 1870 { 1871 <li class="app-shopping-cart" data-cart-location="header-desktop"></li> 1872 } 1873 @SnippetEnd("TopmenuShoppingcart") 1874 1875 @SnippetStart("TopmenuAddedmenu") 1876 1877 @if (header__added_menu_position["top"]) 1878 { 1879 <li><ul class="addedmenu">@AddedMenu</ul></li> 1880 } 1881 1882 @SnippetEnd("TopmenuAddedmenu") 1883 1884 <style> 1885 1886 .addedmenu a { 1887 color: #445055; 1888 } 1889 </style> 1890 1891 1892 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel> 1893 @using Dynamicweb; 1894 @using Dynamicweb.Content.Items; 1895 1896 <style> 1897 1898 .topmenu-new { 1899 display: flex; 1900 flex-direction: row; 1901 flex-grow: 1; 1902 justify-content: flex-end; 1903 } 1904 1905 .topmenu__renderReview { 1906 display: flex !important; 1907 } 1908 1909 .usp__item { 1910 color: @header_top__USP_text_color; 1911 } 1912 1913 .usp__item svg { 1914 color: @header_top__USP_icon_color; 1915 } 1916 1917 .topmenu__item { 1918 color: red; 1919 min-width: 75px; 1920 border-left: 0; 1921 1922 } 1923 1924 .topmenu__item a { 1925 color: @header_top__link_text_color; 1926 } 1927 1928 </style> 1929 1930 1931 @RenderSnippet("TopmenuUSPList") 1932 1933 <section class="topmenu-new"> 1934 1935 @RenderSnippet("TopmenuDyslexicFont") 1936 1937 @if (header__main_search_display == true && header__search_position["top"]) 1938 { 1939 if (enableAdvancedSearch) 1940 { 1941 <div id="advanced-search"></div> 1942 } 1943 else 1944 { 1945 <form class="searchbox__form" method="get" action="/Default.aspx" style="display: flex; flex-grow: 1;"> 1946 <input type="text" name="q" value="@SearchPrefill" class="searchbox__input" placeholder="@SearchPlaceholder" aria-label="Search through site content" data-placeholder="@SearchPlaceholder" data-hoverplaceholder="@SearchPlaceholderHover" style="display: flex; flex-grow: 1;" /> 1947 <div class="searchbox__button"> 1948 <button type="submit" class="searchbox__form__submit icon icon--medium icon__search input__icon" aria-label="Search"> 1949 <i class="fal fa-search"></i> 1950 </button> 1951 </div> 1952 <input type="hidden" name="ID" value="@SearchPageID" /> 1953 </form> 1954 1955 } 1956 } 1957 1958 <ul class="topmenu__list"> 1959 @RenderSnippet("TopmenuReview") 1960 @RenderSnippet("TopmenuAddedmenu") 1961 @RenderSnippet("TopmenuLogin") 1962 @RenderSnippet("TopmenuShoppingcart") 1963 </ul> 1964 1965 @RenderSnippet("TopmenuLanguage") 1966 1967 </section> 1968 1969 </section> 1970 </nav> 1971 } 1972 1973 @if (header__middle_bar_display) 1974 { 1975 1976 <div class="mc-header__main"> 1977 <section class="mc-header__main-container"> 1978 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel> 1979 @using Dynamicweb; 1980 @using Dynamicweb.Content.Items; 1981 @using Bluedesk.DynamicWeb.ItemTypes.Settings.Configuration; 1982 1983 @RenderSnippet("HeaderBackground") 1984 @RenderSnippet("HeaderLogo") 1985 1986 @if (header__mainmenu_position["middle"]) 1987 { 1988 <nav class="mainmenu"> 1989 1990 @{ 1991 bool enableStickyHeaderMobileMenu = false; 1992 bool enableStickyHeaderPhone = false; 1993 bool enableStickyHeaderSearch = false; 1994 1995 var mainmenu = RenderNavigation(new 1996 { 1997 StartLevel = 1, 1998 EndLevel = 3, 1999 ParentTag = "topnavigation", 2000 expandmode = "all", 2001 blockclass = "mainmenu", 2002 Template = "MainNavigation.xslt" 2003 }); 2004 2005 string tag = ""; 2006 int alternativeRootPageID = !string.IsNullOrWhiteSpace(mc.HeaderConfiguration.AlternativeRootPage) ? Convert.ToInt32(mc.HeaderConfiguration.AlternativeRootPage) : 0; 2007 2008 if (alternativeRootPageID > 0 && Model.TopPage.ID == alternativeRootPageID) 2009 { 2010 tag = alternativeRootPageID.ToString(); 2011 mainmenu = RenderNavigation(new 2012 { 2013 StartLevel = 1, 2014 EndLevel = 3, 2015 parentid = alternativeRootPageID, 2016 expandmode = "all", 2017 blockclass = "mainmenu", 2018 Template = "MainNavigation.xslt" 2019 }); 2020 } 2021 2022 } 2023 2024 <header-menu id="header-menu" 2025 data-enable-quickorder="@enableQuickOrder" 2026 data-enable-login="@enableLogin" 2027 data-enable-shopping-cart="@enableShoppingCart" 2028 data-user-logged-in="@userLoggedIn" 2029 data-tag="@tag" 2030 style=" flex-grow: 1 !important;"> 2031 2032 <div class="mainmenu__list-container"> 2033 2034  2035 <ul class="mainmenu__list"> 2036 @mainmenu 2037 </ul> 2038 2039 </div> 2040 2041 </header-menu> 2042 2043 <nav class="mainmenu__list-item--icon-list"> 2044 2045 @if (enableStickyHeaderSearch) 2046 { 2047 <a class="button mainmenu__list-item--icon"> 2048 <input type="text" placeholder="vul hier uw zoekterm in... " class="search__input" /> 2049 <i class="fal fa-search" onclick="ToggleSearch();"></i> 2050 </a> 2051 } 2052 2053 @if (enableStickyHeaderPhone) 2054 { 2055 <a class="button mainmenu__list-item--icon"> 2056 <i class="fal fa-phone"></i> 2057 </a> 2058 } 2059 2060 @if (enableLogin && header__shoppingcart_position["bottom"]) 2061 { 2062 <a class="button mainmenu__list-item--icon" onclick="openLoginPopup();"> 2063 <i class="fal fa-user"></i> 2064 </a> 2065 } 2066 2067 @if (enableShoppingCart && header__shoppingcart_position["bottom"]) 2068 { 2069 <div class="button mainmenu__list-item--icon"> 2070 <a href="#" class="app-shopping-cart" data-cart-location="header-desktop"> 2071 <i class="fal fa-shopping-cart"></i> 2072 <label>Shoppingcart</label> 2073 </a> 2074 </div> 2075 } 2076 2077 @if (enableStickyHeaderMobileMenu) 2078 { 2079 <a class="button mainmenu__list-item--icon"> 2080 <i class="fal fa-bars"></i> 2081 </a> 2082 } 2083 2084 </nav> 2085 2086 </nav> 2087 ; 2088 } 2089 2090 <div class="section--center"> 2091 @RenderSnippet("CallMeBackSnippet") 2092 @RenderSnippet("HeaderSearchbox") 2093 </div> 2094 2095 @* 2096 header__mainmenu_position 2097 header__search_position 2098 header__added_menu_position 2099 *@ 2100 2101 <div class="section--right"> 2102 @if(HeaderConfiguration.CTAButtonDisplay == true){ 2103 @RenderSnippet("HeaderCTAButton") 2104 } 2105 2106 @if (header__login_position["middle"]) 2107 { 2108 @RenderSnippet("HeaderLogin") 2109 } 2110 2111 @if (header__custom_template_position["middle"]) 2112 { 2113 @RenderSnippet("HeaderCustomTemplate") 2114 } 2115 2116 @RenderSnippet("HeaderCustomItemMenu") 2117 @RenderSnippet("HeaderProductCategorieMenu") 2118 2119 @if (header__shoppingcart_position["middle"]) 2120 { 2121 @RenderSnippet("HeaderShoppingcart") 2122 } 2123 2124 @RenderSnippet("HeaderInutileMenu") 2125 2126 @if (header__langauage_switch_position["middle"]) 2127 { 2128 @RenderSnippet("HeaderLanguage") 2129 } 2130 </div> 2131 2132 @*@if (header__main_menu_display == true) 2133 { 2134 2135 <nav class="mc-header__main-menu"> 2136 2137 @RenderSnippet("HeaderMainAddedMenu") 2138 @RenderSnippet("HeaderMainCustomMenu") 2139 2140 </nav> 2141 2142 }*@ 2143 2144 @SnippetStart("HeaderCustomItemMenu") 2145 2146 @foreach (var header__custom_menu_item in mc.HeaderConfiguration.CustomMenuItems) 2147 { 2148 2149 <a href="@header__custom_menu_item.Link" class="mc-header__main-menu-link"> 2150 @header__custom_menu_item.IconCode 2151 <label>@header__custom_menu_item.Label</label> 2152 </a> 2153 2154 } 2155 2156 @SnippetEnd("HeaderCustomItemMenu") 2157 2158 @SnippetStart("HeaderInutileMenu") 2159 2160 @if (HeaderConfiguration.HamburgermenuDisplay) 2161 { 2162 <a href="javascript:void(0)" class="mc-header__main-menu-link InutileMenuTrigger"> 2163 <i class="far fa-bars"></i> 2164 <label>Menu</label> 2165 </a> 2166 } 2167 2168 @SnippetEnd("HeaderInutileMenu") 2169 2170 @SnippetStart("HeaderProductCategorieMenu") 2171 2172 @if (HeaderConfiguration.ProductCategoriesDisplay) 2173 { 2174 <div class="vue-menu-product-overview--trigger"></div> 2175 } 2176 2177 @SnippetEnd("HeaderProductCategorieMenu") 2178 2179 <style> 2180 2181 .mc-header .mainmenu { 2182 @if (header_mainmenu__FullWidthMainmenu) { 2183 <text> flex-grow: 1; </text> 2184 } else { 2185 <text>flex-grow: 0; </text> 2186 } 2187 } 2188 2189 .mc-header .mainmenu__link { 2190 2191 padding-left: 25px; 2192 padding-right: 25px; 2193 2194 } 2195 2196 .mc-header .mainmenu__label { 2197 @if (!string.IsNullOrWhiteSpace(header_mainmenu__FontFamily)) { 2198 <text>font-family: @header_mainmenu__FontFamily;</text> 2199 } 2200 2201 @if (!string.IsNullOrWhiteSpace(header_mainmenu__FontSize)) { 2202 <text>font-size: @header_mainmenu__FontSize;</text> 2203 } 2204 2205 @if (!string.IsNullOrWhiteSpace(header_mainmenu__FontStyle)) { 2206 <text>text-transform: @header_mainmenu__FontStyle;</text> 2207 } 2208 2209 @if (!string.IsNullOrWhiteSpace(header_mainmenu__FontWeight)) { 2210 <text>font-weight: @header_mainmenu__FontWeight;</text> 2211 } 2212 } 2213 2214 .searchbox__form__submit > *, 2215 .mc-header__main-menu-link > * { 2216 pointer-events: none; 2217 color: @header__CustomMenuItemColor !important; 2218 } 2219 2220 .searchbox__form__submit svg > *, 2221 .mc-header__main-menu-link svg > * { 2222 fill: @header__CustomMenuItemColor !important; 2223 } 2224 2225 .searchbox__form__submit i, 2226 .mc-header__main-menu-link i { 2227 color: @header__CustomMenuItemColor !important; 2228 } 2229 2230 .Subscreen.Subscreen_level--one { 2231 display: flex; 2232 flex-direction: row; 2233 flex-basis: 75%; 2234 max-width: 1200px; 2235 flex-wrap: wrap; 2236 background-color: white; 2237 padding: 50px; 2238 } 2239 2240 .Subscreen-link { 2241 display: flex; 2242 /* min-height: 50px; */ 2243 border-bottom: 1px solid white; 2244 padding: 0 12.5px; 2245 transition: all 0.25s ease-in; 2246 } 2247 2248 .Subscreen_showMoreButton:hover, 2249 .Subscreen-link:hover { 2250 background-color: #CCC; 2251 transition: all 0.25s ease-in; 2252 padding-left: 17.5px; 2253 } 2254 2255 .Subscreen.Subscreen_level--one li { 2256 flex-basis: 25%; 2257 display: flex; 2258 flex-direction: column; 2259 flex-grow: 1; 2260 } 2261 2262 .Subscreen.Subscreen_level--one .Subscreen-link { 2263 color: black; 2264 font-weight: bold; 2265 } 2266 2267 .Subscreen.Subscreen_level--two { 2268 padding-bottom: 25px; 2269 } 2270 2271 .Subscreen.Subscreen_level--two .Subscreen-link { 2272 color: black; 2273 font-weight: normal; 2274 } 2275 2276 .Subscreen.Subscreen_level--three .Subscreen-link { 2277 padding-left: 50px; 2278 } 2279 2280 .vueMenu { 2281 position: absolute; 2282 display: flex; 2283 top: 125px; 2284 left: 0; 2285 right: 0; 2286 background-color: #f1f1f1; 2287 transition: all 1s ease; 2288 overflow: hidden; 2289 } 2290 2291 .stickyheader .vueMenu { 2292 top: 75px; 2293 } 2294 2295 .vueMenu__Overview { 2296 display: flex; 2297 width: 100%; 2298 background-color: #f1f1f1; 2299 } 2300 2301 .vueMenu__Overview-container { 2302 display: flex; 2303 width: 100%; 2304 max-width: 1200px; 2305 margin: 0 auto !important; 2306 padding-bottom: 50px; 2307 overflow: hidden; 2308 transition: all 1s ease; 2309 } 2310 2311 .vueMenu__Overview-container.close { 2312 max-height: 0; 2313 padding-bottom: 0; 2314 } 2315 2316 .vueMenu__Overview--FirstLevel { 2317 display: flex; 2318 flex-direction: column; 2319 max-width: 250px; 2320 } 2321 2322 .vueMenu__Overview--FirstLevel-link { 2323 display: flex; 2324 background-color: transparent; 2325 min-height: 50px; 2326 padding: 0 12.5px; 2327 align-items: center; 2328 border-bottom: 1px solid white; 2329 justify-content: space-between; 2330 width: 250px; 2331 cursor: pointer; 2332 } 2333 2334 .vueMenu__Overview--FirstLevel-link.active { 2335 background-color: white; 2336 } 2337 2338 .vueMenu__Overview--FirstLevel-link-label { 2339 color: black; 2340 transition: all 0.25s ease-in; 2341 } 2342 2343 .Subscreen_showMoreButton { 2344 font-style: italic; 2345 padding-left: 12.5px; 2346 cursor: pointer; 2347 } 2348 2349 .Subscreen_showMoreButton label { 2350 pointer-events: none; 2351 } 2352 2353 </style> 2354 2355 </section> 2356 </div> 2357 2358 } 2359 2360 @if (header__bottom_bar_display) 2361 { 2362 <div class="mc-header__bottom"> 2363 <section class="mc-header__bottom-container"> 2364 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel> 2365 @using Dynamicweb; 2366 @using Dynamicweb.Content.Items; 2367 2368 @if (header__mainmenu_position["bottom"]) 2369 { 2370 <nav class="mainmenu"> 2371 2372 @{ 2373 bool enableStickyHeaderMobileMenu = false; 2374 bool enableStickyHeaderPhone = false; 2375 bool enableStickyHeaderSearch = false; 2376 2377 var mainmenu = RenderNavigation(new 2378 { 2379 StartLevel = 1, 2380 EndLevel = 3, 2381 ParentTag = "topnavigation", 2382 expandmode = "all", 2383 blockclass = "mainmenu", 2384 Template = "MainNavigation.xslt" 2385 }); 2386 2387 string tag = ""; 2388 int alternativeRootPageID = !string.IsNullOrWhiteSpace(mc.HeaderConfiguration.AlternativeRootPage) ? Convert.ToInt32(mc.HeaderConfiguration.AlternativeRootPage) : 0; 2389 2390 if (alternativeRootPageID > 0 && Model.TopPage.ID == alternativeRootPageID) 2391 { 2392 tag = alternativeRootPageID.ToString(); 2393 mainmenu = RenderNavigation(new 2394 { 2395 StartLevel = 1, 2396 EndLevel = 3, 2397 parentid = alternativeRootPageID, 2398 expandmode = "all", 2399 blockclass = "mainmenu", 2400 Template = "MainNavigation.xslt" 2401 }); 2402 } 2403 2404 } 2405 2406 <header-menu id="header-menu" 2407 data-enable-quickorder="@enableQuickOrder" 2408 data-enable-login="@enableLogin" 2409 data-enable-shopping-cart="@enableShoppingCart" 2410 data-user-logged-in="@userLoggedIn" 2411 data-tag="@tag" 2412 style=" flex-grow: 1 !important;"> 2413 2414 <div class="mainmenu__list-container"> 2415 2416  2417 <ul class="mainmenu__list"> 2418 @mainmenu 2419 </ul> 2420 2421 </div> 2422 2423 </header-menu> 2424 2425 <nav class="mainmenu__list-item--icon-list"> 2426 2427 @if (enableStickyHeaderSearch) 2428 { 2429 <a class="button mainmenu__list-item--icon"> 2430 <input type="text" placeholder="vul hier uw zoekterm in... " class="search__input" /> 2431 <i class="fal fa-search" onclick="ToggleSearch();"></i> 2432 </a> 2433 } 2434 2435 @if (enableStickyHeaderPhone) 2436 { 2437 <a class="button mainmenu__list-item--icon"> 2438 <i class="fal fa-phone"></i> 2439 </a> 2440 } 2441 2442 @if (enableLogin && header__shoppingcart_position["bottom"]) 2443 { 2444 <a class="button mainmenu__list-item--icon" onclick="openLoginPopup();"> 2445 <i class="fal fa-user"></i> 2446 </a> 2447 } 2448 2449 @if (enableShoppingCart && header__shoppingcart_position["bottom"]) 2450 { 2451 <div class="button mainmenu__list-item--icon"> 2452 <a href="#" class="app-shopping-cart" data-cart-location="header-desktop"> 2453 <i class="fal fa-shopping-cart"></i> 2454 <label>Shoppingcart</label> 2455 </a> 2456 </div> 2457 } 2458 2459 @if (enableStickyHeaderMobileMenu) 2460 { 2461 <a class="button mainmenu__list-item--icon"> 2462 <i class="fal fa-bars"></i> 2463 </a> 2464 } 2465 2466 </nav> 2467 2468 </nav> 2469 2470 } 2471 2472 @if (enableShoppingCart && header__shoppingcart_position["bottom"]) 2473 { 2474 <li class="app-shopping-cart" data-cart-location="header-desktop"></li> 2475 } 2476 2477 </section> 2478 </div> 2479 } 2480 2481 @if (header__stickyheader_display) 2482 { 2483 <div class="mc-header__stickyheader"> 2484 <section class="mc-header__stickyheader-container"> 2485 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel> 2486 @using Dynamicweb; 2487 @using Dynamicweb.Content.Items; 2488 @using Bluedesk.DynamicWeb.ItemTypes.Settings.Configuration; 2489 @using Bluedesk.DynamicWeb.ItemTypes.Settings; 2490 2491 <img class="mc-header__stickyheader-image" src="@header_desktop_stickyheader__logo" /> 2492 2493 <nav class="mc-header__stickyheader"> 2494 2495 @if (cp_productDetail != null && (bool)cp_productDetail) 2496 { 2497 @RenderSnippet("ProductDetailHeaderDesktop") 2498 } 2499 else if (cp_productOverview != null && (bool)cp_productOverview) 2500 { 2501 2502 <div class="section--center"> 2503 2504 @if (StickyheaderConfiguration.ProductOverviewDisplayConfiguration.CallMeBackDisplay) 2505 { 2506 @RenderSnippet("CallMeBackSnippet") 2507 } 2508 2509 @if (StickyheaderConfiguration.ProductOverviewDisplayConfiguration.MainmenuDisplay) 2510 { 2511 <nav class="mainmenu"> 2512 2513 @{ 2514 bool enableStickyHeaderMobileMenu = false; 2515 bool enableStickyHeaderPhone = false; 2516 bool enableStickyHeaderSearch = false; 2517 2518 var mainmenu = RenderNavigation(new 2519 { 2520 StartLevel = 1, 2521 EndLevel = 3, 2522 ParentTag = "topnavigation", 2523 expandmode = "all", 2524 blockclass = "mainmenu", 2525 Template = "MainNavigation.xslt" 2526 }); 2527 2528 string tag = ""; 2529 int alternativeRootPageID = !string.IsNullOrWhiteSpace(mc.HeaderConfiguration.AlternativeRootPage) ? Convert.ToInt32(mc.HeaderConfiguration.AlternativeRootPage) : 0; 2530 2531 if (alternativeRootPageID > 0 && Model.TopPage.ID == alternativeRootPageID) 2532 { 2533 tag = alternativeRootPageID.ToString(); 2534 mainmenu = RenderNavigation(new 2535 { 2536 StartLevel = 1, 2537 EndLevel = 3, 2538 parentid = alternativeRootPageID, 2539 expandmode = "all", 2540 blockclass = "mainmenu", 2541 Template = "MainNavigation.xslt" 2542 }); 2543 } 2544 2545 } 2546 2547 <header-menu id="header-menu" 2548 data-enable-quickorder="@enableQuickOrder" 2549 data-enable-login="@enableLogin" 2550 data-enable-shopping-cart="@enableShoppingCart" 2551 data-user-logged-in="@userLoggedIn" 2552 data-tag="@tag" 2553 style=" flex-grow: 1 !important;"> 2554 2555 <div class="mainmenu__list-container"> 2556 2557  2558 <ul class="mainmenu__list"> 2559 @mainmenu 2560 </ul> 2561 2562 </div> 2563 2564 </header-menu> 2565 2566 <nav class="mainmenu__list-item--icon-list"> 2567 2568 @if (enableStickyHeaderSearch) 2569 { 2570 <a class="button mainmenu__list-item--icon"> 2571 <input type="text" placeholder="vul hier uw zoekterm in... " class="search__input" /> 2572 <i class="fal fa-search" onclick="ToggleSearch();"></i> 2573 </a> 2574 } 2575 2576 @if (enableStickyHeaderPhone) 2577 { 2578 <a class="button mainmenu__list-item--icon"> 2579 <i class="fal fa-phone"></i> 2580 </a> 2581 } 2582 2583 @if (enableLogin && header__shoppingcart_position["bottom"]) 2584 { 2585 <a class="button mainmenu__list-item--icon" onclick="openLoginPopup();"> 2586 <i class="fal fa-user"></i> 2587 </a> 2588 } 2589 2590 @if (enableShoppingCart && header__shoppingcart_position["bottom"]) 2591 { 2592 <div class="button mainmenu__list-item--icon"> 2593 <a href="#" class="app-shopping-cart" data-cart-location="header-desktop"> 2594 <i class="fal fa-shopping-cart"></i> 2595 <label>Shoppingcart</label> 2596 </a> 2597 </div> 2598 } 2599 2600 @if (enableStickyHeaderMobileMenu) 2601 { 2602 <a class="button mainmenu__list-item--icon"> 2603 <i class="fal fa-bars"></i> 2604 </a> 2605 } 2606 2607 </nav> 2608 2609 </nav> 2610 2611 } 2612 2613 @if (StickyheaderConfiguration.ProductOverviewDisplayConfiguration.SearchbarDisplay) 2614 { 2615 @RenderSnippet("HeaderSearchbox") 2616 } 2617 2618 @if (StickyheaderConfiguration.ProductOverviewDisplayConfiguration.AddedMenuDisplay) 2619 { 2620 @RenderSnippet("HeaderAddedMenu") 2621 } 2622 2623 @if (StickyheaderConfiguration.ProductOverviewDisplayConfiguration.CustomMenuDisplay) 2624 { 2625 @RenderSnippet("HeaderCustomItemMenu") 2626 } 2627 2628 </div> 2629 2630 <div class="section--right"> 2631 2632 @RenderSnippet("HeaderCTAButton") 2633 2634 @if (StickyheaderConfiguration.ProductOverviewDisplayConfiguration.ProductOverviewMenuDisplay) 2635 { 2636 @RenderSnippet("HeaderProductCategorieMenu") 2637 } 2638 2639 @if (StickyheaderConfiguration.ProductOverviewDisplayConfiguration.ShoppingcartDisplay) 2640 { 2641 @RenderSnippet("HeaderShoppingcart") 2642 } 2643 2644 @if (StickyheaderConfiguration.ProductOverviewDisplayConfiguration.LoginDisplay) 2645 { 2646 @RenderSnippet("HeaderLogin") 2647 } 2648 2649 @if (StickyheaderConfiguration.ProductOverviewDisplayConfiguration.HamburgerMenuDisplay) 2650 { 2651 @RenderSnippet("HeaderInutileMenu") 2652 } 2653 </div> 2654 } 2655 else 2656 { 2657 2658 <div class="section--center"> 2659 @if (StickyheaderConfiguration.ContentpageDisplayConfiguration.CallMeBackDisplay) 2660 { 2661 @RenderSnippet("CallMeBackSnippet") 2662 } 2663 2664 @if (StickyheaderConfiguration.ContentpageDisplayConfiguration.MainmenuDisplay) 2665 { 2666 <nav class="mainmenu"> 2667 2668 @{ 2669 bool enableStickyHeaderMobileMenu = false; 2670 bool enableStickyHeaderPhone = false; 2671 bool enableStickyHeaderSearch = false; 2672 2673 var mainmenu = RenderNavigation(new 2674 { 2675 StartLevel = 1, 2676 EndLevel = 3, 2677 ParentTag = "topnavigation", 2678 expandmode = "all", 2679 blockclass = "mainmenu", 2680 Template = "MainNavigation.xslt" 2681 }); 2682 2683 string tag = ""; 2684 int alternativeRootPageID = !string.IsNullOrWhiteSpace(mc.HeaderConfiguration.AlternativeRootPage) ? Convert.ToInt32(mc.HeaderConfiguration.AlternativeRootPage) : 0; 2685 2686 if (alternativeRootPageID > 0 && Model.TopPage.ID == alternativeRootPageID) 2687 { 2688 tag = alternativeRootPageID.ToString(); 2689 mainmenu = RenderNavigation(new 2690 { 2691 StartLevel = 1, 2692 EndLevel = 3, 2693 parentid = alternativeRootPageID, 2694 expandmode = "all", 2695 blockclass = "mainmenu", 2696 Template = "MainNavigation.xslt" 2697 }); 2698 } 2699 2700 } 2701 2702 <header-menu id="header-menu" 2703 data-enable-quickorder="@enableQuickOrder" 2704 data-enable-login="@enableLogin" 2705 data-enable-shopping-cart="@enableShoppingCart" 2706 data-user-logged-in="@userLoggedIn" 2707 data-tag="@tag" 2708 style=" flex-grow: 1 !important;"> 2709 2710 <div class="mainmenu__list-container"> 2711 2712  2713 <ul class="mainmenu__list"> 2714 @mainmenu 2715 </ul> 2716 2717 </div> 2718 2719 </header-menu> 2720 2721 <nav class="mainmenu__list-item--icon-list"> 2722 2723 @if (enableStickyHeaderSearch) 2724 { 2725 <a class="button mainmenu__list-item--icon"> 2726 <input type="text" placeholder="vul hier uw zoekterm in... " class="search__input" /> 2727 <i class="fal fa-search" onclick="ToggleSearch();"></i> 2728 </a> 2729 } 2730 2731 @if (enableStickyHeaderPhone) 2732 { 2733 <a class="button mainmenu__list-item--icon"> 2734 <i class="fal fa-phone"></i> 2735 </a> 2736 } 2737 2738 @if (enableLogin && header__shoppingcart_position["bottom"]) 2739 { 2740 <a class="button mainmenu__list-item--icon" onclick="openLoginPopup();"> 2741 <i class="fal fa-user"></i> 2742 </a> 2743 } 2744 2745 @if (enableShoppingCart && header__shoppingcart_position["bottom"]) 2746 { 2747 <div class="button mainmenu__list-item--icon"> 2748 <a href="#" class="app-shopping-cart" data-cart-location="header-desktop"> 2749 <i class="fal fa-shopping-cart"></i> 2750 <label>Shoppingcart</label> 2751 </a> 2752 </div> 2753 } 2754 2755 @if (enableStickyHeaderMobileMenu) 2756 { 2757 <a class="button mainmenu__list-item--icon"> 2758 <i class="fal fa-bars"></i> 2759 </a> 2760 } 2761 2762 </nav> 2763 2764 </nav> 2765 2766 } 2767 2768 @if (StickyheaderConfiguration.ContentpageDisplayConfiguration.SearchbarDisplay) 2769 { 2770 @RenderSnippet("HeaderSearchbox") 2771 } 2772 2773 @if (StickyheaderConfiguration.ContentpageDisplayConfiguration.AddedMenuDisplay) 2774 { 2775 @RenderSnippet("HeaderAddedMenu") 2776 } 2777 2778 @if (StickyheaderConfiguration.ContentpageDisplayConfiguration.CustomMenuDisplay) 2779 { 2780 @RenderSnippet("HeaderCustomItemMenu") 2781 } 2782 2783 </div> 2784 2785 <div class="section--right"> 2786 2787 @RenderSnippet("HeaderCTAButton") 2788 2789 @if (StickyheaderConfiguration.ContentpageDisplayConfiguration.ProductOverviewMenuDisplay) 2790 { 2791 @RenderSnippet("HeaderProductCategorieMenu") 2792 } 2793 2794 @if (StickyheaderConfiguration.ContentpageDisplayConfiguration.ShoppingcartDisplay) 2795 { 2796 @RenderSnippet("HeaderShoppingcart") 2797 } 2798 2799 @if (StickyheaderConfiguration.ContentpageDisplayConfiguration.LoginDisplay) 2800 { 2801 @RenderSnippet("HeaderLogin") 2802 } 2803 2804 @if (StickyheaderConfiguration.ContentpageDisplayConfiguration.HamburgerMenuDisplay) 2805 { 2806 @RenderSnippet("HeaderInutileMenu") 2807 } 2808 </div> 2809 } 2810 2811 </nav> 2812 2813 </section> 2814 </div> 2815 } 2816 2817 2818 @{ 2819 //Dictionary<string, bool> searchbar__type = new Dictionary<string, bool>() 2820 //{ 2821 // { "typeA" , true }, 2822 // { "typeB" , false }, 2823 // { "typeC" , false } 2824 //}; 2825 2826 string searchbar__type = "A"; 2827 } 2828 <style> 2829 2830 .searchbox__input { 2831 border-radius: 0; 2832 /*background-color: #f1f1f1 !important;*/ 2833 border: 0 !important; 2834 } 2835 2836 .search-results { 2837 2838 box-shadow: 10px 10px 10px rgb(153 153 255 / 10%); 2839 2840 @{ 2841 switch (searchbar__type) 2842 { 2843 case "A": 2844 <text> 2845 width: auto; 2846 left: calc(-100% + 25px); 2847 </text> 2848 break; 2849 case "B": 2850 <text> 2851 width: calc(100% - 75px); 2852 </text> 2853 break; 2854 2855 } 2856 } 2857 } 2858 .search__visibility-toggle { 2859 @{ 2860 switch (searchbar__type) 2861 { 2862 case "A": 2863 <text>display: none; </text> 2864 break; 2865 case "B": 2866 <text>display: flex; </text> 2867 break; 2868 2869 } 2870 } 2871 } 2872 2873 .searchbox__wrapper { 2874 2875 margin-left: 12.5px; 2876 2877 @{ 2878 switch (searchbar__type) 2879 { 2880 case "A": 2881 <text>display: flex; </text> 2882 break; 2883 case "B": 2884 <text>display: none; </text> 2885 break; 2886 2887 } 2888 } 2889 } 2890 2891 /* 2892 2893 .mc-header__hamburger-menu { 2894 position: absolute; 2895 right: 0; 2896 left: 0; 2897 top: 125px; 2898 background-color: white; 2899 overflow: hidden; 2900 } 2901 2902 .mc-header__hamburger-menu-container { 2903 max-width: 1200px; 2904 margin: 0 auto !important; 2905 } 2906 2907 .InutileMenu { 2908 transition: all 0.5s ease-in; 2909 overflow: hidden; 2910 max-height: 0; 2911 } 2912 2913 */ 2914 </style> 2915 2916 <nav class="mc-header__hamburger-menu" style="max-height: 0px;"> 2917 <section class="mc-header__hamburger-menu--two"> 2918 <InutileMenu id="InutileMenu" /> 2919 </section> 2920 </nav> 2921 2922 <ProductOverviewMenu id="MenuProductOverview" /> 2923 2924 2925 </header> 2926 2927  2932 2933 <header class="header header--mobile"> 2934 2935 <div class="flex items-center"> 2936 @{var logoLinkToolsHeader = "/Default.aspx?ID=" + @GetPageIdByNavigationTag("LogoLinkTools");} 2937 <a href="@logoLinkToolsHeader" class="header__logo__wrapper mr-auto"> 2938 <img class="header__logo" src="@header_mobile__logo" alt="Logo"> 2939 </a> 2940 2941 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel> 2942 @using Dynamicweb; 2943 @using System.Web; 2944 @using Dynamicweb.Content; 2945 @using Dynamicweb.Extensibility; 2946 @using Bluedesk.Tools.DynamicWeb.Generic; 2947 2948 2949 @if (header__langauage_switch_position["top"] && LanguageSwitcher.GetLanguages().Count > 1) 2950 { 2951 <div class="top-toggles"> 2952 <div class="language"> 2953 <div class="language-dropdown"> 2954 <button class="language-dropdown__toggle" type="button" aria-label="Change language"> 2955 <i class="fal fa-globe"></i> 2956  2957 <i class="fal fa-chevron-down"></i> 2958 </button> 2959 <ul class="language-dropdown__options"> 2960 @foreach (var l in LanguageSwitcher.GetLanguages()) 2961 { 2962 if (!l.isActive) 2963 { 2964 string languageName = @l.NativeName.ToString().Split('(')[0]; 2965 <li class="language-dropdown__item"> 2966 <a href='@l.Url' title="@languageName"> 2967 2968 <span class="flag-icon flag-icon-@l.CountryCode"></span> 2969 <span class="language-dropdown__item-code">@languageName</span> 2970 </a> 2971 </li> 2972 } 2973 } 2974 </ul> 2975 </div> 2976 </div> 2977 </div> 2978 } 2979 2980 2981 @if (enableShoppingCart) 2982 { 2983 <div class="app-shopping-cart" data-cart-location="header-mobile"></div> 2984 } 2985 2986 <div id="hamburger" class="icon__content"> 2987 <i class="fal fa-bars icon"></i> 2988 </div> 2989 2990 </div> 2991 2992 </header> 2993 2994  2999  3000 <div id="quick-order"></div> 3001 <div id="backdrop-megamenu"></div> 3002 <mega-menu id="mega-menu"></mega-menu> 3003  3004 3005 @*[Include file 'layout/StickymenuNewGrid.cshtml' not found in 'Templates/Designs/KoksGroup/Masterpage/MasterVisualEditor.cshtml']*@ 3006 @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>> 3007 @using Dynamicweb; 3008 @using Bluedesk.DynamicWeb.ItemTypes; 3009 3010 @{ 3011 var pid = ModuleOnlyParagraph.GetParagraphIDByTag<ModuleOnlyParagraph>("SideBarForm", Pageview.AreaID); 3012 3013 if (pid > 0) 3014 { 3015 <section id="vue-side-bar-form" data-paragraphid="@pid" data-telephone="@phonenumber" data-formatphonenumber="@formattedPhonenumber" data-isoffline="@isOffline"></section> 3016 } 3017 } 3018 3019 @if (enableProductCompare) 3020 { 3021 <div id="vue-compare-list"></div> 3022 } 3023 3024 <style> 3025 main.blur { 3026 filter: grayscale(50%) blur(15px); 3027 -webkit-filter: grayscale(50%) blur(15px); 3028 } 3029 </style> 3030 3031 @{ 3032 var Home = Services.Pages.GetPageByNavigationTag(Pageview.AreaID, "Home"); 3033 } 3034 3035 <main> 3036 3037 @Model.Grid("grid", "Before breadcrumb", "", "GridTest") 3038 3039 @if (showBreadcrumbs) 3040 { 3041 <text> 3042 @using application._webapi.Helper; 3043 @using Dynamicweb.Content.Data; 3044 @using Bluedesk.DynamicWeb.ItemTypes.Settings.Configuration; 3045 @{ 3046 bool isProductDetail = System.Web.HttpContext.Current.Items["productDetailActive"] != null && (bool)System.Web.HttpContext.Current.Items["productDetailActive"]; 3047 bool isProductGroup = System.Web.HttpContext.Current.Items["productOverviewActive"] != null && (bool)System.Web.HttpContext.Current.Items["productOverviewActive"]; 3048 string productDetailClass = isProductDetail ? "breadcrumbs--productdetail" : ""; 3049 string productGroupClass = isProductGroup ? "breadcrumbs--productgroup" : ""; 3050 string productName = System.Web.HttpContext.Current.Items["CurrentProductName"] != null ? System.Web.HttpContext.Current.Items["CurrentProductName"].ToString() : ""; 3051 } 3052 </text> 3053 3054 <nav class="breadcrumbs @productDetailClass @productGroupClass" id="breadcrumbs"> 3055 <ol itemscope="" itemtype="https://schema.org/BreadcrumbList" class="breadcrumbs__list"> 3056 <li class="breadcrumbs__item"> 3057 <span> 3058 <span class="breadcrumbs__text">@Translate("Breadcrumbs.YouAreHere", "You are here")</span> @GenerateBreadcrumbs() 3059 </span> 3060 </li> 3061 </ol> 3062 </nav> 3063 3064 3065 @helper GenerateBreadcrumbs() 3066 { 3067 //Get the feature configuration 3068 var pageView = ApiHelpers.GetCurrentPageview(); 3069 var masterConfiguration = Dynamicweb.Services.Pages.GetPageByNavigationTag(pageView.AreaID, "MasterConfiguration"); 3070 FeatureConfig featureConfig = masterConfiguration.Item.ToCodeFirstItem<MasterConfig>().FeatureConfiguration; 3071 3072 //Use feature config data to find the root folder 3073 int homeId, rootId; 3074 Int32.TryParse(featureConfig.breadcrumbsHomeId, out homeId); 3075 Int32.TryParse(featureConfig.breadcrumbsRootId, out rootId); 3076 3077 if (rootId == 0) 3078 { 3079 <text>Missing rootId in masterconfig</text> 3080 return; 3081 } 3082 3083 PageTree pageTree = Dynamicweb.Services.Pages.GetPageNavigationTree(rootId); 3084 3085 //Get the root page (or folder), the page we're currently on and the home page (home page is not actually part of the breadcrumbs so we add it manually) 3086 PageTreeItem rootPage = pageTree.RootNode; 3087 PageTreeItem currentPage = pageTree.GetById(pageView.ID); 3088 PageTreeItem homePage = pageTree.GetById(homeId); 3089 3090 List<PageTreeItem> breadcrumbs = new List<PageTreeItem>(); 3091 LoopTree(rootPage.Children, breadcrumbs, currentPage.ID); 3092 3093 //Insert the homepage 3094 if (homeId > 0) 3095 { 3096 breadcrumbs.Insert(0, homePage); 3097 } 3098 3099 //Construct our breadcrumbs 3100 for (int i = 0; i < breadcrumbs.Count; i++) 3101 { 3102 PageTreeItem page = breadcrumbs[i]; 3103 3104 //There's already a starting '/', so avoid adding a second 3105 if (i != 0) 3106 { 3107 <text>   /   </text> 3108 } 3109 3110 <a href="@Dynamicweb.Frontend.SearchEngineFriendlyURLs.GetFriendlyUrl(page.ID)">@page.GetDisplayName() </a> 3111 } 3112 } 3113 3114 3115 @functions 3116 { 3117 //Recursively iterate through all the pages to establish a path to the target page. When succesful, add the connected pages to the breadcrumb list 3118 public bool LoopTree(IList<PageTreeItem> pages, List<PageTreeItem> breadcrumbs, int currentPage) 3119 { 3120 foreach (PageTreeItem page in pages) 3121 { 3122 if (page.ID == currentPage || LoopTree(page.Children, breadcrumbs, currentPage)) 3123 { 3124 breadcrumbs.Insert(0, page); //Insert at starting position because when we're done, we'll be adding them in reverse order 3125 return true; 3126 } 3127 } 3128 3129 return false; 3130 } 3131 } 3132 3133 } 3134 3135 @Model.Grid("grid2", "After breadcrumb", "", "GridTest") 3136 3137 </main> 3138 3139 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel> 3140 @using Dynamicweb; 3141 @using Bluedesk.DynamicWeb.ItemTypes; 3142 3143 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel> 3144 @using Dynamicweb; 3145 @using Bluedesk.DynamicWeb.ItemTypes; 3146 3147 @{ 3148 3149 // var footerconfig = Services.Items.GetItem("FooterConfiguration", masterconfig.Item["FooterConfiguration"].ToString()); 3150 3151 string footerLogo = websitesettings.FooterLogo; 3152 string footerLogoTP = cs.footerImageTP; 3153 string footerDescription = websitesettings.FooterDescription; 3154 3155 var fb = cs.Facebook; 3156 var twitter = cs.Twitter; 3157 var linkedin = cs.LinkedIn; 3158 var instagram = cs.Instagram; 3159 var youtube = cs.Youtube; 3160 3161 var companyName = cs.CompanyName; 3162 var Emailadress = cs.Emailadress; 3163 var Phonenumber = cs.Phonenumber; 3164 var Address = cs.Address; 3165 var Zipcode = cs.Zipcode; 3166 var City = cs.City; 3167 var Country = cs.Country; 3168 3169 var selectedPaymentLogos = websitesettings.FooterPaymentLogos; 3170 3171 bool footer__newsletter_signup_display = !string.IsNullOrWhiteSpace(mc.FooterConfiguration.NewsLetterSignUpDisplay.ToString()) && mc.FooterConfiguration.NewsLetterSignUpDisplay.ToString() == "True" ? true : false; 3172 3173 bool footer__USP_display = !string.IsNullOrWhiteSpace(mc.FooterConfiguration.UspDisplay.ToString()) && mc.FooterConfiguration.UspDisplay.ToString() == "True" ? true : false; 3174 3175 string footer__background_color = colorService.GetHexColor(Pageview.AreaID, mc.FooterConfiguration.BackgroundColor.ToString()); 3176 string footer__color = colorService.GetHexColor(Pageview.AreaID, mc.FooterConfiguration.Color.ToString()); 3177 string footer__background_image = !string.IsNullOrWhiteSpace(mc.FooterConfiguration.BackgroundImage.ToString()) ? "background-image: url('/Admin/Public/GetImage.ashx?Image=" + mc.FooterConfiguration.BackgroundImage.ToString() + "&Format=webp&Quality=100&width=2000')" : ""; 3178 3179 string footer__top_image = !string.IsNullOrWhiteSpace(mc.FooterConfiguration.TopImage.ToString()) ? mc.FooterConfiguration.TopImage.ToString() : ""; 3180 3181 } 3182 3183 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel> 3184 @using Dynamicweb; 3185 @using Bluedesk.DynamicWeb.ItemTypes; 3186 3187 <style> 3188 3189 .footer { 3190 background-color: @footer__background_color; 3191 color: @footer__color; 3192 } 3193 3194 .footer__contact-block-employee { 3195 display:none; 3196 } 3197 3198 @@media screen and (min-width: 992px) { 3199 .footer { 3200 @footer__background_image; 3201 } 3202 3203 .footer__contact-block-employee { 3204 display: flex; 3205 } 3206 } 3207 3208 .reviews__indicator-progressbar { 3209 width: @ReviewCompanyRating; 3210 } 3211 3212 </style> 3213 3214 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel> 3215 @using Dynamicweb; 3216 @using Bluedesk.DynamicWeb.ItemTypes; 3217 3218  3221 @SnippetStart("FooterTopImage") 3222 3223 @if (!string.IsNullOrWhiteSpace(footer__top_image)) 3224 { 3225 <figure class="footer__top-image"> 3226 <img src="@footer__top_image" alt="" /> 3227 </figure> 3228 } 3229 3230 @SnippetEnd("FooterTopImage") 3231 3232 @SnippetStart("FooterContactBlock") 3233 3234 <style> 3235 .footer__contact-block-employee-image { 3236 height: auto; 3237 max-width: none; 3238 } 3239 </style> 3240 3241 <section class="footer__contact-block"> 3242 <ul class="footer__address"> 3243 3244 <li>KOKS After Sales bv</li> 3245 <li>@Address </li> 3246 <li>@Zipcode @City </li> 3247 <li>@Country</li> 3248 @* 3249 <li>@Phonenumber </li>*@ 3250 <li> 3251 <a style="color: #fff;" href="mailto:@Emailadress"> 3252 @Emailadress 3253 </a> 3254 </li> 3255 <li>IBAN : NL76 RABO 0137 7236 52</li> 3256 <li>BIC : RABONL2U</li> 3257 <li>BTW : NL8017.61.979.B05</li> 3258 <li>KvK nr. 24370884</li> 3259 @*<li style="margin-top: 2%; line-height: 105%; "> 3260 Kamer van Koophandel 3261 <br /> 3262 Oost-Nederland 3263 </li>*@ 3264 <li style="margin-top: 25px;">@RenderReview(ReviewRatingValue)</li> 3265 </ul> 3266 <figure class="footer__contact-block-employee"> 3267 <img src="/Admin/Public/GetImage.ashx?Image=/Files/images/Structure/ridgidkollmann.png&Format=webp&Quality=90&Compression=80&Width=147" class="footer__contact-block-employee-image" aria-label="Service desk employee" alt="Service desk employee" /> 3268 </figure> 3269 </section> 3270 3271 @SnippetEnd("FooterContactBlock") 3272 3273 @SnippetStart("FooterNewsletterSignUpDesktop") 3274  3275 @if (mc.FooterConfiguration.NewsLetterSignUpDisplay) 3276 { 3277 var newsletterFormID = ModuleOnlyParagraph.GetParagraphIDByTag<BS_ModuleOnlyParagraph>("Footer.Newsletter", Pageview.AreaID); 3278 3279 if (newsletterFormID > 0) 3280 { 3281 3282 <label class="footer__newsletter-label"> 3283 @Translate("Footer.SignUpNewsletter.Prefix", "Blijf op de hoogte van het laatste nieuws.") 3284 </label> 3285 @RenderParagraphContent(newsletterFormID) 3286 <label class="footer__newsletter-label"> 3287 @Translate("Footer.SignUpNewsletter.Suffix", "Sign up for the digital newsletter.") 3288 </label> 3289 3290 } 3291 } 3292 3293  3294 @SnippetEnd("FooterNewsletterSignUpDesktop") 3295 3296 @SnippetStart("FooterSocialContainerDesktop") 3297  3298 @if (!string.IsNullOrWhiteSpace(twitter) || !string.IsNullOrWhiteSpace(fb) || !string.IsNullOrWhiteSpace(linkedin) || !string.IsNullOrWhiteSpace(youtube) || !string.IsNullOrWhiteSpace(instagram)) 3299 { 3300 <section class="footer__social-container"> 3301 3302 <span class="footer__icon-labels footer__social-label">@Translate("Footer.FollowUs", "Volg ons op:")</span> 3303 3304 <div class="footer__social-icon-container"> 3305 @RenderSocialLink(twitter, "twitter") 3306 @RenderSocialLink(fb, "facebook") 3307 @RenderSocialLink(linkedin, "linkedin") 3308 @RenderSocialLink(youtube, "youtube") 3309 @RenderSocialLink(instagram, "instagram") 3310 </div> 3311 3312 </section> 3313 } 3314 3315  3316 @SnippetEnd("FooterSocialContainerDesktop") 3317 3318 @SnippetStart("FooterUSPDesktop") 3319  3320 @if (footer__USP_display) 3321 { 3322 if (!string.IsNullOrWhiteSpace(websitesettings.USP_1) || !string.IsNullOrWhiteSpace(websitesettings.USP_2) || !string.IsNullOrWhiteSpace(websitesettings.USP_3)) 3323 { 3324 <div class="footer__usp-bar"> 3325 <section class="container" style="display: flex;"> 3326 <ul> 3327 <li class="footer__usp-bar-logo-container"> 3328 @{var logoLinkToolsFooter = "/Default.aspx?ID=" + @GetPageIdByNavigationTag("LogoLinkTools");} 3329 <a href="@logoLinkToolsFooter" aria-label="Logo"> 3330 <img class="mc-header__logo-image" src="@header_desktop__logo" style="height: 35px;" alt=""> 3331 </a> 3332 </li> 3333 @RenderFooterUSP(cs.USP_1, cs.USP_1_icon) 3334 @RenderFooterUSP(cs.USP_2, cs.USP_2_icon) 3335 @RenderFooterUSP(cs.USP_3, cs.USP_3_icon) 3336 @RenderFooterUSP(cs.USP_4, cs.USP_4_icon) 3337 @RenderFooterUSP(cs.USP_5, cs.USP_5_icon) 3338 </ul> 3339 </section> 3340 </div> 3341 } 3342 } 3343 3344  3345 @SnippetEnd("FooterUSPDesktop") 3346 3347 @SnippetStart("FooterPaymentLogos") 3348 <style> 3349 .paymentlogos { 3350 3351 } 3352 3353 .paymentlogos img{ 3354 height: 25px; 3355 width: auto; 3356 } 3357 3358 </style> 3359 <section class="footer-paymentoptions" data-paymentmethods="@selectedPaymentLogos"></section> 3360 @SnippetEnd("FooterPaymentLogos") 3361 3362 @SnippetStart("FooterBottoMenuDesktop") 3363  3364 3365 <center style="font-size: 12px;"> 3366 * Alle prijzen zijn exclusief BTW en andere heffingen en exclusief eventuele verzendkosten en servicekosten. 3367 </center> 3368 3369 <center style="font-size: 12px;"> 3370 Copyright © Webshop by KOKS Group 3371 </center> 3372 3373 <section class="footer__copyright"> 3374 3375 <div class="container bottombar__container"> 3376 @{ 3377 var copyRightContainer = RenderNavigation(new 3378 { 3379 id = "bottombar__navigation", 3380 cssclass = "dwnavigation", 3381 startLevel = 1, 3382 endlevel = 4, 3383 template = "CleanNavigation.xslt", 3384 expandmode = "all", 3385 parenttag = "bottombar", 3386 blockclass = "bottombar" 3387 }); 3388 3389 if (!string.IsNullOrEmpty(copyRightContainer)) 3390 { 3391 @copyRightContainer; 3392 } 3393 } 3394 3395 </div> 3396 3397 </section> 3398 3399 <div style="height:50px; width: 100%; background-color: white;"></div> 3400 3401  3402 @SnippetEnd("FooterBottoMenuDesktop") 3403 3404 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel> 3405 @using Dynamicweb; 3406 @using Bluedesk.DynamicWeb.ItemTypes; 3407 3408 @*@helper RenderSocialLink(string socialLink, string socialName) 3409 { 3410 if (!string.IsNullOrWhiteSpace(socialLink)) 3411 { 3412 <a href="@socialLink" target="_blank" title="@socialName" class="footer__social"><i class="fab fa-@socialName"></i></a> 3413 } 3414 }*@ 3415 3416 @helper RenderFooterUSP(string USP_content, string USP_icon) 3417 { 3418 if (!string.IsNullOrWhiteSpace(USP_content)) 3419 { 3420 var usp_icon_class = (!string.IsNullOrWhiteSpace(USP_icon)) ? USP_icon : "fal fa-check"; 3421 3422 <li class="footer-usp__item"> 3423 <i class="@usp_icon_class footer-usp__icon"></i> 3424 <span>@USP_content</span> 3425 </li> 3426 } 3427 } 3428 3429 @helper RenderFooterLink(string id, string ParentTag, string TranslationKey, string TranslationValue) 3430 { 3431 var bottomlinkpageId = GetPageIdByNavigationTag(string.Format("{0}-bottomlink", ParentTag)); 3432 var translationKey = string.Format("{0}-bottomlink.Text", ParentTag); 3433 3434 <div class="footer__link"> 3435 3436 @{ 3437 var footerColumn = RenderNavigation(new 3438 { 3439 id = id, 3440 cssclass = "dwnavigation", 3441 startLevel = 1, 3442 endlevel = 4, 3443 template = "BottomNavigation.xslt", 3444 expandmode = "all", 3445 parenttag = ParentTag, 3446 }); 3447 3448 if (!string.IsNullOrEmpty(footerColumn)) 3449 { 3450 <h2 class="footer__link-header">@Translate(TranslationKey, TranslationValue)</h2> 3451 <ul class="footer__link-list">@footerColumn</ul> 3452 if (bottomlinkpageId > 0) { 3453 <a href="/Default.aspx?ID=@bottomlinkpageId" class="footer__link-bottom-link">@Translate(translationKey, "")</a> 3454 } 3455 } 3456 3457 } 3458 3459 </div> 3460 } 3461 3462 @helper RenderReview(double ReviewRatingValue) 3463 { 3464 <section class="reviews"> 3465 <div class="reviews__indicator"> 3466 <div class="reviews__indicator-progressbar"></div> 3467 <ul class="reviews__indicator-star-list"> 3468 <li class="reviews__indicator-star-list-item"></li> 3469 <li class="reviews__indicator-star-list-item"></li> 3470 <li class="reviews__indicator-star-list-item"></li> 3471 <li class="reviews__indicator-star-list-item"></li> 3472 <li class="reviews__indicator-star-list-item"></li> 3473 </ul> 3474 </div> 3475 3476 <label class="reviews__label">@ReviewRatingValue</label> 3477 </section> 3478 } 3479 3480 3481 @if (Pageview.Page.ParentPageId > 0) 3482 { 3483 var siblings = Services.Pages.GetPagesByParentID(Pageview.Page.ParentPageId).Where(p => p.Active).ToList(); 3484 var parentpageItemType = Pageview.Page.Parent.ItemType; 3485 bool isParentPageOverviewpage = parentpageItemType == "OverviewPage"; 3486 3487 if (siblings.Count() > 1 && isParentPageOverviewpage) 3488 { 3489 var prevPage = siblings.OrderByDescending(p => p.Sort).FirstOrDefault(p => p.Sort < Pageview.Page.Sort); 3490 var nextPage = siblings.OrderBy(p => p.Sort).FirstOrDefault(p => p.Sort > Pageview.Page.Sort); 3491 var overview = "/Default.aspx?ID=" + Pageview.Page.ParentPageId; 3492 3493 <section class="page-navigation"> 3494 @if (prevPage != null) 3495 { 3496 var back = "/Default.aspx?ID=" + prevPage.ID; 3497 <a href="@back" class="page-navigation__item"> 3498 <i class="fal fa-arrow-alt-to-left page-navigation__item--icon"></i> 3499 <label class="page-navigation__item-label">@Translate("pagenavigation.previous", "Previous")</label> 3500 </a> 3501 } 3502 3503 <a href="@overview" class="page-navigation__item"> 3504 <label class="page-navigation__item-label">@Translate("pagenavigation.Overview", "To overview")</label> 3505 <i class="fas fa-th page-navigation__item--icon"></i> 3506 </a> 3507 3508 @if (nextPage != null) 3509 { 3510 var forward = "/Default.aspx?ID=" + nextPage.ID; 3511 <a href="@forward" class="page-navigation__item"> 3512 <label class="page-navigation__item-label">@Translate("pagenavigation.next", "Next")</label> 3513 <i class="fal fa-arrow-alt-to-right page-navigation__item--icon"></i> 3514 </a> 3515 } 3516 </section> 3517 } 3518 } 3519 3520 @* 3521 3522 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel> 3523 @using Dynamicweb; 3524 @using Bluedesk.Tools.DynamicWeb.ExtensionMethods; 3525 @using Bluedesk.DynamicWeb.ItemTypes; 3526 3527 @{ 3528 3529 if (Pageview.Page.ParentPageId > 0) 3530 { 3531 3532 // Paging 3533 3534 var siblings = Services.Pages.GetPagesByParentID(Pageview.Page.ParentPageId).Where(p => p.Active).ToList(); 3535 var currentID = Pageview.Page.ID; 3536 var parentpageItemType = Pageview.Page.Parent.ItemType; 3537 bool isParentPageOverviewpage = parentpageItemType == "OverviewPage"; 3538 3539 3540 var siblingsCount = siblings.Count; 3541 3542 int previousIdx = 0; 3543 int nextIdx = siblingsCount - 1; 3544 int idx = 0; 3545 3546 for (int i = 0; i < siblingsCount; i++) 3547 { 3548 if (siblings[i].ID == currentID && siblings[i].PropertyItem != null) 3549 { 3550 idx = i; 3551 } 3552 } 3553 3554 previousIdx = idx == previousIdx ? previousIdx : idx - 1; 3555 nextIdx = idx == nextIdx ? nextIdx : idx + 1; 3556 3557 var previousID = siblings[previousIdx].ID; 3558 var nextID = siblings[nextIdx].ID; 3559 var overview = "/Default.aspx?ID=" + Pageview.Page.ParentPageId; 3560 3561 if (siblingsCount > 1) 3562 { 3563 3564 <section class="page-navigation"> 3565 3566 @if (!(previousID == currentID || previousID == 0)) 3567 { 3568 var back = "/Default.aspx?ID=" + previousID; 3569 <a href="@back" class="page-navigation__item"> 3570 <i class="fal fa-arrow-alt-to-left page-navigation__item--icon"></i> 3571 <label class="page-navigation__item-label">@Translate("pagenavigation.previous", "Previous")</label> 3572 </a> 3573 } 3574 3575 <a href="@overview" class="page-navigation__item"> 3576 <label class="page-navigation__item-label">@Translate("pagenavigation.Overview", "To overview")</label> 3577 <i class="fas fa-th page-navigation__item--icon"></i> 3578 </a> 3579 3580 @if (!(nextID == currentID || nextID == 0)) 3581 { 3582 var forward = "/Default.aspx?ID=" + nextID; 3583 <a href="@forward" class="page-navigation__item"> 3584 <label class="page-navigation__item-label">@Translate("pagenavigation.next", "Next")</label> 3585 <i class="fal fa-arrow-alt-to-right page-navigation__item--icon"></i> 3586 </a> 3587 } 3588 3589 </section> 3590 3591 } 3592 3593 } 3594 else 3595 { 3596 // No action 3597 } 3598 3599 } 3600 3601 @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>> 3602 @using Dynamicweb; 3603 3604 @if (Pageview.Page.ParentPageId > 0) 3605 { 3606 var siblings = Services.Pages.GetPagesByParentID(Pageview.Page.ParentPageId).Where(p => p.Active).ToList(); 3607 var parentpageItemType = Pageview.Page.Parent.ItemType; 3608 bool isParentPageOverviewpage = parentpageItemType == "OverviewPage"; 3609 3610 if (siblings.Count() > 1 && isParentPageOverviewpage) 3611 { 3612 var prevPage = siblings.OrderByDescending(p => p.Sort).FirstOrDefault(p => p.Sort < Pageview.Page.Sort); 3613 var nextPage = siblings.OrderBy(p => p.Sort).FirstOrDefault(p => p.Sort > Pageview.Page.Sort); 3614 var overview = "/Default.aspx?ID=" + Pageview.Page.ParentPageId; 3615 3616 <section class="page-navigation"> 3617 @if (prevPage != null) 3618 { 3619 var back = "/Default.aspx?ID=" + prevPage.ID; 3620 <a href="@back" class="page-navigation__item"> 3621 <i class="fal fa-arrow-alt-to-left page-navigation__item--icon"></i> 3622 <label class="page-navigation__item-label">@Translate("pagenavigation.previous", "Previous")</label> 3623 </a> 3624 } 3625 3626 <a href="@overview" class="page-navigation__item"> 3627 <label class="page-navigation__item-label">@Translate("pagenavigation.Overview", "To overview")</label> 3628 <i class="fas fa-th page-navigation__item--icon"></i> 3629 </a> 3630 3631 @if (nextPage != null) 3632 { 3633 var forward = "/Default.aspx?ID=" + nextPage.ID; 3634 <a href="@forward" class="page-navigation__item"> 3635 <label class="page-navigation__item-label">@Translate("pagenavigation.next", "Next")</label> 3636 <i class="fal fa-arrow-alt-to-right page-navigation__item--icon"></i> 3637 </a> 3638 } 3639 </section> 3640 } 3641 } 3642 3643 *@ 3644 3645 3646 3647 <section class="footer-wrapper"> 3648 3649 <a href="javascript:void(0);" id="scroll-to-top" class="scroll-to-top" aria-label="scroll-to-top"> 3650 <span class="scroll-to-top__text">@Translate("Naar boven", "To Top")</span> 3651 <i class="fal fa-arrow-to-top scroll-to-top__icon"></i> 3652 </a> 3653 3654 @RenderSnippet("FooterTopImage") 3655 @RenderSnippet("FooterUSPDesktop") 3656 3657 <div class="footer"> 3658 3659 <section class="footer__top"> 3660 <div class="footer__top-container"> 3661 <div class="footer__top-item first">@RenderSnippet("FooterSocialContainerDesktop")</div> 3662 <div class="footer__top-item second"><i class="fal fa-phone-alt footer__top--phone-icon"></i> @Phonenumber</div> 3663 <div class="footer__top-item third">@RenderSnippet("FooterNewsletterSignUpDesktop")</div> 3664 </div> 3665 </section> 3666 3667 <section class="container footer__content"> 3668 3669 @RenderFooterLink("footernavigation-1", "footer-column-tp-1", "Footer.Column1.Header", "Category one") 3670 @RenderFooterLink("footernavigation-2", "footer-column-tp-2", "Footer.Column2.Header", "Category two") 3671 @RenderFooterLink("footernavigation-3", "footer-column-tp-3", "Footer.Column3.Header", "Category three") 3672 @RenderFooterLink("footernavigation-4", "footer-column-tp-4", "Footer.Column4.Header", "Category four") 3673 3674 <div class="footer__description-container"> 3675 <img class="footer__logo" src="@footerLogoTP" alt="Footer logo" /> 3676 3677 <div class="footer__description">@footerDescription</div> 3678 3679 @RenderSnippet("FooterContactBlock") 3680 3681 </div> 3682 3683 </section> 3684 3685 </div> 3686 3687 @RenderSnippet("FooterPaymentLogos") 3688 @RenderSnippet("FooterBottoMenuDesktop") 3689 3690 </section> 3691 3692 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel> 3693 @using Dynamicweb; 3694 @using Bluedesk.DynamicWeb.ItemTypes; 3695 3696 <section id="vue-modal"></section> 3697 3698 <section id="vue-bottom-bar" 3699 data-phonenumber="@formattedPhonenumber" 3700 data-isoffline="@isOffline" 3701 data-emailadress="@emailadress" 3702 data-currentpageid="@Pageview.Page.ID" 3703 data-enable-login="@enableLogin" 3704 data-enable-shoppingcart="@enableShoppingCart" 3705 data-enable-advancedsearch="@enableAdvancedSearch"></section> 3706 3707 <section class="bottombar__searchbox__wrapper"> 3708 <form class="searchbox__form" method="get" action="/Default.aspx" style="display: flex; flex-grow: 1;"> 3709 <input type="text" name="q" value="@SearchPrefill" class="searchbox__input" placeholder="@SearchPlaceholder" aria-label="Search through site content" data-placeholder="@SearchPlaceholder" data-hoverplaceholder="@SearchPlaceholderHover" style="display: flex; flex-grow: 1;" /> 3710 <div class="searchbox__button"> 3711 <button type="submit" class="searchbox__form__submit icon icon--medium icon__search input__icon" aria-label="Search"> 3712 <i class="fal fa-search"></i> 3713 </button> 3714 </div> 3715 <input type="hidden" name="ID" value="@SearchPageID" /> 3716 </form> 3717 3718 </section> 3719 3720 3721 3722 <div id="backdrop"></div> 3723 3724 @{ 3725 var polyfillsjs = Cache.VersionedFile(designtools + "/dist/polyfills.bundle.js"); 3726 var appbundlejs = Cache.VersionedFile(designtools + "/dist/app.bundle.js"); 3727 var appAsyncbundlejs = Cache.VersionedFile(designtools + "/dist/appAsync.bundle.js"); 3728 var vuebundlejs = Cache.VersionedFile(designtools + "/dist/vue.bundle.js"); 3729 } 3730 3731 <script src="@polyfillsjs"></script> 3732 <script src="@appbundlejs"></script> 3733 <script defer src="@vuebundlejs"></script> 3734 <script defer src="@appAsyncbundlejs"></script> 3735 3736 @if (font_configuration != null) 3737 { 3738 foreach (var item in font_configuration.Item.ToCodeFirstItem<Bluedesk.DynamicWeb.ItemTypes.Pages.ConfigurationPagesParent>().GetChildConfigs<FontConfiguration>()) 3739 { 3740 <link href="@item["FontLink"]" rel="stylesheet"> 3741 } 3742 } 3743 3744 <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous"> 3745 </body> 3746 </html> 3747