1 @using Dynamicweb.Content
2 @using Dynamicweb.Frontend;
3 @using Dynamicweb.Security.UserManagement
4 @using Newtonsoft.Json
5 @using NLWI.Core.Factory
6 @using NordahlAndersen.Web.Api
7 @using NordahlAndersen.Web.CustomCode.Extensions
8 @using NordahlAndersen.Web.CustomCode.Ecom.Helpers
9 @using RazorEngine.Compilation.ImpromptuInterface.InvokeExt
10 @using NordahlAndersen.Web.CustomCode.Ecom.Helpers
11 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel>
12 @{
13 string googleTagManagerId = ObjectFactory.GetInstance<NORRIQ.Common8.Context.AreaItemSettings>().GetCurrentAreaValue<string>("GoogleTagManagerId");
14 var isImpersonating = ObjectFactory.GetInstance<NORRIQ.SalesPersonLogin.Services.ImpersonationService>().IsCurrentlyImpersonating();
15 //System.Web.HttpContext.Current.Session["SalespersonService:SalesPerson"] = null;
16 var locationName = Pageview.User?.Name;
17 bool pageIsB2C = Model.Area.Item.GetBoolean("isB2C");
18 string stylesheet = !string.IsNullOrEmpty(Model.Area.Item.GetValue<ListViewModel>("stylesheet").SelectedValue) ? Model.Area.Item.GetValue<ListViewModel>("stylesheet").SelectedValue : "noa";
19 var title = PageHelper.GetGroupTitle() == "" ? Model.Title : PageHelper.GetGroupTitle();
20
21 // Set Klaviyo cookie
22 var uri = System.Web.HttpContext.Current.Request.Url;
23 string klaviyoCrossParam = System.Web.HttpUtility.ParseQueryString(uri.Query).Get("_kx");
24 if (!string.IsNullOrEmpty(klaviyoCrossParam))
25 {
26 System.Web.HttpContext.Current.Response.Cookies["klaviyoCrossParam"].Value = klaviyoCrossParam;
27 System.Web.HttpContext.Current.Response.Cookies["klaviyoCrossParam"].Expires = DateTime.Now.AddDays(5);
28 System.Web.HttpContext.Current.Response.Cookies["klaviyoCrossParam"].HttpOnly = false;
29 }
30
31 // Redirect to users language
32 var currentUser = Dynamicweb.Security.UserManagement.User.GetCurrentUser(Dynamicweb.Security.UserManagement.PagePermissionLevels.Frontend);
33 var userIsLoggedIn = currentUser != null;
34 var userLanguage = currentUser?.CustomFieldValues.Find(x=>x.CustomField.Name.Equals("LanguageCode"))?.Value.ToString().ToLower();
35
36 var currentUrl = Dynamicweb.Services.Areas.GetAreas().FirstOrDefault(a => a.ID == Model.Area.ID)?.UrlName;
37 if (userIsLoggedIn && !string.IsNullOrEmpty(userLanguage) && !string.IsNullOrEmpty(currentUrl))
38 {
39 if (!currentUrl.ToLower().Equals("/en") && userLanguage.Equals("enu"))
40 {
41 System.Web.HttpContext.Current.Response.Redirect("/en");
42 }
43 else if (!currentUrl.ToLower().Equals("/de") && userLanguage.Equals("deu"))
44 {
45 System.Web.HttpContext.Current.Response.Redirect("/de");
46 }
47 else if (!currentUrl.ToLower().Equals("/") && userLanguage.Equals("dan"))
48 {
49 System.Web.HttpContext.Current.Response.Redirect("/");
50 }
51 }
52 }
53 <!DOCTYPE html>
54 <html lang="@Pageview.Area.Culture">
55 <head>
56 <meta charset='utf-8' />
57 <meta name="description" content="@Model.Description" />
58 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, user-scalable=yes, shrink-to-fit=no" />
59 <meta http-equiv="x-ua-compatible" content="ie=edge">
60 @if (!string.IsNullOrEmpty(googleTagManagerId))
61 {
62 <!-- Google Tag Manager -->
63 <script>
64 (function (w, d, s, l, i) {
65 w[l] = w[l] || []; w[l].push({
66 'gtm.start':
67 new Date().getTime(), event: 'gtm.js'
68 }); var f = d.getElementsByTagName(s)[0],
69 j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
70 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
71 })(window, document, 'script', 'dataLayer', '@googleTagManagerId');</script>
72 <!-- End Google Tag Manager -->
73 }
74
75 @if (Model.Area.Item.GetBoolean("NoIndex"))
76 {
77 <!-- TODO: remove on launch-->
78 <meta name="robots" content="noindex, nofollow" />
79 }
80 <title>@title</title>
81 @Model.MetaTags
82 @if (Model.Area.Item.GetFile("favicon") != null)
83 {
84 <link href="@Model.Area.Item.GetFile("favicon").Path" rel="icon" type="image/png">
85 }
86 @if (stylesheet == "hca")
87 {
88 <link rel="preload" href="@NORRIQ.Common8.Razor.TimestampSource.GetSourceWithTimestamp("/Files/dist/css/HCA-min.css")" as="style" />
89 <link href="@NORRIQ.Common8.Razor.TimestampSource.GetSourceWithTimestamp("/Files/dist/css/HCA-min.css")" rel="stylesheet" />
90 }
91 else if (stylesheet == "joanlinor")
92 {
93 <link rel="preload" href="@NORRIQ.Common8.Razor.TimestampSource.GetSourceWithTimestamp("/Files/dist/css/joanlinor-min.css")" as="style" />
94 <link href="@NORRIQ.Common8.Razor.TimestampSource.GetSourceWithTimestamp("/Files/dist/css/joanlinor-min.css")" rel="stylesheet" />
95 }
96 else if (stylesheet == "nordahljewellery")
97 {
98 <link rel="preload" href="@NORRIQ.Common8.Razor.TimestampSource.GetSourceWithTimestamp("/Files/dist/css/nordahljewellery-min.css")" as="style" />
99 <link href="@NORRIQ.Common8.Razor.TimestampSource.GetSourceWithTimestamp("/Files/dist/css/nordahljewellery-min.css")" rel="stylesheet" />
100 }
101 else
102 {
103 <link rel="preload" href="@NORRIQ.Common8.Razor.TimestampSource.GetSourceWithTimestamp("/Files/dist/css/NordahlAndersen-min.css")" as="style" />
104 <link href="@NORRIQ.Common8.Razor.TimestampSource.GetSourceWithTimestamp("/Files/dist/css/NordahlAndersen-min.css")" rel="stylesheet" />
105 }
106 <style>
107 /* i cant get this to work, without putting it here*/
108 [v-cloak] {
109 display: none;
110 }
111 </style>
112 @if (!string.IsNullOrEmpty(Model.Area.Item.GetString("Cookieinformation")))
113 {
114 @Model.Area.Item.GetString("Cookieinformation")
115 }
116 </head>
117 <body>
118 @if (!string.IsNullOrEmpty(googleTagManagerId))
119 {
120 <!-- Google Tag Manager (noscript) -->
121 <noscript>
122 <iframe src="https://www.googletagmanager.com/ns.html?id=@googleTagManagerId"
123 height="0" width="0" style="display: none; visibility: hidden"></iframe>
124 </noscript>
125 <!-- End Google Tag Manager (noscript) -->
126 }
127 <div id="app">
128 <header class="basic_header">
129 @{
130 string basicHeaderPrefix = "Header ";
131 }
132
133 @if (isImpersonating)
134 {
135 <div class="impersonation-bar">
136 <div class="basic_navbar-container">
137 <p>
138 @Translate(basicHeaderPrefix + "debitor", "Debitor"): <b>@locationName</b> | <a href="@NORRIQ.Common8.Razor.Navigation.GetUrlByNavigationTag("impersonation-choose-customer")">@Translate("Go to impersonation page", "Go to impersonation page")</a>
139 </p>
140 </div>
141 </div>
142 }
143 @if (Model.Area.Item.GetItems("usp").Any())
144 {
145 <div class="usp-bar bg-white">
146 <div class="basic_navbar-container">
147 <ul class="d-flex justify-content-center align-items-center font-size-sm">
148 @foreach (var link in Model.Area.Item.GetItems("usp"))
149 {
150 if (string.IsNullOrEmpty(link.GetString("Link")))
151 {
152 <li class="d-inline-flex align-items-center text-primary px-2 font-weight-bold">
153 <b-icon-check font-scale="1.5" class="mr-1 mb-1"></b-icon-check>
154 <span>@link.GetString("Title")</span>
155 </li>
156 }
157 else
158 {
159 <li class="d-inline-flex align-items-center">
160 <a href="@link.GetString("Link")" class="d-inline-flex align-items-center text-primary px-2 font-weight-bold">
161 <b-icon-check font-scale="1.5" class="mr-1 mb-1"></b-icon-check>
162 <span>@link.GetString("Title")</span>
163 </a>
164 </li>
165 }
166 }
167 </ul>
168 </div>
169 </div>
170 }
171 <div class="basic_header-main">
172 <div class="container d-flex justify-content-between align-items-center flex-wrap">
173 <a href="@Pageview.Area.UrlName" class="basic_header-logo d-flex align-items-center" title="@Translate(basicHeaderPrefix + "Go to frontpage", "Go to frontpage")">
174 @if (Model.Area.Item.GetFile("Logo") != null && Model.Area.Item.GetFile("LogoSmall") != null)
175 {
176 <picture class="d-inline-flex align-items-center">
177 <source media="(min-width:800px)" srcset="@Model.Area.Item.GetFile("Logo").Path">
178 <source media="(max-width:799.98px)" srcset="@Model.Area.Item.GetFile("LogoSmall").Path">
179 <img class="img-fluid" src="@Model.Area.Item.GetFile("Logo").Path" alt="@Translate(basicHeaderPrefix + "Website Logo Alttext", "Website Logo Alttext")"/>
180 </picture>
181 }
182 else if (Model.Area.Item.GetFile("Logo") != null && Model.Area.Item.GetFile("LogoSmall") == null)
183 {
184 <img class="img-fluid" src="@Model.Area.Item.GetFile("Logo").Path" alt="@Translate(basicHeaderPrefix + "Website Logo Alttext", "Website Logo Alttext")"/>
185 }
186 else
187 {
188 <i>@Translate(basicHeaderPrefix + "No logo found", "No logo found, please configure it in the Dynamicweb Administration")</i>
189 }
190 </a>
191 @{
192 var registerpage = Dynamicweb.Services.Pages.GetPageByNavigationTag(Pageview.AreaID, " asyncOnly searchresult");
193 var searchParagraphId = Dynamicweb.Services.Paragraphs.GetParagraphsByPageId(registerpage.ID).FirstOrDefault().ID;
194 }
195 @*<form class="basic_header-search d-flex justify-content-end flex-grow-1" action="/Default.aspx">
196 <input name="ID" type="hidden" value="@NORRIQ.Common8.Razor.Navigation.GetPageIdByNavigationTag("searchresult")">
197 <label for="productsearch" class="sr-only">@Translate(basicHeaderPrefix + "Search", "Search")</label>
198 <input type="search" class="form-control" placeholder="@Translate(basicHeaderPrefix + "Search", "Search")" id="productsearch" name="productsearch">
199 <button type="submit" class="btn btn-narrow" aria-label="@Translate(basicHeaderPrefix + "Search", "Search")">
200 <b-icon-search></b-icon-search>
201 </button>
202 </form>*@
203 <instantsearch inline-template search-paragraph-id="@searchParagraphId">
204 <template>
205 <div class="basic_header-search d-flex justify-content-end flex-grow-1">
206 <form action="/Default.aspx">
207 <input name="ID" type="hidden" value="@NORRIQ.Common8.Razor.Navigation.GetPageIdByNavigationTag("searchresult")">
208 <label for="productsearch" class="sr-only">@Translate("Instant Search", "Search")</label>
209 <input autocomplete="off" type="search" class="form-control" placeholder="@Translate("Instant Search", "Search")" id="productsearch" name="productsearch" v-model="searchstring">
210 <button type="submit" class="btn btn-narrow" aria-label="@Translate("Instant Search", "Search")">
211 <b-icon-search></b-icon-search>
212 </button>
213 </form>
214 <div class="overlay" v-if="show" v-click-outside="closeModal">
215 <div v-for="product in getProducts">
216 <template>
217 <article>
218 <meta itemprop="name" :content="product.name"/>
219 <div style="display: flex">
220 <div style="text-align: left; width: 120px; margin-top: -15px">
221 <div class="plp-product-image text-center position-relative">
222 <a :href="product.prettyUrl" itemprop="url">
223 <figure v-if="product.images.length > 0 && product.defaultImage" class="image is-1by1">
224 <img :src="'/Admin/Public/GetImage.ashx?Width=300&Height=300&Crop=5&fillcanvas=true&Image=' + product.defaultImage.path"
225 :alt="product.name" itemprop="image" class="img-fluid" loading="lazy"/>
226 </figure>
227 <figure v-else class="image is-1by1">
228 <img src="/Admin/Public/GetImage.ashx?Width=300&Height=300&Crop=5&fillcanvas=true&Image=/Files/Images/default.jpg"
229 alt="@Translate("Instantsearch No product picture", "No product picture")"
230 itemprop="image"
231 class="img-fluid"
232 loading="lazy"/>
233 </figure>
234 </a>
235 </div>
236 </div>
237 <div style="text-align: left; margin-top: 10px">
238 <a :href="product.prettyUrl" itemprop="url">
239 <div class="plp-product-data" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
240 <header>
241 <h1 itemprop="name" class="font-size-md font-weight-bold">{{product.name}}</h1>
242 </header>
243 <div class="plp-group">
244 <async-price class-type="plp-product-price"
245 :default-price-without-vat="product.price.priceWithoutVat"
246 :default-price-with-vat="product.price.priceWithVat"
247 :default-list-price-without-vat="getListPrice(product).priceWithoutVat"
248 :default-list-price-with-vat="getListPrice(product).priceWithVat"
249 :product-id="product.id"
250 :product-number="product.number"
251 :variant-id="product.defaultVariantId"
252 :unit-of-measure="product.defaultUnitId"
253 :only-price="false"
254 default-currency-code="@Pageview.Area.EcomCurrencyId"
255 :show-default-price="@((Pageview.User == null).ToString()?.ToLower())">
256 </async-price>
257
258
259 <div class="plp-product-specs font-size-xs">
260 @if (Pageview.User != null)
261 {
262 <stock-display :product="product" class-type="plp-async"></stock-display>
263 }
264 <p itemprop="sku">@Translate("Instantsearch Product Number", "Product Number") <span class="nowrap">{{product.number}}</span></p>
265
266 </div>
267 </div>
268 </div>
269 </a>
270 </div>
271 </div>
272 </article>
273 </template>
274 </div>
275 </div>
276 </div>
277 </template>
278 </instantsearch>
279
280 <div class="basic_header-functions">
281 @{
282 if (!userIsLoggedIn && string.IsNullOrEmpty(userLanguage))
283 {
284 <template>
285 <b-dropdown variant="narrow" size="lg" no-caret menu-class="languages">
286 <template v-slot:button-content>
287 <b-icon-globe></b-icon-globe>
288 <span class="sr-only">@Pageview.Area.CultureInfo.EnglishName</span>
289 </template>
290
291 <!-- Current language -->
292 <b-dropdown-item href="@currentUrl" link-class="d-flex align-items-center is-active font-weight-bold">
293 <figure class="image is-4by3">
294 <img src="/Admin/Images/Flags/flag_@(Pageview.Area.Culture.Split('-').Last()).png" alt="@Pageview.Area.Culture"/>
295 </figure>
296 <span class="sr-only">@Pageview.Area.Culture.Split('-').First()</span>
297 </b-dropdown-item>
298
299 <!-- Other Languages -->
300 @foreach (var area in Dynamicweb.Services.Areas.GetAreas().Where(a => a.ID != Model.Area.ID).ToList())
301 {
302 var lang = Model.Area.Languages.FirstOrDefault(x => x.ID == area.ID);
303
304 if (lang == null)
305 {
306 continue;
307 }
308
309 var url = area.UrlName;
310 <b-dropdown-item href="@url" link-class="d-flex align-items-center">
311 <figure class="image is-4by3">
312 <img src="/Admin/Images/Flags/flag_@(lang.Culture.Split('-').Last()).png" alt="@lang.Culture"/>
313 </figure>
314 <span class="sr-only">@lang.Culture.Split('-').First()</span>
315 </b-dropdown-item>
316 }
317 </b-dropdown>
318 </template>
319 }
320 }
321
322 <a href="@NORRIQ.Common8.Razor.Navigation.GetUrlByNavigationTag("dealers")" class="btn btn-narrow font-size-lg" aria-label="@Translate(basicHeaderPrefix + "Dealerlocator", "Dealerlocator")">
323 <b-icon-geo-alt></b-icon-geo-alt>
324 </a>
325 @if (!pageIsB2C)
326 {
327 if (Pageview.User == null)
328 {
329 <a href="@NORRIQ.Common8.Razor.Navigation.GetUrlByNavigationTag("selfservice")" class="btn btn-narrow font-size-xl" aria-label="@Translate(basicHeaderPrefix + "Login", "Login")">
330 <b-icon-person></b-icon-person>
331 </a>
332 }
333 else
334 {
335 <b-dropdown variant="narrow" right size="xl" no-caret>
336 <template v-slot:button-content>
337 <b-icon-person></b-icon-person>
338 <span class="sr-only">User</span>
339 </template>
340 <template>
341 @RenderNavigation(new { Template = "dropdown.xslt", Expandmode = "all", StartLevel = 1, EndLevel = 4, NavigationTag = "selfservice" })
342 @if (Pageview.User.IsSmsAllowed())
343 {
344 <b-dropdown-item href="/Default.aspx?ID=@(NORRIQ.Common8.Razor.Navigation.GetPageIdByNavigationTag("smssender"))">@Translate(basicHeaderPrefix + "Sms sender", "Sms sender")</b-dropdown-item>
345 }
346 <b-dropdown-item href="/admin/public/extranetlogoff.aspx?ID=@(NORRIQ.Common8.Razor.Navigation.GetPageIdByNavigationTag("home"))" v-clear-cache:click.currentUser class="border-top bg-light">@Translate(basicHeaderPrefix + "Sign out", "Sign out")</b-dropdown-item>
347 </template>
348 </b-dropdown>
349 }
350 }
351 <cart-icon cartlink="@NORRIQ.Common8.Razor.Navigation.GetUrlByNavigationTag("checkout")"></cart-icon>
352 <button type="button"
353 class="btn btn-burger btn-narrow"
354 aria-label="@Translate(basicHeaderPrefix + "Open main navigation", "Open main navigation")"
355 v-b-toggle.navigation-drawer>
356 <b-icon-list></b-icon-list>
357 </button>
358 </div>
359 </div>
360 </div>
361 <nav class="basic_header-navigation bg-white text-primary">
362 <div class="container d-flex justify-content-between align-items-center">
363 @*<button type="button"
364 class="btn btn-narrow font-size-xl"
365 aria-label="@Translate(basicHeaderPrefix + "Open main navigation", "Open main navigation")"
366 v-b-toggle.navigation-drawer>
367 <b-icon-list></b-icon-list>
368 </button>*@
369 @RenderNavigation(new { Template = "basic_Header.xslt", Expandmode = "all", StartLevel = 1, EndLevel = 4 })
370 </div>
371 </nav>
372 <b-sidebar id="navigation-drawer" sidebar-class="b-sidebar-navigation" shadow backdrop bg-variant="white" text-variant="primary" lazy z-index="1010">
373 <template>
374 @RenderNavigation(new { Template = "basic_Header-SideBar.xslt", Expandmode = "all", StartLevel = 1, EndLevel = 4 })
375 </template>
376 </b-sidebar>
377 </header>
378 @using Dynamicweb.Frontend;
379 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel>
380
381 @Title("Page")
382 @Description("Default page template")
383 @{
384
385 }
386 @if (Pageview.IsCurrentUserAllowed)
387 {
388 string GridCols = !string.IsNullOrEmpty(Model.Item.GetValue<ListViewModel>("Columns").SelectedValue) ? Model.Item.GetValue<ListViewModel>("Columns").SelectedValue : "grid-12";
389 string ContainerSize = !string.IsNullOrEmpty(Model.Item.GetValue<ListViewModel>("Width").SelectedValue) ? Model.Item.GetValue<ListViewModel>("Width").SelectedValue : "default";
390 string SpacingTop = !string.IsNullOrEmpty(Model.Item.GetValue<ListViewModel>("SpaceTop").SelectedValue) ? Model.Item.GetValue<ListViewModel>("SpaceTop").SelectedValue : "pt-3";
391 string SpacingBottom = !string.IsNullOrEmpty(Model.Item.GetValue<ListViewModel>("SpaceBottom").SelectedValue) ? Model.Item.GetValue<ListViewModel>("SpaceBottom").SelectedValue : "pb-3";
392 string BgColor = !string.IsNullOrEmpty(Model.Item.GetValue<ListViewModel>("Background").SelectedValue) ? Model.Item.GetValue<ListViewModel>("Background").SelectedValue : "bg-white";
393 string pageLayout = !string.IsNullOrEmpty(Model.Item.GetValue<ListViewModel>("Layout").SelectedValue) ? Model.Item.GetValue<ListViewModel>("Layout").SelectedValue : "page-menu";
394 if (!Model.Item.GetBoolean("HideBreadcrumb") || pageLayout == "page-menu")
395 {
396 <nav class="page-nav">
397 <div class="container d-flex justify-content-start align-items-center">
398
399 @if (pageLayout == "page-menu")
400 {
401 <button class="toggle font-size-xl mr-3 btn-sidebar" v-b-toggle.sidebar-navigation>
402 <b-icon-list></b-icon-list>
403 <span class="sr-only">@Translate("Menu", "Menu")</span>
404 </button>
405 }
406 @if (!Model.Item.GetBoolean("HideBreadcrumb"))
407 {
408 @RenderNavigation(new { Template = "basic_Breadcrumb.xslt", Expandmode = "all", StartLevel = 1, EndLevel = 5 })
409 }
410 </div>
411 </nav>
412 }
413 if (pageLayout == "page-menu")
414 {
415 <main class="@pageLayout">
416 <div class="container boxed">
417 <aside class="page-sidebar">
418 @RenderNavigation(new { Template = "basic_Page.xslt", StartLevel = 1, EndLevel = 3 })
419 </aside>
420 <div class="page-content @BgColor">
421 <section class="page-section">
422 <div class="grid container @GridCols @ContainerSize @SpacingTop @SpacingBottom">
423 @RenderPlaceholder()
424 </div>
425 </section>
426 </div>
427 </div>
428 </main>
429 }
430 else if (pageLayout == "page-content")
431 {
432 <main class="@pageLayout">
433 <section class="page-section @BgColor">
434 <div class="grid container @GridCols @ContainerSize @SpacingTop @SpacingBottom">
435 @RenderPlaceholder()
436 </div>
437 </section>
438 </main>
439 }
440 else
441 {
442 @RenderPlaceholder()
443 }
444 }
445 else
446 {
447 <main class="page-login">
448 @RenderPlaceholder()
449 </main>
450 }
451 @helper RenderPlaceholder()
452 {
453 @Model.Placeholder("Content", "Content", "unwrap:true;default:true")
454 }
455
456 <footer class="basic_footer bg-primary text-light">
457 <div class="container narrow grid grid-3-3-3-3 py-5">
458 @if (!string.IsNullOrEmpty(Model.Area.Item.GetString("FooterOneTitle")) && !string.IsNullOrEmpty(Model.Area.Item.GetString("FooterOneText")))
459 {
460 <div class="basic_footer-box">
461 <button class="btn btn-lg btn-fit justify-content-between" role="button" v-b-toggle.footer-one>
462 <span>@Model.Area.Item.GetString("FooterOneTitle")</span><span class="arrow-down"></span>
463 </button>
464 <b-collapse id="footer-one" class="basic_footer-collapse">
465 <template>
466 <div class="basic_footer-body flow font-size-sm">
467 <p class="h5 font-weight-bold text-white">@Model.Area.Item.GetString("FooterOneTitle")</p>
468 @Model.Area.Item.GetString("FooterOneText")
469 </div>
470 </template>
471 </b-collapse>
472 </div>
473 }
474 @if (!string.IsNullOrEmpty(Model.Area.Item.GetString("FooterTwoTitle")) && !string.IsNullOrEmpty(Model.Area.Item.GetString("FooterTwoText")))
475 {
476 <div class="basic_footer-box">
477 <button class="btn btn-lg btn-fit justify-content-between" role="button" v-b-toggle.footer-two>
478 <span>@Model.Area.Item.GetString("FooterTwoTitle")</span><span class="arrow-down"></span>
479 </button>
480 <b-collapse id="footer-two" class="basic_footer-collapse">
481 <template>
482 <div class="basic_footer-body flow font-size-sm">
483 <p class="h5 font-weight-bold text-white">@Model.Area.Item.GetString("FooterTwoTitle")</p>
484 @Model.Area.Item.GetString("FooterTwoText")
485 </div>
486 </template>
487 </b-collapse>
488 </div>
489 }
490 @if (!string.IsNullOrEmpty(Model.Area.Item.GetString("FooterThreeTitle")) && !string.IsNullOrEmpty(Model.Area.Item.GetString("FooterThreeText")))
491 {
492 <div class="basic_footer-box">
493 <button class="btn btn-lg btn-fit justify-content-between" role="button" v-b-toggle.footer-three>
494 <span>@Model.Area.Item.GetString("FooterThreeTitle")</span><span class="arrow-down"></span>
495 </button>
496 <b-collapse id="footer-three" class="basic_footer-collapse">
497 <template>
498 <div class="basic_footer-body flow font-size-sm">
499 <p class="h5 font-weight-bold text-white">@Model.Area.Item.GetString("FooterThreeTitle")</p>
500 @Model.Area.Item.GetString("FooterThreeText")
501 </div>
502 </template>
503 </b-collapse>
504 </div>
505 }
506 @if (!string.IsNullOrEmpty(Model.Area.Item.GetString("FooterFourTitle")) && !string.IsNullOrEmpty(Model.Area.Item.GetString("FooterFourText")))
507 {
508 <div class="basic_footer-box">
509 <div class="basic_footer-body flow">
510 <p class="h5 font-weight-bold text-white">@Model.Area.Item.GetString("FooterFourTitle")</p>
511 <ul class="d-flex align-items-center flex-wrap basic_footer-social position-relative">
512 @if (!string.IsNullOrEmpty(Model.Area.Item.GetString("YoutubeUrl")))
513 {
514 <li>
515 <a href="@Model.Area.Item.GetString("YoutubeUrl")" target="_blank" rel="noreferrer" title="Youtube" aria-label="Youtube" class="badge bg-white text-primary size-2">
516 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="b-icon bi" width="1.5em" height="1.5em" fill="currentColor"><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg>
517 </a>
518 </li>
519 }
520 @if (Model.Area.Item.GetItems("YoutubeLinks").Any())
521 {
522 <li class="position-static">
523 <a href="#youtube" v-b-toggle title="Youtube" aria-label="Youtube" class="badge bg-white text-primary size-2">
524 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="b-icon bi" width="1.5em" height="1.5em" fill="currentColor"><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg>
525 </a>
526 <b-collapse id="youtube" class="some-links text-primary" accordion="some">
527 @foreach (var link in Model.Area.Item.GetItems("YoutubeLinks"))
528 {
529 <a href="@link.GetString("Link")" target="_blank" rel="noreferrer" class="d-block bg-white text-primary py-2 px-3" title="@link.GetString("Title")">
530 @link.GetString("Title")
531 </a>
532 }
533 </b-collapse>
534 </li>
535 }
536 @if (!string.IsNullOrEmpty(Model.Area.Item.GetString("FacebookUrl")))
537 {
538 <li>
539 <a href="@Model.Area.Item.GetString("FacebookUrl")" target="_blank" rel="noreferrer" title="Facebook" aria-label="Facebook" class="badge bg-white text-primary size-2">
540 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="b-icon bi" width="1.5em" height="1.5em" fill="currentColor"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/></svg>
541 </a>
542 </li>
543 }
544 @if (Model.Area.Item.GetItems("FacebookLinks").Any())
545 {
546 <li class="position-static">
547 <a href="#facebook" v-b-toggle title="Facebook" aria-label="Facebook" class="badge bg-white text-primary size-2">
548 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="b-icon bi" width="1.5em" height="1.5em" fill="currentColor"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/></svg>
549 </a>
550 <b-collapse id="facebook" class="some-links text-primary" accordion="some">
551 @foreach (var link in Model.Area.Item.GetItems("FacebookLinks"))
552 {
553 <a href="@link.GetString("Link")" target="_blank" rel="noreferrer" class="d-block bg-white text-primary py-2 px-3" title="@link.GetString("Title")">
554 @link.GetString("Title")
555 </a>
556 }
557 </b-collapse>
558 </li>
559 }
560 @if (!string.IsNullOrEmpty(Model.Area.Item.GetString("InstagramUrl")))
561 {
562 <li>
563 <a href="@Model.Area.Item.GetString("InstagramUrl")" target="_blank" rel="noreferrer" title="Instagram" aria-label="Instagram" class="badge bg-white text-primary size-2">
564 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="b-icon bi" width="1.5em" height="1.5em" fill="currentColor"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>
565 </a>
566 </li>
567 }
568 @if (Model.Area.Item.GetItems("InstagramLinks").Any())
569 {
570 <li class="position-static">
571 <a href="#instagram" v-b-toggle title="Instagram" aria-label="Instagram" class="badge bg-white text-primary size-2">
572 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="b-icon bi" width="1.5em" height="1.5em" fill="currentColor"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>
573 </a>
574 <b-collapse id="instagram" class="some-links text-primary" accordion="some">
575 @foreach (var link in Model.Area.Item.GetItems("InstagramLinks"))
576 {
577 <a href="@link.GetString("Link")" target="_blank" rel="noreferrer" class="d-block bg-white text-primary py-2 px-3" title="@link.GetString("Title")">
578 @link.GetString("Title")
579 </a>
580 }
581 </b-collapse>
582 </li>
583 }
584 @if (!string.IsNullOrEmpty(Model.Area.Item.GetString("PinterestUrl")))
585 {
586 <li>
587 <a href="@Model.Area.Item.GetString("PinterestUrl")" target="_blank" rel="noreferrer" title="Pinterest" aria-label="Pinterest" class="badge bg-white text-primary size-2">
588 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="b-icon bi" width="1.5em" height="1.5em" fill="currentColor"><path d="M204 6.5C101.4 6.5 0 74.9 0 185.6 0 256 39.6 296 63.6 296c9.9 0 15.6-27.6 15.6-35.4 0-9.3-23.7-29.1-23.7-67.8 0-80.4 61.2-137.4 140.4-137.4 68.1 0 118.5 38.7 118.5 109.8 0 53.1-21.3 152.7-90.3 152.7-24.9 0-46.2-18-46.2-43.8 0-37.8 26.4-74.4 26.4-113.4 0-66.2-93.9-54.2-93.9 25.8 0 16.8 2.1 35.4 9.6 50.7-13.8 59.4-42 147.9-42 209.1 0 18.9 2.7 37.5 4.5 56.4 3.4 3.8 1.7 3.4 6.9 1.5 50.4-69 48.6-82.5 71.4-172.8 12.3 23.4 44.1 36 69.3 36 106.2 0 153.9-103.5 153.9-196.8C384 71.3 298.2 6.5 204 6.5z"/></svg>
589 </a>
590 </li>
591 }
592 @if (Model.Area.Item.GetItems("PinterestLinks").Any())
593 {
594 <li class="position-static">
595 <a href="#pinterest" v-b-toggle title="Pinterest" aria-label="Pinterest" class="badge bg-white text-primary size-2">
596 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="b-icon bi" width="1.5em" height="1.5em" fill="currentColor"><path d="M204 6.5C101.4 6.5 0 74.9 0 185.6 0 256 39.6 296 63.6 296c9.9 0 15.6-27.6 15.6-35.4 0-9.3-23.7-29.1-23.7-67.8 0-80.4 61.2-137.4 140.4-137.4 68.1 0 118.5 38.7 118.5 109.8 0 53.1-21.3 152.7-90.3 152.7-24.9 0-46.2-18-46.2-43.8 0-37.8 26.4-74.4 26.4-113.4 0-66.2-93.9-54.2-93.9 25.8 0 16.8 2.1 35.4 9.6 50.7-13.8 59.4-42 147.9-42 209.1 0 18.9 2.7 37.5 4.5 56.4 3.4 3.8 1.7 3.4 6.9 1.5 50.4-69 48.6-82.5 71.4-172.8 12.3 23.4 44.1 36 69.3 36 106.2 0 153.9-103.5 153.9-196.8C384 71.3 298.2 6.5 204 6.5z"/></svg>
597 </a>
598 <b-collapse id="pinterest" class="some-links text-primary" accordion="some">
599 @foreach (var link in Model.Area.Item.GetItems("PinterestLinks"))
600 {
601 <a href="@link.GetString("Link")" target="_blank" rel="noreferrer" class="d-block bg-white text-primary py-2 px-3" title="@link.GetString("Title")">
602 @link.GetString("Title")
603 </a>
604 }
605 </b-collapse>
606 </li>
607 }
608 </ul>
609 </div>
610 </div>
611 }
612 </div>
613 @if (!string.IsNullOrEmpty(Model.Area.Item.GetString("FooterCopyright")))
614 {
615 <div class="basic_footer-sub py-3">
616 <div class="container narrow grid grid-6-6">
617 @if (Model.Area.Item.GetValue<ListViewModel>("FooterPayment").SelectedValues.Any())
618 {
619 <div class="basic_footer-payment d-inline-flex align-items-center">
620 @foreach (var cards in Model.Area.Item.GetValue<ListViewModel>("FooterPayment").SelectedValues)
621 {
622
623 <figure class="d-inline-flex align-items-center pr-2">
624 <img src="/Files/Images/payment/@cards" alt="@cards.Split('.').First()" width="32" height="32" class="bg-white img-fluid"/>
625 </figure>
626
627 }
628 </div>
629 }
630 <p class="basic_footer-copy font-size-xs">
631 © @DateTime.Now.Year @Model.Area.Item.GetString("FooterCopyright")
632 </p>
633 </div>
634 </div>
635 }
636 </footer>
637 @{
638 var itemSettings = ObjectFactory.GetInstance<NORRIQ.Common8.Context.AreaItemSettings>();
639 bool newsLetterShowOnAllPages = itemSettings.GetCurrentAreaValue<bool>("NewsLetterShowOnAllPages");
640 string newsLetterParagraphLink = itemSettings.GetCurrentAreaValue<string>("NewsLetterParagraphLinkId");
641
642 int newsletterParagraphId = 0;
643 if (newsLetterShowOnAllPages && int.TryParse(newsLetterParagraphLink, out newsletterParagraphId) && newsletterParagraphId > 0)
644 {
645 @RenderParagraphContent(newsletterParagraphId)
646 }
647 }
648 </div>
649
650 @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
651 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel>
652 @{
653 bool cartIsB2C = Model.Area.Item.GetBoolean("isB2C");
654 }
655 <script type="text/x-template" id="cart-icon-template">
656 @{
657 string cartIconPrefix = "Minicart ";
658 }
659 @if (Pageview.User != null || cartIsB2C)
660 {
661 <a :href="cartlink" class="btn btn-narrow font-size-lg">
662 <b-icon-cart3></b-icon-cart3>
663 <span class="sr-only">@Translate(cartIconPrefix + "Checkout", "Checkout")</span>
664 <span v-if="!cartEmpty" class="cart-quantity d-flex align-items-center justify-content-center">{{quantity}}</span>
665 </a>
666 }
667 </script>
668
669
670
671 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel>
672
673 <script type="text/x-template" id="basic-facet-filter-template">
674 @{
675 string basicFacetPrefix = "Filter ";
676 }
677 <b-sidebar id="sidebar-filter" shadow backdrop bg-variant="white" text-variant="primary">
678 @*<template v-if="HasActiveFilter()">
679 <p id="selected-filter-label" class="sr-only">
680 @Translate(basicFacetPrefix + "Active", "Active")
681 </p>
682 <div class="basic_filter-active" aria-labelledby="selected-filter-label">
683 <template v-for="facetFilter in facetFilters">
684 <span v-for="option in SelectedOptions(facetFilter)" class="custom-control custom-filter">
685 <input type="checkbox"
686 :id="'Selected-' + facetFilter.queryParameter + '-' + option.name"
687 :name="facetFilter.queryParameter"
688 :value="option.value"
689 :v-model="option.selected"
690 :checked="option.selected"
691 v-on:click="ToggleFilter(facetFilter.queryParameter,option)"
692 class="custom-control-input" />
693 <label :for="'Selected-' + facetFilter.queryParameter + '-' + option.name" class="custom-control-label" :data-name="facetFilter.queryParameter">
694 <span>
695 {{option.label}}
696 </span>
697 <svg>
698 <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/files/dist/icons/icons.svg#times"></use>
699 </svg>
700 </label>
701 </span>
702 </template>
703 </div>
704 </template>*@
705
706 <div class="basic_filter" v-if="!error && facetFilters">
707 <div class="basic_filter-groups flow pb-3">
708 <template v-for="(facetFilter, index) in facetFilters">
709 <div class="basic_filter-group" v-if="facetFilter.options.length > 0" :key="index" >
710 <p class="d-flex justify-content-between align-items-center font-size-lg py-3"
711 role="button"
712 :id="'filter-group-' + queryParameter(facetFilter)"
713 v-b-toggle="'filter-collapse-' + queryParameter(facetFilter)">
714 <span>{{facetFilter.name}}</span>
715 <span class="arrow-down"></span>
716 </p>
717 <b-collapse :id="'filter-collapse-' + queryParameter(facetFilter)" visible class="basic_filter-collapsing flow-sm" :aria-labelledby="'filter-group-' + queryParameter(facetFilter)">
718 <template v-if="facetFilter.options.length > 5">
719 <div v-for="option in getActiveFilters(facetFilter).slice(0, 5)" class="custom-control custom-checkbox facet-option Slice">
720 <input type="checkbox" class="custom-control-input"
721 :id="'UnSelected-' + facetFilter.queryParameter + '-' + option.name"
722 :name="facetFilter.queryParameter"
723 :value="option.value"
724 :v-model="option.selected"
725 :checked="option.selected"
726 v-on:click="ToggleFilter(facetFilter.queryParameter,option)" />
727 <label :for="'UnSelected-' + facetFilter.queryParameter + '-' + option.name" class="custom-control-label font-size-sm">
728 {{option.label}} <span class="count">({{option.count}})</span>
729 </label>
730 </div>
731 <b-collapse class="flow-sm" :id="'filter-expand-' + queryParameter(facetFilter)" :visible="ShowMoreIfSelected(facetFilter.options, index)">
732 <div v-for="option in getActiveFilters(facetFilter).slice(5)" class="custom-control custom-checkbox">
733 <input type="checkbox" class="custom-control-input"
734 :id="'UnSelected-' + facetFilter.queryParameter + '-' + option.name"
735 :name="facetFilter.queryParameter"
736 :value="option.value"
737 :v-model="option.selected"
738 :checked="option.selected"
739 v-on:click="ToggleFilter(facetFilter.queryParameter,option)" />
740 <label :for="'UnSelected-' + facetFilter.queryParameter + '-' + option.name" class="custom-control-label font-size-sm">
741 {{option.label}} <span class="count">({{option.count}})</span>
742 </label>
743 </div>
744 </b-collapse>
745 <button v-b-toggle="'filter-expand-' + queryParameter(facetFilter)" class="btn btn-sm p-0 font-weight-normal font-size-xs" v-if="facetFilter.options.length > 5">
746 <span class="plus-minus"></span>
747 <span class="show-more pl-1">@Translate(basicFacetPrefix + "show more", "show more")</span>
748 <span class="show-less pl-1">@Translate(basicFacetPrefix + "show less", "show less")</span>
749 </button>
750 </template>
751 <template v-else>
752 <div v-for="option in facetFilter.options" class="custom-control custom-checkbox facet-option">
753 <input type="checkbox" class="custom-control-input"
754 :id="'UnSelected-' + facetFilter.queryParameter + '-' + option.name"
755 :name="facetFilter.queryParameter"
756 :value="option.value"
757 :v-model="option.selected"
758 :checked="option.selected"
759 v-on:click="ToggleFilter(facetFilter.queryParameter,option)" />
760 <label :for="'UnSelected-' + facetFilter.queryParameter + '-' + option.name" class="custom-control-label font-size-sm">
761 {{option.label}} <span class="count">({{option.count}})</span>
762 </label>
763 </div>
764 </template>
765 </b-collapse>
766 </div>
767 </template>
768 </div>
769 </div>
770 </b-sidebar>
771 </script>
772
773 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel>
774 <script type="text/x-template" id="add-to-basket-simple-template">
775 @{
776 string addToBasketSimplePrifix = "BuyButton ";
777 }
778 <div>
779 <label for="quantity" class="sr-only">@Translate(addToBasketSimplePrifix + "Quantity", "Quantity")</label>
780 <input class="form-control" type="tel" name="quantity" v-model="quantity" autocomplete="off" onclick="this.setSelectionRange(0, this.value.length)">
781 <button :disabled="quantity < 1" :class="buttonClass" v-on:click="addToBasketAndResetQuantity()" aria-label="@Translate(addToBasketSimplePrifix + "Add", "Add")">
782 <slot>
783 <template v-if="IsAdding">
784 <span class="spinner-md-light is-adding"></span>
785 </template>
786 <template v-else-if="IsAdded">
787 <b-icon-check class="is-added"></b-icon-check>
788 </template>
789 <template v-else>
790 <b-icon-cart3></b-icon-cart3>
791 </template>
792 <span>
793 @Translate(addToBasketSimplePrifix + "Add to basket", "Add to basket")
794 </span>
795 </slot>
796 </button>
797 </div>
798 </script>
799
800 <script type="text/x-template" id="quick-add-template">
801 @{
802 string quickAddPrifix = "BuyButton ";
803 }
804 <div v-bind:class="[{added: IsAdded}, {adding: IsAdding}]">
805 <label for="quantity">@Translate(quickAddPrifix + "Quantity", "Quantity")</label>
806 <input class="form-control" type="number" id="quantity" name="quantity" v-model="quantity" autocomplete="off">
807 </div>
808 </script>
809
810 <script type="text/x-template" id="add-to-basket-button-only-template">
811 @{
812 string addToBasketPrefix = "BuyButton ";
813 }
814 <div v-bind:class="[{added: IsAdded}, {adding: IsAdding}]">
815 <button :class="buttonClass" v-on:click="addToBasket()">
816 <slot>
817 @Translate(addToBasketPrefix + "Add to basket", "Add to basket")
818 </slot>
819 </button>
820 </div>
821 </script>
822
823 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel>
824 @{
825 var variantSelectorPrefix = "VariantSelector ";
826 bool shopIsB2C = Model.Area.Item.GetBoolean("isB2C");
827 }
828 <script type="text/x-template" id="variant-selector-template">
829 <div class="product-buy">
830 <div class="product-variant" v-if="mainProduct.hasVariants">
831 <label for="size" class="sr-only">{{defaultValue}}</label>
832 <select class="form-control" id="size" v-on:change="changeVariantDropDown($event)">
833 <option selected disabled hidden :value="defaultValue">{{defaultValue}}</option>
834 <option v-for="(variant,index) in mainProduct.variants" :value="variant.variantId">
835 {{variant.shortDescription}}
836 <template v-if="showAvailableDate(variant.nextAvailableDate) && (!variant.stock || variant.stock <= 0)">
837 ,@Translate(variantSelectorPrefix + "on stock at", "on stock at") {{variant.nextAvailableDate }}
838 </template>
839 <template v-else-if="!showAvailableDate(variant.nextAvailableDate) && (!variant.stock || variant.stock <= 0)">
840 @Translate(variantSelectorPrefix + "Out Of Stock", ", Out Of Stock")
841 </template>
842 </option>
843 </select>
844 </div>
845 @{
846 if (Pageview.User != null)
847 {
848 <add-to-basket-simple :product="selectedValue"
849 :unit-of-measure="mainProduct.defaultUnitId"
850 :button-class="buttonClass"
851 :class='cartBasketClass'
852 :engraving="engraving"
853 :language-id="languageId">
854 </add-to-basket-simple>
855 }
856 else if (shopIsB2C)
857 {
858 <add-to-basket-simple :product="selectedValue"
859 :unit-of-measure="mainProduct.defaultUnitId"
860 :button-class="buttonClass"
861 :class='cartBasketClass'
862 :engraving="engraving"
863 :language-id="languageId"
864 v-if="showBuyButtonOnB2C() && showBuyButtonVariantChangedOnB2C()">
865 </add-to-basket-simple>
866 }
867 }
868
869 </div>
870
871 </script>
872
873 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel>
874 <script type="text/x-template" id="async-price-template">
875 @{
876 string asyncPrefix = "Async ";
877 }
878 <div :class="classType + (loading ? ' loading' : '')">
879 <template>
880 <p :class="classType + '-error'" v-if="error">{{error}}</p>
881 </template>
882
883 <template v-if="!onlyStock">
884 @*<div :class="classType + (loading ? ' loading' : '')">*@
885 <template v-if="!loading && currentPrice">
886 <p class="unit-price" v-if="showBtcAdvancePrice && (btcAdvancePrice > currentPrice.netUnitPrice.priceWithoutVat)">
887 <span class="offer-advance-price" itemprop="price" :content="currentPrice.netUnitPrice.priceWithoutVat">{{ btcAdvancePrice }} {{currentPrice.currencyCode}}</span>
888 </p>
889 <p class="unit-price" itemprop="priceCurrency" :content="currentPrice.currencyCode">
890 <span :class="[(btcAdvancePrice > currentPrice.netUnitPrice.priceWithoutVat) ? 'offer-price' : '']" itemprop="price" :content="currentPrice.netUnitPrice.priceWithoutVat">{{ currentPrice.netUnitPrice.priceWithoutVat }} {{currentPrice.currencyCode}}</span>
891 </p>
892 </template>
893 <p class="org-price" v-if="!loading && isB2B && currentPrice.defaultUnitPrice && currentPrice && !isHidingPrices && (currentPrice.defaultUnitPrice > currentPrice.netUnitPrice.priceWithoutVat) && !onlyPrice">
894 <span itemprop="price">{{ currentPrice.defaultUnitPrice }} {{currentPrice.currencyCode}}</span>
895 </p>
896 @if (Pageview.User != null)
897 {
898 @*<p v-if="!isHidingPrices && priceB2C.netUnitPrice.priceWithoutVat > 0 && !onlyPrice" class="font-size-xs salesprice">@Translate(asyncPrefix + "Sales price", "Sales price") {{priceB2C.netUnitPrice.priceWithoutVat}} {{priceB2C.currencyCode}} </p>*@
899 <p v-if="!isHidingPrices && priceB2C.netUnitPrice.priceWithoutVat > 0 && !onlyPrice" class="font-size-xs salesprice">@Translate(asyncPrefix + "Sales price", "Sales price") {{currentPrice.defaultListPrice}} {{currentPrice.currencyCode}} </p>
900 }
901 @*</div>*@
902 </template>
903 </div>
904 </script>
905 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel>
906 <script type="text/x-template" id="stock-display-template">
907 <p class="stock" v-bind:class="{'out-of-stock' : outOfStock, 'few-in-stock' : fewInStock, 'in-stock' : inStock, 'loader' : loading}">
908 <template v-if="!loading && outOfStock">
909 <link itemprop="availability" href="http://schema.org/SoldOut" />
910 @Translate("Out Of Stock", "Out Of Stock")
911 <template v-if="showAvailableDate(selectedVariant.nextAvailableDate) && selectedVariant.stock <= 0"> - @Translate("Expected stock date") {{product.nextAvailableDate}}</template>
912 </template>
913 <template v-if="!loading && fewInStock">
914 <link itemprop="availability" href="http://schema.org/LimitedAvailability" />
915 @Translate("Few In Stock", "Few In Stock")
916 </template>
917 <template v-if="!loading && inStock">
918 <link itemprop="availability" href="http://schema.org/InStock" />
919 @Translate("In Stock", "In Stock")
920 </template>
921 </p>
922 </script>
923 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel>
924 @{
925 //This template contains everything for the favoritelist items.
926 string favoriteListPrefix = "FavoriteList ";
927 }
928 <span id="favoritelistitem_confirm_delete_on_all" style="display: none; visibility: hidden">@Translate(favoriteListPrefix + "_confirm_delete_all", "Er du sikker på at du vil fjerne produktet {0} fra alle lister ?")</span>
929
930 <script type="text/x-template" id="favorite-item-template">
931 <div class="basic_favoriteitem" v-if="isLoggedIn">
932 <button class="favorite" aria-label="@Translate(" Favorite", "Favorite" )" v-on:click="toggleItem()">
933 <template v-if="isActive">
934 <b-icon-heart-fill class="font-size-lg"></b-icon-heart-fill>
935 </template>
936 <template v-else>
937 <b-icon-heart class="font-size-lg"></b-icon-heart>
938 </template>
939 </button>
940 </div>
941 </script>
942
943 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel>
944
945 <script type="text/x-template" id="pagination-template">
946 @{
947 string paginationPrefix = "Pagination ";
948 }
949 <nav aria-label="@Translate(paginationPrefix + "Produktliste pagination", "Produktliste pagination")">
950 <ul class="pagination d-flex">
951 <li class="page-item">
952 <a class="btn btn-sm" v-bind:class="[currentPage == 1 ? 'disabled' : '']" v-on:click="togglePrevPage()" aria-label="@Translate(paginationPrefix + "Previous Page", "Previous Page")" v-bind:aria-disabled="currentPage > 1 ? 'true' : null">
953 <b-icon-chevron-left></b-icon-chevron-left>
954 </a>
955 </li>
956 <template v-if="hasGroupId">
957 <li v-for="n in totalPages" :key="n" :class="(n == currentPage ? 'page-item active' : 'page-item')">
958 <a v-on:click="togglePage(n)" v-bind:aria-current="(n == currentPage ? 'aria-page' : '')" class="btn btn-sm px-1">
959 {{n}}
960 </a>
961 </li>
962 </template>
963 <template v-else>
964 <li class="page-item">
965 <span class="btn btn-sm px-1">
966 <input type="number" v-model="customPage" v-on:change="toggleCustomPage()" style="max-width: 50px" />
967 </span>
968 </li>
969 <li class="page-item">
970 <span class="btn btn-sm px-1 font-weight-normal">
971 /
972 </span>
973 </li>
974 <li class="page-item">
975 <span class="btn btn-sm px-1">
976 <a v-on:click="toggleLastPage()" v-bind:class="[currentPage >= totalPages ? ' disabled' : '']" aria-label="@Translate(paginationPrefix + "Last Page", "Last Page")" class="btn btn-sm" v-bind:aria-disabled="totalPages > currentPage ? 'true' : null">{{totalPages}}</a>
977 </span>
978 </li>
979 </template>
980 <li class="page-item">
981 <a v-on:click="toggleNextPage()" v-bind:class="[currentPage >= totalPages ? ' disabled' : '']" aria-label="@Translate(paginationPrefix + "Next Page", "Next Page")" class="btn btn-sm" v-bind:aria-disabled="totalPages > currentPage ? 'true' : null">
982 <b-icon-chevron-right></b-icon-chevron-right>
983 </a>
984 </li>
985 </ul>
986 </nav>
987 </script>
988
989
990 <script type="text/x-template" id="quick-search-template">
991 <div class="quicksearch-component">
992 <div class="quickorder-form grid grid-12">
993 <slot name="right-box"></slot>
994 <div class="quickorder-box bg-light-60 border p-3 flow">
995 <h2 class="h4">@Translate("Find products")</h2>
996 <div class="quickorder-input grid grid-9-3">
997 <div class="form-group mb-0">
998 <label for="quickOrderSearch" class="w-100">@Translate("Product name or number")</label>
999 <input type="text"
1000 :id="id"
1001 v-model="search"
1002 @@keydown.enter="enter"
1003 @@keydown.down="down"
1004 @@keydown.up="up"
1005 @@input="onSearchInput()"
1006 class="form-control form-control-lg"
1007 autocomplete="chrome-off"
1008 placeholder="@Translate("Quick order search term")" />
1009 </div>
1010 <div class="form-group mb-0">
1011 <label for="quickOrderQty">@Translate("Quantity")</label>
1012 <input type="number"
1013 min="1"
1014 v-model.number="quantity"
1015 @@keydown.enter="moveToNextStep()"
1016 v-on:blur="blur($event,true,false)"
1017 v-on:focus="focus($event,false,true)"
1018 class="form-control form-control-lg text-center"
1019 id="quickOrderQty"
1020 :placeholder="0"
1021 autocomplete="chrome-off" />
1022 </div>
1023 </div>
1024 <div class="form-group mb-0" v-if="currentChosenProduct?.variants?.length>0">
1025 <label for="quickOrderSize">@Translate("Select Size")</label>
1026 <select v-model="selectedVariant" id="quickOrderSize" @@click="chosenProduct()" @@keydown.enter="chosenProduct()" placeholder="@Translate("Select Size")" class="form-control form-control-lg text-center">
1027
1028 <option :value="variant" v-for="variant in currentChosenProduct?.variants">{{variant.shortDescription}}
1029 <template v-if="showAvailableDate(variant.nextAvailableDate) && variant.stock <= 0">,@Translate("QuickOrder" + "on stock at", "on stock at") {{variant.nextAvailableDate }}
1030 </template>
1031 <template v-else-if="!showAvailableDate(variant.nextAvailableDate) && variant.stock <= 0">@Translate("QuickOrder"+"Out Of Stock", ", Out Of Stock")
1032 </template>
1033 </option>
1034 </select>
1035 </div>
1036 <ol v-if="products.length > 0 && open" class="quickorder-list flow-sm">
1037 <li v-for="(product,index) in products">
1038 <button @@click="suggestClick(index)" :class="{'active': isSelected(index)}">
1039 @*<b-icon-chevron-right class="mr-2" v-if="isSelected(index)"></b-icon-chevron-right>*@
1040 <span>{{concatNameAndNumber(product)}}</span>
1041 </button>
1042 </li>
1043 </ol>
1044
1045 <div class="border bg-white p-3 quickorder-product d-flex justify-content-between" v-if="currentChosenProduct">
1046 <p><strong>{{currentChosenProduct.number}} {{currentChosenProduct.name}}</strong><small>{{currentChosenProduct.shortDescription}}</small></p>
1047 <stock-display class="font-size-xs" :product-id="currentChosenProduct.number" :variant-id="currentChosenProduct.defaultVariantId" class-type="plp-async"></stock-display>
1048 <async-price class-type="quickorder-product-price"
1049 :product-number="currentChosenProduct.number"
1050 :variant-id="currentChosenProduct.defaultVariantId"
1051 :unit-of-measure="currentChosenProduct.defaultUnitId"
1052 :default-price-without-vat="currentChosenProduct.price.priceWithoutVat"
1053 :default-price-with-vat="currentChosenProduct.price.priceWithVat"
1054 :default-list-price-without-vat="currentChosenProduct.listPrice.priceWithoutVat"
1055 :default-list-price-with-vat="currentChosenProduct.listPrice.priceWithVat"
1056 :show-default-price="@((Pageview.User == null).ToString()?.ToLower())"
1057 default-currency-code="@Pageview.Area.EcomCurrencyId"
1058 :only-price="true">
1059 </async-price>
1060 </div>
1061 </div>
1062 </div>
1063 <p v-if="showPriceError">@Translate("QuickOrderZeroPriceError", "Can not add product with zero price")</p>
1064 <div class="quickorder-cart mt-4 flow" v-if="productsToOrder.length > 0">
1065 <table class="table table-striped table-flex border-bottom">
1066 <thead>
1067 <tr>
1068 <th>@Translate("Product")</th>
1069 <th class="text-left"></th>
1070 <th class="text-center">@Translate("Quantity")</th>
1071 <th class="text-right">@Translate("Price")</th>
1072 <th></th>
1073 </tr>
1074 </thead>
1075 <tbody>
1076 <tr v-for="(product,index) in productsToOrder">
1077 <td class="thumb">
1078 <figure class="d-flex align-items-center">
1079 <template v-if="product.defaultImage">
1080 <img :src="'/Admin/Public/GetImage.ashx?Width=80&Height=80&Crop=5&Compression=85&fillcanvas=true&Image=' + product.defaultImage" itemprop="image" class="img-fluid" loading="lazy" />
1081 </template>
1082 <template v-else>
1083 <img src="/Admin/Public/GetImage.ashx?Width=80&Height=80&Crop=5&Compression=85&fillcanvas=true&Image=/Files/Images/default.jpg" alt="@Translate("QuickOrder: No product picture", "No product picture")" itemprop="image" class="img-fluid" loading="lazy" />
1084 </template>
1085 </figure>
1086 </td>
1087 <td class="text-left">
1088 <strong>{{product.number.replace("-@@-","-")}} {{product.name}}</strong>
1089 <small v-if="product.shortDescription">{{product.shortDescription}}</small>
1090 <stock-display class="font-size-xs" :product-id="product.number" :variant-id="product.defaultVariantId" class-type="plp-async"></stock-display>
1091 </td>
1092 <td class="text-center flex-grow-1">
1093 <strong>{{product.quantity}}</strong>
1094 </td>
1095 <td class="text-right">
1096 <async-price class-type="quickorder-product-price"
1097 :product-number="product.number"
1098 :variant-id="product.defaultVariantId"
1099 :product-number="product.number"
1100 :unit-of-measure="product.defaultUnitId"
1101 :show-default-price="@((Pageview.User == null).ToString()?.ToLower())"
1102 :only-price="true"
1103 default-currency-code="@Pageview.Area.EcomCurrencyId">
1104 </async-price>
1105 </td>
1106 <td>
1107 <button @@click="removeOrderline(index)" aria-label="@Translate("Delete product")" class="text-danger">
1108 <b-icon-trash variant="danger"></b-icon-trash>
1109 </button>
1110 </td>
1111 </tr>
1112 </tbody>
1113 </table>
1114 <slot name="button"></slot>
1115 </div>
1116 </div>
1117 </script>
1118 @using Dynamicweb.Frontend;
1119 @{
1120 //This template contains everything for the favoritelist items.
1121 //string TRANSLATIONKEY_SHOPFINDER = "Shopfinder_";
1122 }
1123
1124
1125 <script type="text/template" id="google-maps-template">
1126 <div>
1127 <template v-if="isReady">
1128 <slot name="components" v-bind:map="map" v-bind:googlemarkers="googleMarkers" v-bind:googlesearchmarker="googleSearchMarker" v-bind:events="events"></slot>
1129 @* create a shopfinder info window *@
1130 @*<g-map-info-window></g-map-info-window>*@
1131 </template>
1132 </div>
1133 </script>
1134
1135 @*<script type="text/template" id="google-maps-marker-template">
1136 <div>
1137 <template v-if="markerFromStore"></template>
1138 </div>
1139 </script>*@
1140
1141
1142
1143
1144 <script type="text/template" id="google-maps-info-window-template" v-pre>
1145 <div class="google-info-window" ref="googleinfowindow">
1146 <template v-if="info">
1147 <slot v-bind:info="info">
1148 <template v-if="info">
1149 <div class="header">
1150 <p>{{info.title}}</p>
1151 </div>
1152 <div class="middle">
1153 <p>{{info.msg}}</p>
1154 </div>
1155 <div class="buttom">
1156 @*<p>btns..</p>*@
1157 </div>
1158 </template>
1159 </slot>
1160 </template>
1161 </div>
1162 </script>
1163
1164
1165
1166
1167 @*nothing to see here.... gitkraken..*@
1168
1169
1170
1171 <script src="@NORRIQ.Common8.Razor.TimestampSource.GetSourceWithTimestamp("/Files/dist/scripts/bundle.min.js")"></script>
1172 @{
1173 var user = NORRIQ.Universal.Identity.Dw.UserViewModel.GetCurrentUser<NoaUserViewModel>();
1174 var userJson = JsonConvert.SerializeObject(user);
1175
1176 // Create hash of customerNumber for GTM and GA
1177 var userNumber = user?.CustomerNumber ?? "";
1178 if (!string.IsNullOrEmpty(userNumber))
1179 {
1180 userNumber = userNumber.GetHashCode().ToString();
1181 }
1182 }
1183 <script>
1184 AppStart.VueProvider.init({
1185 googleMapsAPIKey: '@(ObjectFactory.GetInstance<NORRIQ.Common8.Context.AreaItemSettings>().GetCurrentAreaValue<string>("GoogleMapsAPIKey"))',
1186 webApiUrl: '@System.Web.Configuration.WebConfigurationManager.AppSettings["WebApiUrl"]',
1187 currencyCode: '@(Pageview.User.GetCurrencyInfo(Pageview.Area)?.Code)',
1188 locale: '@Pageview.Area.Culture',
1189 currencyLeft: false,
1190 currencySpacing: true,
1191 currencySymbol: '@(Pageview.User.GetCurrencyInfo(Pageview.Area)?.Symbol)',
1192 currencyDecimalSeparator: ',',
1193 currencyGroupSeparator: '.',
1194 currencyDecimalDigits: 2,
1195 dateFormatShort: '@Pageview.Area.Dateformat',
1196 user: @userJson
1197 });
1198 </script>
1199 <script>
1200 window.dataLayer = window.dataLayer || [];
1201 window.dataLayer.push({
1202 'event': 'userLogin',
1203 'userId': '@userNumber'
1204 });
1205 </script>
1206 <script append="replace"></script>
1207 </body>
1208 </html>
1209 <style>
1210 .overlay {
1211 width: 425px;
1212 height: 500px;
1213 position: absolute;
1214 display: inline-block;
1215 top: 45px;
1216 right: 15px;
1217 z-index: 10;
1218 background-color: #ffffff;
1219 color: black;
1220 overflow: hidden;
1221 /*border-style: solid;*/
1222 box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)
1223 }
1224 </style>
1225
1226