blossom grey

1 @inherits ViewModelTemplate<ProductViewModel> 2 @using Dynamicweb.Rendering 3 @using Dynamicweb.Ecommerce.ProductCatalog 4 @using EGE.Website.CustomModules 5 @using EGE.Website.CustomModules.Models 6 @using EGE.Website.CustomModules.Extensions 7 @using EGE.Website.CustomModules.Helpers 8 @using System.Web 9 @using Newtonsoft.Json 10 @using Newtonsoft.Json.Linq 11 12 @{ 13 var product = Dynamicweb.Ecommerce.Services.Products.GetProductById(Model.Id, Model.VariantId, Model.LanguageId); 14 } 15 16 @if (product == null) 17 { 18 <h3>The product is not available in the chosen language, please try another.</h3> 19 } 20 else 21 { 22 bool isOutletSite = PageExtensions.IsOutletArea(Pageview.AreaID); 23 var B2cSiteActive = PageExtensions.IsB2CArea(Pageview.AreaID); 24 //string groupIdQueryParameter = string.IsNullOrEmpty(Dynamicweb.Context.Current.Request["GroupID"]) 25 // ? string.Empty 26 // : "&GroupID=" + Dynamicweb.Context.Current.Request["GroupID"]; 27 var variantCombinations = product.VariantCombinations.Where(x => !x.VariantId.Contains("NA")); 28 29 string productLink = "/Default.aspx?ID=" + Pageview.Page.ID + "&ProductID=" + Model.Id; 30 var prodImage = ProductExtensions.GetProductImagePath(Model.Id, out bool isExternal); 31 var prodTypeName = Model.GetFieldName("ProductEgeType"); 32 var prodTypeValue = Model.GetFieldValue("ProductEgeType"); 33 var prodConceptName = Model.GetFieldName("ProductConcept"); 34 var prodConceptValue = Model.GetFieldValue("ProductConcept"); 35 var prodCollectionName = Model.PrimaryOrDefaultGroup.Name; 36 var prodCollectionLink = string.Empty; 37 var prodB2CCollectionLink = string.Empty; 38 var prodConceptLink = string.Empty; 39 var prodColor = Model.GetFieldName("ProductColor"); 40 int variantListCounter = 0; 41 var IsBulkCarpets = PageExtensions.IsBulkCarpets(prodTypeValue); 42 43 //EGEDR-769 44 bool isCircleBack = false; 45 string circleBackText = string.Empty; 46 if (Model.ProductCategories.Keys.Any()) 47 { 48 if (Model.ProductCategories.ContainsKey("CarpetCategory")) 49 { 50 isCircleBack = bool.Parse(product.GetCategoryValue("CarpetCategory", "IsCircleBack").ToString()); 51 var circleBackTextObj = product.GetCategoryValue("CarpetCategory", "CircleBackText"); 52 circleBackText = circleBackTextObj != null ? circleBackTextObj.ToString() : null; 53 54 } 55 56 } 57 58 var CurrencyCode = Dynamicweb.Ecommerce.Common.Context.Currency.Code; 59 60 if (Model.ProductCategories.Keys.Any()) 61 { 62 if (Model.ProductCategories.ContainsKey("CarpetCategory")) 63 { 64 var fields = Model.ProductCategories["CarpetCategory"]; 65 prodCollectionLink = fields.Fields["CollectionContentPage"].Value as string; 66 prodConceptLink = fields.Fields["ConceptContentPage"].Value as string; 67 prodB2CCollectionLink = fields.Fields["B2CCollectionContentPage"].Value as string; 68 } 69 70 } 71 var images = Model.GetImages(); 72 var sustainabilityChoices = string.Empty; 73 if (Model.ProductCategories.ContainsKey("CarpetCategory")) 74 { 75 var susChoiceList = (Model.ProductCategories["CarpetCategory"].Fields["PdfSustainBlocks"]?.Value as List<FieldOptionValueViewModel>); 76 77 foreach (var choice in susChoiceList) 78 { 79 sustainabilityChoices += choice.Value; 80 } 81 } 82 83 var variantsDivId = "js-product-details__variants"; 84 var prodNumber = ""; 85 var patternNumber = ""; 86 var backingAbbr = ""; 87 88 if (isOutletSite) 89 { 90 @TemplateHelper.RenderPartial("Ecom/Partials/Details_OutletData.cshtml", Model) 91 prodNumber = Model.GetCategoryValueAs<string>("M3ProductNumber", "OutletSpecs"); 92 patternNumber = Model.GetCategoryValueAs<string>("PatternNumber", "OutletSpecs"); 93 backingAbbr = Model.GetFieldValue("ProductBacking").ToString(); 94 } 95 else 96 { 97 @TemplateHelper.RenderPartial("Ecom/Partials/Details_Data.cshtml", Model) 98 } 99 100 var cartOrderLinesFeed = Dynamicweb.Services.Pages.GetPageByNavigationTag(Pageview.AreaID, "CartOrderLinesFeed"); 101 var cartOrderLinesFeedUrl = ""; 102 if (cartOrderLinesFeed != null) 103 { 104 cartOrderLinesFeedUrl = Dynamicweb.Frontend.SearchEngineFriendlyURLs.GetFriendlyUrl(cartOrderLinesFeed.ID); 105 } 106 107 var isProductRug = EGE.Website.CustomModules.Extensions.ProductExtensions.IsRug(HttpContext.Current.Request["ProductID"]); 108 var showConfigurator = EGE.Website.CustomModules.Extensions.ProductExtensions.GetProductShowConfigurator(HttpContext.Current.Request["ProductID"]); 109 bool anyNonEmptyImagePath = false; 110 111 Dynamicweb.Content.PageService pageService = new Dynamicweb.Content.PageService(); 112 Dynamicweb.Content.Page configuratorLoginPage = pageService.GetPageByNavigationTag(Pageview.AreaID, "ConfiguratorLoginPage"); 113 string configuratorLoginPageUrl = configuratorLoginPage != null ? Dynamicweb.Frontend.SearchEngineFriendlyURLs.GetFriendlyUrl(configuratorLoginPage.ID) : null; 114 string productId = HttpContext.Current.Request["ProductID"]; 115 116 string configuratorFullLink = configuratorLoginPageUrl + "?configuratorId=" + productId; 117 118 var hasRugImages = false; 119 120 //Sorting images to make thumbnail first image in PDP main image slider 121 List<ImagePathModel> imageArray = new List<ImagePathModel>(); 122 ImagePathCollectionModel rugImageInfo = ProductExtensions.GetImagePaths(Model.Id); 123 124 if (rugImageInfo != null) 125 { 126 foreach (var thumbnailImage in rugImageInfo.Thumbnail) 127 { 128 imageArray.Add(thumbnailImage); 129 } 130 131 foreach (var webImage in rugImageInfo.WebImages) 132 { 133 imageArray.Add(webImage); 134 } 135 136 hasRugImages = imageArray.Any(); 137 } 138 139 140 var relatedProductArray = new List<object>(); 141 var relatedProducts = product.RelatedProducts(); 142 143 foreach (var relatedProduct in relatedProducts) 144 { 145 var productNumber = relatedProduct.Product.Number; 146 var productType = ""; 147 148 if (productNumber.StartsWith("SA") || (productNumber.Contains(".") && productNumber.Contains("SA"))) 149 { 150 productType = "sample"; 151 } 152 else 153 { 154 productType = "other"; 155 } 156 157 relatedProductArray.Add(new { productNumber = productNumber, type = productType }); 158 } 159 160 string sortedRelatedProductsJson = JsonConvert.SerializeObject(relatedProductArray); 161 162 <script> 163 sessionStorage.setItem('relatedProducts', '@sortedRelatedProductsJson'); 164 </script> 165 166 <section class="product-details" id="js-product-details" data-model-color="@prodColor" data-model-category="@prodTypeName" data-model-currency="@CurrencyCode" data-model-id="@Model.Id" data-model-name="@Model.Name" data-non-variants="@Model.GetRelatedGroupById("RELGRP1").Any()" data-thumb="@ProductExtensions.GetProductImagePath(Model.Id, out isExternal, "XS")"> 167 168 <div class="container"> 169 <div class="product-details__inner"> 170 <div class="product-details__header-holder"> 171 <h1 class="header-in-component header-in-component--product-detail"> 172 @Model.Name 173 </h1> 174 <div class="product-details__header-id"> 175 @if (!isOutletSite) 176 { 177 @Model.Number 178 } 179 else 180 { 181 @:@prodNumber - @patternNumber - @backingAbbr 182 } 183 </div> 184 </div> 185 <div class="product-details__slider-holder"> 186 <div class="slider-with-counter slider-with-counter--main" id="slider-with-counter--wide"> 187 <div class="slider-with-counter__slider-holder"> 188 189 <ul class="slider-with-counter__list slider-with-counter__list--hidden" data-counter-text="@Translate("Product | You are viewing {X} of {Y} images", "You are viewing {X} of {Y} images").Replace("{X}", "{0}").Replace("{Y}", "{0}")"> 190 191 @if (hasRugImages) 192 { 193 foreach (var image in imageArray) 194 { 195 string title = image.Title; 196 string imageSrc = image.ImagePath; 197 var imageIndex = 0; 198 199 if (!string.IsNullOrEmpty(imageSrc)) 200 { 201 anyNonEmptyImagePath = true; 202 <li class="slider-with-counter__item"> 203 @{ 204 var isThumbnail = image.ImagePath.ToLower().Contains("thumbnail"); 205 if (isCircleBack && !B2cSiteActive && isThumbnail) 206 { 207 @CircleBackLogo(); 208 } 209 } 210 <img class="lazyload a-image lazyload-measure lazyload-bg " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="@title" property="contentUrl" data-src="@(ImageUiFormatHelper.Format(imageSrc, 542, 542))" 211 data-query-obj='{ "mode":"crop" }'> 212 <noscript v-if="false"> 213 <img src="@(ImageUiFormatHelper.Format(imageSrc, 542, 542))" alt="@title"> 214 </noscript> 215 216 <button @@click="showOverlay(@imageIndex+1)" class="slider-with-counter__button-lightbox" data-lightbox-image="test-slider.jpg"></button> 217 </li> 218 } 219 } 220 } 221 @if (!hasRugImages || !anyNonEmptyImagePath) 222 { 223 foreach (var image in images) 224 { 225 var imageIndex = 0; 226 <li class="slider-with-counter__item"> 227 @if (isCircleBack && !B2cSiteActive && image.Url.Contains("/Files/Files/Ecom/Images/Products/")) 228 { 229 @CircleBackLogo() 230 } 231 <img class="lazyload a-image lazyload-measure lazyload-bg " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="@image.AltText" property="contentUrl" data-src="@(image.IsExternal ? image.Url : ImageUiFormatHelper.Format(image.Url, 542, 542))" 232 data-query-obj='{ "mode":"crop" }'> 233 <noscript v-if="false"> 234 <img src="@(image.IsExternal ? image.Url : ImageUiFormatHelper.Format(image.Url, 542, 542))" alt="@image.AltText"> 235 </noscript> 236 237 <button @@click="showOverlay(@imageIndex+1)" class="slider-with-counter__button-lightbox" data-lightbox-image="test-slider.jpg"></button> 238 </li> 239 } 240 } 241 242 </ul> 243 <div class="slider-with-counter__navigation"> 244 <button @@click="slideToPrev(sliderMain)" v-bind:class="{ 'slider-with-counter__button--show': sliderMain.showButtonPrev}" class="slider-with-counter__button slider-with-counter__button--prev"> 245 <svg class="svg-icon slider-with-counter__svg"> 246 <use xlink:href="@Constants.DistPath/icons/icons.svg#arrow"></use> 247 </svg> 248 </button> 249 <button @@click="slideToNext(sliderMain)" v-bind:class="{ 'slider-with-counter__button--show': sliderMain.showButtonNext }" class="slider-with-counter__button slider-with-counter__button--next"> 250 <svg class="svg-icon slider-with-counter__svg"> 251 <use xlink:href="@Constants.DistPath/icons/icons.svg#arrow"></use> 252 </svg> 253 </button> 254 </div> 255 </div> 256 @if (!isOutletSite && !B2cSiteActive && !isProductRug) 257 { 258 <div v-if="sliderMain.currentSlide <= 1"> 259 <span id="ImageDownload" class="product-list-room-shot__item-image-download-product-detail"> 260 <figure class="product-list-room-shot__item-image-download-icon"><svg class="svg-icon product-list-room-shot__item-image-download-icon-arrow"><use xlink:href="/dist/icons/icons.svg#arrow-down-in-circle"></use></svg></figure> 261 <a href="@prodImage" download="@prodImage" class="product-list-room-shot__item-image-download-link">Low res</a> 262 263 @if (ProductExtensions.GetHighResolutionImagePath(Model.Id) != null && !string.IsNullOrEmpty(ProductExtensions.GetHighResolutionImagePath(Model.Id))) 264 { 265 <a href="@ProductExtensions.GetHighResolutionImagePath(Model.Id)" download="@ProductExtensions.GetHighResolutionImagePath(Model.Id)" class="product-list-room-shot__item-image-download-link">High res</a> 266 } 267 </span> 268 </div> 269 270 } 271 <div class="slider-with-counter__counter"> 272 <span class="slider-with-counter__counter-part slider-with-counter__counter-part--plain" v-html="sliderMain.counterTextBefore"></span> 273 <span class="slider-with-counter__counter-part slider-with-counter__counter-part--number" v-html="sliderMain.currentSlide"></span> 274 <span class="slider-with-counter__counter-part slider-with-counter__counter-part--middle" v-html="sliderMain.counterTextMiddle"></span> 275 <span class="slider-with-counter__counter-part slider-with-counter__counter-part--number" v-html="slidesAmount"></span> 276 <span class="slider-with-counter__counter-part slider-with-counter__counter-part--plain" v-html="sliderMain.counterTextAfter"></span> 277 </div> 278 <div class="slider-with-counter__template"> 279 280 <div class="novi-backdrop novi-backdrop--hidden novi-backdrop--slider-with-counter" id="slider-with-counter__overlay"> 281 <div class="novi-overlay"> 282 <div class="novi-overlay__container"> 283 <div class="novi-overlay__content"> 284 <div class="slider-with-counter slider-with-counter--in-overlay slider-with-counter--zoom" id="slider-with-counter--wide"> 285 <div class="slider-with-counter__slider-holder"> 286 <ul class="slider-with-counter__list slider-with-counter__list--hidden slider-with-counter__list--zoom"> 287 @{ 288 int canvasCounter = 0; 289 } 290 291 @if (hasRugImages) 292 { 293 294 foreach (var image in imageArray) 295 { 296 string imageSrc = image.ImagePath; 297 if (!string.IsNullOrEmpty(imageSrc)) 298 { 299 anyNonEmptyImagePath = true; 300 <li class="slider-with-counter__item"> 301 <img class="lazyload a-image lazyload-measure lazyload-bg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="@image.Title" property="contentUrl" data-src="@ImageUiFormatHelper.Format(imageSrc, 700, 700)" 302 data-query-obj='{ "mode":"crop" }'> 303 <noscript v-if="false"> 304 <img src="@ImageUiFormatHelper.Format(imageSrc, 700, 700)" 305 alt="@image.Title"> 306 </noscript> 307 <span class="button__wait-animation button__wait-animation--slider-with-counter"> 308 <span></span> 309 <span></span> 310 <span></span> 311 <span></span> 312 </span> 313 314 @if (canvasCounter == 0) 315 { 316 <canvas v-bind:class="{'slider-with-counter__zoom-canvas--loading':zoomElements[@canvasCounter] && zoomElements[@canvasCounter].isLoading}" @@touchend="zoomOnTouchEnd(@canvasCounter,$event)" @@mouseup="zoomOnTouchEnd(@canvasCounter,$event)" @@touchmove="zoomOnTouchMove(@canvasCounter,$event)" @@touchstart="zoomOnTouchStart(@canvasCounter,$event)" @@mousedown="zoomOnTouchStart(@canvasCounter,$event)" @@wheel="zoomOnWheel(@canvasCounter,$event)" @@mousemove="zoomOnTouchMove(@canvasCounter,$event)" @@mouseleave="zoomClear(@canvasCounter)" data-src="@(image.ImagePath)" data-no="@canvasCounter" class="slider-with-counter__zoom-canvas"></canvas> 317 <span class="slider-with-counter__zoom-loading" v-if="zoomElements[@canvasCounter] && zoomElements[@canvasCounter].isLoading"> 318 <span class="button__wait-animation button__wait-animation--zoom"> 319 <span></span> 320 <span></span> 321 <span></span> 322 <span></span> 323 </span> 324 <span class="slider-with-counter__zoom-loading-text">@Translate("Product | Zoom | Loading zoomable image", "Loading zoomable image")</span> 325 </span> 326 <div class="slider-with-counter__zoom-container"> 327 <div v-if="zoomElements[@canvasCounter]" class="slider-with-counter__zoom-level-indicator"> 328 <button @@click="zoomOnButton(@canvasCounter,true)" class="increase-decrease__button increase-decrease__button--up slider-with-counter__zoom-level-button slider-with-counter__zoom-level-button--plus"></button> 329 <div class="slider-with-counter__zoom-level-illustration"> 330 <span v-bind:style="'top:'+zoomDotPosition" class="slider-with-counter__zoom-level-illustration-dot"></span> 331 </div> 332 <button @@click="zoomOnButton(@canvasCounter,false)" class="increase-decrease__button increase-decrease__button--down slider-with-counter__zoom-level-button slider-with-counter__zoom-level-button--minus"></button> 333 </div> 334 <span class="slider-with-counter__zoom-indicator" style="background-image: url(@image.ImagePath)"> 335 <span v-if="zoomElements[@canvasCounter]" v-bind:style="{paddingTop: zoomElements[@canvasCounter].thumbnailRatio}" class="slider-with-counter__zoom-indicator-aspect-ratio"></span> 336 <span v-if="zoomElements[@canvasCounter]" v-bind:style="{width:zoomThumbnailSize[@canvasCounter],height:zoomThumbnailSize[@canvasCounter],left:zoomThumbnailPositionComp[@canvasCounter].left,top:zoomThumbnailPositionComp[@canvasCounter].top}" class="slider-with-counter__zoom-indicator-excerpt"><span></span></span> 337 </span> 338 </div> 339 } 340 @{canvasCounter++;} 341 </li> 342 } 343 } 344 } 345 @if (!hasRugImages || !anyNonEmptyImagePath) 346 { 347 foreach (var image in images) 348 { 349 <li class="slider-with-counter__item"> 350 <img class="lazyload a-image lazyload-measure @(image.IsFirst ? "slider-with-counter__real-image" : "lazyload-bg")" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="@image.AltText" property="contentUrl" data-src="@(image.IsExternal ? image.Url : ImageUiFormatHelper.Format(image.Url, 700, 700))" 351 data-query-obj='{ "mode":"crop" }'> 352 <noscript v-if="false"> 353 <img src="@(image.IsExternal ? image.Url + "?mode=crop" : ImageUiFormatHelper.Format(image.Url, 700, 700))" 354 alt="@image.AltText"> 355 </noscript> 356 <span class="button__wait-animation button__wait-animation--slider-with-counter"> 357 <span></span> 358 <span></span> 359 <span></span> 360 <span></span> 361 </span> 362 363 @if (canvasCounter == 0) 364 { 365 <canvas v-bind:class="{'slider-with-counter__zoom-canvas--loading':zoomElements[@canvasCounter] && zoomElements[@canvasCounter].isLoading}" @@touchend="zoomOnTouchEnd(@canvasCounter,$event)" @@mouseup="zoomOnTouchEnd(@canvasCounter,$event)" @@touchmove="zoomOnTouchMove(@canvasCounter,$event)" @@touchstart="zoomOnTouchStart(@canvasCounter,$event)" @@mousedown="zoomOnTouchStart(@canvasCounter,$event)" @@wheel="zoomOnWheel(@canvasCounter,$event)" @@mousemove="zoomOnTouchMove(@canvasCounter,$event)" @@mouseleave="zoomClear(@canvasCounter)" data-src="@(image.Url)" data-no="@canvasCounter" class="slider-with-counter__zoom-canvas"></canvas> 366 <span class="slider-with-counter__zoom-loading" v-if="zoomElements[@canvasCounter] && zoomElements[@canvasCounter].isLoading"> 367 <span class="button__wait-animation button__wait-animation--zoom"> 368 <span></span> 369 <span></span> 370 <span></span> 371 <span></span> 372 </span> 373 <span class="slider-with-counter__zoom-loading-text">@Translate("Product | Zoom | Loading zoomable image", "Loading zoomable image")</span> 374 </span> 375 <div class="slider-with-counter__zoom-container"> 376 <div v-if="zoomElements[@canvasCounter]" class="slider-with-counter__zoom-level-indicator"> 377 <button @@click="zoomOnButton(@canvasCounter,true)" class="increase-decrease__button increase-decrease__button--up slider-with-counter__zoom-level-button slider-with-counter__zoom-level-button--plus"></button> 378 <div class="slider-with-counter__zoom-level-illustration"> 379 <span v-bind:style="'top:'+zoomDotPosition" class="slider-with-counter__zoom-level-illustration-dot"></span> 380 </div> 381 <button @@click="zoomOnButton(@canvasCounter,false)" class="increase-decrease__button increase-decrease__button--down slider-with-counter__zoom-level-button slider-with-counter__zoom-level-button--minus"></button> 382 </div> 383 <span class="slider-with-counter__zoom-indicator" style="background-image: url(@image.Url)"> 384 <span v-if="zoomElements[@canvasCounter]" v-bind:style="{paddingTop: zoomElements[@canvasCounter].thumbnailRatio}" class="slider-with-counter__zoom-indicator-aspect-ratio"></span> 385 <span v-if="zoomElements[@canvasCounter]" v-bind:style="{width:zoomThumbnailSize[@canvasCounter],height:zoomThumbnailSize[@canvasCounter],left:zoomThumbnailPositionComp[@canvasCounter].left,top:zoomThumbnailPositionComp[@canvasCounter].top}" class="slider-with-counter__zoom-indicator-excerpt"><span></span></span> 386 </span> 387 </div> 388 } 389 @{canvasCounter++;} 390 </li> 391 } 392 } 393 </ul> 394 <div class="slider-with-counter__navigation"> 395 <button @@click="slideToPrev(sliderInOverlay)" v-bind:class="{ 'slider-with-counter__button--show': sliderInOverlay.showButtonPrev}" class="slider-with-counter__button slider-with-counter__button--prev"> 396 <svg class="svg-icon slider-with-counter__svg"> 397 <use xlink:href="@Constants.DistPath/icons/icons.svg#arrow"></use> 398 </svg> 399 </button> 400 <button @@click="slideToNext(sliderInOverlay)" v-bind:class="{ 'slider-with-counter__button--show': sliderInOverlay.showButtonNext }" class="slider-with-counter__button slider-with-counter__button--next"> 401 <svg class="svg-icon slider-with-counter__svg"> 402 <use xlink:href="@Constants.DistPath/icons/icons.svg#arrow"></use> 403 </svg> 404 </button> 405 </div> 406 </div> 407 <div class="slider-with-counter__counter"> 408 <span class="slider-with-counter__counter-part slider-with-counter__counter-part--plain" v-html="sliderInOverlay.counterTextBefore"></span> 409 <span class="slider-with-counter__counter-part slider-with-counter__counter-part--number" v-html="sliderInOverlay.currentSlide"></span> 410 <span class="slider-with-counter__counter-part slider-with-counter__counter-part--middle" v-html="sliderInOverlay.counterTextMiddle"></span> 411 <span class="slider-with-counter__counter-part slider-with-counter__counter-part--number" v-html="slidesAmount"></span> 412 <span class="slider-with-counter__counter-part slider-with-counter__counter-part--plain" v-html="sliderInOverlay.counterTextAfter"></span> 413 </div> 414 </div> 415 <div class="novi-overlay__close-area"> 416 <button class="close-button novi-overlay__close-button"> 417 <span class="close-button__icon"> 418 <svg class="svg-icon close-button__svg"> 419 <use xlink:href="@Constants.DistPath/icons/icons.svg#cross"></use> 420 </svg> 421 </span> 422 <span class="close-button__text">@Translate("Product | Image overlay | Close", "Close")</span> 423 </button> 424 </div> 425 </div> 426 </div> 427 </div> 428 429 </div> 430 </div> 431 432 </div> 433 434 </div> 435 436 <div class="product-details__details-holder"> 437 <h2 class="product-text__header">@(B2cSiteActive ? @Translate("Product | B2C Tags", "B2C Tags") : @Translate("Product | Tags", "Tags"))</h2> 438 <ul class="product-details__tag-list"> 439 <li class="product-details__tag-item"> 440 @if (B2cSiteActive) 441 { 442 <span class="product-details__tag-link">@prodTypeName</span> 443 } 444 else 445 { 446 447 <a href="@(Model.GetTypeUrl(prodTypeValue))" class="product-details__tag-link">@prodTypeName</a> 448 } 449 </li> 450 @if (!B2cSiteActive && !string.IsNullOrWhiteSpace(prodConceptLink)) 451 { 452 <li class="product-details__tag-item"> 453 <a href="@prodConceptLink" class="product-details__tag-link">@prodConceptName</a> 454 </li> 455 } 456 @if (B2cSiteActive) 457 { 458 <li class="product-details__tag-item"> 459 <span class="product-details__tag-link">@prodCollectionName</span> 460 </li> 461 462 } 463 else if (!string.IsNullOrWhiteSpace(prodCollectionLink)) 464 { 465 <li class="product-details__tag-item"> 466 <a href="@prodCollectionLink" class="product-details__tag-link">@prodCollectionName</a> 467 </li> 468 } 469 </ul> 470 471 <div id="@variantsDivId" ref="variantType_@variantListCounter" class="product-details__variants"> 472 @foreach (var designVariantLists in Model.ProduceListsOfDesignVariants()) 473 { 474 var activeProductId = HttpContext.Current.Request["ProductID"]; 475 var hideVariantsClass = "product-details__variant-type--hide"; 476 if (variantListCounter == 0) 477 { 478 hideVariantsClass = ""; 479 } 480 if (variantListCounter > 0) 481 { 482 <button ref="variantTypeButton_@variantListCounter" @@click="toggleVariantType(@variantListCounter)" class="product-text__read-more"><svg class="svg-icon product-text__svg"><use xlink:href="/dist/icons/icons.svg#arrow"></use></svg><span>@Translate(designVariantLists.TranslationKey, designVariantLists.TranslationDefaultValue)</span></button> 483 } 484 <div ref="variantType_@variantListCounter" class="product-details__variant-type @hideVariantsClass"> 485 <h2 class="product-text__header">@Translate(designVariantLists.TranslationKey, designVariantLists.TranslationDefaultValue)</h2> 486 <div class="product-details__variant-type-content"> 487 <div class="product-details__variant-truncate" :style="{'max-height':variantTruncateHeight[@variantListCounter]}"> 488 <ul class="product-details__variant-list"> 489 490 @foreach (var relatedProduct in designVariantLists.RelatedProducts.OrderBy(x => x.Id)) 491 { 492 var imagePath = ProductExtensions.GetProductImagePath(relatedProduct.Id, out bool relatedIsExternal, "XS"); 493 productLink = "/Default.aspx?ID=" + Pageview.Page.ID + "&ProductID=" + relatedProduct.Id; 494 <li class="product-details__variant-item"> 495 <a href="@productLink" class="product-details__variant-link @(activeProductId == relatedProduct.Id ? "product-details__variant-link--active" : "")" title="@relatedProduct.Id"> 496 <figure class="product-details__variant-img"> 497 <img class="lazyload a-image lazyload-measure lazyload-bg " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="@relatedProduct.Name" property="contentUrl" data-src="@(activeProductId == relatedProduct.Id ? (isExternal ? prodImage : ImageUiFormatHelper.Format(prodImage, 700, 700)) : (relatedIsExternal ? imagePath : ImageUiFormatHelper.Format(imagePath, 700, 700)))" 498 data-query-obj='{ }'> 499 <noscript v-if="false"> 500 <img src="@(activeProductId == relatedProduct.Id ? (isExternal ? prodImage : ImageUiFormatHelper.Format(prodImage, 700, 700)) : (relatedIsExternal ? imagePath : ImageUiFormatHelper.Format(imagePath, 700, 700)))" 501 alt="@relatedProduct.Name"> 502 </noscript> 503 </figure> 504 </a> 505 </li> 506 } 507 <li class="product-details__variant-item product-details__variant-item--adjustment"></li> 508 <li class="product-details__variant-item product-details__variant-item--adjustment"></li> 509 <li class="product-details__variant-item product-details__variant-item--adjustment"></li> 510 <li class="product-details__variant-item product-details__variant-item--adjustment"></li> 511 <li class="product-details__variant-item product-details__variant-item--adjustment"></li> 512 <li class="product-details__variant-item product-details__variant-item--adjustment"></li> 513 <li class="product-details__variant-item product-details__variant-item--adjustment"></li> 514 </ul> 515 </div> 516 </div> 517 <button class="product-details__see-all-variants" :class="{'product-details__see-all-variants--open':variantTypes[@variantListCounter].showAllVariants}" v-if="variantTypes[@variantListCounter] && variantTypes[@variantListCounter].moreVariantsThanOneLine" @@click="hideShowVariants(@variantListCounter)"> 518 <span class="product-details__see-all-variants-text product-details__see-all-variants-text--see-all"> 519 @Translate("Product | See all variants", "See all variants") 520 </span> 521 <span class="product-details__see-all-variants-text product-details__see-all-variants-text--see-less"> 522 @Translate("Product | See less variants", "See less variants") 523 </span> 524 525 <svg class="svg-icon product-details__see-all-variants-svg"> 526 <use xlink:href="@Constants.DistPath/icons/icons.svg#arrow-down-in-circle"></use> 527 </svg> 528 </button> 529 </div> 530 variantListCounter++; 531 } 532 </div> 533 @if (isCircleBack && !B2cSiteActive) 534 { 535 <div id="product-details__circle-back" class="product-details__variant-type"> 536 <img src="@ImageUiFormatHelper.Format("/Files/Files/Images/CircleBack/Ege_Circular_Black.png", 50, 55)" height="50" width="55" /> 537 <button ref="circleBackButton" v-show="!toggleCircleBack" @@click="initToggleCircleBack()" class="product-text__read-more"><svg class="svg-icon product-text__svg"><use xlink:href="/dist/icons/icons.svg#arrow"></use></svg><span>@Translate("EgeCircleBack:ReadMoreButtonText", "Ege CircleBack")</span></button> 538 <div v-show="toggleCircleBack" class="product-text__text"> 539 @circleBackText 540 </div> 541 </div> 542 } 543 <div class="product-text" data-button-text-1="@Translate("Read more", "Read more")" data-button-text-2="@Translate("Show less", "Show less")"> 544 <h2 class="product-text__header">@Model.ShortDescription</h2> 545 <div v-bind:style="{ maxHeight: maxHeight + 'px' }" class="product-text__text" v-bind:class="{'product-text__text--truncate':truncateText}"> 546 <div>@Model.LongDescription</div> 547 </div> 548 <button @@click="toggle" v-if="hasOverflow" class="product-text__read-more"> 549 <svg class="svg-icon product-text__svg"> 550 <use xlink:href="@Constants.DistPath/icons/icons.svg#arrow"></use> 551 </svg><span v-html="buttonText"></span> 552 </button> 553 </div> 554 555 @if (B2cSiteActive) 556 { 557 558 var B2CFullWidthPrice = string.Empty; 559 var B2CCarvingPrice = string.Empty; 560 var B2CAnyShapePrice = string.Empty; 561 var B2CAnyShapeExtraText = string.Empty; 562 563 if (Model.ProductCategories.Keys.Any()) 564 { 565 if (Model.ProductCategories.ContainsKey("CarpetCategory")) 566 { 567 var fields2 = Model.ProductCategories["CarpetCategory"]; 568 569 B2CFullWidthPrice = product.GetCategoryValue("CarpetCategory", "B2CFullWidthPrice").ToString(); 570 B2CCarvingPrice = product.GetCategoryValue("CarpetCategory", "B2CCarvingPrice").ToString(); 571 B2CAnyShapePrice = product.GetCategoryValue("CarpetCategory", "B2CAnyShapePrice").ToString(); 572 B2CAnyShapeExtraText = fields2.Fields["B2CAnyShapeExtraText"].Value as string; 573 } 574 575 } 576 577 <div class="remnants"> 578 <div class="remnants__header"> 579 <div class="remnants__headline">@Translate("Product details B2C | Remnants | Priser", "Priser")</div> 580 </div> 581 <ul class="remnants__list"> 582 @if (!string.IsNullOrWhiteSpace(B2CFullWidthPrice) && B2CFullWidthPrice != "0") 583 { 584 // adding decimals if not already present 585 var B2CFillWidthPriceFormatted = (B2CFullWidthPrice.Contains(',') ? B2CFullWidthPrice : B2CFullWidthPrice + ",00"); 586 587 <li class="remnants__item"> 588 <div class="remnants__item-inner"> 589 <div class="remnants__info remnants__info--first-column"> 590 <div class="remnants__info-text">@Translate("Product details B2C | Remnants | B2CFullWidthText", "Fuld bredde, pr. m2 inkl. moms")</div> 591 </div> 592 <div class="remnants__price remnants__price--first-column">@CurrencyCode @B2CFillWidthPriceFormatted</div> 593 </div> 594 </li> 595 } 596 @if (!string.IsNullOrWhiteSpace(B2CCarvingPrice) && B2CCarvingPrice != "0") 597 { 598 // adding decimals if not already present 599 var B2CCarvingPriceFormatted = (B2CCarvingPrice.Contains(',') ? B2CCarvingPrice : B2CCarvingPrice + ",00"); 600 601 <li class="remnants__item"> 602 <div class="remnants__item-inner"> 603 <div class="remnants__info remnants__info--first-column"> 604 <div class="remnants__info-text">@Translate("Product details B2C | Remnants | B2CCarvingText", "Udskåret mål, pr. m2 inkl. moms")</div> 605 </div> 606 <div class="remnants__price remnants__price--first-column">@CurrencyCode @B2CCarvingPriceFormatted</div> 607 </div> 608 </li> 609 } 610 @if (!string.IsNullOrWhiteSpace(B2CAnyShapePrice) && B2CAnyShapePrice != "0") 611 { 612 // adding decimals if not already present 613 var B2CAnyShapePriceFormatted = (B2CAnyShapePrice.Contains(',') ? B2CAnyShapePrice : B2CAnyShapePrice + ",00"); 614 615 <li class="remnants__item"> 616 <div class="remnants__item-inner"> 617 <div class="remnants__info remnants__info--first-column"> 618 <div class="remnants__info-text">@B2CAnyShapeExtraText</div> 619 </div> 620 <div class="remnants__price remnants__price--first-column">@CurrencyCode @B2CAnyShapePriceFormatted</div> 621 </div> 622 </li> 623 } 624 </ul> 625 </div> 626 } 627 628 @if (isOutletSite) 629 { 630 var addToBasketString = Translate("Product details | Remnants | Add to basket", "Add to basket"); 631 632 <div id="js-remnants" v-cloak class="remnants" data-text-options-singular="@Translate("Product details | Remnants | option (singular)", "option")" data-text-options-plural="@Translate("Product details | Remnants | options (plural)", "options")" data-text-product-singular="@Translate("Product details | Remnants | fault (singular)", "fault")" data-text-product-plural="@Translate("Product details | Remnants | faults (plural)", "faults")"> 633 <div class="remnants__header"> 634 <div class="remnants__headline">@Translate("Product details | Remnants | Choose carpet remnants", "Choose carpet remnants")</div> 635 <div class="remnants__items-available">{{remnantItems.length}} <span v-html="remnantItems.length === 1 ? textOptionsSingular : textOptionsPlural"></span></div> 636 </div> 637 <ul class="remnants__list" :class="{'remnants__list--show-all':showAll}"> 638 <li class="remnants__item" v-for="remnantItem in remnantItems" :key="remnantItem.VariantId"> 639 <div class="remnants__item-inner"> 640 <div class="remnants__input"> 641 <label :for="'remnant-input-'+remnantItem.VariantId" class="form__checkbox-label"> 642 <input :id="'remnant-input-'+remnantItem.VariantId" :value="remnantItem.VariantId" v-model="chosenRemnants" name="remnants" type="checkbox" class="form__input-checkbox"> 643 <span class="form__checkbox-label-text"></span> 644 </label> 645 </div> 646 <div class="remnants__area">{{remnantItem.AvailableArea}} m<sup>2</sup></div> 647 <div class="remnants__info"> 648 <div class="remnants__info-text">{{remnantItem.RollCorners}} @Translate("Product details | Remnants | corners", "corners"), {{remnantItem.NumberOfFlaws}} <span v-html="remnantItem.NumberOfFlaws === 1 ? textProductSingular : textProductPlural"></span><span class="remnants__waste-carpet" v-if="remnantItem.IsWasteCarpet"> (@Translate("Product details | Remnants | waste carpet", "waste carpet"))</span><span v-if="remnantItem.UnitPrice">, </span><span class="remnants__unit-price" v-if="remnantItem.UnitPrice">{{remnantItem.UnitPrice}} {{remnantItem.CurrencyCode}} @Translate("Product details | Remnants | per m2", "per m2")</span></div> 649 <button class="remnants__preview" @@click="showCarpetProfile(remnantItem.ProductNumber,remnantItem.M3BatchNumber,remnantItem.M3ProductNumber)">@Translate("Product details | Remnants | Outlet | Roll profile", "Roll profile")</button> 650 @if (ProductExtensions.GetOutletPatternPDF(patternNumber) != "") 651 { 652 <a target="_blank" class="remnants__pattern-pdf" href="@ProductExtensions.GetOutletPatternPDF(patternNumber)">@Translate("Product details | Remnants | Outlet | Pattern PDF", "Pattern PDF")</a> 653 } 654 </div> 655 <div class="remnants__price">{{Number(remnantItem.Price).toLocaleString('en-GB') }} {{remnantItem.CurrencyCode}}</div> 656 </div> 657 </li> 658 <div class="remnants__additional-costs-msg" v-if="remnantItems.length > 0">@Translate("Product details | Remnants | Additional costs message", "Delivery costs will be added")</div> 659 </ul> 660 <div class="remnants__footer"> 661 <div class="remnants__show-all-holder"> 662 <button class="remnants__show-all" @@click="doShowAll" :class="{'remnants__show-all--show':showShowAll}">@Translate("Product details | Remnants | Show all", "Show all") ({{remnantItems.length}})</button> 663 </div> 664 <button @@click="addChosenToBasket" type="button" property="url" 665 class="button button--solid button--black button--wait-animation" 666 data-service="@cartOrderLinesFeedUrl" 667 v-bind:class="{'button--error':showErrorOnButton,'button--wait':showWaitAnimation}" 668 data-text="@addToBasketString"> 669 <span class="button__error-message"> 670 @Translate("Product details | Remnants | You haven't selected any products to add to basket", "You haven't selected any products to add to basket") 671 </span> 672 <span class="button__wait-animation"> 673 <span></span> 674 <span></span> 675 <span></span> 676 <span></span> 677 </span> 678 <span class="button__content"> 679 <span class="button__icon"> 680 <svg class="svg-icon button__svg"> 681 <use xlink:href="@Constants.DistPath/icons/icons.svg#samples"></use> 682 </svg> 683 </span> 684 <span class="button__text">@addToBasketString</span> 685 </span> 686 </button> 687 </div> 688 689 <div @@click="closeProfileOverlay" class="novi-backdrop novi-backdrop--hidden novi-backdrop--carpet-profile" :class="{'novi-backdrop--shown':showProfileOverlay}"> 690 <div class="novi-overlay"> 691 <div class="novi-overlay__container"> 692 <div class="novi-overlay__content" @@click="stopProp"> 693 <div class="carpet-profile"> 694 <header class="carpet-profile__header"> 695 <h2 class="subheader-in-component js-alt-color-gold"> 696 @Translate("Product details | Remnants | Error table | header | Error profile", "Error profile") 697 </h2> 698 <p v-if="currentChosenProfileIndex !== null">@Translate("Product details | Remnants | Profile overlay | For product number", "For product number"): <span v-html="remnantProfiles[currentChosenProfileIndex].M3productNumber"></span> @Translate("Product details | Remnants | Profile overlay | Batch number", "Batch number"): <span v-html="remnantProfiles[currentChosenProfileIndex].batchNumber"></span></p> 699 </header> 700 <div class="row"> 701 <div class="col-xs-12"> 702 <img class="carpet-profile__img" id='base64image' v-if="currentChosenProfileIndex !== null" 703 :src="'data:image/jpeg;base64, '+remnantProfiles[this.currentChosenProfileIndex].data.profileBase64" /> 704 <p class="carpet-profile__draw-outline" v-if="currentChosenProfileIndex !== null" v-html="remnantProfiles[this.currentChosenProfileIndex].data.profileText"></p> 705 706 <table class="carpet-profile__fault-list" v-if="currentChosenProfileIndex !== null && remnantProfiles[this.currentChosenProfileIndex].data.faults.length"> 707 <tr class="carpet-profile__fault-list-item carpet-profile__fault-list-item--header"> 708 <th class="carpet-profile__fault-list-cell carpet-profile__fault-list-cell--header">@Translate("Product details | Remnants | Error table | Error code", "Error code")</th> 709 <th class="carpet-profile__fault-list-cell carpet-profile__fault-list-cell--header">@Translate("Product details | Remnants | Error table | Error rank", "Error rank")</th> 710 <th class="carpet-profile__fault-list-cell carpet-profile__fault-list-cell--header">@Translate("Product details | Remnants | Error table | Text", "Text")</th> 711 <th class="carpet-profile__fault-list-cell carpet-profile__fault-list-cell--header">@Translate("Product details | Remnants | Error table | Width from", "Width from")</th> 712 <th class="carpet-profile__fault-list-cell carpet-profile__fault-list-cell--header">@Translate("Product details | Remnants | Error table | Width to", "Width to")</th> 713 <th class="carpet-profile__fault-list-cell carpet-profile__fault-list-cell--header">@Translate("Product details | Remnants | Error table | Length from", "Length from")</th> 714 <th class="carpet-profile__fault-list-cell carpet-profile__fault-list-cell--header">@Translate("Product details | Remnants | Error table | Length to", "Length to")</th> 715 </tr> 716 <tr class="carpet-profile__fault-list-item" v-for="fault in remnantProfiles[this.currentChosenProfileIndex].data.faults"> 717 <td data-header="@Translate("Product details | Remnants | Error table | Error code", "Error code")" class="carpet-profile__fault-list-cell" v-html="fault.reasonCode"></td> 718 <td data-header="@Translate("Product details | Remnants | Error table | Error rank", "Error rank")" class="carpet-profile__fault-list-cell" v-html="fault.errorRank"></td> 719 <td data-header="@Translate("Product details | Remnants | Error table | Text", "Text")" class="carpet-profile__fault-list-cell carpet-profile__fault-list-cell--text" v-html="fault.textForReason"></td> 720 <td data-header="@Translate("Product details | Remnants | Error table | Width from", "Width from")" class="carpet-profile__fault-list-cell" v-html="fault.brdStart"></td> 721 <td data-header="@Translate("Product details | Remnants | Error table | Width to", "Width to")" class="carpet-profile__fault-list-cell" v-html="fault.brdEnd"></td> 722 <td data-header="@Translate("Product details | Remnants | Error table | Length from", "Length from")" class="carpet-profile__fault-list-cell" v-html="fault.lgdStart"></td> 723 <td data-header="@Translate("Product details | Remnants | Error table | Length to", "Length to")" class="carpet-profile__fault-list-cell" v-html="fault.lgdEnd"></td> 724 </tr> 725 </table> 726 </div> 727 </div> 728 </div> 729 <div class="novi-overlay__close-area"> 730 <button @@click="closeProfileOverlay" class="close-button novi-overlay__close-button"> 731 <span class="close-button__icon"> 732 <svg class="svg-icon close-button__svg"> 733 <use xlink:href="@Constants.DistPath/icons/icons.svg#cross"></use> 734 </svg> 735 </span> 736 <span class="close-button__text">@Translate("Product | Sample overlay | Close", "Close")</span> 737 </button> 738 </div> 739 </div> 740 </div> 741 </div> 742 </div> 743 </div> 744 } 745 else 746 { 747 <span> 748 <div class="button-double product-details__buttons"> 749 @if (!B2cSiteActive && !string.IsNullOrWhiteSpace(Model.GetCadesignProperties().ToolUrl) && !isProductRug) 750 { 751 string firstBtnText = string.Empty; 752 string dataLayerTool = string.Empty; 753 754 if (Model.GetCadesignProperties().IsTile) 755 { 756 firstBtnText = Translate("Product | Tile", "Create your tile design"); 757 dataLayerTool = "tile tool"; 758 } 759 else if (Model.GetCadesignProperties().Recolour) 760 { 761 firstBtnText = Translate("Product | Customize", "Customize"); 762 dataLayerTool = "recolour tool"; 763 } 764 else 765 { 766 firstBtnText = Translate("Product | Visualize", "Visualize"); 767 dataLayerTool = "visualize tool"; 768 } 769 770 <script> 771 document.addEventListener('DOMContentLoaded', function () { 772 773 var button = document.getElementById("cadesign-custom-button"); 774 775 if (button) { 776 button.addEventListener('click', function (event) { 777 778 window.dataLayer = window.dataLayer || []; 779 window.dataLayer.push({ 780 "event": "tool_entry", 781 "tool": "@dataLayerTool", 782 }); 783 }); 784 } 785 }); 786 </script> 787 788 <button id="cadesign-custom-button" data-href="@Model.GetCadesignProperties().ToolUrl" @@click="openCustomizeOverlay" class="button button--ghost button--black js-customize-button" data-text="@firstBtnText"> 789 <span class="button__content"> 790 <span class="button__icon"> 791 <svg class="svg-icon button__svg"> 792 <use xlink:href="@Constants.DistPath/icons/icons.svg#magic-wand"></use> 793 </svg> 794 </span> 795 <span class="button__text">@firstBtnText</span> 796 </span> 797 <div class="product-details__hide js-customize-iframe-holder"> 798 <div class="product-details__iframe-holder"> 799 <iframe class="product-details__customize-iframe" frameborder="0"></iframe> 800 <span class="product-details__wait-animation"> 801 <span></span> 802 <span></span> 803 <span></span> 804 <span></span> 805 </span> 806 </div> 807 </div> 808 </button> 809 } 810 else if (isProductRug) 811 { 812 if (showConfigurator) 813 { 814 string firstBtnText = string.Empty; 815 firstBtnText = Translate("Product | Rug configurator", "Configure rug"); 816 <a href="@configuratorFullLink" target="_blank" class="button button--ghost button--black js-customize-button"> 817 <span class="button__content"> 818 <span class="button__icon"> 819 <svg class="svg-icon button__svg"> 820 <use xlink:href="@Constants.DistPath/icons/icons.svg#magic-wand"></use> 821 </svg> 822 </span> 823 <span class="button__text">@firstBtnText</span> 824 </span> 825 <div class="product-details__hide js-customize-iframe-holder"> 826 <div class="product-details__iframe-holder"> 827 <iframe class="product-details__customize-iframe" frameborder="0"></iframe> 828 <span class="product-details__wait-animation"> 829 <span></span> 830 <span></span> 831 <span></span> 832 <span></span> 833 </span> 834 </div> 835 </div> 836 </a> 837 } 838 } 839 840 841 else if (B2cSiteActive && !string.IsNullOrWhiteSpace(Model.GetFieldValue<string>("ProductBacking")) && !string.IsNullOrWhiteSpace(Model.GetFieldValue<string>("ProductSpecificationCode"))) 842 { 843 var prod = Dynamicweb.Ecommerce.Services.Products.GetProductByNumber(Model.GetFieldValue<string>("ProductBacking"), Model.LanguageId); 844 845 <form method="post" action="/api/specifications/getpdf" class="button-double__form"> 846 <input type="hidden" name="backingCode" value="@(Model.GetFieldValue<string>("ProductBacking"))" /> 847 <input type="hidden" name="backingName" value="@(ProductExtensions.GetProductName(product))" /> 848 <input type="hidden" name="qualityName" value="@prodCollectionName" /> 849 <input type="hidden" name="collectionCode" value="@Model.GetFieldValue("ProductCollectionCode")" /> 850 <input type="hidden" name="specificationCode" value="@(Model.GetFieldValue<string>("ProductSpecificationCode"))" /> 851 <input type="hidden" name="nationalityCode" value="@Dynamicweb.Ecommerce.Common.Context.Language.CountryCode" /> 852 <input type="hidden" name="areaId" value="@Pageview.AreaID" /> @* On the B2C site we hardcode the area id to the danish b2b site to pull the sustainability stores from there(these are defined in website settings) *@ 853 <input type="hidden" name="productName" value="@Model.Name" /> 854 <input type="hidden" name="sustainabilityChoice" value="@sustainabilityChoices" /> 855 <button type="submit" property="url" class="button button--ghost button--black" data-text="@Translate("Product details | Specifications | Download full specifications", "Download full specifications")" @@click="downloadFullSpecifications" ref="showFullSpecificationsSubmitButton"> 856 <span class="button__content"> 857 <span class="button__icon"> 858 <svg class="svg-icon button__svg"> 859 <use xlink:href="@Constants.DistPath/icons/icons.svg#arrow-down-in-circle"></use> 860 </svg> 861 </span> 862 <span class="button__text"> 863 @Translate("Product details | Specifications | Download full specifications", "Download full specifications") 864 </span> 865 </span> 866 </button> 867 </form> 868 } 869 @if (!B2cSiteActive && (variantCombinations.Any() || Model.GetRelatedGroupById("RELGRP1").Any())) 870 { 871 var nonVariantSamples = Model.GetRelatedGroupById("RELGRP1"); 872 var showSamplesVersion = ""; 873 if (variantCombinations.Any()) 874 { 875 showSamplesVersion = "showSamplesAdvanced"; 876 } 877 else if (nonVariantSamples.Any()) 878 { 879 showSamplesVersion = "showSamplesSimple"; 880 } 881 <button id="js-add-to-samples-button" type="button" class="button button--solid button--black " @@click="@showSamplesVersion" data-text="@Translate("Product | Add to samples", "Add to samples")"> 882 <span class="button__content"> 883 <span class="button__icon"> 884 <svg class="svg-icon button__svg"> 885 <use xlink:href="@Constants.DistPath/icons/icons.svg#samples"></use> 886 </svg> 887 </span> 888 <span class="button__text">@Translate("Product | Add to samples", "Add to samples")</span> 889 </span> 890 </button> 891 } 892 else if (B2cSiteActive) 893 { 894 if (IsBulkCarpets && prodCollectionName != "Geometrica Rugs") 895 { 896 var shapeOverlayBtnText = Translate("Product | See rug in room", "Se tæppet i rum"); 897 var shapeToolUrl = ProductExtensions.CadesignServiceUrl + "/rug-ui.html?prod=" + @Model.Id; 898 <button data-href="@shapeToolUrl" @@click="openCustomizeOverlay" 899 class="button button--solid button--black js-customize-button" 900 data-text="@shapeOverlayBtnText"> 901 <span class="button__content"> 902 <span class="button__icon"> 903 <svg class="svg-icon button__svg"> 904 <use xlink:href="@Constants.DistPath/icons/icons.svg#magic-wand"></use> 905 </svg> 906 </span> 907 <span class="button__text">@shapeOverlayBtnText</span> 908 </span> 909 <div class="product-details__hide js-customize-iframe-holder"> 910 <div class="product-details__iframe-holder"> 911 <iframe class="product-details__customize-iframe" frameborder="0"></iframe> 912 <span class="product-details__wait-animation"> 913 <span></span> 914 <span></span> 915 <span></span> 916 <span></span> 917 </span> 918 </div> 919 </div> 920 </button> 921 } 922 else 923 { 924 <button id="js-product-details__contact-form-link-button" @@click="scrollDown" type="button" class="button button--solid button--black " data-text="@Translate("Product | B2C Kontakt Os Knap", "B2C Kontakt Os Knap")"> 925 <span class="button__content"> 926 <span class="button__icon"> 927 <svg class="svg-icon button__svg"> 928 <use xlink:href="@Constants.DistPath/icons/icons.svg#contact"></use> 929 </svg> 930 </span> 931 <span class="button__text">@Translate("Product | B2C Kontakt Os Knap", "B2C Kontakt Os Knap")</span> 932 </span> 933 </button> 934 } 935 } 936 @if (!B2cSiteActive) 937 { 938 <div class="product-details__contact-form-link"> 939 <span class="product-details__contact-form-link-left">@Translate("Product | Do you need help", "Do you need help?")</span> 940 <span class="product-details__contact-form-link-right"> 941 <button type="button" id="js-product-details__contact-form-link-button" class="product-details__contact-form-link-button" @@click="scrollDown"> 942 @Translate("Product | Contact us", "Contact us") 943 <span class="product-details__contact-form-link-arrow"> 944 <svg class="svg-icon product-details__contact-form-link-arrow-svg"> 945 <use xlink:href="@Constants.DistPath/icons/icons.svg#arrow"></use> 946 </svg> 947 </span> 948 </button> 949 </span> 950 </div> 951 } 952 else if (B2cSiteActive && !string.IsNullOrEmpty(prodB2CCollectionLink)) 953 { 954 <div class="product-details__contact-form-link product-details__contact-form-link--b2c"> 955 <a href="@prodB2CCollectionLink" type="button" class="product-details__contact-form-link-button"> 956 @Translate("Product | B2C Se vores Priser", "Se vores priser her!") 957 <span class="product-details__contact-form-link-arrow product-details__contact-form-link-arrow--b2c"> 958 <svg class="svg-icon product-details__contact-form-link-arrow-svg"> 959 <use xlink:href="@Constants.DistPath/icons/icons.svg#arrow"></use> 960 </svg> 961 </span> 962 </a> 963 </div> 964 } 965 </div> 966 </span> 967 <div> 968 @TemplateHelper.RenderPartial("Ecom/Partials/Details_SelectedSamplesOverlay.cshtml") 969 @TemplateHelper.RenderPartial("Ecom/Partials/Details_AddToSamples.cshtml", Model) 970 </div> 971 } 972 </div> 973 </div> 974 975 </div> 976 </section> 977 978 if (isOutletSite) 979 { 980 981 } 982 else if (B2cSiteActive) 983 { 984 @TemplateHelper.RenderPartial("Ecom/Partials/Details_B2CGuidesAndImages.cshtml", Model) 985 } 986 else 987 { 988 if (isProductRug) 989 { 990 @TemplateHelper.RenderPartial("Ecom/Partials/Details_RugShapeAndFinishingTypes.cshtml", Model) 991 @TemplateHelper.RenderPartial("Ecom/Partials/Details_DesignerInformation.cshtml", Model) 992 993 } 994 else 995 { 996 @TemplateHelper.RenderPartial("Ecom/Partials/Details_B2BGuidesAndImages.cshtml", Model) 997 } 998 999 @TemplateHelper.RenderPartial("Ecom/Partials/Details_SpecificationsAndHighlights.cshtml", Model) 1000 1001 } 1002 1003 1004 @helper CircleBackLogo() 1005 { 1006 <div class="product-details__circle-back-overlay-container"> 1007 <div class="product-details__circle-back-overlay"> 1008 <div class="product-details__circle-back-overlay--img-container"> 1009 <img class="product-details__circle-back-overlay--img" src="@ImageUiFormatHelper.Format("/Files/Files/Images/CircleBack/Ege_Circular_Black.png", 123, 136)" height="123" width="136" /> 1010 </div> 1011 </div> 1012 </div> 1013 } 1014 } 1015

Wollen Sie mehr erfahren?

Warenkorb