1 @using Co3.EldoradoIndsalg.Website.Frontend.Models.Frontend.Ecommerce
2 @using Co3.Espresso.Website.Models.FrontEnd
3 @using Co3.Espresso.Website.Models.FrontEnd.Ecommerce
4 @using Co3.Espresso.Website.Models.FrontEnd.Settings
5 @using Co3.Espresso.Website.Services
6 @using ProductService = Co3.Espresso.Website.Services.ProductService
7 @using System.Web
8 @using Co3.Espresso.Base.Extensions
9 @using Co3.Espresso.Base.Models
10 @using Dynamicweb.Frontend
11 @inherits Co3.Espresso.Website.TemplateBases.Paragraphs.Module
12 13 @{
14 EldoradoProduct espressoProduct = ( EldoradoProduct )ProductService.Instance.GetEspressoProduct(
15 new ProductSettings
16 {
17 Id = GetString( "Ecom:Product.ID" ),
18 VariantId = GetString( "Ecom:Product.VariantID" ),
19 PrimaryVariantId = GetString( "Ecom:Product.DefaultVariantComboID" ),
20 EmbeddedInModelList = false
21 }
22 );
23 24 string jsonSrc = "/system/data/product";
25 string jsonSrcGetParams = HttpUtility.HtmlAttributeEncode( JsonService.Instance.ToJson( new Dictionary< string, string >
26 {
27 { "productId", espressoProduct.Id },
28 { "variantId", espressoProduct.VariantId }
29 } ) );
30 31 string canonicalUrl = SearchEngineFriendlyURLs.GetFriendlyUrl(GetString("Ecom:Product.Link.Clean"));
32 }
33 34 @RenderingService.Instance.SectionEnd()
35 36 <div class="e-product js-e-product mt-0" data-has-variants="@espressoProduct.HasVariants.ToString().ToLower()" data-product-id="@espressoProduct.Id" data-variant-id="@espressoProduct.VariantId">
37 38 @RenderingService.Instance.SectionStart( new SectionSettings
39 {
40 Classes = new ClassList( "e-section" )
41 } )
42 <div class="col-12">
43 <div class="row">
44 <div class="col-12 mb-1">
45 @RenderingService.Instance.PartialView( "ecom/product/partials/part-breadcrumb.cshtml", espressoProduct)
46 </div>
47 </div>
48 <div class="row">
49 <div class="col-12 col-md-4">
50 <div>
51 <div class="e-product-text-container">
52 53 <div class="js-eldorado-partial-add-to-cart">
54 @RenderingService.Instance.PartialView( "ecom/product/partials/part-product-price-info.cshtml", espressoProduct )
55 </div>
56 <div class="row mt-1">
57 <div class="col">
58 <p class="small">Brand:</p>
59 </div>
60 <div class="col text-right">
61 <h3>@espressoProduct.Brands</h3>
62 </div>
63 </div>
64 65 @if ( espressoProduct.Videos.Any() )
66 {
67 <div class="row mt-1">
68 <div class="col-12">
69 <p class="m-0 mb-1 small">Video(s)</p>
70 </div>
71 <div class="col-12 d-flex">
72 @foreach ( ElementWithIndex< EldoradoVideoItem > video in espressoProduct.Videos.WithIndex() )
73 {
74 <a href="#" data-toggle="modal" data-target="#eldorado-video-@(video.Index)-modal" class="eldorado-video-thumb-container position-relative" style="background-image: url('@video.Element.Thumb')"></a>
75 }
76 </div>
77 </div>
78 }
79 @*
80 TODO: Show dealer button again when data is ready
81 <a href="@SearchEngineFriendlyURLs.GetFriendlyUrl(GetPageIdByNavigationTag("PageFindDealer"))" class="mt-4 btn btn-primary btn-sm">@Translate("Find forhandler", "Find forhandler")</a>
82 *@
83 </div>
84 </div>
85 </div>
86 87 <div class="col-12 col-md-8 order-first pt-2 pt-md-0 js-eldorado-partial-part-images">
88 @RenderingService.Instance.PartialView( "ecom/product/partials/part-images.cshtml", espressoProduct )
89 </div>
90 91 </div>
92 </div>
93 94 @RenderingService.Instance.SectionEnd()
95 96 97 @RenderingService.Instance.SectionStart( new SectionSettings
98 {
99 Classes = new ClassList( "e-section" )
100 } )
101102 <div class="col-12">
103 <div class="container-fluid px-0 py-2">
104 <div class="row">
105 <div class="col-12 col-lg-8 eldorado-custom-offset">
106 <div class="row">
107 @foreach (string usp in espressoProduct.USPs.Take(6) )
108 {
109 <div class="col-12 col-md-4">
110 <p class="btn btn-link d-flex p-0 text-left">
111 @ImageService.Instance.GetSvgMarkup("/Files/Images/icons/01-Interface Essential/33-Form-Validation/check-1.svg")
112 @usp
113 </p>
114 </div>
115 }
116 </div>
117 </div>
118 </div>
119 </div>
120 </div>
121122 @RenderingService.Instance.SectionEnd()
123124125 @RenderingService.Instance.SectionStart( new SectionSettings
126 {
127 Classes = new ClassList( "e-section pb-2" )
128 } )
129130131 <div class="col-12 ">
132 <div class="container-fluid e-theme-light px-4 px-lg-0 pt-4 pb-3">
133 <div class="row">
134135 <div class="col-12 col-lg-9 eldorado-custom-offset js-eldorado-partial-part-description">
136 @RenderingService.Instance.PartialView( "ecom/product/partials/part-description.cshtml", espressoProduct )
137 </div>
138 <div class="col-12 col-lg-3 js-eldorado-partial-part-specifications">
139 @RenderingService.Instance.PartialView( "ecom/product/partials/part-specifications.cshtml", espressoProduct )
140 </div>
141 @*<div class="col-6 col-lg-2 pr-lg-4 js-eldorado-partial-part-downloads">
142 @RenderingService.Instance.PartialView( "ecom/product/partials/part-downloads.cshtml", espressoProduct )
143 </div>*@
144145 </div>
146 </div>
147 </div>
148149 @RenderingService.Instance.SectionEnd()
150151152 @RenderingService.Instance.PartialView( "ecom/product/partials/modal-ordermatrix.cshtml", espressoProduct )
153 @RenderingService.Instance.PartialView( "ecom/product/partials/part-product-matrix-cart.cshtml", espressoProduct )
154 @RenderingService.Instance.PartialView( "ecom/product/partials/metadata.cshtml", espressoProduct )
155 @RenderingService.Instance.PartialView( "ecom/product/partials/gtm-tracking.cshtml", espressoProduct )
156157158159160161 @RenderingService.Instance.SectionStart( new SectionSettings
162 {
163 Classes = new ClassList( "e-section pb-2" )
164 } )
165166167 @{
168 foreach (KeyValuePair< string, EspressoProductList > relatedGroup in espressoProduct.RelatedGroups )
169 {
170 @RenderingService.Instance.PartialView( "ecom/product/partials/related-products.cshtml", relatedGroup.Value)
171 }
172 }
173174 @RenderingService.Instance.SectionEnd()
175176 <code class="js-e-breadcrumb-item-append" data-link="@HttpUtility.HtmlAttributeEncode( espressoProduct.Link )" data-text="@HttpUtility.HtmlAttributeEncode( espressoProduct.Name )"></code>
177178 <script>
179 e4.data.set( '@( espressoProduct.Id )_VariantCombinationTree', JSON.parse('@HttpUtility.JavaScriptStringEncode( JsonService.Instance.ToJson( espressoProduct.VariantCombinationTree ) )') );
180 e4.data.set( '@( espressoProduct.Id )_VariantCombinationIds', JSON.parse('@HttpUtility.JavaScriptStringEncode( JsonService.Instance.ToJson( espressoProduct.VariantCombinations.Keys ) )') );
181 var videoDataSet = @JsonService.Instance.ToJson(espressoProduct.Videos);
182 </script>
183184 @{
185 if (espressoProduct.Videos.Any() )
186 {
187 bool vimeoScriptIncluded = false;
188 bool youtubeScriptIncluded = false;
189 foreach (ElementWithIndex< EldoradoVideoItem > video in espressoProduct.Videos.WithIndex() )
190 {
191 if (video.Element.Provider == "vimeo" && vimeoScriptIncluded == false )
192 {
193 vimeoScriptIncluded = true;
194 <script src="https://player.vimeo.com/api/player.js"></script>
195 }
196197 if (video.Element.Provider == "youtube" && youtubeScriptIncluded == false )
198 {
199 youtubeScriptIncluded = true;
200 <script src="https://www.youtube.com/iframe_api"></script>
201 }
202203 if ( video.Element.Provider == "vimeo" )
204 {
205 <div class="modal js-eldorado-video-modal" data-provider="@video.Element.Provider" data-videoid="@video.Element.VideoId" id="eldorado-video-@(video.Index)-modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
206 <div class="modal-dialog" role="document">
207 <div class="modal-content">
208 <div class="modal-body m-0 p-0" style="font-size: 0;">
209 <div class="embed-responsive embed-responsive-16by9">
210 <iframe class="js-eldorado-video-iframe embed-responsive-item" src="@(video.Element.Path)" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
211 </div>
212 </div>
213 </div>
214 </div>
215 </div>
216 }
217218 if ( video.Element.Provider == "youtube" )
219 {
220 <div class="modal js-eldorado-video-modal" data-provider="@video.Element.Provider" data-videoid="@video.Element.VideoId" id="eldorado-video-@(video.Index)-modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
221 <div class="modal-dialog" role="document">
222 <div class="modal-content">
223 <div class="modal-body m-0 p-0" style="font-size: 0;">
224 <div class="embed-responsive embed-responsive-16by9">
225 <iframe class="js-eldorado-video-iframe embed-responsive-item" src="@video.Element.Path" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
226 </div>
227 </div>
228 </div>
229 </div>
230 </div>
231 }
232 }
233 }
234 }
235236 @*if( !string.IsNullOrEmpty( espressoProduct.VimeoVideoID ) )
237 {
238 <script src="https://player.vimeo.com/api/player.js"></script>
239 <div class="modal js-eldorado-video-modal" id="eldorado-video-modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
240 <div class="modal-dialog" role="document">
241 <div class="modal-content">
242 <div class="modal-body m-0 p-0" style="font-size: 0;">
243 <div class="embed-responsive embed-responsive-16by9">
244 <iframe class="embed-responsive-item" src="@(espressoProduct.VimeoVideo)" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
245 </div>
246 </div>
247 </div>
248 </div>
249 </div>
250 }*@
251252 @if( espressoProduct.SizeguideDetails.Any() )
253 {
254 <div class="modal js-eldorado-sizeguide-modal" id="eldorado-sizeguide-modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
255 <div class="modal-dialog" role="document">
256 <div class="modal-content">
257 <div class="modal-body m-0 p-0" style="font-size: 0;">
258 <img src="@espressoProduct.SizeguideDetails.First().Large" class="w-100" />
259 </div>
260 </div>
261 </div>
262 </div>
263 }
264265 @RenderingService.Instance.SectionStart( new SectionSettings() )
266267 @SnippetStart("ProductCanonical")
268 <link rel="canonical" href="@canonicalUrl" />
269 @SnippetEnd("ProductCanonical")
