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 var productSheetPageId = GetPageIdByNavigationTag("ProductSheetNevotex");
28 var mainProduct = Dynamicweb.Ecommerce.Services.Products.GetProductById(productId, null, false);
29 var encodedMainProductName = System.Web.HttpUtility.UrlEncode(mainProduct.Name);
30 var productSheetLink = $"/default.aspx?id={productSheetPageId}&MainProductId={productId}&VariantID={productVariantId}&pdf=true&render_4={rendera_4bilden.ToString()}&filename={encodedMainProductName}-Nevotex.pdf";
31 if (rendera_4bilden)
32 {
33 path = path + "_4";
34 }
35 36 IEnumerable<MediaViewModel> assetsImages = Model.AssetCategories.Where(x => x.SystemName == "Images").SelectMany(x => x.Assets);
37 //IEnumerable<MediaViewModel> assetsImages = Model.AssetCategories.SelectMany(x => x.Assets);
38 List<MediaViewModel> assetsList = new List<MediaViewModel>();
39 40 assetsList.Add(Model.DefaultImage);
41 42 foreach (MediaViewModel ai in assetsImages)
43 {
44 assetsList.Add(ai);
45 }
46 foreach (MediaViewModel ip in Model.ImagePatternImages)
47 {
48 assetsList.Add(ip);
49 }
50 51 var defaultImagePath = Model.DefaultImage.GetFileViewModel().PathUrlEncoded;
52 53 var imgPath = "/Admin/Public/GetImage.ashx?width=705&height=524&crop=0&FillCanvas=True&DoNotUpscale=true&Compression=75&image=/Files/Images/produktbilder/" + path + ".jpg";
54 55 56 <div class="product__info dw-mod u-margin-bottom--lg js-product">
57 <div class="grid grid--align-content-start">
58 59 <div class="product__top paragraph-container paragraph-container--full-width dw-mod">
60 <div class="center-container dw-mod">
61 <div class="grid">
62 <div class="grid__col-lg-6 grid__col-md-6 grid__col-sm-12 grid__col-xs-12 dw-mod" id="Block__MainImage">
63 <div class="grid grid--align-content-start dw-mod" id="Block__MainImageRow">
64 <input type="checkbox" id="GalleryModalTrigger" class="modal-trigger">
65 <div class="modal-container">
66 <label for="GalleryModalTrigger" id="GalleryModalOverlay" class="modal-overlay"></label>
67 <div class="modal modal--lg modal-height--full" id="GalleryModal">
68 <div class="modal__body ">
69 <div class="modal__body_text"></div>
70 <div class="carousel dw-mod carousel--horizontal" id="modalCarousel">
71 <div class="thumb-list carousel__container js-carousel-slides dw-mod">
72 @foreach (MediaViewModel img in assetsList)
73 {
74 var imagePath = img.GetFileViewModel().PathUrlEncoded;
75 var getImagePath = $"/Admin/Public/GetImage.ashx?width=1410&height=1048&crop=0&FillCanvas=True&DoNotUpscale=true&Compression=75&image={imagePath}";
76 77 <div class="carousel__slide dw-mod carousel__slide--horizontal">
78 <img class="b-lazy modal--full__img dw-mod" src="/Files/Images/placeholder.gif" data-src="@getImagePath" alt="@productName" title="@productName">
79 </div>
80 }
81 82 </div>
83 84 <script>
85 document.addEventListener("DOMContentLoaded", function () {
86 modalCarousel = new CarouselModule('#modalCarousel', {
87 slidesInView: 1,
88 direction: "horizontal",
89 preloaderSize: 3,
90 showCounter: true
91 });
92 });
93 </script>
94 <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>
95 </div>
96 97 </div>
98 <label class="modal__close-btn" for="GalleryModalTrigger"></label>
99 </div>
100 </div>
101 <div class="grid__col-lg-12 grid__col-md-12 grid__col-sm-12 grid__col-xs-12 dw-mod" id="Block__Image">
102 <label data-path="@defaultImagePath" for="GalleryModalTrigger" class="product__image-container u-position-relative">
103104 <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">
105106107 </label>
108109 </div>
110 <div class="grid__col-lg-12 grid__col-md-12 grid__col-sm-12 grid__col-xs-12 dw-mod" id="Block__Carousel">
111 <div class="product__thumbs dw-mod">
112113 <div class="carousel dw-mod carousel--horizontal" id="productCarousel">
114 <div class="thumb-list carousel__container js-carousel-slides dw-mod" style="left: 0px; width: 60%;">
115116 @foreach (MediaViewModel img in assetsList)
117 {
118 var imagePath = img.GetFileViewModel().PathUrlEncoded;
119 var getImagePath = $"/Admin/Public/GetImage.ashx?width=705&height=524&crop=0&FillCanvas=True&DoNotUpscale=true&Compression=75&image={imagePath}";
120 var getImageSmallPath = $"/Admin/Public/GetImage.ashx?Width=200&Height=200&Crop=5&DoNotUpscale=True&FillCanvas=True&Image={imagePath}&AlternativeImage=/Images/missing_image.jpg";
121122 <div class="carousel__slide dw-mod carousel__slide--horizontal">
123 <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)">
124 <label for="GalleryModalTrigger" class="thumb-list__image-label">
125 <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">
126127 </label>
128 </div>
129 </div>
130 }
131132 </div>
133134 <script>
135 document.addEventListener("DOMContentLoaded", function () {
136 productCarousel = new CarouselModule('#productCarousel', {
137 slidesInView: 5,
138 direction: "horizontal",
139 preloaderSize: 2,
140 showCounter: false
141 });
142 });
143 </script>
144 <div class="js-carousel-controls"></div>
145 </div>
146 </div>
147 </div>
148 </div>
149150 </div>
151 <div class="grid__col-lg-auto grid__col-md-auto grid__col-sm-12 grid__col-xs-12 dw-mod" id="Block__MainInformation">
152 <div>
153 <div class="u-pull--left product__title dw-mod">
154 <h1 class="u-no-margin">@productName</h1>
155156 <div class="item-number dw-mod">@productNumber</div>
157 </div>
158159160 @if (Pageview.User != null)
161 {
162 @RenderPartial("Designs/Rapido/eCom/ProductCatalog/Partials/ProductFavorite.cshtml", Model)
163 }
164165166 </div>
167 <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">
168 <div class="product__section dw-mod">
169 <div class="product__description center-container dw-mod">
170171 @{
172 var desc = Convert.ToString(Model.LongDescription);
173174175 if (!string.IsNullOrWhiteSpace(Convert.ToString(Model.ProductFields["Variantbeskrivning"].Value)))
176 {
177 desc = Convert.ToString(Model.ProductFields["Variantbeskrivning"].Value);
178 }
179180 }
181182 @desc
183184 @if (!string.IsNullOrWhiteSpace(uses))
185 {
186 <p>
187 <h5>@Translate("SuitableFor")</h5>
188 <ul>
189 @foreach (var u in useValues)
190 {
191 <li>@Translate(u)</li>
192 }
193 </ul>
194 </p>
195 }
196197198 <p></p>
199200 @RenderPartial("Designs/Rapido/eCom/ProductCatalog/Partials/ProductIcons.cshtml", Model)
201202203204 </div>
205 </div>
206 </div>
207208 @if (Pageview.User?.ID != null)
209 {
210 @RenderPartial("Designs/Rapido/eCom/ProductCatalog/Partials/ProductBuyInfo.cshtml", Model)
211 }
212 else {
213 <div class="product__price-actions-wrap dw-mod"></div>
214 }
215 <div class=" u-no-padding--sm product__productsheet-wrapper">
216 <a target="_blank" rel="nofollow" class="product__productsheet-download btn--condensed btn btn--primary dw-mod" title="@Translate("Ladda ner produktblad")" href="@productSheetLink">
217 <div class="u-flex u-flex--align-items-center u-flex--align-center"><i class="fal fa-file-pdf u-margin-right--lg u-w20px"></i>@Translate("Ladda ner produktblad")</div>
218 </a>
219 </div>
220221 <script>
222223 document.addEventListener("DOMContentLoaded", function () {
224 if (document.getElementById("PriceAndActions")) {
225 document.getElementById("PriceAndActions").addEventListener("contentLoaded", function (event) {
226 if (document.querySelector(".js-variants") != null) {
227 MatchVariants.Update(document.querySelector(".js-variants"), "DoNothing");
228 }
229 });
230 }
231 });
232 </script>
233234235 <script>
236 function addToSelectedCart() {
237 var requestUrl = "/Default.aspx?ID=6301" + "&cartcmd=Add&Quantity=1" + "&CartId=" + document.getElementById("CartSelector").value + "&ProductId=PROD433" + "&VariantId=VARGRP208_1000432" + "&UnitId=";
238239 console.log(requestUrl)
240241 document.getElementById('OrderDraftSelectModalTrigger').checked = false;
242243 var overlayElement = document.createElement('div');
244 overlayElement.className = "preloader-overlay";
245 overlayElement.setAttribute('id', "CartOverlay");
246 var overlayElementIcon = document.createElement('div');
247 overlayElementIcon.className = "preloader-overlay__icon dw-mod";
248 overlayElementIcon.style.top = window.pageYOffset + "px";
249 overlayElement.appendChild(overlayElementIcon);
250 document.getElementById('content').parentNode.insertBefore(overlayElement, document.getElementById('content'));
251252 Request.Fetch().get(
253 requestUrl,
254 function () {
255 var overlayNode = document.getElementById('CartOverlay');
256 overlayNode.parentNode.removeChild(overlayNode);
257 document.getElementById('OrderDraftNotificationModalTrigger').checked = true;
258 },
259 null,
260 false
261 );
262 }
263264 function goToSelectedCart() {
265 window.location = "/Default.aspx?ID=" + "6562" + "&CartID=" + document.getElementById('CartSelector').value + "&CartCmd=setcart" + "&redirect=false";
266 }
267 </script>
268269 </div>
270271 </div>
272 </div>
273 </div>
274275 @if (Pageview.Device.ToString() == "Mobile")
276 {
277 @RenderPartial("Designs/Rapido/eCom/ProductCatalog/Partials/TabsMobile.cshtml", Model)
278 }
279 else
280 {
281 @RenderPartial("Designs/Rapido/eCom/ProductCatalog/Partials/TabsDesktop.cshtml", Model)
282 }
283284285286287288 <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;">
289 <div class="product__section dw-mod">
290 <div class="center-container dw-mod">
291 <h2 class=" dw-mod">@Translate("Related products")</h2>
292 <div>
293 <div class="u-min-h400px u-full-width">
294 <div class="grid">
295 <div class="grid__col-45px grid__col--bleed-x">
296 <div class="grid__cell grid__cell--align-middle-left">
297298 <button class="btn--condensed u-hidden u-position-relative dw-mod" onclick="" type="button" ="u-hidden" ="">
299 <i class="fas fa-chevron-left fa-2x u-flex--align-center"></i>
300 </button>
301302 </div>
303 </div>
304 <div class="grid__col-auto grid__col--bleed-x">
305 <div id="ProductsContainer" data-template="ProductGridItemContainer" class="grid product-list dw-mod" data-save-cookie="true">
306 <div id="Product" class="grid__col-3 product-list__grid-item image-hover--zoom dw-mod">
307308309310 <div class="grid__col--auto js-product-scroll-trigger u-no-padding u-full-height" data-params="">
311 @{
312 foreach (var group in Model.RelatedGroups)
313 {
314 foreach (ProductInfoViewModel relatedProduct in group.Products)
315 {
316 var p = relatedProduct.GetProduct();
317318 var productRelatedName = p.Name;
319 var productLink = p.GetProductLink(productPageId, true);
320 var productRelatedNumber = p.Number;
321 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";
322323324 <div class="grid__col--auto js-product-scroll-trigger u-no-padding u-full-height" data-params="">
325 <div class="grid__cell product-list__grid-item__image dw-mod ">
326 <a href="@productLink" onclick="" class="u-block u-position-relative image-hover__wrapper dw-mod">
327 <img class="b-lazy grid__cell-img grid__cell-img--centered u-min-h180px dw-mod b-loaded" src="@raletedImgPath" alt="@productRelatedName " title="@productRelatedName" />
328329 </a>
330 </div>
331332 <div class="grid__cell product-list__grid-item__price-info dw-mod">
333 <a href="@productLink" onclick="" title="@productRelatedName" class="u-color-inherit">
334 <h6 class="u-condensed-text u-bold dw-mod">@productRelatedName</h6>
335 </a>
336337 <div class="item-number dw-mod">@productRelatedNumber</div>
338339 <div class="price price--product-list dw-mod">@p.Price.PriceWithoutVatFormatted</div>
340 <div class="before-price u-hidden dw-mod"></div>
341342343344 </div>
345346 <div class="product-list__grid-item__footer dw-mod">
347348349350 </div>
351 </div>
352353 }
354 }
355 }
356357 <div class="product-list__grid-item__footer dw-mod">
358359360361 </div>
362 </div>
363 </div>
364 </div>
365 </div>
366 <div class="grid__col-45px grid__col--bleed-x">
367 <div class="grid__cell grid__cell--align-middle-right">
368369 <button class="btn--condensed u-hidden u-position-relative dw-mod" onclick="HandlebarsBolt.UpdateContent('ProductList_RelatedProducts', '')" type="button" ="u-hidden" ="">
370 <i class="fas fa-chevron-right fa-2x u-flex--align-center"></i>
371 </button>
372373 </div>
374 </div>
375 </div>
376 </div>
377 </div>
378 </div>
379 </div>
380381 </div>
382383 <script>
384 function toggleFavAction(button, event) {
385 if (button.getAttribute('data-add-link').indexOf('CCCreateNewList') > -1) {
386 Scroll.SavePosition(event);
387 location.href = button.getAttribute('data-add-link');
388 return;
389 }
390 let isAdd = button.getAttribute('data-is-in-list') == "false";
391 Request.Fetch().get(
392 isAdd ? button.getAttribute('data-add-link') : button.getAttribute('data-remove-link'),
393 function (result) {
394 button.querySelector('i').className = isAdd ? 'fas fa-star u-margin-right--lg' : 'fal fa-star u-margin-right--lg';
395 button.setAttribute('data-is-in-list', isAdd);
396 button.setAttribute('title', (!isAdd ? 'Add to ' : 'Remove from ') + button.getAttribute('data-list-name'))
397 let favList = button.closest('.js-favorites-list');
398 let favBtn = favList.querySelector('.js-favorite-btn i');
399 let isInAnyFavoriteList = favList.querySelector('[data-is-in-list=true]') != null;
400 if (isInAnyFavoriteList) {
401 favBtn.className = 'fas fa-star' + ' fa-1_5x';
402 } else {
403 favBtn.className = 'fal fa-star' + ' fa-1_5x';
404 }
405 if (window.currentFavoriteListId != null) { //if this page is favorite list
406 let listId = button.getAttribute("data-list-id");
407 if (listId == window.currentFavoriteListId && !isAdd) {
408 location.reload();
409 }
410 }
411 },
412 function () {
413 console.error("FavoriteLists: Error in ToggleFavAction request");
414 },
415 false
416 );
417 }
418 </script>
419420 </div>
421 </div>
422423 }
424425426 @functions{
427428 public string GetFieldValue(FieldValueViewModel field)
429 {
430 var value = "";
431 if (field.Value != null && field.Value is List<FieldOptionValueViewModel>)
432 {
433 var options = (List<FieldOptionValueViewModel>)field.Value;
434 value = string.Join(",", options.Select(x => x.Value));
435 }
436 else
437 {
438 value = Dynamicweb.Core.Converter.ToString(field.Value);
439 }
440 return value;
441 }
442443 public string RenderIcon3(string value)
444 {
445 var iconPath = "/Files/Images/produktbilder/logotyper/";
446 var iconFullPath = string.Empty;
447 var iconText = string.Empty;
448449 var values = value.Split(';');
450451 iconFullPath = iconPath + values[0] + ".png";
452 iconText = Translate(values[0]);
453454 var iconHtml = "<a href = '" + @values[1] + " target = '_blank' style = 'display:contents;' >";
455 iconHtml += "<img width='40px' src = '" + iconFullPath + "' alt = '" + iconText + "' />";
456 iconHtml += "</a>";
457458 return iconHtml;
459460 }
461 }
462463464465466 @helper RenderGoogleProductSchema()
467 {
468 var siteURL = Dynamicweb.Context.Current.Request.Url.Scheme + "://" + Dynamicweb.Context.Current.Request.Url.Host;
469 var image = Model.DefaultImage?.GetFileViewModel().PathUrlEncoded;
470 var brand = Convert.ToString(Model.ProductFields["brand"].Value);
471 var variantid = Model.VariantId;
472 var shopPageId = GetPageIdByNavigationTag("ProductsPage");
473 var url = Dynamicweb.Context.Current.Request.Url.Scheme + "://" + Dynamicweb.Context.Current.Request.UserHostAddress + Model.GetProductLink(shopPageId, true);
474475 <script type="application/ld+json">
476 {
477 "@@context": "http://schema.org/",
478 "@@type": "Product",
479 "name": "@Model.Name",
480 @if (!string.IsNullOrEmpty(image))
481 {
482 <text>"image": [
483 "@siteURL/Admin/Public/GetImage.ashx?width=400&height=400&crop=0&Compression=75&DoNotUpscale=true&image=@image",
484 "@siteURL/Admin/Public/GetImage.ashx?width=400&height=300&crop=0&Compression=75&DoNotUpscale=true&image=@image",
485 "@siteURL/Admin/Public/GetImage.ashx?width=448&height=225&crop=0&Compression=75&DoNotUpscale=true&image=@image"
486 ],</text>
487 }
488 "description": "@Model.ShortDescription",
489 "mpn": "925872",
490 @if (!string.IsNullOrEmpty(brand))
491 {
492 <text>"brand": {
493 "@@type": "Thing",
494 "name": "@brand"
495 },</text>
496 }
497 "offers": {
498 "@@type": "Offer",
499 "priceCurrency": "@Model.Price.CurrencyCode",
500 "price": "@Model.Price.Price",
501 "availability": "@(Model.StockLevel > 0 ? "InStock" : "OutOfStock")",
502 "url": "@url"
503 }
504 }
505 </script>
506 }