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 var currentGroup = Dynamicweb.Ecommerce.Services.ProductGroups.GetGroup(groupId);
16 var rendera_4bilden = Convert.ToBoolean(currentGroup.ProductGroupFieldValues.GetProductGroupFieldValue("Rendera_4bilden").Value);
17 var renderFullImage = Convert.ToBoolean(currentGroup.ProductGroupFieldValues.GetProductGroupFieldValue("RenderFullImage").Value.ToString());
18 var crop = currentGroup.ProductGroupFieldValues.GetProductGroupFieldValue("RenderFullImage").Value.ToString() == "collection" ? 0 : 5;
19 var productService = new ProductService();
20 var path = Model.Number;
21 var productId = Model.Id;
22 var productName = Model.Name;
23 var productNumber = Model.Number;
24 var productVariantId = Model.VariantId;
25 var productLanguageId = Model.LanguageId;
26 var uses = productService.GetProductCategoryFieldValue("Anvndningsomrade", productId);
27 var useValues = uses.Split(',');
28 29 var productSheetPageId = GetPageIdByNavigationTag("ProductSheetNevotex");
30 var mainProduct = Dynamicweb.Ecommerce.Services.Products.GetProductById(productId, null, false);
31 var encodedMainProductName = System.Web.HttpUtility.UrlEncode(mainProduct.Name);
32 var productSheetLink = $"/default.aspx?id={productSheetPageId}&MainProductId={productId}&VariantID={productVariantId}&pdf=true&render_4={rendera_4bilden.ToString()}&filename={encodedMainProductName}-Nevotex.pdf";
33 34 if (rendera_4bilden)
35 {
36 path = path + "_4";
37 }
38 39 if (renderFullImage) {
40 crop = 5;
41 }
42 43 IEnumerable<MediaViewModel> assetsImages = Model.AssetCategories.Where(x => x.SystemName == "Images").SelectMany(x => x.Assets);
44 List<MediaViewModel> assetsList = new List<MediaViewModel>();
45 46 assetsList.Add(Model.DefaultImage);
47 48 foreach (MediaViewModel ai in assetsImages)
49 {
50 assetsList.Add(ai);
51 }
52 foreach (MediaViewModel ip in Model.ImagePatternImages)
53 {
54 assetsList.Add(ip);
55 }
56 57 var imgPath = $"/Admin/Public/GetImage.ashx?width=705&height=524&crop={crop}&FillCanvas=True&DoNotUpscale=true&Compression=75&image=/Files/Images/produktbilder/{path}.jpg";
58 59 <div class="product__info dw-mod u-margin-bottom--lg js-product" data-renderfull-image="@renderFullImage">
60 <div class="grid grid--align-content-start">
61 62 <div class="product__top paragraph-container paragraph-container--full-width dw-mod">
63 <div class="center-container dw-mod">
64 <div class="grid">
65 <div class="grid__col-lg-6 grid__col-md-6 grid__col-sm-12 grid__col-xs-12 dw-mod" id="Block__MainImage">
66 <div class="grid grid--align-content-start dw-mod" id="Block__MainImageRow">
67 <input type="checkbox" id="GalleryModalTrigger" class="modal-trigger">
68 <div class="modal-container">
69 <label for="GalleryModalTrigger" id="GalleryModalOverlay" class="modal-overlay"></label>
70 <div class="modal modal--lg modal-height--full" id="GalleryModal">
71 <div class="modal__body ">
72 <div class="modal__body_text"></div>
73 <div class="carousel dw-mod carousel--horizontal" id="modalCarousel">
74 <div class="thumb-list carousel__container js-carousel-slides dw-mod">
75 @foreach (MediaViewModel img in assetsList)
76 {
77 var imagePath = img.GetFileViewModel().PathUrlEncoded;
78 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";
79 80 <div class="carousel__slide dw-mod carousel__slide--horizontal">
81 <img class="b-lazy modal--full__img dw-mod" src="/Files/Images/placeholder.gif" data-src="@getImagePath" alt="@productName" title="@productName">
82 </div>
83 }
84 85 </div>
86 87 <script>
88 document.addEventListener("DOMContentLoaded", function () {
89 modalCarousel = new CarouselModule('#modalCarousel', {
90 slidesInView: 1,
91 direction: "horizontal",
92 preloaderSize: 3,
93 showCounter: true
94 });
95 });
96 </script>
97 <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>
98 </div>
99100 </div>
101 <label class="modal__close-btn" for="GalleryModalTrigger"></label>
102 </div>
103 </div>
104 <div class="grid__col-lg-12 grid__col-md-12 grid__col-sm-12 grid__col-xs-12 dw-mod" id="Block__Image">
105 <label for="GalleryModalTrigger" class="product__image-container u-position-relative">
106 <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">
107 </label>
108 </div>
109 <div class="grid__col-lg-12 grid__col-md-12 grid__col-sm-12 grid__col-xs-12 dw-mod" id="Block__Carousel">
110 <div class="product__thumbs dw-mod">
111 <div class="carousel dw-mod carousel--horizontal" id="productCarousel">
112 <div class="thumb-list carousel__container js-carousel-slides dw-mod" style="left: 0px; width: 60%;">
113114 @foreach (MediaViewModel img in assetsList)
115 {
116 var imagePath = img.GetFileViewModel().PathUrlEncoded;
117 var getImagePath = $"/Admin/Public/GetImage.ashx?width=705&height=524&crop={crop}&FillCanvas=True&DoNotUpscale=true&Compression=75&image={imagePath}";
118 var getImageSmallPath = $"/Admin/Public/GetImage.ashx?Width=200&Height=200&Crop={crop}&DoNotUpscale=True&FillCanvas=True&Image={imagePath}&AlternativeImage=/Images/missing_image.jpg";
119120 <div class="carousel__slide dw-mod carousel__slide--horizontal">
121 <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)">
122 <label for="GalleryModalTrigger" class="thumb-list__image-label">
123 <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">
124125 </label>
126 </div>
127 </div>
128 }
129 </div>
130131 <script>
132 document.addEventListener("DOMContentLoaded", function () {
133 productCarousel = new CarouselModule('#productCarousel', {
134 slidesInView: 5,
135 direction: "horizontal",
136 preloaderSize: 2,
137 showCounter: false
138 });
139 });
140 </script>
141 <div class="js-carousel-controls"></div>
142 </div>
143 </div>
144 </div>
145 </div>
146 </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>
154155 @if (Pageview.User != null)
156 {
157 @RenderPartial("Designs/Rapido/eCom/ProductCatalog/Partials/ProductFavorite.cshtml", Model)
158 }
159160 </div>
161 <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">
162 <div class="product__section dw-mod">
163 <div class="product__description center-container dw-mod">
164 @{
165 var desc = Convert.ToString(Model.LongDescription);
166167 if (!string.IsNullOrWhiteSpace(Convert.ToString(Model.ProductFields["Variantbeskrivning"].Value)))
168 {
169 desc = Convert.ToString(Model.ProductFields["Variantbeskrivning"].Value);
170 }
171 }
172173 @desc
174175 @if (!string.IsNullOrWhiteSpace(uses))
176 {
177 <p>
178 <h5>@Translate("SuitableFor")</h5>
179 <ul>
180 @foreach (var u in useValues)
181 {
182 <li>@Translate(u)</li>
183 }
184 </ul>
185 </p>
186 }
187188 <p></p>
189190 @RenderPartial("Designs/Rapido/eCom/ProductCatalog/Partials/ProductIcons.cshtml", Model)
191192 </div>
193 </div>
194 </div>
195196 @RenderPartial("Designs/Rapido/eCom/ProductCatalog/Partials/ProductBuyInfo.cshtml", Model)
197198 @if (Pageview.User?.ID == null)
199 {
200 <div class="product__price-actions-wrap dw-mod"></div>
201 }
202203 <div class=" u-no-padding--sm product__productsheet-wrapper">
204 <a target="_blank" rel="nofollow" class="product__productsheet-download btn--condensed btn btn--primary dw-mod" title="@Translate("Ladda ner produktblad")" href="@productSheetLink">
205 <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>
206 </a>
207 </div>
208209 <script>
210 document.addEventListener("DOMContentLoaded", function () {
211 if (document.getElementById("PriceAndActions")) {
212 document.getElementById("PriceAndActions").addEventListener("contentLoaded", function (event) {
213 if (document.querySelector(".js-variants") != null) {
214 MatchVariants.Update(document.querySelector(".js-variants"), "DoNothing");
215 }
216 });
217 }
218 });
219 </script>
220221 <script>
222 function addToSelectedCart() {
223 var requestUrl = "/Default.aspx?ID=6301" + "&cartcmd=Add&Quantity=1" + "&CartId=" + document.getElementById("CartSelector").value + "&ProductId=PROD433" + "&VariantId=VARGRP208_1000432" + "&UnitId=";
224225 console.log(requestUrl)
226227 document.getElementById('OrderDraftSelectModalTrigger').checked = false;
228229 var overlayElement = document.createElement('div');
230 overlayElement.className = "preloader-overlay";
231 overlayElement.setAttribute('id', "CartOverlay");
232 var overlayElementIcon = document.createElement('div');
233 overlayElementIcon.className = "preloader-overlay__icon dw-mod";
234 overlayElementIcon.style.top = window.pageYOffset + "px";
235 overlayElement.appendChild(overlayElementIcon);
236 document.getElementById('content').parentNode.insertBefore(overlayElement, document.getElementById('content'));
237238 Request.Fetch().get(
239 requestUrl,
240 function () {
241 var overlayNode = document.getElementById('CartOverlay');
242 overlayNode.parentNode.removeChild(overlayNode);
243 document.getElementById('OrderDraftNotificationModalTrigger').checked = true;
244 },
245 null,
246 false
247 );
248 }
249250 function goToSelectedCart() {
251 window.location = "/Default.aspx?ID=" + "6562" + "&CartID=" + document.getElementById('CartSelector').value + "&CartCmd=setcart" + "&redirect=false";
252 }
253 </script>
254 </div>
255 </div>
256 </div>
257 </div>
258259 @if (Pageview.Device.ToString() == "Mobile")
260 {
261 @RenderPartial("Designs/Rapido/eCom/ProductCatalog/Partials/TabsMobile.cshtml", Model)
262 }
263 else
264 {
265 @RenderPartial("Designs/Rapido/eCom/ProductCatalog/Partials/TabsDesktop.cshtml", Model)
266 }
267268 <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;">
269 <div class="product__section dw-mod">
270 <div class="center-container dw-mod">
271 <h2 class=" dw-mod">@Translate("Related products")</h2>
272 <div>
273 <div class="u-min-h400px u-full-width">
274 <div class="grid">
275 <div class="grid__col-45px grid__col--bleed-x">
276 <div class="grid__cell grid__cell--align-middle-left">
277 <button class="btn--condensed u-hidden u-position-relative dw-mod" onclick="" type="button" ="u-hidden" ="">
278 <i class="fas fa-chevron-left fa-2x u-flex--align-center"></i>
279 </button>
280 </div>
281 </div>
282 <div class="grid__col-auto grid__col--bleed-x">
283 <div id="ProductsContainer" data-template="ProductGridItemContainer" class="grid product-list dw-mod" data-save-cookie="true">
284 <div id="Product" class="grid__col-3 product-list__grid-item image-hover--zoom dw-mod">
285 <div class="grid__col--auto js-product-scroll-trigger u-no-padding u-full-height" data-params="">
286 @{
287 foreach (var group in Model.RelatedGroups)
288 {
289 foreach (ProductInfoViewModel relatedProduct in group.Products)
290 {
291 var p = relatedProduct.GetProduct();
292293 var productRelatedName = p.Name;
294 var productLink = p.GetProductLink(productPageId, true);
295 var productRelatedNumber = p.Number;
296 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";
297298299 <div class="grid__col--auto js-product-scroll-trigger u-no-padding u-full-height" data-params="">
300 <div class="grid__cell product-list__grid-item__image dw-mod ">
301 <a href="@productLink" onclick="" class="u-block u-position-relative image-hover__wrapper dw-mod">
302 <img class="b-lazy grid__cell-img grid__cell-img--centered u-min-h180px dw-mod b-loaded" src="@raletedImgPath" alt="@productRelatedName " title="@productRelatedName" />
303304 </a>
305 </div>
306307 <div class="grid__cell product-list__grid-item__price-info dw-mod">
308 <a href="@productLink" onclick="" title="@productRelatedName" class="u-color-inherit">
309 <h6 class="u-condensed-text u-bold dw-mod">@productRelatedName</h6>
310 </a>
311312 <div class="item-number dw-mod">@productRelatedNumber</div>
313 <div class="price price--product-list dw-mod">@p.Price.PriceWithoutVatFormatted</div>
314 <div class="before-price u-hidden dw-mod"></div>
315316 </div>
317318 <div class="product-list__grid-item__footer dw-mod">
319 </div>
320 </div>
321322 }
323 }
324 }
325326 <div class="product-list__grid-item__footer dw-mod">
327 </div>
328 </div>
329 </div>
330 </div>
331 </div>
332 <div class="grid__col-45px grid__col--bleed-x">
333 <div class="grid__cell grid__cell--align-middle-right">
334 <button class="btn--condensed u-hidden u-position-relative dw-mod" onclick="HandlebarsBolt.UpdateContent('ProductList_RelatedProducts', '')" type="button" ="u-hidden" ="">
335 <i class="fas fa-chevron-right fa-2x u-flex--align-center"></i>
336 </button>
337 </div>
338 </div>
339 </div>
340 </div>
341 </div>
342 </div>
343 </div>
344 </div>
345346 <script>
347 function toggleFavAction(button, event) {
348 if (button.getAttribute('data-add-link').indexOf('CCCreateNewList') > -1) {
349 Scroll.SavePosition(event);
350 location.href = button.getAttribute('data-add-link');
351 return;
352 }
353 let isAdd = button.getAttribute('data-is-in-list') == "false";
354 Request.Fetch().get(
355 isAdd ? button.getAttribute('data-add-link') : button.getAttribute('data-remove-link'),
356 function (result) {
357 button.querySelector('i').className = isAdd ? 'fas fa-star u-margin-right--lg' : 'fal fa-star u-margin-right--lg';
358 button.setAttribute('data-is-in-list', isAdd);
359 button.setAttribute('title', (!isAdd ? 'Add to ' : 'Remove from ') + button.getAttribute('data-list-name'))
360 let favList = button.closest('.js-favorites-list');
361 let favBtn = favList.querySelector('.js-favorite-btn i');
362 let isInAnyFavoriteList = favList.querySelector('[data-is-in-list=true]') != null;
363 if (isInAnyFavoriteList) {
364 favBtn.className = 'fas fa-star' + ' fa-1_5x';
365 } else {
366 favBtn.className = 'fal fa-star' + ' fa-1_5x';
367 }
368 if (window.currentFavoriteListId != null) { //if this page is favorite list
369 let listId = button.getAttribute("data-list-id");
370 if (listId == window.currentFavoriteListId && !isAdd) {
371 location.reload();
372 }
373 }
374 },
375 function () {
376 console.error("FavoriteLists: Error in ToggleFavAction request");
377 },
378 false
379 );
380 }
381 </script>
382 </div>
383 </div>
384385 }
386387388 @functions{
389390 public string GetFieldValue(FieldValueViewModel field)
391 {
392 var value = "";
393 if (field.Value != null && field.Value is List<FieldOptionValueViewModel>)
394 {
395 var options = (List<FieldOptionValueViewModel>)field.Value;
396 value = string.Join(",", options.Select(x => x.Value));
397 }
398 else
399 {
400 value = Dynamicweb.Core.Converter.ToString(field.Value);
401 }
402 return value;
403 }
404405 public string RenderIcon3(string value)
406 {
407 var iconPath = "/Files/Images/produktbilder/logotyper/";
408 var iconFullPath = string.Empty;
409 var iconText = string.Empty;
410411 var values = value.Split(';');
412413 iconFullPath = iconPath + values[0] + ".png";
414 iconText = Translate(values[0]);
415416 var iconHtml = "<a href = '" + @values[1] + " target = '_blank' style = 'display:contents;' >";
417 iconHtml += "<img width='40px' src = '" + iconFullPath + "' alt = '" + iconText + "' />";
418 iconHtml += "</a>";
419420 return iconHtml;
421422 }
423 }
424425 @helper RenderGoogleProductSchema()
426 {
427 var siteURL = Dynamicweb.Context.Current.Request.Url.Scheme + "://" + Dynamicweb.Context.Current.Request.Url.Host;
428 var image = Model.DefaultImage?.GetFileViewModel().PathUrlEncoded;
429 var brand = Convert.ToString(Model.ProductFields["brand"].Value);
430 var variantid = Model.VariantId;
431 var shopPageId = GetPageIdByNavigationTag("ProductsPage");
432 var url = Dynamicweb.Context.Current.Request.Url.Scheme + "://" + Dynamicweb.Context.Current.Request.UserHostAddress + Model.GetProductLink(shopPageId, true);
433434 <script type="application/ld+json">
435 {
436 "@@context": "http://schema.org/",
437 "@@type": "Product",
438 "name": "@Model.Name",
439 @if (!string.IsNullOrEmpty(image))
440 {
441 <text>"image": [
442 "@siteURL/Admin/Public/GetImage.ashx?width=400&height=400&crop=0&Compression=75&DoNotUpscale=true&image=@image",
443 "@siteURL/Admin/Public/GetImage.ashx?width=400&height=300&crop=0&Compression=75&DoNotUpscale=true&image=@image",
444 "@siteURL/Admin/Public/GetImage.ashx?width=448&height=225&crop=0&Compression=75&DoNotUpscale=true&image=@image"
445 ],</text>
446 }
447 "description": "@Model.ShortDescription",
448 "mpn": "925872",
449 @if (!string.IsNullOrEmpty(brand))
450 {
451 <text>"brand": {
452 "@@type": "Thing",
453 "name": "@brand"
454 },</text>
455 }
456 "offers": {
457 "@@type": "Offer",
458 "priceCurrency": "@Model.Price.CurrencyCode",
459 "price": "@Model.Price.Price",
460 "availability": "@(Model.StockLevel > 0 ? "InStock" : "OutOfStock")",
461 "url": "@url"
462 }
463 }
464 </script>
465 }