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 groupId = Dynamicweb.Context.Current.Request.QueryString["groupid"];
15 16 if(string.IsNullOrEmpty(groupId))
17 {
18 groupId = GroupHelper.GetPrimaryGroup(Model.Id);
19 }
20 21 Pageview.Meta.Title = Model.Name;
22 23 var currentGroup = Dynamicweb.Ecommerce.Services.ProductGroups.GetGroup(groupId);
24 var rendera_4bilden = Convert.ToBoolean(currentGroup.ProductGroupFieldValues.GetProductGroupFieldValue("Rendera_4bilden").Value);
25 var renderFullImage = Convert.ToBoolean(currentGroup.ProductGroupFieldValues.GetProductGroupFieldValue("RenderFullImage").Value.ToString());
26 var crop = currentGroup.ProductGroupFieldValues.GetProductGroupFieldValue("RenderFullImage").Value.ToString() == "collection" ? 0 : 5;
27 var productService = new ProductService();
28 var path = Model.Number;
29 var productId = Model.Id;
30 var productName = Model.Name;
31 var productNumber = Model.Number;
32 var productVariantId = Model.VariantId;
33 var productLanguageId = Model.LanguageId;
34 var uses = productService.GetProductCategoryFieldValue("Anvndningsomrade", productId);
35 var useValues = uses.Split(',');
36 37 var productSheetPageId = GetPageIdByNavigationTag("ProductSheetNevotex");
38 var mainProduct = Dynamicweb.Ecommerce.Services.Products.GetProductById(productId, null, false);
39 var encodedMainProductName = System.Web.HttpUtility.UrlEncode(mainProduct.Name);
40 var productSheetLink = $"/default.aspx?id={productSheetPageId}&MainProductId={productId}&VariantID={productVariantId}&pdf=true&render_4={rendera_4bilden.ToString()}&filename={encodedMainProductName}-Nevotex.pdf";
41 42 if (rendera_4bilden)
43 {
44 path = path + "_4";
45 }
46 47 if (renderFullImage) {
48 crop = 5;
49 }
50 51 IEnumerable<MediaViewModel> assetsImages = Model.AssetCategories.Where(x => x.SystemName == "Images").SelectMany(x => x.Assets);
52 List<MediaViewModel> assetsList = new List<MediaViewModel>();
53 54 assetsList.Add(Model.DefaultImage);
55 56 foreach (MediaViewModel ai in assetsImages)
57 {
58 assetsList.Add(ai);
59 }
60 foreach (MediaViewModel ip in Model.ImagePatternImages)
61 {
62 assetsList.Add(ip);
63 }
64 65 var imgPath = $"/Admin/Public/GetImage.ashx?width=705&height=524&crop={crop}&FillCanvas=True&DoNotUpscale=true&Compression=75&image=/Files/Images/produktbilder/{path}.jpg";
66 67 <div class="product__info dw-mod u-margin-bottom--lg js-product" data-renderfull-image="@renderFullImage">
68 <div class="grid grid--align-content-start">
69 70 <div class="product__top paragraph-container paragraph-container--full-width dw-mod">
71 <div class="center-container dw-mod">
72 <div class="grid">
73 <div class="grid__col-lg-6 grid__col-md-6 grid__col-sm-12 grid__col-xs-12 dw-mod" id="Block__MainImage">
74 <div class="grid grid--align-content-start dw-mod" id="Block__MainImageRow">
75 <input type="checkbox" id="GalleryModalTrigger" class="modal-trigger">
76 <div class="modal-container">
77 <label for="GalleryModalTrigger" id="GalleryModalOverlay" class="modal-overlay"></label>
78 <div class="modal modal--lg modal-height--full" id="GalleryModal">
79 <div class="modal__body ">
80 <div class="modal__body_text"></div>
81 <div class="carousel dw-mod carousel--horizontal" id="modalCarousel">
82 <div class="thumb-list carousel__container js-carousel-slides dw-mod">
83 @foreach (MediaViewModel img in assetsList)
84 {
85 var imagePath = img.GetFileViewModel().PathUrlEncoded;
86 var getImagePath = $"/Admin/Public/GetImage.ashx?width=1410&height=1048&crop={crop}&FillCanvas=True&DoNotUpscale=true&Compression=75&image={imagePath}&AlternativeImage=/Images/missing_image.jpg";
87 88 <div class="carousel__slide dw-mod carousel__slide--horizontal">
89 <img class="b-lazy modal--full__img dw-mod" src="/Files/Images/placeholder.gif" data-src="@getImagePath" alt="@productName" title="@productName">
90 </div>
91 }
92 93 </div>
94 95 <script>
96 document.addEventListener("DOMContentLoaded", function () {
97 modalCarousel = new CarouselModule('#modalCarousel', {
98 slidesInView: 1,
99 direction: "horizontal",
100 preloaderSize: 3,
101 showCounter: true
102 });
103 });
104 </script>
105 <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>
106 </div>
107108 </div>
109 <label class="modal__close-btn" for="GalleryModalTrigger"></label>
110 </div>
111 </div>
112 <div class="grid__col-lg-12 grid__col-md-12 grid__col-sm-12 grid__col-xs-12 dw-mod" id="Block__Image">
113 <label for="GalleryModalTrigger" class="product__image-container u-position-relative">
114 <img id="Image_@Model.Id" class=" u-middle product__image-container__image dw-mod dw-mod" src="@imgPath" onclick="modalCarousel.GoToSlide('modalCarousel', this.getAttribute('data-number'))" alt="@productName" title="@productName" data-number="0">
115 </label>
116 </div>
117 <div class="grid__col-lg-12 grid__col-md-12 grid__col-sm-12 grid__col-xs-12 dw-mod" id="Block__Carousel">
118 <div class="product__thumbs dw-mod">
119 <div class="carousel dw-mod carousel--horizontal" id="productCarousel">
120 <div class="thumb-list carousel__container js-carousel-slides dw-mod" style="left: 0px; width: 60%;">
121122 @foreach (MediaViewModel img in assetsList)
123 {
124 var imagePath = img.GetFileViewModel().PathUrlEncoded;
125 var getImagePath = $"/Admin/Public/GetImage.ashx?width=705&height=524&crop={crop}&FillCanvas=True&DoNotUpscale=true&Compression=75&image={imagePath}";
126 var getImageSmallPath = $"/Admin/Public/GetImage.ashx?Width=200&Height=200&Crop={crop}&DoNotUpscale=True&FillCanvas=True&Image={imagePath}&AlternativeImage=/Images/missing_image.jpg";
127128 <div class="carousel__slide dw-mod carousel__slide--horizontal">
129 <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)">
130 <label for="GalleryModalTrigger" class="thumb-list__image-label">
131 <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">
132133 </label>
134 </div>
135 </div>
136 }
137 </div>
138139 <script>
140 document.addEventListener("DOMContentLoaded", function () {
141 productCarousel = new CarouselModule('#productCarousel', {
142 slidesInView: 5,
143 direction: "horizontal",
144 preloaderSize: 2,
145 showCounter: false
146 });
147 });
148 </script>
149 <div class="js-carousel-controls"></div>
150 </div>
151 </div>
152 </div>
153 </div>
154 </div>
155 <div class="grid__col-lg-auto grid__col-md-auto grid__col-sm-12 grid__col-xs-12 dw-mod" id="Block__MainInformation">
156 <div>
157 <div class="u-pull--left product__title dw-mod">
158 <h1 class="u-no-margin">@productName</h1>
159160 <div class="item-number dw-mod">@productNumber</div>
161 </div>
162163 @if (Pageview.User != null)
164 {
165 @RenderPartial("Designs/Rapido/eCom/ProductCatalog/Partials/ProductFavorite.cshtml", Model)
166 }
167168 </div>
169 <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">
170 <div class="product__section dw-mod">
171 <div class="product__description center-container dw-mod">
172 @{
173 var desc = Convert.ToString(Model.LongDescription);
174 var orderItem = Convert.ToString(Model.ProductFields["OrderItem"].Value);
175176 if (!string.IsNullOrWhiteSpace(Convert.ToString(Model.ProductFields["Variantbeskrivning"].Value)))
177 {
178 desc = Convert.ToString(Model.ProductFields["Variantbeskrivning"].Value);
179 }
180 }
181182 @desc
183184 @if (orderItem.ToUpper() == "NEJ")
185 {
186 <div class="">
187 @Translate("ORDER_ITEM_TEXT")
188 </div>
189 }
190191 @if (!string.IsNullOrWhiteSpace(uses))
192 {
193 <p>
194 <h5>@Translate("SuitableFor")</h5>
195 <ul>
196 @foreach (var u in useValues)
197 {
198 <li>@Translate(u)</li>
199 }
200 </ul>
201 </p>
202 }
203204 <p></p>
205206 @RenderPartial("Designs/Rapido/eCom/ProductCatalog/Partials/ProductIcons.cshtml", Model)
207208 </div>
209 </div>
210 </div>
211212 @RenderPartial("Designs/Rapido/eCom/ProductCatalog/Partials/ProductBuyInfo.cshtml", Model)
213214 @if (Pageview.User?.ID == null)
215 {
216 <div class="product__price-actions-wrap dw-mod"></div>
217 }
218219 <div class=" u-no-padding--sm product__productsheet-wrapper">
220 <a target="_blank" rel="nofollow" class="product__productsheet-download btn--condensed btn btn--primary dw-mod" title="@Translate("Ladda ner produktblad")" href="@productSheetLink">
221 <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>
222 </a>
223 </div>
224225 <script>
226 document.addEventListener("DOMContentLoaded", function () {
227 if (document.getElementById("PriceAndActions")) {
228 document.getElementById("PriceAndActions").addEventListener("contentLoaded", function (event) {
229 if (document.querySelector(".js-variants") != null) {
230 MatchVariants.Update(document.querySelector(".js-variants"), "DoNothing");
231 }
232 });
233 }
234 });
235 </script>
236237 <script>
238 function addToSelectedCart() {
239 var requestUrl = "/Default.aspx?ID=6301" + "&cartcmd=Add&Quantity=1" + "&CartId=" + document.getElementById("CartSelector").value + "&ProductId=PROD433" + "&VariantId=VARGRP208_1000432" + "&UnitId=";
240241 console.log(requestUrl)
242243 document.getElementById('OrderDraftSelectModalTrigger').checked = false;
244245 var overlayElement = document.createElement('div');
246 overlayElement.className = "preloader-overlay";
247 overlayElement.setAttribute('id', "CartOverlay");
248 var overlayElementIcon = document.createElement('div');
249 overlayElementIcon.className = "preloader-overlay__icon dw-mod";
250 overlayElementIcon.style.top = window.pageYOffset + "px";
251 overlayElement.appendChild(overlayElementIcon);
252 document.getElementById('content').parentNode.insertBefore(overlayElement, document.getElementById('content'));
253254 Request.Fetch().get(
255 requestUrl,
256 function () {
257 var overlayNode = document.getElementById('CartOverlay');
258 overlayNode.parentNode.removeChild(overlayNode);
259 document.getElementById('OrderDraftNotificationModalTrigger').checked = true;
260 },
261 null,
262 false
263 );
264 }
265266 function goToSelectedCart() {
267 window.location = "/Default.aspx?ID=" + "6562" + "&CartID=" + document.getElementById('CartSelector').value + "&CartCmd=setcart" + "&redirect=false";
268 }
269 </script>
270 </div>
271 </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 }
283284 @{
285 if (Model.RelatedGroups.Count > 0)
286 {
287 <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">
288 <div class="product__section dw-mod">
289 <div class="center-container dw-mod">
290 <h2 class=" dw-mod">@Translate("Related products")</h2>
291 <div class="grid js-product-scroll-trigger u-no-padding u-full-height" data-params="">
292 @{
293 foreach (var group in Model.RelatedGroups)
294 {
295 foreach (ProductInfoViewModel relatedProduct in group.Products)
296 {
297 var p = relatedProduct.GetProduct();
298299 var productRelatedName = p.Name;
300 var productLink = p.GetProductLink(productPageId, true);
301 var productRelatedNumber = p.Number;
302 var raletedImgPath = "/Admin/Public/GetImage.ashx?width=325&height=241&crop=0&FillCanvas=True&DoNotUpscale=true&Compression=75&image=/Files/Images/produktbilder/" + p.Number + ".jpg";
303 <div class="col-lg-3" style="margin-right:10px;">
304 <div class="grid__cell product-list__grid-item__image dw-mod " style="margin-bottom:10px;">
305 <a href="@productLink" onclick="" class="u-block u-position-relative image-hover__wrapper dw-mod">
306 <img height="241" width="325" class="b-lazy grid__cell-img grid__cell-img--centered dw-mod b-loaded" src="@raletedImgPath" alt="@productRelatedName " title="@productRelatedName" />
307308 </a>
309 </div>
310311 <div class="grid__cell dw-mod">
312 <a href="@productLink" onclick="" title="@productRelatedName" class="u-color-inherit">
313 <h6 class="u-condensed-text u-bold dw-mod">@productRelatedName</h6>
314 </a>
315316 <div class="item-number dw-mod">@productRelatedNumber</div>
317 <div class="price dw-mod">@p.Price.PriceWithoutVatFormatted</div>
318 <div class="before-price u-hidden dw-mod"></div>
319320 </div>
321 </div>
322323324325326 }
327 }
328 }
329330 </div>
331 </div>
332 </div>
333 </div>
334 }
335 }
336337338339340 <script>
341 function toggleFavAction(button, event) {
342 if (button.getAttribute('data-add-link').indexOf('CCCreateNewList') > -1) {
343 Scroll.SavePosition(event);
344 location.href = button.getAttribute('data-add-link');
345 return;
346 }
347 let isAdd = button.getAttribute('data-is-in-list') == "false";
348 Request.Fetch().get(
349 isAdd ? button.getAttribute('data-add-link') : button.getAttribute('data-remove-link'),
350 function (result) {
351 button.querySelector('i').className = isAdd ? 'fas fa-star u-margin-right--lg' : 'fal fa-star u-margin-right--lg';
352 button.setAttribute('data-is-in-list', isAdd);
353 button.setAttribute('title', (!isAdd ? 'Add to ' : 'Remove from ') + button.getAttribute('data-list-name'))
354 let favList = button.closest('.js-favorites-list');
355 let favBtn = favList.querySelector('.js-favorite-btn i');
356 let isInAnyFavoriteList = favList.querySelector('[data-is-in-list=true]') != null;
357 if (isInAnyFavoriteList) {
358 favBtn.className = 'fas fa-star' + ' fa-1_5x';
359 } else {
360 favBtn.className = 'fal fa-star' + ' fa-1_5x';
361 }
362 if (window.currentFavoriteListId != null) { //if this page is favorite list
363 let listId = button.getAttribute("data-list-id");
364 if (listId == window.currentFavoriteListId && !isAdd) {
365 location.reload();
366 }
367 }
368 },
369 function () {
370 console.error("FavoriteLists: Error in ToggleFavAction request");
371 },
372 false
373 );
374 }
375 </script>
376 </div>
377 </div>
378379 }
380381382 @functions{
383384 public string GetFieldValue(FieldValueViewModel field)
385 {
386 var value = "";
387 if (field.Value != null && field.Value is List<FieldOptionValueViewModel>)
388 {
389 var options = (List<FieldOptionValueViewModel>)field.Value;
390 value = string.Join(",", options.Select(x => x.Value));
391 }
392 else
393 {
394 value = Dynamicweb.Core.Converter.ToString(field.Value);
395 }
396 return value;
397 }
398399 public string RenderIcon3(string value)
400 {
401 var iconPath = "/Files/Images/produktbilder/logotyper/";
402 var iconFullPath = string.Empty;
403 var iconText = string.Empty;
404405 var values = value.Split(';');
406407 iconFullPath = iconPath + values[0] + ".png";
408 iconText = Translate(values[0]);
409410 var iconHtml = "<a href = '" + @values[1] + " target = '_blank' style = 'display:contents;' >";
411 iconHtml += "<img width='40px' src = '" + iconFullPath + "' alt = '" + iconText + "' />";
412 iconHtml += "</a>";
413414 return iconHtml;
415416 }
417 }
418419 @helper RenderGoogleProductSchema()
420 {
421 var siteURL = Dynamicweb.Context.Current.Request.Url.Scheme + "://" + Dynamicweb.Context.Current.Request.Url.Host;
422 var image = Model.DefaultImage?.GetFileViewModel().PathUrlEncoded;
423 var brand = Convert.ToString(Model.ProductFields["brand"].Value);
424 var variantid = Model.VariantId;
425 var shopPageId = GetPageIdByNavigationTag("ProductsPage");
426 var url = Dynamicweb.Context.Current.Request.Url.Scheme + "://" + Dynamicweb.Context.Current.Request.UserHostAddress + Model.GetProductLink(shopPageId, true);
427428 <script type="application/ld+json">
429 {
430 "@@context": "http://schema.org/",
431 "@@type": "Product",
432 "name": "@Model.Name",
433 @if (!string.IsNullOrEmpty(image))
434 {
435 <text>"image": [
436 "@siteURL/Admin/Public/GetImage.ashx?width=400&height=400&crop=0&Compression=75&DoNotUpscale=true&image=@image",
437 "@siteURL/Admin/Public/GetImage.ashx?width=400&height=300&crop=0&Compression=75&DoNotUpscale=true&image=@image",
438 "@siteURL/Admin/Public/GetImage.ashx?width=448&height=225&crop=0&Compression=75&DoNotUpscale=true&image=@image"
439 ],</text>
440 }
441 "description": "@Model.ShortDescription",
442 "mpn": "925872",
443 @if (!string.IsNullOrEmpty(brand))
444 {
445 <text>"brand": {
446 "@@type": "Thing",
447 "name": "@brand"
448 },</text>
449 }
450 "offers": {
451 "@@type": "Offer",
452 "priceCurrency": "@Model.Price.CurrencyCode",
453 "price": "@Model.Price.Price",
454 "availability": "@(Model.StockLevel > 0 ? "InStock" : "OutOfStock")",
455 "url": "@url"
456 }
457 }
458 </script>
459 }