1 @using Warmgarant.Shop.Models.Constants
2 @using Warmgarant.Shop.Models.Enumerations
3 @using Warmgarant.Shop.Repository.Helpers
4 @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
5 @{
6
7 // dependencies
8 var orderService = new Dynamicweb.Ecommerce.Orders.OrderService();
9 var productService = new Dynamicweb.Ecommerce.Products.ProductService();
10 var orderLineService = new Dynamicweb.Ecommerce.Orders.OrderLineService();
11 var pageService = new Dynamicweb.Content.PageService();
12 var orderType = OrderType.Unknown;
13
14
15 /// config
16 var areaId = Dynamicweb.Frontend.PageView.Current().AreaID;
17 var assetsDirectory = "./files/templates/designs/warmtethuis/styleguide/assets/";
18 var iconsDirectory = "./files/templates/designs/warmtethuis/images/icons/";
19 var isComparePage = false;
20 var cartUrl = default(string);
21 var currentOrder = OrderHelper.GetCurrentOrder(orderService, "", areaId);
22
23 var selectedHeatpump = OrderHelper.GetProductFromOrder(currentOrder, ProductType.HeatPump);
24 var heatpumpSelected = currentOrder != null && selectedHeatpump != null;
25 if (heatpumpSelected)
26 {
27 ProductHelper.ClearProductPriceCache(selectedHeatpump);
28 }
29
30 // quotation data
31 var quotationParagraphId = AreaHelper.GetAreaItemIntValueBySystemName(StringConstants.WebsiteConfiguration.QuotationRequestHeatpumpParagraphId);
32
33 // heat pump info
34 var seriesName = default(string);
35 var productName = default(string);
36 var productId = default(string);
37 var variantId = default(string);
38 var productPrice = default(string);
39 var productGroupName = default(string);
40 var productMobile = default(string);
41 var productPriceDouble = default(double);
42 var productImage = default(string);
43 var productLongDescription = default(string);
44 var productBadge = default(string);
45 var isActionPrice = false;
46 var priceBeforeDiscount = default(string);
47 //var interests = default(string);
48 var heatpumpIsForSale = false;
49 var isNew = false;
50 var priceBefore = default(string);
51 var priceAfter = default(string);
52 var usps = new List<string>();
53 var subtitle = GetString("Item.SubTitle.Value");
54 var thermostatTitle = GetString("Item.ThermostatTitle.Value");
55 var modalCloseImage = string.Format("<img src=\"{0}{1}\" title=\"{2}\" class=\"white-svg\" />", iconsDirectory, "x-close-white.svg", Translate("Close", "Close").JsEncode());
56 var moreInfoImage = string.Format("<img src=\"{0}{1}\" title=\"{2}\" class=\"blue-svg\" /> <span>{3}</span>", iconsDirectory, "Plus.svg", Translate("MoreInformation", "More information").JsEncode(), Translate("Info", "Info"));
57
58 // thermostat product info
59 Dynamicweb.Ecommerce.Products.Product selectedThermostat = null;
60 List<Dynamicweb.Ecommerce.Products.Product> thermostatOptions = null;
61 var thermostatIntro = GetString("Item.ThermostatIntroText.Value");
62
63 // air/dirt separator product info
64 Dynamicweb.Ecommerce.Products.Product selectedAirDirtSeparatorProduct = null;
65 List<Dynamicweb.Ecommerce.Products.Product> airDirtSeparatorOptions = null;
66 var airDirtSeparatorTitle = GetString("Item.AirDirtSeparatorTitle.Value");
67 var airDirtSeparatorInfo = GetString("Item.AirDirtSeparatorInformation.Value");
68 var airDirtSeparatorIntro = GetString("Item.AirDirtSeparatorIntroText.Value");
69 var airDirtSeparatorExtraInfo = default(string);
70
71 // service subscriptipn info
72 var serviceSubscriptionTitle = GetString("Item.ServiceSubscriptionTitle.Value");
73 var serviceSubscriptionIntro = GetString("Item.ServiceSubscriptionIntroText.Value");
74 var serviceSubscriptionInfo = default(string);
75 Dynamicweb.Ecommerce.Products.Product selectedServiceSubscription = null;
76 List<Dynamicweb.Ecommerce.Products.Product> serviceSubscriptionOptions = null;
77
78 // installation info
79 var installationTitle = GetString("Item.InstallationTitle.Value");
80 var installationInfo = GetString("Item.InstallationTitleInformation.Value");
81 var installationIntro = GetString("Item.InstallationIntroText.Value");
82 var selectedInstallation = (Dynamicweb.Ecommerce.Products.Product)null;
83 var installationOption = (Dynamicweb.Ecommerce.Products.Product)null;
84 var installationExtraInfo = default(string);
85
86 // disclaimer info
87 var disclaimerTitle = GetString("Item.DisclaimerTitle.Value");
88 var disclaimerText = GetString("Item.DisclaimerIntroText.Value");
89
90 if (heatpumpSelected)
91 {
92 // if the heatpump is for sale it can be purchased directly, else you request an advise home visit from a Warmtethuis consultant.
93 heatpumpIsForSale = ProductHelper.GetProductFieldValue<bool>(productService, selectedHeatpump, StringConstants.ProductFieldValueSystemNames.IsForSale);
94
95 // order info
96 Enum.TryParse((string)currentOrder.OrderFieldValues.GetOrderFieldValue(StringConstants.OrderFields.OrderType).Value, out orderType);
97
98 // set session variable
99 SessionHelper.SetLastAddedProductSessionValue(selectedHeatpump.Id, orderType);
100
101 // order price info
102 var orderPriceRaw = currentOrder.Price.Price;
103 var orderPrice = orderPriceRaw.WarmgarantMoneyFormat(true, true);
104
105 // advice info
106 productLongDescription = selectedHeatpump.LongDescription;
107 productId = selectedHeatpump.Id;
108 variantId = selectedHeatpump.VariantId;
109 seriesName = selectedHeatpump.Name;
110 productName = ProductHelper.CreateProductName(selectedHeatpump.Name, selectedHeatpump.Manufacturer);
111
112 productBadge = ProductHelper.GetProductFieldValue<string>(productService, selectedHeatpump, "ExtraIcon").Replace("../", "./Files/");
113 if (!string.IsNullOrWhiteSpace(productBadge) && !productBadge.ToLower().Contains("/files/"))
114 {
115 // for some reason "/Files/Images/Cons-logo_2017.png" can be "Cons-logo_2017.png" when collected by ProductHelper.GetProductFieldValue<string>()
116 productBadge = string.Format("./Files/Images/{0}", productBadge);
117 }
118
119 // get price
120 productPriceDouble = ProductHelper.GetProductPrice(selectedHeatpump).Price;
121 productPrice = productPriceDouble.WarmgarantMoneyFormat(false, false);
122 productMobile = productPriceDouble.WarmgarantMoneyFormat(true, false);
123 isActionPrice = ProductHelper.ProductHasDiscount(selectedHeatpump);
124 if (isActionPrice)
125 {
126 priceBeforeDiscount = productPriceDouble.ToString();
127 var heatpumpDiscountPriceDouble = ProductHelper.GetProductDiscountPrice(selectedHeatpump).Price;
128 productPrice = heatpumpDiscountPriceDouble.WarmgarantMoneyFormat(false, false);
129 }
130 else {
131 priceBefore = Translate("FromPrice_WT", "from");
132 }
133
134 // go to cart URL
135 var cartPageId = AreaHelper.GetAreaItemStringValueBySystemName(StringConstants.WebsiteConfiguration.PumpsSalesCartPageId);
136 if (!string.IsNullOrWhiteSpace(cartPageId))
137 {
138 cartUrl = string.Format("/Default.aspx?ID={0}", cartPageId);
139 }
140
141 // thermostat info
142 selectedThermostat = OrderHelper.GetProductFromOrder(currentOrder, ProductType.Thermostat);
143 thermostatOptions = OrderHelper.GetThermostats(selectedHeatpump, orderType);
144
145 // air- dirt separator info
146 selectedAirDirtSeparatorProduct = OrderHelper.GetProductFromOrder(currentOrder, ProductType.AirDirtSeparator);
147 airDirtSeparatorOptions = OrderHelper.GetOptions(ProductType.AirDirtSeparator, areaId).Where(product => product.Number.Equals(StringConstants.ProductSystemNames.AirDirtSeparatorHeatpump)).ToList();
148 if (selectedAirDirtSeparatorProduct != null)
149 {
150 airDirtSeparatorExtraInfo = selectedAirDirtSeparatorProduct.LongDescription;
151 }
152 if (string.IsNullOrWhiteSpace(airDirtSeparatorExtraInfo))
153 {
154 airDirtSeparatorExtraInfo = airDirtSeparatorOptions?.FirstOrDefault()?.LongDescription ?? "";
155 }
156
157 // service subscription info, for stand alone heat pumps NO service subscription is added
158 if (!selectedHeatpump.Number.ToLower().Contains("standalone")) {
159 selectedServiceSubscription = OrderHelper.GetProductFromOrder(currentOrder, ProductType.ServiceSubscription);
160 serviceSubscriptionOptions = OrderHelper.GetServiceSubscriptions(orderType, ProductType.HeatPump, areaId);
161 if (serviceSubscriptionOptions != null && serviceSubscriptionOptions.Any())
162 {
163 serviceSubscriptionInfo = serviceSubscriptionOptions?.First()?.LongDescription ?? "";
164 }
165 }
166
167 // installation info
168 selectedInstallation = OrderHelper.GetProductFromOrder(currentOrder, ProductType.Installation);
169 installationOption = OrderHelper.GetInstallation(orderType, ProductType.HeatPump, areaId, selectedHeatpump);
170 if (installationOption != null)
171 {
172 installationExtraInfo = installationOption.LongDescription;
173 }
174
175 // unique selling points
176 var usp1 = ProductHelper.GetProductFieldValue<string>(productService, selectedHeatpump, StringConstants.ProductFieldValueSystemNames.Usp1);
177 if (!string.IsNullOrWhiteSpace(usp1))
178 {
179 usps.Add(usp1);
180 }
181 var usp2 = ProductHelper.GetProductFieldValue<string>(productService, selectedHeatpump, StringConstants.ProductFieldValueSystemNames.Usp2);
182 if (!string.IsNullOrWhiteSpace(usp2))
183 {
184 usps.Add(usp2);
185 }
186 var usp3 = ProductHelper.GetProductFieldValue<string>(productService, selectedHeatpump, StringConstants.ProductFieldValueSystemNames.Usp3);
187 if (!string.IsNullOrWhiteSpace(usp3))
188 {
189 usps.Add(usp3);
190 }
191
192 // add defaults
193 var setDefaults = heatpumpIsForSale &&
194 (
195 (selectedThermostat == null && thermostatOptions != null) ||
196 (selectedServiceSubscription == null && (serviceSubscriptionOptions != null && serviceSubscriptionOptions.Any())) ||
197 (selectedInstallation == null && installationOption != null)
198 );
199 if (setDefaults)
200 {
201
202 OrderHelper.AddHeatpumpDefaults(
203 currentOrder,
204 orderService,
205 orderLineService,
206 productService,
207 selectedHeatpump,
208 selectedThermostat,
209 thermostatOptions,
210 null,
211 null,
212 selectedServiceSubscription,
213 serviceSubscriptionOptions,
214 selectedInstallation,
215 installationOption,
216 selectedAirDirtSeparatorProduct,
217 airDirtSeparatorOptions,
218 Warmgarant.Shop.Models.Enumerations.OrderType.Buy,
219 areaId
220 );
221
222 selectedThermostat = OrderHelper.GetProductFromOrder(currentOrder, ProductType.Thermostat);
223 selectedServiceSubscription = OrderHelper.GetProductFromOrder(currentOrder, ProductType.ServiceSubscription);
224 selectedInstallation = OrderHelper.GetProductFromOrder(currentOrder, ProductType.Installation);
225 }
226
227 var groupId = ProductHelper.GetProductPrimaryGroupId(selectedHeatpump);
228 if (!string.IsNullOrWhiteSpace(groupId))
229 {
230 var group = Dynamicweb.Ecommerce.Services.ProductGroups.GetGroup(groupId);
231 productGroupName = group.Name;
232 }
233
234 productImage = ProductHelper.GetProductImage(
235 orderType,
236 selectedHeatpump.ImageSmall,
237 isActionPrice,
238 ProductHelper.GetProductFieldValue<string>(productService, selectedHeatpump, Warmgarant.Shop.Models.Constants.StringConstants.ProductFieldValueSystemNames.ActionImageBuy),
239 ProductHelper.GetProductFieldValue<string>(productService, selectedHeatpump, Warmgarant.Shop.Models.Constants.StringConstants.ProductFieldValueSystemNames.ActionImageRent),
240 areaId);
241
242 }
243
244 // SEO: VirtualPageView
245 var seoPage = SeoHelper.GetVirtualPageviewAssemblyPage(
246 GetGlobalValue("Global:Request.Scheme"),
247 GetGlobalValue("Global:Request.Host"),
248 GetGlobalValue("Global:Pageview.Url"),
249 productName);
250
251 var seoPageQuotation = string.Format("{0}/{1}", seoPage, Translate("SEO_VirtualPageviewHeatpumpAssemblyQuotationForm", "quotation-form-heatpump"));
252 var serviceSubscriptionImage = "";
253 var installationImage = "";
254
255
256
257 if (!string.IsNullOrWhiteSpace(seoPage))
258 {
259 <Text>
260 <script>
261 SEO.trackPageView("@seoPage", '@GetGlobalValue("Global:CookieOptInLevel").ToLower()' === 'functional');
262 </script>
263 </Text>
264 }
265
266 <div id="heatpumpassembly">
267 @NavigationHelper.GetBreadCrumb(productService, GetGlobalValue("Global:Area.LongLang"))
268
269 <div class="row">
270 <div class="col s10 push-s1 l12">
271 <h1>@GetString("ParagraphHeader") @GetString("Item.ParagraphHeader.Value")</h1>
272 </div>
273 </div>
274 <div class="row">
275 @if (heatpumpSelected)
276 {
277 if (selectedServiceSubscription != null)
278 {
279 priceAfter = $"+{ProductHelper.GetProductPrice(selectedServiceSubscription).Price.WarmgarantMoneyFormat()} {Translate("PerMonthShort", "p/m")}";
280 }
281
282 <div class="col s12 l3 hide-on-med-and-down">
283 <div class="row">
284 <div class="col s12">
285
286 <div class="heatpump-image">
287 <div class="contents">
288 @using Warmgarant.Shop.Repository.Helpers
289 @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
290
291 @if (productPriceDouble > 0)
292 {
293 var priceColorClass = "anthracite";
294 if (isActionPrice)
295 {
296 productPrice = $"<span class=\"before\"><span class=\"strikethrough\">{priceBeforeDiscount}</span><br /></span>{productPrice}";
297 }
298
299 <div class="action-square medium @priceColorClass valign-wrapper">
300 <div class="action-container">
301 <div @if (!string.IsNullOrWhiteSpace(priceBefore)) { <text> data-before="@priceBefore" </text> } @if (!string.IsNullOrWhiteSpace(priceAfter)) { <text> data-after="@priceAfter" </text> }>@productPrice</div>
302 </div>
303 </div>
304 }
305
306 @if (!string.IsNullOrWhiteSpace(productBadge))
307 {
308 <div class="ribbons">
309 <div class="ribbon">
310 <img src="@productBadge" alt="@Translate("ProductBadge", "Product badge").JsEncode()" width="135">
311 </div>
312 </div>
313 }
314 else if (isNew)
315 {
316 <div class="action-circle medium special">
317 <div class="action-container">
318 @SvgHelper.GetSvgContent(string.Format("{0}images/svg/action-circle-new.svg", assetsDirectory), "brown-svg", Translate("New", "New").JsEncode())
319 <span>@Translate("New", "New")</span>
320 </div>
321 </div>
322 }
323
324 @if (!isComparePage)
325 {
326 <div class="information hide-on-med-and-down">
327 <div class="mask"></div>
328 <div class="contents">
329 <a href="javascript:void(0)" class="show-info">
330 @SvgHelper.GetSvgContent(string.Format("{0}images/icons/plus.svg", GetString("Template:DesignBaseUrl")), title: Translate("Info", "Info").JsEncode())
331 @Translate("Info", "Info")
332 </a>
333 </div>
334 </div>
335 }
336
337 <div class="image" style="background-image: url(@productImage);"></div>
338 </div>
339 </div>
340
341 @if (selectedHeatpump.Manufacturer.Name.Equals("Remeha"))
342 {
343 <div class="remeha-logo">
344 <img src="/Files/Templates/Designs/Warmtethuis/Images/Logo_Remeha.png" />
345 </div>
346 }
347
348 @using Warmgarant.Shop.Repository.Helpers
349 @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
350 @{
351 @*NOTE: Javascript initialize of this element should be done in the parent, because the default settings can differ per page!*@
352 int adviceParagraphId = Warmgarant.Shop.Repository.Helpers.AreaHelper.GetAreaItemIntValueBySystemName(Warmgarant.Shop.Models.Constants.StringConstants.WebsiteConfiguration.AdviceParagraphId);
353 int contactParagraphId = Warmgarant.Shop.Repository.Helpers.AreaHelper.GetAreaItemIntValueBySystemName(Warmgarant.Shop.Models.Constants.StringConstants.WebsiteConfiguration.ContactParagraphId);
354
355 // alleen gevuld als Advice_Contact itemtype gebruikt wordt en de custom velden zijn gevuld:
356 var customContactText = GetString("Item.CustomContactText.Value");
357 var customAdviceText = GetString("Item.CustomAdviceText.Value");
358
359 if (adviceParagraphId > 0 && contactParagraphId > 0)
360 {
361 var callMeBackConsentText = StringHelper.GetConsentLabel(Translate("CallMeBackConsentLabel", "I agree with the Warmgarant privacy statement as shown on the {0}privacy page{1}"),
362 Translate("ConsentPrivacyPageUrl", "https://www.warmtethuis.nl/privacy"),
363 "callmeback-consent-link");
364
365 <div id="advice-contact">
366 <div class="tabs-wrapper tabs-blue" id="tabs-advice-contact">
367 @*TABS: default (a with active class) is set on parent, can differ per page*@
368 <ul class="tabs">
369 <li class="tab"><a href="#tab-content-advice" id="advice-tab">@Translate("Our Advice", "Ons advies")</a></li>
370 <li class="tab"><a href="#tab-content-contact" id="contact-tab" class="active">@Translate("Contact")</a></li>
371 </ul>
372 @*ADVICE*@
373 <div id="tab-content-advice" class="col s12 tabs-content" style="display: none;">
374 <div class="tabs-content-wrapper">
375 @if (!string.IsNullOrWhiteSpace(customAdviceText))
376 {
377 <div class="pictogram pictogram-small">
378 @SvgHelper.GetSvgContent(string.Format("{0}images/svg/pictograms/apostrophe.svg", assetsDirectory), classNames: "orange-svg", title: Translate("Apostrophe", "Apostrophe"))
379 </div>
380
381 @customAdviceText
382 }
383 else
384 {
385 @RenderParagraphContent(adviceParagraphId)
386 }
387 </div>
388 </div>
389 @*CONTACT*@
390 <div id="tab-content-contact" class="col s12 tabs-content general-wg-text active">
391 @*CONTACT CONTENT OPEN/CLOSED*@
392 <div class="tabs-content-wrapper">
393 @if (!string.IsNullOrWhiteSpace(customContactText))
394 {
395 <div class="pictogram pictogram-small">
396 @SvgHelper.GetSvgContent(string.Format("{0}images/svg/pictograms/apostrophe.svg", assetsDirectory), classNames: "orange-svg", title: Translate("Apostrophe", "Apostrophe"))
397 </div>
398
399 @customContactText
400 }
401 else
402 {
403 @RenderParagraphContent(contactParagraphId)
404 }
405 </div>
406 @*CALL ME BACK FORM*@
407 <div class="tabs-content-overlay tabs-content-overlay-hidden" id="call-me-back-container">
408 <div class="overlay-toggle overlay-toggle-top">
409 <div class="pictogram pictogram-x-small" data-toggle="call-me-back-container">
410 @SvgHelper.GetSvgContent(string.Format("{0}images/svg/pictograms/x-close.svg", assetsDirectory), classNames: "general-svg", title: Translate("Close", "Close").JsEncode())
411 </div>
412 </div>
413 <div class="pictogram pictogram-small">
414 @SvgHelper.GetSvgContent(string.Format("{0}images/svg/pictograms/apostrophe.svg", assetsDirectory), classNames: "orange-svg", title: Translate("Apostrophe", "Apostrophe").JsEncode())
415 </div>
416 <h7>@Translate("CallBackForm_Intro", "Call me back request")</h7>
417
418 @*Note: translate tags within form need to be surrounded by single quotes, or the pageheatpumpinfo page will crash! *@
419
420 <form name="call-back-request-form" id="call-back-request-form" method="post">
421 <div class="row">
422 <div class="col s12">
423 <input type="text" name="CallMeBack_Name" id="CallMeBack_Name" required="required" class="validate" placeholder='@Translate("CallBackForm_Name", "Your name").JsEncode()' />
424 </div>
425 </div>
426 <div class="row">
427 <div class="col s12">
428 <textarea name="CallMeBack_Address" id="CallMeBack_Address" required="required" class="materialize-textarea validate" placeholder='@Translate("CallBackForm_Address", "Your address")'></textarea>
429 </div>
430 </div>
431 <div class="row">
432 <div class="col s12">
433 <input type="tel" name="CallMeBack_Telephone" id="CallMeBack_Telephone" required="required" class="validate" maxlength="10" placeholder='@Translate("CallBackForm_Telephone", "Your telephone number")' />
434 </div>
435 </div>
436 <div class="row">
437 <div class="col s12">
438 <label class="checkbox consent blue-content-link cmb">
439 <input type="checkbox" value="true" name="CallMeBack_Consent" id="CallMeBack_Consent" required="required" />
440 @callMeBackConsentText
441 </label>
442 </div>
443 </div>
444 <div class="row">
445 <div class="input-field col s12">
446 <input type="button" name="CallMeBack_Submit" id="CallMeBack_Submit" value='@Translate("CallBackForm_ButtonText", "Submit")' class="btn btn-brown" />
447 </div>
448 </div>
449 </form>
450
451 <div id="feedback-success" class="hide">
452 <p class="general-wg-text">@Translate("CallBackForm_FeedbackSuccess", "Thanks for your call back request. We will contact you as soon as possible.")</p>
453 </div>
454 <div id="feedback-failure" class="hide">
455 <p class="general-wg-text">@Translate("CallBackForm_FeedbackFailure", "An error has occurred while sending the request.")</p>
456 </div>
457 </div>
458 @{
459 @*CHAT ICOON*@
460 if (AreaHelper.OfficeIsOpen().Item1 &&
461 IntercomHelper.IntercomIsActive() &
462 !string.IsNullOrWhiteSpace(Warmgarant.Shop.Models.Config.ExtraConfig.ExtraConfiguration.IntercomMessengerSettings.InboundEmail))
463 {
464 <div class="overlay-toggle">
465 <div class="pictogram pictogram-small general-wg">
466 <a href="javascript:void(0);" class="openIntercom">@SvgHelper.GetSvgContent(string.Format("{0}images/svg/pictograms/chat2.svg", assetsDirectory), classNames: "brown-svg darken-4", title: Translate("Chat", "Chat").JsEncode())</a>
467 </div>
468 </div>
469 }
470 }
471 </div>
472 </div>
473 </div>
474
475 @SnippetStart("JavaScriptBottom")
476 <script>
477
478 function onBeforeCallMeBack() {
479 $("#call-back-request-form").removeClass("hide");
480 $("#feedback-failure").addClass("hide");
481 $("#feedback-success").addClass("hide");
482 ResetCallBackRequestForm();
483 }
484
485 function callMeBackFormSent() {
486 $("#call-back-request-form").addClass("hide");
487 $("#feedback-failure").addClass("hide");
488 $("#feedback-success").removeClass("hide");
489
490 SEO.trackEvent(
491 '@Translate("SEO_Event_CallMeBack", "call-me-back")',
492 '@Translate("SEO_Event_CallMeBack_Sent", "success")',
493 $("#CallMeBack_Telephone").val(),
494 '');
495
496 ResetCallBackRequestForm();
497 }
498
499 function callMeBackFormNotSent() {
500 $("#call-back-request-form").addClass("hide");
501 $("#feedback-success").addClass("hide");
502 $("#feedback-failure").removeClass("hide");
503 ResetCallBackRequestForm();
504 }
505
506 function ResetCallBackRequestForm() {
507 $("#CallMeBack_Name", "#call-back-request-form").val("");
508 $("#CallMeBack_Address", "#call-back-request-form").val("");
509 $("#CallMeBack_Telephone", "#call-back-request-form").val("");
510 $("#CallMeBack_Submit", "#call-back-request-form").removeClass("btn-yellow").addClass("btn-gray");
511
512 // Only numbers in telephone field
513 $("#CallMeBack_Telephone", "#call-back-request-form").numeric();
514
515 // Initialize consent checkbox
516 $("label.checkbox.consent.cmb", "#call-back-request-form").innovadisCheckbox({
517 onAfterChange: validateCallBackForm(true)
518 });
519 $("#CallMeBack_Consent", "#call-back-request-form").prop("checked", false);
520
521 // Enable link in general conditions label
522 $(".callmeback-consent-link", "#call-back-request-form").off("click").on("click", function (e) {
523 e.stopPropagation();
524 e.preventDefault();
525 window.open($(this).attr('href'), $(this).attr('target'));
526 return false;
527 });
528
529 $("input, textarea", "#call-back-request-form").off("change").on("change", function () {
530 if ($(this).val() !== "") {
531 $(this).removeClass("error");
532 }
533 });
534
535 }
536
537 function validateCallBackForm(changeButton) {
538
539 $("input,textarea", "#call-back-request-form").removeClass("error");
540
541 var isValid = true;
542 var name = $("#CallMeBack_Name", "#call-back-request-form").val();
543 var address = $("#CallMeBack_Address", "#call-back-request-form").val();
544 var telephone = $("#CallMeBack_Telephone", "#call-back-request-form").val();
545 var callbackConsent = $("#CallMeBack_Consent", "#call-back-request-form").prop("checked");
546
547 if (name.length == 0) {
548 isValid = false;
549 $("#CallMeBack_Name", "#call-back-request-form").addClass("error");
550 }
551
552 if (address.length == 0) {
553 isValid = false;
554 $("#CallMeBack_Address", "#call-back-request-form").addClass("error");
555 }
556
557 if (telephone.length != 10 || !telephone.startsWith("0")) {
558 isValid = false;
559 $("#CallMeBack_Telephone", "#call-back-request-form").addClass("error");
560 }
561
562 if (!callbackConsent) {
563 isValid = false;
564 }
565
566 if (changeButton) {
567 if (isValid) {
568 $("#CallMeBack_Submit").removeClass("btn-gray").addClass("btn-yellow");
569
570 } else {
571 $("#CallMeBack_Submit").removeClass("btn-yellow").addClass("btn-gray");
572 }
573 }
574
575 return isValid;
576 }
577
578
579 // submit form
580 $("#CallMeBack_Submit", "#call-back-request-form")
581 .off("click")
582 .on("click", function() {
583
584 if (!validateCallBackForm(false)) {
585 return false;
586 }
587
588 var name = $("#CallMeBack_Name", "#call-back-request-form").val();
589 var address = $("#CallMeBack_Address", "#call-back-request-form").val();
590 var telephone = $("#CallMeBack_Telephone", "#call-back-request-form").val();
591
592 var callbackRequestApiUrl = "/@Warmgarant.Shop.Models.Constants.StringConstants.ApplicationVariables.WebApiName/form/callbackrequestsubmit";
593
594 var formvalues = {
595 areaId: @Warmgarant.Shop.Repository.Helpers.AreaHelper.GetCurrentAreaId(),
596 culture: '@GetGlobalValue("Global:Area.LongLang")',
597 name: name.trim(),
598 address: address.trim(),
599 telephonenumber: telephone.trim()
600 }
601
602 // ajax post
603 $.ajax({
604 type: "POST",
605 data: JSON.stringify(formvalues),
606 url: callbackRequestApiUrl,
607 contentType: "application/json"
608 }).done(function(sentSuccessfully, status, metaData) {
609 if (sentSuccessfully) {
610 callMeBackFormSent();
611 } else { //show error message
612 callMeBackFormNotSent();
613 }
614 }).fail(function(jqxhr, textStatus, error) {
615 var err = textStatus + ", " + error;
616 console.error("Request:", callbackRequestApiUrl, " failed:", err);
617 callMeBackFormNotSent();
618 });
619
620 });
621
622 </script>
623 @SnippetEnd("JavaScriptBottom")
624 }
625 }
626 </div>
627 </div>
628 </div>
629 }
630 <div class="col s12 l9">
631 <div class="row" id="contentrow">
632 <div class="col s10 l8 push-s1">
633 <div class="row">
634 @if (!heatpumpSelected)
635 {
636 <div class="col s12">
637 <p>@Translate("FirstSelectAHeatpump", "First select a heatpump.")</p>
638 </div>
639 }
640 else if (!heatpumpIsForSale)
641 {
642 <div class="col s12">
643 <p>@Translate("HeatPumpNotFor Sale", "This heatpump is not for sale.")</p>
644 @{
645 var listPage = pageService.GetPageByNavigationTag(areaId, Warmgarant.Shop.Models.Constants.StringConstants.Navigation.HeatpumpListPage);
646 if (listPage != null)
647 {
648 <p>
649 <a id="back-to-list" class="btn btn-yellow" href="/Default.aspx?ID=@listPage.ID">@Translate("BackToList")</a>
650 </p>
651 }
652 }
653 </div>
654 }
655 else
656 {
657 var productPageId = 0;
658 if (orderType.Equals(OrderType.Buy))
659 {
660 productPageId = AreaHelper.GetAreaItemIntValueBySystemName(StringConstants.WebsiteConfiguration.PumpsSalesListPageId);
661
662 }
663 <div class="col s12">
664 <div class="row">
665 <div class="col s12">
666 <h3>@productName</h3>
667 </div>
668 <div class="col s12">
669 <div id="price-holder"></div>
670 @if (usps.Any())
671 {
672 <div id="usps">
673 <ul>
674 @foreach (var usp in usps)
675 {
676 <li>@usp</li>
677 }
678 </ul>
679 </div>
680 }
681 </div>
682 <div class="col s12 hide-on-med-and-down rich-text-editor-content assembly-intro">
683 @selectedHeatpump.ShortDescription
684 </div>
685 <div class="col s12 hide-on-med-and-down">
686 <div class="specsArea">
687 @RenderSnippet("ActionLinks")
688 </div>
689 </div>
690 @if (!string.IsNullOrWhiteSpace(productImage))
691 {
692 <div class="col s4 hide-on-large-only mobile-image">
693 <img src="@productImage" />
694 </div>
695 }
696 <div class="col s8 hide-on-large-only">
697 @RenderSnippet("ActionLinks")
698 </div>
699 </div>
700 </div>
701 <div class="col s12">
702 <h4 class="subtitle">@subtitle.Replace("{currentHeatpump}", productName)</h4>
703 </div>
704 if (thermostatOptions != null && thermostatOptions.Any())
705 {
706 <div class="col s12 thermostats">
707 <div class="row">
708 <div class="col">
709 <h5 class="optiontitle thermostatselector">
710 @thermostatTitle
711 <span class="pictogram info-btn" id="thermostat-choose-infobtn">
712 @moreInfoImage
713 </span>
714 </h5>
715 </div>
716 <div class="col">@thermostatIntro</div>
717 <div class="option-selector-container col s12" id="opt-container1">
718 <div class="row">
719 @foreach (var thermostatOption in thermostatOptions)
720 {
721 var thermostatProductId = thermostatOption.Id;
722 var thermostat = ProductHelper.CreateProductName(thermostatOption.Name, thermostatOption.Manufacturer);
723 ProductHelper.ClearProductPriceCache(thermostatOption);
724 var thermostatPriceRaw = ProductHelper.GetProductPrice(thermostatOption).Price;
725 var thermostatPrice = Math.Abs(thermostatPriceRaw).WarmgarantMoneyFormat(false, false, true); // no negative prices, add discount or rent credit prefixes, show free text when 0
726 if (thermostatPriceRaw < 0)
727 {
728 var prefix = orderType.Equals(OrderType.Buy) ? Translate("Discount") : Translate("RentCredit");
729 thermostatPrice = string.Format("<span class=\"price-prefix\">{0}:</span> {1}", prefix, thermostatPrice);
730 }
731 var thermostatImage = thermostatOption.ImageSmall;
732 <div class="col s12 m6">
733 <div class="option-panel horizontal large" data-value="@thermostatProductId" data-productid="@thermostatProductId" data-productType="@ProductType.Thermostat">
734 @if (!string.IsNullOrWhiteSpace(thermostatImage))
735 {
736 thermostatImage = string.Format("/Files{0}", thermostatImage);
737 <div class="left-column">
738 <img src="@thermostatImage" alt="@Translate("Thermostat", "Thermostat").JsEncode(): @thermostat.JsEncode()" />
739 </div>
740 <div class="right-column">
741 <div class="text">@thermostat</div>
742 <div class="price opensans-bold">@thermostatPrice</div>
743 </div>
744 }
745 else
746 {
747 <div class="full-column">
748 <div class="text">@thermostat</div>
749 <div class="price">@thermostatPrice</div>
750 </div>
751 }
752 </div>
753 </div>
754 }
755 </div>
756 </div>
757 </div>
758 </div>
759 }
760
761 if (!string.IsNullOrWhiteSpace(airDirtSeparatorExtraInfo))
762 {
763 <div class="col s12 airdirtseparator">
764 <div class="row">
765 <div class="col">
766 <h5 class="optiontitle airdirtseparatorselector">
767 @airDirtSeparatorTitle
768 @if (!string.IsNullOrWhiteSpace(airDirtSeparatorExtraInfo))
769 {
770 <span class="pictogram info-btn" id="airdirtseparator-infobtn">
771 @moreInfoImage
772 </span>
773 }
774 </h5>
775 </div>
776 <div class="col s12">
777 @airDirtSeparatorIntro
778 </div>
779 <div class="col s12 option-selector-container" id="opt-container4">
780 <div class="row">
781 @foreach (var airDirtSeparatorOption in airDirtSeparatorOptions)
782 {
783 var airDirtSeparatorProductId = airDirtSeparatorOption.Id;
784 var airDirtSeparator = airDirtSeparatorOption.Name;
785 ProductHelper.ClearProductPriceCache(airDirtSeparatorOption);
786 var airDirtSeparatorPriceRaw = ProductHelper.GetProductPrice(airDirtSeparatorOption).Price;
787 var airDirtSeparatorPrice = airDirtSeparatorPriceRaw.WarmgarantMoneyFormat(true, false, true);
788 var airDirtSeparatorImage = airDirtSeparatorOption.ImageSmall;
789 <div class="col s12 m6">
790 <div class="option-panel horizontal large" data-value="boiler1" data-productid="@airDirtSeparatorProductId" data-productType="@ProductType.AirDirtSeparator">
791 @if (!string.IsNullOrWhiteSpace(airDirtSeparatorImage))
792 {
793 airDirtSeparatorImage = string.Format("/Files{0}", airDirtSeparatorImage);
794 <div class="left-column">
795 <img src="@airDirtSeparatorImage" alt="@Translate("Air/dirt separator", "Air/dirt separator").JsEncode(): @airDirtSeparator.JsEncode()" />
796 </div>
797 <div class="right-column">
798 <div class="text">@airDirtSeparator</div>
799 <div class="price opensans-bold">@airDirtSeparatorPrice</div>
800 </div>
801 }
802 else
803 {
804 <div class="full-column">
805 <div class="text">@Translate(string.Format("AirDirtSeparatorHeatpumpButtonText_{0}", airDirtSeparator), airDirtSeparator)</div>
806 <div class="price">@airDirtSeparatorPrice</div>
807 </div>
808 }
809 </div>
810 </div>
811 }
812 </div>
813 </div>
814 </div>
815 </div>
816 }
817
818 if (serviceSubscriptionOptions != null && serviceSubscriptionOptions.Any())
819 {
820 <div class="col s12 service-subscription">
821 <div class="row">
822 <div class="col s12">
823 <h5 class="optiontitle">
824 @serviceSubscriptionTitle
825 @if (!string.IsNullOrWhiteSpace(serviceSubscriptionInfo))
826 {
827 <span class="pictogram info-btn" id="service-subscription-infobtn">
828 @moreInfoImage
829 </span>
830 }
831 </h5>
832 </div>
833 <div class="col s12">
834 @serviceSubscriptionIntro
835 </div>
836 <div class="col s12 option-selector-container" id="opt-container2">
837 @foreach (var serviceSubscriptionOption in serviceSubscriptionOptions)
838 {
839 var serviceSubscriptionProductId = serviceSubscriptionOption.Id;
840 var serviceSubscription = serviceSubscriptionOption.Name;
841 ProductHelper.ClearProductPriceCache(serviceSubscriptionOption);
842 var serviceSubscriptionPriceRaw = ProductHelper.GetProductPrice(serviceSubscriptionOption).Price;
843 var serviceSubscriptionPrice = serviceSubscriptionPriceRaw.WarmgarantMoneyFormat(true, false);
844 serviceSubscriptionImage = string.Format("{0}calendar-black.svg", iconsDirectory);
845 <div class="row">
846 <div class="col s12 m6">
847 <div class="option-panel vertical large" data-value="serviceSubscription1" data-productid="@serviceSubscriptionProductId" data-productType="@ProductType.ServiceSubscription">
848 <div class="left-column">
849 @SvgHelper.GetSvgContent(serviceSubscriptionImage, "black-svg")
850 </div>
851 <div class="right-column">
852 <div class="text">@serviceSubscription.Replace(" (per maand)", "")</div>
853 @if (serviceSubscriptionPriceRaw > 0)
854 {
855 <div class="price">@Translate("AssemblyServicePriceText", "(monthly {price})").Replace("{price}", serviceSubscriptionPrice)</div>
856 }
857 </div>
858 </div>
859 </div>
860 </div>
861 }
862 </div>
863 </div>
864 </div>
865 }
866
867 if (installationOption != null)
868 {
869 <div class="col s12 installation">
870 <div class="row">
871 <div class="col s12">
872 <h5 class="optiontitle">
873 @installationTitle
874 @if (!string.IsNullOrWhiteSpace(installationExtraInfo))
875 {
876 <span class="pictogram info-btn" id="installation-infobtn">
877 @moreInfoImage
878 </span>
879 }
880 else
881 {
882 @SvgHelper.CreateInfoIcon(installationInfo, Translate("Information", "Information"), assetPath: assetsDirectory)
883 }
884 </h5>
885 </div>
886 <div class="col s12">
887 @installationIntro
888 </div>
889 <div class="col s12 option-selector-container" id="opt-container3">
890 @if (installationOption != null)
891 {
892 var installationProductId = installationOption.Id;
893 var installation = installationOption.Name;
894 ProductHelper.ClearProductPriceCache(installationOption);
895 var installationPriceRaw = ProductHelper.GetProductPrice(installationOption).Price;
896 var installationPrice = installationPriceRaw.WarmgarantMoneyFormat(true, true);
897 installationImage = string.Format("{0}installation-black.svg", iconsDirectory);
898 <div class="row">
899 <div class="col s12 m6">
900 <div class="option-panel vertical large" data-value="boiler1" data-productid="@installationProductId" data-productType="@ProductType.Installation">
901 <div class="left-column">
902 @SvgHelper.GetSvgContent(installationImage, "brown-svg")
903 </div>
904 <div class="right-column">
905 <div class="text">@installation</div>
906 @if (installationPriceRaw > 0)
907 {
908 <div class="price">@installationPrice</div>
909 }
910 </div>
911 </div>
912 </div>
913 </div>
914 }
915 </div>
916 </div>
917 </div>
918 }
919
920
921
922 <div class="col s12">
923
924 <h5>@disclaimerTitle</h5>
925
926 @disclaimerText
927
928 <label class="checkbox terms">
929 <input type="checkbox" name="agree-terms" id="agree-terms" required="required">
930 @Translate("AssemblyDisclaimerAgreeTermsText", "Ik begrijp het en ga akkoord")
931 </label>
932
933 @if (!string.IsNullOrWhiteSpace(cartUrl))
934 {
935 <p> </p>
936 if (heatpumpIsForSale)
937 {
938 <p><a class="btn btn-blue disabled-link" id="orderlink" href="@cartUrl">@Translate("Order", "Order")</a></p>
939 }
940 }
941 </div>
942
943 // MODAL THERMOSTATS
944 if (thermostatOptions != null && thermostatOptions.Any())
945 {
946 <div id="ThermostatsModal" class="modal modal-large slider-modal">
947 <div class="modal-header">
948 <h3>@Translate("ThermostatsModalHeader", "Compare thermostats")</h3>
949 <div class="modal-action modal-close">
950 @modalCloseImage
951 </div>
952 </div>
953 <div class="modal-content">
954 <div class="slider-control slider-control-left">
955 <div class="slider-control-wrapper">
956 <div class="slider-arrow waves-effect">
957 @SvgHelper.GetSvgContent(string.Format("{0}images/svg/arrow.svg", assetsDirectory), classNames: "general-svg", title: "Slider Control Left")
958 </div>
959 </div>
960 </div>
961 <div class="slider-container">
962 @foreach (var thermostatOption in thermostatOptions)
963 {
964 var thermostatProductId = thermostatOption.Id;
965 var thermostat = ProductHelper.CreateProductName(thermostatOption.Name, thermostatOption.Manufacturer);
966 ProductHelper.ClearProductPriceCache(thermostatOption);
967 var thermostatPriceRaw = ProductHelper.GetProductPrice(thermostatOption).Price;
968 var thermostatPrice = thermostatPriceRaw.WarmgarantMoneyFormat(false, false, true, true);
969 var thermostatPriceColorClass = thermostatPriceRaw > 0 ? "blue-gradient" : "green-gradient";
970 var thermostatImage = thermostatOption.ImageSmall;
971 var thermostatMobileDescription = thermostatOption.ShortDescription;
972 var thermostatDescription = thermostatOption.LongDescription;
973
974 <div class="slider-slide" data-productid="@thermostatProductId" data-productType="@ProductType.Thermostat" style="height: 100%">
975 <div class="slider-content">
976 <div class="content-header">
977 @if (!string.IsNullOrWhiteSpace(thermostatImage))
978 {
979 thermostatImage = string.Format("/Files{0}", thermostatImage);
980 <img src="@thermostatImage"
981 alt="@Translate("Thermostat", "Thermostat").JsEncode(): @thermostat.JsEncode()" />
982 }
983 </div>
984 <div class="content-description ul-list rich-text-editor-content text-small hide-on-large-only">@thermostatMobileDescription</div>
985 <div class="content-description ul-list rich-text-editor-content text-small hide-on-med-and-down">@thermostatDescription</div>
986 <div class="choose-button">
987 <a class="btn btn-blue">@Translate("Choose", "Kies")</a>
988 </div>
989 </div>
990 </div>
991 }
992 </div>
993 <div class="slider-control slider-control-right">
994 <div class="slider-control-wrapper">
995 <div class="slider-arrow waves-effect">
996 @SvgHelper.GetSvgContent(string.Format("{0}images/svg/arrow.svg", assetsDirectory), classNames: "general-svg", title: "Slider Control Right")
997 </div>
998 </div>
999 </div>
1000 </div>
1001 </div>
1002 }
1003
1004 // MODAL Air/Dirt separator
1005 if (!string.IsNullOrWhiteSpace(airDirtSeparatorExtraInfo))
1006 {
1007 <div id="AirDirtSeparatorInfoModal" class="modal modal-medium icon-modal airdirtseparator-detail">
1008 <div class="modal-header">
1009 <h3>@Translate("AirDirtSeparatorModalHeader", "Air/dirt separator info")</h3>
1010 <div class="modal-action modal-close">
1011 @modalCloseImage
1012 </div>
1013 </div>
1014 <div class="modal-content rich-text-editor-content">
1015 @airDirtSeparatorExtraInfo
1016 </div>
1017 </div>
1018 }
1019
1020 // MODAL SERVICE SUBSCRIPTION
1021 if (!string.IsNullOrWhiteSpace(serviceSubscriptionInfo))
1022 {
1023 <div id="ServiceSubscriptionModal" class="modal modal-medium icon-modal service-subscription-detail">
1024 <div class="modal-header">
1025 <h3>@Translate("ServiceSubscriptionModalHeader", "Service subscription")</h3>
1026 <div class="modal-action modal-close">
1027 @modalCloseImage
1028 </div>
1029 </div>
1030 <div class="modal-content rich-text-editor-content">
1031 @serviceSubscriptionInfo
1032 </div>
1033 </div>
1034 }
1035
1036 // MODAL INSTALLATION INFO
1037 if (!string.IsNullOrWhiteSpace(installationExtraInfo))
1038 {
1039 <div id="InstallationInfoModal" class="modal modal-medium icon-modal installation-detail">
1040 <div class="modal-header">
1041 <h3>@Translate("InstallationInfoModalHeader", "Installation info")</h3>
1042 <div class="modal-action modal-close">
1043 @modalCloseImage
1044 </div>
1045 </div>
1046 <div class="modal-content rich-text-editor-content">
1047 @installationExtraInfo
1048 </div>
1049 </div>
1050 }
1051
1052 // MODAL MORE INFO
1053 if (!string.IsNullOrWhiteSpace(productLongDescription) && productLongDescription.Length > 10)
1054 {
1055 <div id="MoreInfoModal" class="modal modal-medium icon-modal more-info">
1056 <div class="modal-header">
1057 <h3>@Translate("MoreInformation", "More info")</h3>
1058 <div class="modal-action modal-close">
1059 @modalCloseImage
1060 </div>
1061 </div>
1062 <div class="modal-content rich-text-editor-content">
1063 @productLongDescription
1064 </div>
1065 </div>
1066 }
1067 }
1068 </div>
1069 </div>
1070 <div class="col s10 l4 push-s1">
1071 @if (heatpumpSelected)
1072 {
1073 <div id="receipt">
1074 <div class="preloader-wrapper small active">
1075 <div class="spinner-layer spinner-orange-only">
1076 <div class="circle-clipper left">
1077 <div class="circle"></div>
1078 </div>
1079 <div class="gap-patch">
1080 <div class="circle"></div>
1081 </div>
1082 <div class="circle-clipper right">
1083 <div class="circle"></div>
1084 </div>
1085 </div>
1086 </div>
1087 </div>
1088 }
1089 </div>
1090 </div>
1091 </div>
1092 </div>
1093 @if (quotationParagraphId > 0)
1094 {
1095 <div id="QuotationRequestModal" class="modal modal-large quotation-request-modal">
1096 <div class="modal-header">
1097 <h3>@Translate("QuotationRequests_Modal_Header", "Quotation request")</h3>
1098 <div class="modal-action modal-close">
1099 @SvgHelper.GetSvgContent(string.Format("{0}images/svg/pictograms/x-close.svg", assetsDirectory), classNames: "brown-svg darken-3", title: Translate("Close", "Close").JsEncode())
1100 </div>
1101 </div>
1102 <div class="modal-content rich-text-editor-content">
1103 @RenderParagraphContent(quotationParagraphId)
1104 </div>
1105 </div>
1106 }
1107 </div>
1108
1109 @SnippetStart("ActionLinks")
1110 var arrow = "<img class=\"icon\" src=\"/Files/Templates/Designs/Warmtethuis/Images/icons/Arrow-anthracite-small.svg\">";
1111
1112 <div class="ul-list action-list">
1113 <ul>
1114 @if (!string.IsNullOrWhiteSpace(productLongDescription) && productLongDescription.Length > 10)
1115 {
1116 <li><a href="#" class="more-infobtn">@arrow @Translate("MoreInformation", "More info")</a></li>
1117 }
1118 @*@if (!string.IsNullOrWhiteSpace(techSpecsPageUrl))
1119 {
1120 <li class="hide-on-small-and-down"><a href="#" class="techspecs-desktop">@arrow @Translate("TechnicalSpecifications", "Technical specs")</a></li>
1121 <li class="hide-on-med-and-up"><a href="#" class="techspecs-mobile">@arrow @Translate("TechnicalSpecifications", "Technical specs")</a></li>
1122 }*@
1123 @*tijdelijk uitgezet, tot er een account is aangemaakt <li><a href="https://www.kiyoh.nl/warmtethuis_nl/" target="_blank">@arrow @Translate("CustomerExperiences", "Klantervaringen")</a></li>*@
1124 @*<li>
1125 <a class="btn btn-yellow hide-on-design-and-up quotation-button" href="@cartUrl" id="quotation-button-small">@Translate("Button_Send_Quotation_Small", "Quotation")</a>
1126 <a class="btn btn-yellow hide-on-design-and-down quotation-button" href="@cartUrl" id="quotation-button-large">@Translate("Button_Send_Quotation", "Send me a quotation")</a>
1127 </li>*@
1128 </ul>
1129 </div>
1130 @SnippetEnd("ActionLinks")
1131
1132
1133 if (!string.IsNullOrWhiteSpace(seoPage))
1134 {
1135 <Text>
1136 <script>
1137 SEO.trackPageView("@seoPage", '@GetGlobalValue("Global:CookieOptInLevel").ToLower()' === 'functional');
1138 SEO.trackAddToCart('@selectedHeatpump.Id', '@selectedHeatpump.Name.JsEncode()', '@productPriceDouble.GoogleMoneyFormat()', '@selectedHeatpump.Manufacturer.Name.JsEncode()', '@(orderType.Equals(OrderType.Rent) ? "Huur" : "Koop")', '@productGroupName.JsEncode()', 1);
1139 </script>
1140 </Text>
1141 }
1142
1143 <script>
1144 var orderType = '@orderType';
1145 @if (orderType == OrderType.Buy)
1146 {
1147 <Text>
1148 var heatpumpProductId = '@productId';
1149 var areaId = @areaId;
1150 </Text>
1151 }
1152 </script>
1153
1154
1155 @SnippetStart("JavaScriptBottom")
1156 <script> // product click
1157
1158 function productSelected(element) {
1159
1160 var clickedProduct = $(element);
1161 var productId = clickedProduct.attr("data-productid");
1162
1163 var productTypeData = clickedProduct.attr("data-productType");
1164 var productType = null;
1165 var areaId = @Dynamicweb.Frontend.PageView.Current().AreaID;
1166 switch (productTypeData) {
1167 case "Thermostat": productType = ProductType.Thermostat;
1168 break;
1169 case "ServiceSubscription": productType = ProductType.ServiceSubscription;
1170 break;
1171 default: return;
1172 break;
1173 }
1174 if (productType != null) {
1175 Cart.AddOption(productType, productId, 1, areaId, OptionChangeSucceeded, OptionChangeFailed);
1176 } else {
1177 OptionChangeFailed();
1178 }
1179 };
1180
1181 function OptionChangeSucceeded(newProductId) {
1182 // reload receipt
1183 var areaId = @Dynamicweb.Frontend.PageView.Current().AreaID;
1184 Cart.ReloadReceipt('@GetGlobalValue("Global:Area.LongLang")', "", areaId, scrollAbleReceipt);
1185 };
1186
1187 function OptionChangeFailed() {
1188 alert("selection failed");
1189 };
1190
1191 function termsClick(event) {
1192 var checkbox = $(event.target.firstElementChild); // clicked checkbox
1193 var checked = checkbox.is(":checked"); // clicked checkbox is checked
1194 if (checked) {
1195 $("#orderlink").removeClass("disabled-link");
1196 } else {
1197 $("#orderlink").addClass("disabled-link");
1198 }
1199 };
1200
1201 function movePriceFromProductCardToContent() {
1202
1203 var price = $(".heatpump-image .action-square")[0];
1204 var priceholder = $("#price-holder");
1205
1206 if (typeof price !== 'undefined' && typeof priceholder !== 'undefined') {
1207 // for buy heatpumps a discount can be active.
1208 // when the page is first loaded the discount and discount image is unknown to the order.
1209 // to display the discount, the before prices and discount image we need to reset the process async
1210 if (orderType === 'Buy') {
1211 var getProductDiscountInfoApiUrl = "/serviceapi/cart/getproductdiscountinfo/" + heatpumpProductId + "/none/" + areaId;
1212 $.ajax({ url: getProductDiscountInfoApiUrl })
1213 .done(function (result) {
1214 if (result !== null && result.ProductHasDiscount) {
1215
1216 // set price
1217 $(".heatpump-image .action-square .action-container").html("<div><span class=\"before\"><span class=\"strikethrough\">" + result.ProductPriceBeforeDiscountString + "</span><br /></span>" + result.ProductPriceString + "</div>");
1218
1219 // set image
1220 $(".image", ".heatpump-image ").attr("style", "background-image: url(" + result.ProductImage + ");");
1221
1222 console.info("The price has been altered async to correctly show the discount value.");
1223 }
1224 }).always(function () {
1225 $(".heatpump-image .action-square").prependTo("#price-holder");
1226 });
1227 } else {
1228 $(".heatpump-image .action-square").prependTo("#price-holder");
1229 }
1230 }
1231 };
1232
1233 var initReceiptScroll = function (element) {
1234 var $this = $(element);
1235 var $target = $('#contentrow');
1236 $this.pushpin({
1237 top: $target.offset().top + 10,
1238 bottom: $target.offset().top + $target.outerHeight() - $this.height(),
1239 offset: $target.offset().top - 130
1240 });
1241 };
1242
1243 var initChatAgentScroll = function (element) {
1244 var $this = $(element);
1245 var $target = $('#contentrow');
1246 $this.pushpin({
1247 top: $target.offset().top + 440,
1248 bottom: $target.offset().top + $target.outerHeight() - $this.height(),
1249 offset: $target.offset().top - 130
1250 });
1251 };
1252
1253 var scrollAbleReceipt = function () {
1254 $('html.screen-lg-up').find('#receipt').each(function () {
1255 $(this).pushpin('remove');
1256 initReceiptScroll(this);
1257 resizeToParentWidth(this);
1258 });
1259 };
1260
1261 var openQuotationRequestModal = function () {
1262 $('#QuotationRequestModal').innovadisModal().modal('open');
1263 };
1264
1265 var initThermostatButtons = function () {
1266 $('#ThermostatsModal .choose-button').off('click').on('click', function () {
1267 $('#opt-container1').trigger("option-click", $(this).closest(".slider-slide").data('productid'));
1268 $('#ThermostatsModal').modal('close');
1269 });
1270 };
1271
1272 var initSliderButtons = function (slick) {
1273 if (slick.slideCount > slick.options.slidesToShow) {
1274 $('.slider-arrow').show()
1275
1276 } else {
1277 $('.slider-arrow').hide()
1278 }
1279 };
1280
1281 $(function () {
1282
1283 // Initialize checkbox in quotation layover
1284 $("label.checkbox", "#quotation-request-form").innovadisCheckbox({});
1285
1286 // Initialize term checkbox
1287 $("label.checkbox.terms").innovadisCheckbox({
1288 onAfterChange: termsClick
1289 });
1290
1291 // move price
1292 movePriceFromProductCardToContent();
1293
1294 // Init modal listeners
1295 $('#thermostat-choose-infobtn').off("click").on("click", function () {
1296
1297 $('#ThermostatsModal').innovadisModal({
1298 slick: {
1299 slidesToShow: 4,
1300 responsive: [
1301 {
1302 breakpoint: 992,
1303 settings: {
1304 slidesToShow: 2,
1305 dots: true
1306 }
1307
1308 }, {
1309 breakpoint: 600,
1310 settings: {
1311 slidesToShow: 1,
1312 dots: true
1313 }
1314
1315 }]
1316 }
1317 }).modal('open');
1318
1319 });
1320
1321 $('#ThermostatsModal').on('init breakpoint', function (event, slick, direction) {
1322 initThermostatButtons();
1323 initSliderButtons(slick);
1324 });
1325
1326 $('#airdirtseparator-infobtn').off("click").on("click", function () {
1327 $('#AirDirtSeparatorInfoModal').innovadisModal().modal('open');
1328 });
1329
1330 $('#service-subscription-infobtn').off("click").on("click", function () {
1331 $('#ServiceSubscriptionModal').innovadisModal().modal('open');
1332 });
1333
1334 $('#installation-infobtn').off("click").on("click", function () {
1335 $('#InstallationInfoModal').innovadisModal().modal('open');
1336 });
1337
1338 $('.more-infobtn').off("click").on("click", function (e) {
1339 e.preventDefault();
1340 $('#MoreInfoModal').innovadisModal().modal('open');
1341 return false;
1342 });
1343
1344 // show technical specifications for desktop click
1345 $('.techspecs-desktop').off("click").on("click", function (e) {
1346 e.preventDefault();
1347 $('#TechSpecsModalDesktop').innovadisModal().modal('open');
1348 return false;
1349 });
1350
1351 // show technical specifications for mobile click
1352 $('.techspecs-mobile').off("click").on("click", function (e) {
1353 e.preventDefault();
1354 $('#TechSpecsModalMobile').innovadisModal().modal('open');
1355 return false;
1356 });
1357
1358 // Init modal quotation request
1359 $('.quotation-button').off("click").on("click", function (e) {
1360 e.preventDefault();
1361 openQuotationRequestModal();
1362 SEO.trackPageView("@seoPageQuotation", '@GetGlobalValue("Global:CookieOptInLevel").ToLower()' === 'functional');
1363 return false;
1364 });
1365
1366 // Initialize advice & contact plugin
1367 if ($('#tabs-advice-contact')[0]) {
1368
1369 function handleTabOnbefore(event) {
1370 var $element = $(event.currentTarget);
1371 var $target = $element.data("toggle");
1372
1373 // reset call me back form before showing
1374 if ($target === "call-me-back-container" && typeof onBeforeCallMeBack !== 'undefined') {
1375 onBeforeCallMeBack();
1376 }
1377 }
1378
1379 // set advice as default
1380 $('[data-toggle]').innovadisToggleClass({
1381 target: $('#tabs-advice-contact'), // Target which will receive "className"
1382 className: 'overlay-active', // Class to add as active class
1383 subTarget: true, // Use data-attribute value as target ID, target will receive active class
1384 onBefore: handleTabOnbefore // Call a function before toggling
1385 });
1386 $('ul.tabs', "#tabs-advice-contact").tabs('select_tab', 'contact-tab');
1387 $("#advice-tab").parent().addClass("hide"); // hide advice tab
1388 }
1389
1390 // initialize modals
1391 $('.modal').modal();
1392
1393 // Initialize option panels
1394 $('#opt-container1').innovadisOptionSelector({ inputName: 'select_product', callback: productSelected });
1395 $('#opt-container2').innovadisOptionSelector({ inputName: 'select_product', callback: productSelected });
1396 $('#opt-container3').innovadisOptionSelector({ inputName: 'select_installation', callback: productSelected });
1397 $('#opt-container4').innovadisOptionSelector({ inputName: 'select_product', callback: productSelected });
1398
1399 // Initial load receipt
1400 var areaId = @Dynamicweb.Frontend.PageView.Current().AreaID;
1401 Cart.ReloadReceipt('@GetGlobalValue("Global:Area.LongLang")', "", areaId, scrollAbleReceipt);
1402
1403 $(window)
1404 .resize(function () {
1405 resizeToParentWidth('#receipt');
1406 resizeToParentWidth('#advice-contact');
1407 })
1408 .trigger('resize');
1409
1410 scrollAbleReceipt();
1411
1412 $('html.screen-lg-up').find('#advice-contact').each(function () {
1413 initChatAgentScroll(this);
1414 });
1415
1416 $('html').on('classChange', function (event, eventClass) {
1417 if (eventClass === 'screen-md-down') {
1418 $('#receipt').pushpin('remove');
1419 $('#advice-contact').pushpin('remove');
1420 }
1421 if (eventClass === 'screen-md-down-removed') {
1422 initReceiptScroll('#receipt');
1423 initChatAgentScroll('#advice-contact');
1424 }
1425 });
1426 });
1427 </script>
1428 @SnippetEnd("JavaScriptBottom")
1429 }
1430