1 @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
2 @using EGE.Website.CustomModules.Extensions
3 @using EGE.Website.CustomModules
4 @using Newtonsoft.Json
5 @using EGE.Domain.OrderLine
6 @{
7 var cart = Dynamicweb.Ecommerce.Common.Context.Cart;
8 var langCode = Dynamicweb.Ecommerce.Common.Context.Country.Code2;
9
10 var formValidation = new {
11 name = new {
12 required = true,
13 pattern = @"^(?=.*\S).{1,50}$",
14 message = Translate("Checkout | Information | Name Field Validation Message", "Navn skal udfyldes, være mellem 1 og 50 tegn langt, og skal indeholde andet end mellemrum.")
15 },
16 company = new {
17 required = true,
18 pattern = @"^(?=.*\S).{1,50}$",
19 message = Translate("Checkout | Information | Company Field Validation Message", "Tæppeprøver, kataloger m.m. kan kun bestilles af virksomheder. Virksomhed skal udfyldes, være mellem 1 og 50 tegn langt, og skal indeholde andet end mellemrum.")
20 },
21 address = new {
22 required = true,
23 pattern = @"^(?=.*\S).{1,100}$",
24 message = Translate("Checkout | Information | Address Field Validation Message", "Adresse skal udfyldes, være mellem 1 og 100 tegn langt, og skal indeholde andet end mellemrum.")
25 },
26 postalCode = new {
27 required = true,
28 pattern = @"^(?=.*\S).{1,10}$",
29 message = Translate("Checkout | Information | Postal Code Field Validation Message", "Postnummeret skal udfyldes, være mellem 1 og 10 tegn langt, og skal indeholde andet end mellemrum.")
30 },
31 city = new {
32 required = true,
33 pattern = @"^(?=.*\S).{1,100}$",
34 message = Translate("Checkout | Information | City Field Validation Message", "By skal udfyldes, være mellem 1 og 100 tegn langt, og skal indeholde andet end mellemrum.")
35 },
36 country = new {
37 required = true,
38 pattern = "",
39 message = Translate("Checkout | Information | Country Field Validation Message", "Husk at vælge et land.")
40 },
41 email = new {
42 required = true,
43 pattern = "",
44 message = Translate("Checkout | Information | Email Field Validation Message", "E-mailadressen er ugyldig, den skal være på formularen a@a.a - hvor a kan være flere bogstaver, tal og tegn.")
45 },
46 phone = new {
47 required = true,
48 pattern = @"^(?=(.*?\d){2})[\d+\-\s()]+$",
49 message = Translate("Checkout | Information | Phone Field Validation Message", "Telefonnummeret må kun bestå af tal, mellemrum og flg. tegn: (+-). Der skal være mindst 2 tal.")
50 }
51 };
52
53
54 var countryService = new EGE.Website.CustomModules.Services.CountryService();
55 var countries = countryService.GetCountryTranslationsByLang(langCode);
56
57 var nextStepTag = GetString("CartV2.NextStepButtonName");
58 string errorMessage = "";
59 if (cart == null)
60 {
61 errorMessage = "Your cart is empty";
62 }
63
64 var paymentMethodId = GetLoop("Paymethods")?.FirstOrDefault()?.GetString("Ecom:Cart.Paymethod.ID");
65
66 object pageContent = "";
67 Pageview.Area.Item.TryGetValue("InformationContent", out pageContent);
68
69 bool isOutletSite = PageExtensions.IsOutletArea(Pageview.AreaID);
70 string orderOverviewModifier = isOutletSite?"order-overview--outlet":"";
71 }
72
73 <script>
74 document.addEventListener("DOMContentLoaded", (event) => {
75
76 const orderForm = document.getElementById("OrderSubmit");
77 orderForm.addEventListener("submit", function (event) {
78
79 window.dataLayer = window.dataLayer || [];
80 window.dataLayer.push({ ecommerce: null });
81 window.dataLayer.push({
82 "event": "purchase",
83 "ecommerce": {
84 "transaction_id": "@cart.Id",
85 "value": @cart.Price.PriceFormattedNoSymbol,
86 "tax": 0,
87 "shipping": @cart.ShippingFee.PriceFormattedNoSymbol,
88 "currency": "@cart.CurrencyCode",
89 "items": [
90 @foreach (var orderLine in cart.OrderLines)
91 {
92 <text>
93 {
94 "item_id": "@orderLine.ProductNumber",
95 "item_name": "@orderLine.ProductName",
96 "currency": "@orderLine.Currency.Code",
97 "item_category": "@orderLine.GetItemCategoryForTracking()",
98 "product_type": "@orderLine.GetProductTypeForTracking()",
99 "price": 0.00,
100 "quantity": @orderLine.Quantity,
101 },
102 </text>
103 }
104 ]
105 }
106 });
107 });
108 });
109 </script>
110
111 @if (string.IsNullOrEmpty(errorMessage))
112 {
113 <script>
114 var validationMessages = {
115 standard: '@Translate("Checkout | Information | Input field | Error message", "Error")',
116 selectMissingValue: '@Translate("Checkout | Information | Input field | Dropdown error message", "Error")',
117 invalidEmail: '@Translate("Checkout | Information | Input field | Invalid e-mail message", "Error")',
118 submitButtonError: '@Translate("Checkout | Information | Error message", "Error")'
119 }
120 </script>
121
122
123 <section class="your-info">
124 <div class="container your-info__container">
125 <div class="row">
126 <div class="col-xs-12 col-sm-offset-1 col-sm-10 your-info__header">
127 <h1 class="header-in-component ">@Translate("Checkout | Information | Title", "Your information")</h1>
128 <section class="text-block text-block--one-column text-block--receipt">
129 <div class="container">
130 <div class="row text-block__row">
131 <div class="text-block__text">
132 <div class="rte">
133 @pageContent
134 </div>
135 </div>
136 </div>
137 </div>
138 </section>
139 </div>
140 <div class="col-xs-12 col-sm-offset-1 col-ms-7 col-sm-5 col-md-7 your-info__form">
141 <form class="form form--checkout" name="ordersubmit" id="OrderSubmit" action="" role="form" method="POST" data-validate novalidate>
142 <input type="hidden" name="EcomCartPaymethodID" id="EcomCartPaymethodID_@paymentMethodId" value="@paymentMethodId" />
143 <input type="hidden" name="EcomOrderCustomerAccepted" id="EcomOrderCustomerAccepted" value="True" />
144 <input type="hidden" name="CustomCountry" id="CustomCountry" v-model="chosenCountryName" />
145 <input type="hidden" name="@nextStepTag" id="@nextStepTag" value="" />
146 <div class="form__group">
147 <label class="form__label" for="EcomOrderCustomerName">@Translate("Checkout | Name", "Name")</label> <input class="form__input" type="text" name="EcomOrderCustomerName" id="EcomOrderCustomerName" @RenderValidationAttributes(formValidation, "name")>
148 </div>
149 <div class="form__group">
150 <label class="form__label" for="EcomOrderCustomerCompany">@Translate("Checkout | Company", "Company")</label> <input class="form__input" type="text" name="EcomOrderCustomerCompany" id="EcomOrderCustomerCompany" @RenderValidationAttributes(formValidation, "company")>
151 </div>
152 <div class="form__group">
153 <label class="form__label" for="EcomOrderCustomerAddress">@Translate("Checkout | Address", "Address")</label> <input class="form__input" type="text" name="EcomOrderCustomerAddress" id="EcomOrderCustomerAddress" @RenderValidationAttributes(formValidation, "address")>
154 </div>
155 <div class="form__group">
156 <label class="form__label" for="EcomOrderCustomerZip">@Translate("Checkout | Postal code", "Postal code")</label> <input class="form__input" type="text" name="EcomOrderCustomerZip" id="EcomOrderCustomerZip" @RenderValidationAttributes(formValidation, "postalCode")>
157 </div>
158 <div class="form__group">
159 <label class="form__label" for="EcomOrderCustomerCity">@Translate("Checkout | City", "City")</label> <input class="form__input" type="text" name="EcomOrderCustomerCity" id="EcomOrderCustomerCity" @RenderValidationAttributes(formValidation, "city")>
160 </div>
161 <div class="form__group form__group--select">
162 <label class="form__label" for="SellerCountryCode">
163 @Translate("Checkout | Country", "Country")
164 </label>
165 <div class="form__select-holder">
166 <select class="form__select" id="SellerCountryCode" name="SellerCountryCode" @@change="selectCountry" @RenderValidationAttributes(formValidation, "country")>
167 <option value="">@Translate("Checkout | Intet Land Valgt", "None")</option>
168 @foreach (var country in countries)
169 {
170 <option value="@country.CountryCode" data-greenshipping="@country.OffersGreenShipping" data-name="@country.Translation">@country.Translation</option>
171 }
172 </select>
173 </div>
174 </div>
175 <div class="form__group">
176 <label class="form__label" for="EcomOrderCustomerEmail">@Translate("Checkout | E-mail", "E-mail")</label> <input class="form__input" type="email" name="EcomOrderCustomerEmail" id="EcomOrderCustomerEmail" @RenderValidationAttributes(formValidation, "email")>
177 </div>
178 <div class="form__group">
179 <label class="form__label" for="EcomOrderCustomerPhone">@Translate("Checkout | Phone number", "Phone number")</label> <input class="form__input" type="tel" name="EcomOrderCustomerPhone" id="EcomOrderCustomerPhone" @RenderValidationAttributes(formValidation, "phone")>
180 </div>
181 <div class="form__group form__group--textarea">
182 <label class="form__label" for="EcomOrderCustomerComment">@Translate("Checkout | Comments", "Comments")</label> <textarea class="form__input form__input--textarea" name="EcomOrderCustomerComment" id="EcomOrderCustomerComment"></textarea>
183 </div>
184
185 @if(!isOutletSite){
186 <div class="form__group form__group--checkbox">
187 <h4 class="form__group-header">@Translate("Shipping", "Shipping")</h4>
188 <ul class="form__checkbox-list form__checkbox-list--radios" ref="shippingRadios">
189
190 <li class="form__checkbox-list-item" v-if="countryHasGreenShipping">
191 <label for="GreenShipping" class="form__checkbox-label">
192 <input ref="GreenShipping" v-model="shippingMethod" id="GreenShipping" name="Shipping" class="form__input-checkbox" type="radio" required value="@Constants.GreenShippingLabel">
193 <span class="form__checkbox-label-text">@Translate("Checkout | Shipping | Yes, I will save 20% CO2 and wait 3-5 days for my samples to arrive. (European countries only)", "Yes, I will save 20% CO2 and wait 3-5 days for my samples to arrive. (European countries only)")</span>
194 </label>
195 </li>
196
197 <li class="form__checkbox-list-item">
198 <label for="NormalShipping" class="form__checkbox-label">
199 <input ref="NormalShipping" v-model="shippingMethod" id="NormalShipping" name="Shipping" class="form__input-checkbox" type="radio" required value="48-hour delivery">
200 <span class="form__checkbox-label-text">@Translate("Checkout | Shipping | 48-hour delivery", "48-hour delivery")</span>
201 </label>
202 </li>
203 </ul>
204 </div>
205 }
206
207 <div class="form__group form__group--checkbox form__group--emphasis">
208 <ul class="form__checkbox-list">
209 <li class="form__checkbox-list-item">
210 <label for="StoreInformation" class="form__checkbox-label">
211 <input id="StoreInformation" name="StoreInformation" class="form__input-checkbox" type="checkbox" required>
212 <span class="form__checkbox-label-text">
213 @Translate("Checkout | Information Consent", "I allow Ege Carpets to store and process personal information")
214 @{Dynamicweb.Frontend.PageView.Current().Area.Item.TryGetValue("CookieAndPrivacyLink", out var cookieAndPrivacyLink);}
215 (<a href="@cookieAndPrivacyLink">@Translate("Cookiepolicy and privacy", "Cookiepolicy and privacy")</a>)
216 </span>
217 </label>
218 </li>
219 @if(!isOutletSite){
220 <li class="form__checkbox-list-item">
221 <label for="EcomOrderSubscribeToNewsletter" class="form__checkbox-label">
222 <input id="EcomOrderSubscribeToNewsletter" name="EcomOrderSubscribeToNewsletter" class="form__input-checkbox" type="checkbox">
223 <span class="form__checkbox-label-text">@Translate("Checkout | Newsletter", "I would like to receive Egecarpet's newsletter")</span>
224 </label>
225 </li>
226 }
227 </ul>
228 </div>
229 <div class="your-info__submit-area">
230 <div class="your-info__submit-button-holder">
231
232 <button type="submit" name="@nextStepTag" id="@nextStepTag" class="button button--solid button--black js-form__submit" data-text="@Translate("Checkout | Information | Place your order", "Place your order")">
233
234 <span class="button__content">
235 <span class="button__icon">
236 <svg class="svg-icon button__svg">
237 <use xlink:href="@Constants.DistPath/icons/icons.svg#arrow"></use>
238 </svg>
239 </span>
240 <span class="button__text">
241 @Translate("Checkout | Information | Place your order", "Place your order")
242 </span>
243 </span>
244 </button>
245 <ul class="form__error form__error--hidden js-form-error-submit">
246 <li></li>
247 </ul>
248 </div>
249 </div>
250
251 </form>
252 </div>
253 <div class=" col-xs-12 col-ms-5 col-md-3 your-info__order-overview">
254 <div class="order-overview @orderOverviewModifier">
255 <div class="order-overview__header">@Translate("Checkout | Products in cart", "Products in cart")</div>
256
257 <table class="order-overview__table">
258 <tbody class="order-overview__table-body">
259 @foreach (var orderLine in cart.OrderLines)
260 {
261 var productImage = ProductExtensions.GetProductImagePath(orderLine.Product.Id, out bool isExternal, "SM");
262
263 var orderLineFields = orderLine.GetOrderLineFields();
264 bool isRecolored = orderLineFields.Recolored;
265
266 var productName = orderLine.Product.Name;
267 var productId = orderLine.GetProductNumber();
268 var productAmount = orderLine.Quantity;
269 if (isOutletSite)
270 {
271 productAmount = 1;
272 }
273
274 string outletArea = "";
275 string outletProductNumber = "";
276 string outletBatchNumber = "";
277 string outletM2Price = "";
278 string price = "";
279
280 if (isOutletSite)
281 {
282 outletArea = orderLine.OrderLineFieldValues.FirstOrDefault(x => x.OrderLineFieldSystemName == "Area")?.Value ?? "";
283 outletProductNumber = orderLine.OrderLineFieldValues.FirstOrDefault(x => x.OrderLineFieldSystemName == "M3ProductNumber")?.Value ?? "";
284 outletBatchNumber = orderLine.OrderLineFieldValues.FirstOrDefault(x => x.OrderLineFieldSystemName == "BatchNumber")?.Value ?? "";
285 outletM2Price = orderLine.OrderLineFieldValues.FirstOrDefault(x => x.OrderLineFieldSystemName == "EgeUnitPrice")?.Value ?? "";
286 price = orderLine.Price.ToString();
287 }
288
289 var sampleOptionId = "";
290 if (!isOutletSite && !string.IsNullOrEmpty(orderLine.ProductVariantId))
291 {
292 sampleOptionId = orderLine.ProductVariantId.Split('.')[1];
293 }
294
295 var sampleVariantOptionText = "";
296
297 if (!string.IsNullOrEmpty(sampleOptionId))
298 {
299 var sampleVariantOption = orderLine.GetVariantOption("VARGRP4", sampleOptionId);
300 if (sampleVariantOption != null)
301 {
302 sampleVariantOptionText = sampleVariantOption.Name;
303 }
304 }
305 var bgImg = "";
306 if (orderLineFields.HasRecoloredThumbnail)
307 {
308 bgImg = "style=\"background-image: url('" + orderLineFields.ThumbnailUrl + "'); background-size: cover; background-position: 50% 50%;\"";
309 }
310 <tr class="order-overview__row">
311 <td class="order-overview__cell order-overview__cell--product-image">
312 <figure class="order-overview__image" @bgImg>
313 @if (!orderLineFields.HasRecoloredThumbnail)
314 {
315 <img class="lazyload a-image lazyload-measure lazyload-bg " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="@productName" property="contentUrl" data-src="@productImage?mode=crop"
316 data-query-obj='{"mode":"crop"}'>
317 <noscript v-if="false">
318 <img src="@productImage?mode=crop&width="
319 alt="@productName">
320 </noscript>
321 }
322 </figure>
323 </td>
324 <td class="order-overview__cell order-overview__cell--product-name">
325 @if (isRecolored)
326 {
327 <div class="order-overview__product-recolored" v-if="currentToolProduct.recolored">@Translate("selectedSampleSizesFromTool | Recolored", "Recolored")</div>
328 }
329 <div class="order-overview__product-name">@productName</div>
330 @if (isOutletSite)
331 {
332 <div class="order-overview__product-number">@Translate("Checkout | Prod. no", "Prod. no"): @outletProductNumber</div>
333 <div class="order-overview__product-number">@Translate("Checkout | Batch no", "Batch no"): @outletBatchNumber</div>
334 <div class="order-overview__product-number">@outletM2Price @orderLine.Price.Currency.Code @Translate("Product details | Remnants | per m2", "per m2")</div>
335 <div class="order-overview__product-number">@outletArea m2</div>
336 <div class="order-overview__line-price">@orderLine.Price.PriceFormattedNoSymbol @orderLine.Price.Currency.Code</div>
337 }
338 else
339 {
340 <div class="order-overview__product-number">@productId</div>
341 <div class="order-overview__variant-text">@sampleVariantOptionText</div>
342 <div class="order-overview__amount">@Translate("Cart | Quantity", "Quantity"): @productAmount</div>
343 }
344
345 </td>
346 </tr>
347 }
348 @if (isOutletSite)
349 {
350 <tr class="order-overview__row">
351 <td colspan="2">
352 <div class="order-overview__total-price"><span>@Translate("Checkout | Sum", "Sum"):</span><span>@cart.Price.PriceFormattedNoSymbol @cart.CurrencyCode</span></div>
353 </td>
354 </tr>
355 }
356
357 </tbody>
358 </table>
359 @if (isOutletSite){
360 if (Pageview.User != null && !String.IsNullOrEmpty(Pageview.User.Currency))
361 {
362 string shippingText = "";
363 if(Pageview.User.Currency == "EUR") {
364 shippingText = Translate("Checkout | Outlet | The prices are based on Ex Works terms", "The prices are based on Ex Works terms");
365 }else if(Pageview.User.Currency == "DKK") {
366 shippingText = Translate("Checkout | Outlet | Free delivered in Denmark", "Free delivered in Denmark");
367 }
368 <p class="order-overview__shipping-message">@shippingText</p>
369 }
370 }
371
372 <footer class="order-overview__footer">
373 <div class="order-overview__footer-header">@Pageview.Area.Item["CartHelpSectionTitle"]</div>
374 <div class="order-overview__footer-address">
375 <p>@Translate("Cart | Email", "E-mail"): <a href="mailto:@Pageview.Area.Item["CartHelpSectionEmail"]">@Pageview.Area.Item["CartHelpSectionEmail"]</a></p>
376 <p>
377 @if (!string.IsNullOrWhiteSpace(Pageview.Area.Item["CartHelpSectionDealerLink"]?.ToString()))
378 {
379 <a href="@(Dynamicweb.Frontend.SearchEngineFriendlyURLs.GetFriendlyUrl(int.Parse(Pageview.Area.Item["CartHelpSectionDealerLink"].ToString())))">
380 <b>@Pageview.Area.Item["CartHelpSectionDealerText"]</b>
381 </a>
382 }
383 </p>
384 </div>
385 </footer>
386 </div>
387 </div>
388 </div>
389 </div>
390 </section>
391 }
392 else
393 {
394 <div style="text-align: center; font-weight: bold; padding: 30px 5px;">@errorMessage</div>
395 }
396
397 @helper RenderValidationAttributes(dynamic formValidation, string name)
398 {
399 IDictionary<string, object> formValidationDict = new Dictionary<string, object>();
400
401 foreach (var prop in formValidation.GetType().GetProperties())
402 {
403 formValidationDict[prop.Name] = prop.GetValue(formValidation);
404 }
405
406 var validationObj = formValidationDict[name];
407 var typedValidationObj = (dynamic)validationObj;
408 var returnString = "";
409 if(typedValidationObj.required) {
410 returnString += "required";
411 }
412
413 if(typedValidationObj.pattern != "") {
414 returnString += " pattern=\""+typedValidationObj.pattern+"\"";
415 }
416
417 if(typedValidationObj.message != "") {
418 returnString += " data-message-link=\"true\" data-custom-message=\""+typedValidationObj.message+"\"";
419 }
420
421 @returnString
422 }
