1 @using System
2 @using Dynamicweb.Rendering
3 @using Dynamicweb.Ecommerce.ProductCatalog
4 @using Nevotex.Data.Entities
5 @using Nevotex.Data.Helpers
6 @using Nevotex.Data.Services
7 @using System.Collections.Generic;
8 @using System.Text;
9 @inherits ViewModelTemplate<ProductViewModel>
10 11 @{
12 var productServiceForDetails = new ProductService();
13 var productPageId = GetPageIdByNavigationTag("ProductsPage");
14 var rendera_4bilden = Convert.ToBoolean(Model.PrimaryOrDefaultGroup.GetGroup().GroupFields.ToList().FirstOrDefault(x => x.SystemName == "Rendera_4bilden").Value.ToString());
15 //var rendera_4bilden = true;
16 var productService = new ProductService();
17 var path = Model.Number;
18 var productId = Model.Id;
19 var productName = Model.Name;
20 var productNumber = Model.Number;
21 var productVariantId = Model.VariantId;
22 var productLanguageId = Model.LanguageId;
23 var uses = productService.GetProductCategoryFieldValue("Anvndningsomrade", productId);
24 var useValues = uses.Split(',');
25 var isCollection = productServiceForDetails.IsGroupACollection(Model.PrimaryOrDefaultGroup.Id, productLanguageId);
26 27 if (rendera_4bilden)
28 {
29 path = path + "_4";
30 }
31 32 IEnumerable<MediaViewModel> assetsImages = Model.AssetCategories.Where(x => x.SystemName == "Images").SelectMany(x => x.Assets);
33 //IEnumerable<MediaViewModel> assetsImages = Model.AssetCategories.SelectMany(x => x.Assets);
34 List<MediaViewModel> assetsList = new List<MediaViewModel>();
35 36 assetsList.Add(Model.DefaultImage);
37 38 foreach (MediaViewModel ai in assetsImages)
39 {
40 assetsList.Add(ai);
41 }
42 foreach (MediaViewModel ip in Model.ImagePatternImages)
43 {
44 assetsList.Add(ip);
45 }
46 47 var defaultImagePath = Model.DefaultImage.GetFileViewModel().PathUrlEncoded;
48 49 var imgPath = "/Admin/Public/GetImage.ashx?width=705&height=524&crop=0&FillCanvas=True&DoNotUpscale=true&Compression=75&image=/Files/Images/produktbilder/" + path + ".jpg";
50 51 52 <div class="product__info dw-mod u-margin-bottom--lg js-product">
53 <div class="grid grid--align-content-start">
54 55 <div class="product__top paragraph-container paragraph-container--full-width dw-mod">
56 <div class="center-container dw-mod">
57 <div class="grid">
58 <div class="grid__col-lg-6 grid__col-md-6 grid__col-sm-12 grid__col-xs-12 dw-mod" id="Block__MainImage">
59 <div class="grid grid--align-content-start dw-mod" id="Block__MainImageRow">
60 <input type="checkbox" id="GalleryModalTrigger" class="modal-trigger">
61 <div class="modal-container">
62 <label for="GalleryModalTrigger" id="GalleryModalOverlay" class="modal-overlay"></label>
63 <div class="modal modal--lg modal-height--full" id="GalleryModal">
64 <div class="modal__body ">
65 <div class="modal__body_text"></div>
66 <div class="carousel dw-mod carousel--horizontal" id="modalCarousel">
67 <div class="thumb-list carousel__container js-carousel-slides dw-mod">
68 @foreach (MediaViewModel img in assetsList)
69 {
70 var imagePath = img.GetFileViewModel().PathUrlEncoded;
71 var getImagePath = $"/Admin/Public/GetImage.ashx?width=1410&height=1048&crop=0&FillCanvas=True&DoNotUpscale=true&Compression=75&image={imagePath}";
72 73 <div class="carousel__slide dw-mod carousel__slide--horizontal">
74 <img class="b-lazy modal--full__img dw-mod" src="/Files/Images/placeholder.gif" data-src="@getImagePath" alt="@productName" title="@productName">
75 </div>
76 }
77 78 </div>
79 80 <script>
81 document.addEventListener("DOMContentLoaded", function () {
82 modalCarousel = new CarouselModule('#modalCarousel', {
83 slidesInView: 1,
84 direction: "horizontal",
85 preloaderSize: 3,
86 showCounter: true
87 });
88 });
89 </script>
90 <div class="js-carousel-controls"><div class="carousel-prev-btn dw-mod"></div><div class="carousel-next-btn dw-mod"></div><div class="carousel__counter">1 / 3</div></div>
91 </div>
92 93 </div>
94 <label class="modal__close-btn" for="GalleryModalTrigger"></label>
95 </div>
96 </div>
97 <div class="grid__col-lg-12 grid__col-md-12 grid__col-sm-12 grid__col-xs-12 dw-mod" id="Block__Image">
98 <label data-path="@defaultImagePath" for="GalleryModalTrigger" class="product__image-container u-position-relative">
99100 <img id="Image_@Model.Id" class=" u-middle product__image-container__image dw-mod dw-mod" src="/Admin/Public/GetImage.ashx?Width=705&Height=524&Crop=0&DoNotUpscale=True&FillCanvas=True&Image=@defaultImagePath&AlternativeImage=/Images/missing_image.jpg" onclick="modalCarousel.GoToSlide('modalCarousel', this.getAttribute('data-number'))" alt="@productName" title="@productName" data-number="0">
101102103 </label>
104105 </div>
106 <div class="grid__col-lg-12 grid__col-md-12 grid__col-sm-12 grid__col-xs-12 dw-mod" id="Block__Carousel">
107 <div class="product__thumbs dw-mod">
108109 <div class="carousel dw-mod carousel--horizontal" id="productCarousel">
110 <div class="thumb-list carousel__container js-carousel-slides dw-mod" style="left: 0px; width: 60%;">
111112 @foreach (MediaViewModel img in assetsList)
113 {
114 var imagePath = img.GetFileViewModel().PathUrlEncoded;
115 var getImagePath = $"/Admin/Public/GetImage.ashx?width=705&height=524&crop=0&FillCanvas=True&DoNotUpscale=true&Compression=75&image={imagePath}";
116 var getImageSmallPath = $"/Admin/Public/GetImage.ashx?Width=200&Height=200&Crop=5&DoNotUpscale=True&FillCanvas=True&Image={imagePath}&AlternativeImage=/Images/missing_image.jpg";
117118 <div class="carousel__slide dw-mod carousel__slide--horizontal">
119 <div data_path="@imagePath" class="thumb-list__item dw-mod js-thumb js-gallery js-thumb--active thumb-list__item--active" data-for="Image_@Model.Id" data-image="@getImagePath" onmouseover="Gallery.openImage(this)">
120 <label for="GalleryModalTrigger" class="thumb-list__image-label">
121 <img class="b-lazy u-middle thumb-list__image dw-mod b-loaded" src="@getImageSmallPath" onclick="modalCarousel.GoToSlide('modalCarousel', this.closest('.carousel__slide').index());" alt="@Model.Name" title="@Model.Name" data-image="@imagePath">
122123 </label>
124 </div>
125 </div>
126 }
127128 </div>
129130 <script>
131 document.addEventListener("DOMContentLoaded", function () {
132 productCarousel = new CarouselModule('#productCarousel', {
133 slidesInView: 5,
134 direction: "horizontal",
135 preloaderSize: 2,
136 showCounter: false
137 });
138 });
139 </script>
140 <div class="js-carousel-controls"></div>
141 </div>
142 </div>
143 </div>
144 </div>
145146 </div>
147 <div class="grid__col-lg-auto grid__col-md-auto grid__col-sm-12 grid__col-xs-12 dw-mod" id="Block__MainInformation">
148 <div>
149 <div class="u-pull--left product__title dw-mod">
150 <h1 class="u-no-margin">@productName</h1>
151152 <div class="item-number dw-mod">@productNumber</div>
153 </div>
154155156 @if (Pageview.User != null)
157 {
158 @RenderPartial("Designs/Rapido/eCom/ProductCatalog/Partials/ProductFavorite.cshtml", Model)
159 }
160161162 </div>
163 <div class="grid__col-lg-12 grid__col-md-12 grid__col-sm-12 grid__col-xs-12 u-no-padding dw-mod" id="Block__FullDescription">
164 <div class="product__section dw-mod">
165 <div class="product__description center-container dw-mod">
166167 @{
168 var desc = Convert.ToString(Model.LongDescription);
169170171 if (!string.IsNullOrWhiteSpace(Convert.ToString(Model.ProductFields["Variantbeskrivning"].Value)))
172 {
173 desc = Convert.ToString(Model.ProductFields["Variantbeskrivning"].Value);
174 }
175176 }
177178 @desc
179180 @if (!string.IsNullOrWhiteSpace(uses))
181 {
182 <p>
183 <h5>@Translate("SuitableFor")</h5>
184 <ul>
185 @foreach (var u in useValues)
186 {
187 <li>@Translate(u)</li>
188 }
189 </ul>
190 </p>
191 }
192193194 <p></p>
195196 @RenderPartial("Designs/Rapido/eCom/ProductCatalog/Partials/ProductIcons.cshtml", Model)
197198199200 </div>
201 </div>
202 </div>
203204 @if (Pageview.User?.ID != null)
205 {
206 @RenderPartial("Designs/Rapido/eCom/ProductCatalog/Partials/ProductBuyInfo.cshtml", Model)
207 }
208209210 <script>
211212 document.addEventListener("DOMContentLoaded", function () {
213 if (document.getElementById("PriceAndActions")) {
214 document.getElementById("PriceAndActions").addEventListener("contentLoaded", function (event) {
215 if (document.querySelector(".js-variants") != null) {
216 MatchVariants.Update(document.querySelector(".js-variants"), "DoNothing");
217 }
218 });
219 }
220 });
221 </script>
222223224 <script>
225 function addToSelectedCart() {
226 var requestUrl = "/Default.aspx?ID=6301" + "&cartcmd=Add&Quantity=1" + "&CartId=" + document.getElementById("CartSelector").value + "&ProductId=PROD433" + "&VariantId=VARGRP208_1000432" + "&UnitId=";
227228 console.log(requestUrl)
229230 document.getElementById('OrderDraftSelectModalTrigger').checked = false;
231232 var overlayElement = document.createElement('div');
233 overlayElement.className = "preloader-overlay";
234 overlayElement.setAttribute('id', "CartOverlay");
235 var overlayElementIcon = document.createElement('div');
236 overlayElementIcon.className = "preloader-overlay__icon dw-mod";
237 overlayElementIcon.style.top = window.pageYOffset + "px";
238 overlayElement.appendChild(overlayElementIcon);
239 document.getElementById('content').parentNode.insertBefore(overlayElement, document.getElementById('content'));
240241 Request.Fetch().get(
242 requestUrl,
243 function () {
244 var overlayNode = document.getElementById('CartOverlay');
245 overlayNode.parentNode.removeChild(overlayNode);
246 document.getElementById('OrderDraftNotificationModalTrigger').checked = true;
247 },
248 null,
249 false
250 );
251 }
252253 function goToSelectedCart() {
254 window.location = "/Default.aspx?ID=" + "6562" + "&CartID=" + document.getElementById('CartSelector').value + "&CartCmd=setcart" + "&redirect=false";
255 }
256 </script>
257258 </div>
259260 </div>
261 </div>
262 </div>
263264 @if (Pageview.Device.ToString() == "Mobile")
265 {
266 @RenderPartial("Designs/Rapido/eCom/ProductCatalog/Partials/TabsMobile.cshtml", Model)
267 }
268 else
269 {
270 @RenderPartial("Designs/Rapido/eCom/ProductCatalog/Partials/TabsDesktop.cshtml", Model)
271 }
272273274275276277 <div class="grid__col-lg-12 grid__col-md-12 grid__col-sm-12 grid__col-xs-12 u-no-padding dw-mod" id="Block__RelatedProducts" style="display:none;">
278 <div class="product__section dw-mod">
279 <div class="center-container dw-mod">
280 <h2 class=" dw-mod">@Translate("Related products")</h2>
281 <div>
282 <div class="u-min-h400px u-full-width">
283 <div class="grid">
284 <div class="grid__col-45px grid__col--bleed-x">
285 <div class="grid__cell grid__cell--align-middle-left">
286287 <button class="btn--condensed u-hidden u-position-relative dw-mod" onclick="" type="button" ="u-hidden" ="">
288 <i class="fas fa-chevron-left fa-2x u-flex--align-center"></i>
289 </button>
290291 </div>
292 </div>
293 <div class="grid__col-auto grid__col--bleed-x">
294 <div id="ProductsContainer" data-template="ProductGridItemContainer" class="grid product-list dw-mod" data-save-cookie="true">
295 <div id="Product" class="grid__col-3 product-list__grid-item image-hover--zoom dw-mod">
296297298299 <div class="grid__col--auto js-product-scroll-trigger u-no-padding u-full-height" data-params="">
300 @{
301 foreach (var group in Model.RelatedGroups)
302 {
303 foreach (ProductInfoViewModel relatedProduct in group.Products)
304 {
305 var p = relatedProduct.GetProduct();
306307 var productRelatedName = p.Name;
308 var productLink = p.GetProductLink(productPageId, true);
309 var productRelatedNumber = p.Number;
310 var raletedImgPath = "/Admin/Public/GetImage.ashx?width=705&height=524&crop=0&FillCanvas=True&DoNotUpscale=true&Compression=75&image=/Files/Images/produktbilder/" + p.Number + ".jpg";
311312313 <div class="grid__col--auto js-product-scroll-trigger u-no-padding u-full-height" data-params="">
314 <div class="grid__cell product-list__grid-item__image dw-mod ">
315 <a href="@productLink" onclick="" class="u-block u-position-relative image-hover__wrapper dw-mod">
316 <img class="b-lazy grid__cell-img grid__cell-img--centered u-min-h180px dw-mod b-loaded" src="@raletedImgPath" alt="@productRelatedName " title="@productRelatedName" />
317318 </a>
319 </div>
320321 <div class="grid__cell product-list__grid-item__price-info dw-mod">
322 <a href="@productLink" onclick="" title="@productRelatedName" class="u-color-inherit">
323 <h6 class="u-condensed-text u-bold dw-mod">@productRelatedName</h6>
324 </a>
325326 <div class="item-number dw-mod">@productRelatedNumber</div>
327328 <div class="price price--product-list dw-mod">@p.Price.PriceWithoutVatFormatted</div>
329 <div class="before-price u-hidden dw-mod"></div>
330331332333 </div>
334335 <div class="product-list__grid-item__footer dw-mod">
336337338339 </div>
340 </div>
341342 }
343 }
344 }
345346 <div class="product-list__grid-item__footer dw-mod">
347348349350 </div>
351 </div>
352 </div>
353 </div>
354 </div>
355 <div class="grid__col-45px grid__col--bleed-x">
356 <div class="grid__cell grid__cell--align-middle-right">
357358 <button class="btn--condensed u-hidden u-position-relative dw-mod" onclick="HandlebarsBolt.UpdateContent('ProductList_RelatedProducts', '')" type="button" ="u-hidden" ="">
359 <i class="fas fa-chevron-right fa-2x u-flex--align-center"></i>
360 </button>
361362 </div>
363 </div>
364 </div>
365 </div>
366 </div>
367 </div>
368 </div>
369370 </div>
371372 <script>
373 function toggleFavAction(button, event) {
374 if (button.getAttribute('data-add-link').indexOf('CCCreateNewList') > -1) {
375 Scroll.SavePosition(event);
376 location.href = button.getAttribute('data-add-link');
377 return;
378 }
379 let isAdd = button.getAttribute('data-is-in-list') == "false";
380 Request.Fetch().get(
381 isAdd ? button.getAttribute('data-add-link') : button.getAttribute('data-remove-link'),
382 function (result) {
383 button.querySelector('i').className = isAdd ? 'fas fa-star u-margin-right--lg' : 'fal fa-star u-margin-right--lg';
384 button.setAttribute('data-is-in-list', isAdd);
385 button.setAttribute('title', (!isAdd ? 'Add to ' : 'Remove from ') + button.getAttribute('data-list-name'))
386 let favList = button.closest('.js-favorites-list');
387 let favBtn = favList.querySelector('.js-favorite-btn i');
388 let isInAnyFavoriteList = favList.querySelector('[data-is-in-list=true]') != null;
389 if (isInAnyFavoriteList) {
390 favBtn.className = 'fas fa-star' + ' fa-1_5x';
391 } else {
392 favBtn.className = 'fal fa-star' + ' fa-1_5x';
393 }
394 if (window.currentFavoriteListId != null) { //if this page is favorite list
395 let listId = button.getAttribute("data-list-id");
396 if (listId == window.currentFavoriteListId && !isAdd) {
397 location.reload();
398 }
399 }
400 },
401 function () {
402 console.error("FavoriteLists: Error in ToggleFavAction request");
403 },
404 false
405 );
406 }
407 </script>
408409 </div>
410 </div>
411412 }
413414415 @functions{
416417 public string GetFieldValue(FieldValueViewModel field)
418 {
419 var value = "";
420 if (field.Value != null && field.Value is List<FieldOptionValueViewModel>)
421 {
422 var options = (List<FieldOptionValueViewModel>)field.Value;
423 value = string.Join(",", options.Select(x => x.Value));
424 }
425 else
426 {
427 value = Dynamicweb.Core.Converter.ToString(field.Value);
428 }
429 return value;
430 }
431432 public string RenderIcon3(string value)
433 {
434 var iconPath = "/Files/Images/produktbilder/logotyper/";
435 var iconFullPath = string.Empty;
436 var iconText = string.Empty;
437438 var values = value.Split(';');
439440 iconFullPath = iconPath + values[0] + ".png";
441 iconText = Translate(values[0]);
442443 var iconHtml = "<a href = '" + @values[1] + " target = '_blank' style = 'display:contents;' >";
444 iconHtml += "<img width='40px' src = '" + iconFullPath + "' alt = '" + iconText + "' />";
445 iconHtml += "</a>";
446447 return iconHtml;
448449 }
450 }
451452453454455 @helper RenderGoogleProductSchema()
456 {
457 var siteURL = Dynamicweb.Context.Current.Request.Url.Scheme + "://" + Dynamicweb.Context.Current.Request.Url.Host;
458 var image = Model.DefaultImage?.GetFileViewModel().PathUrlEncoded;
459 var brand = Convert.ToString(Model.ProductFields["brand"].Value);
460 var variantid = Model.VariantId;
461 var shopPageId = GetPageIdByNavigationTag("ProductsPage");
462 var url = Dynamicweb.Context.Current.Request.Url.Scheme + "://" + Dynamicweb.Context.Current.Request.UserHostAddress + Model.GetProductLink(shopPageId, true);
463464 <script type="application/ld+json">
465 {
466 "@@context": "http://schema.org/",
467 "@@type": "Product",
468 "name": "@Model.Name",
469 @if (!string.IsNullOrEmpty(image))
470 {
471 <text>"image": [
472 "@siteURL/Admin/Public/GetImage.ashx?width=400&height=400&crop=0&Compression=75&DoNotUpscale=true&image=@image",
473 "@siteURL/Admin/Public/GetImage.ashx?width=400&height=300&crop=0&Compression=75&DoNotUpscale=true&image=@image",
474 "@siteURL/Admin/Public/GetImage.ashx?width=448&height=225&crop=0&Compression=75&DoNotUpscale=true&image=@image"
475 ],</text>
476 }
477 "description": "@Model.ShortDescription",
478 "mpn": "925872",
479 @if (!string.IsNullOrEmpty(brand))
480 {
481 <text>"brand": {
482 "@@type": "Thing",
483 "name": "@brand"
484 },</text>
485 }
486 "offers": {
487 "@@type": "Offer",
488 "priceCurrency": "@Model.Price.CurrencyCode",
489 "price": "@Model.Price.Price",
490 "availability": "@(Model.StockLevel > 0 ? "InStock" : "OutOfStock")",
491 "url": "@url"
492 }
493 }
494 </script>
495 }