1 @inherits Co3.Espresso.Website.TemplateBases.Paragraphs.Module
2 @using System.Web
3 @using Co3.Espresso.Base.Extensions
4 @using Co3.Espresso.Base.Models
5 @using Co3.Espresso.Website.Services
6 @using Co3.Espresso.Website.Models.FrontEnd
7 @using Co3.Espresso.Website.Models.FrontEnd.Settings
8 @using Co3.Espresso.Website.Models.FrontEnd.Ecommerce
9 @using Co3.Espresso.Website.Models.FrontEnd.Handlebars
10 @using Co3.Theca.Website.Models.Frontend.Ecommerce
11 @using Dynamicweb.Ecommerce
12 @using Dynamicweb.Ecommerce.Common
13 @using Dynamicweb.Ecommerce.Products
14 @using Dynamicweb.Ecommerce.Products.Categories
15 @using Dynamicweb.Ecommerce.Products.FieldDisplayGroups
16 @using Dynamicweb.Security.UserManagement
17 @using ProductService = Co3.Espresso.Website.Services.ProductService
18 19 20 @{
21 22 bool isUserAuthenticated = User.IsExtranetUserLoggedIn();
23 24 ThecaProduct espressoProduct = ( ThecaProduct ) ProductService.Instance.GetEspressoProduct(
25 new ProductSettings()
26 {
27 Id = GetString( "Ecom:Product.ID" ),
28 VariantId = GetString( "Ecom:Product.VariantID" ),
29 PrimaryVariantId = GetString( "Ecom:Product.DefaultVariantComboID" )
30 }
31 );
32 33 Product dwProduct = ProductService.Instance.GetProductById( GetString( "Ecom:Product.ID" ), GetString( "Ecom:Product.VariantID" ), false );
34 35 // Add auto generated relation groups fra Dynamicweb to RelatedGroups dictionary, in order to access them the same way, as the custom related product groups.
36 // espressoProduct.RelatedGroups.Add( espressoProduct.WhatAboutTheseProducts.Id, espressoProduct.WhatAboutTheseProducts );
37 // espressoProduct.RelatedGroups.Add( espressoProduct.CustomersWhoSawThisAlsoSaw.Id, espressoProduct.CustomersWhoSawThisAlsoSaw );
38 // espressoProduct.RelatedGroups.Add( espressoProduct.CustomersWhoBoughtThisItemAlsoBought.Id, espressoProduct.CustomersWhoBoughtThisItemAlsoBought );
39 // espressoProduct.RelatedGroups.Add( espressoProduct.YouHaveSeenTheseProducts.Id, espressoProduct.YouHaveSeenTheseProducts );
40 41 string howItWorksPage = Espresso.Page.Area.Item[ "EcommerceHowToOrderPage" ]?.ToString();
42 43 // Related product groups are rendered in this order.
44 string[] relatedGroupIds =
45 {
46 "similarproducts"
47 };
48 }
49 50 @RenderingService.Instance.SectionEnd()
51 52 <section class="e-product js-e-product js-e-product-item-@espressoProduct.Id" data-isUserAuthenticated="@isUserAuthenticated" data-product-id="@espressoProduct.Id" data-has-variants="@espressoProduct.HasVariants.ToString().ToLower()" data-variant-id="@espressoProduct.VariantId">
53 54 @RenderingService.Instance.SectionStart( new SectionSettings
55 {
56 Classes = new ClassList( "e-section pb-1" ),
57 ContentClasses = new ClassList( "col-12 col-xl-8" )
58 } )
59 @RenderingService.Instance.PartialView( "ecom/product/partials/theca-product-header.cshtml", espressoProduct )
60 @RenderingService.Instance.SectionEnd()
61 62 @RenderingService.Instance.SectionStart( new SectionSettings
63 {
64 Classes = new ClassList( "e-section pb-2" ),
65 ContentClasses = new ClassList( "col-12" )
66 } )
67 <div class="col-12">
68 <div class="row">
69 <div class="col-12 col-lg-5 col-xl-4 pb-4">
70 <div class="e-product-text-container border border-dark p-2">
71 72 @RenderingService.Instance.PartialView( "ecom/product/partials/theca-variant-matrix.cshtml", espressoProduct )
73 74 </div>
75 </div>
76 <div class="col-12 col-lg-7 col-xl-8 order-first">
77 78 @RenderingService.Instance.PartialView( "ecom/product/partials/images.cshtml", espressoProduct )
79 80 </div>
81 </div>
82 </div>
83 @RenderingService.Instance.SectionEnd()
84 85 @RenderingService.Instance.PartialView( "ecom/product/partials/theca-product-description.cshtml", espressoProduct )
86 87 @{
88 string jsonSrc = "/system/data/product";
89 string jsonSrcGetParams = HttpUtility.HtmlAttributeEncode( JsonService.Instance.ToJson( new Dictionary< string, string >
90 {
91 {"productId", espressoProduct.Id},
92 {"variantId", espressoProduct.VariantId}
93 } ) );
94 }
95 <section class="e-section border-top py-3 e-section-collapse" id="specifications">
96 <div class="js-e-jsonpublisher js-theca-specifications container-fluid" data-json-src="@jsonSrc" data-json-src-get-params="@jsonSrcGetParams" data-template=".js-e-handlebars-tmpl-theca-specifications" data-template-helpers="counter compare">
97 98 <div class="row">
99 <div class="col-12 col-xl-10 mx-auto e-section-collapse-toggle collapsed order-last text-center" data-toggle="collapse" data-target="#specifactions-collapse">
100 <button class="btn btn-primary e-section-collapse-toggle-btn" type="button">
101 <i class="material-icons e-section-collapse-toggle-icon">keyboard_arrow_down</i>
102 </button><small class="h4 e-section-collapse-toggle-text" data-expand-text="Show more" data-collapse-text="Show less"></small>
103 </div>
104105 <div class="col-12 col-lg-7 px-3 mx-auto e-section-collapse-content collapse is-lg" id="specifactions-collapse">
106 <div class="row">
107108 <h2 class="col-12 text-center mb-0">@Translate( "eCom Product - Specifications - Heading", "Specifications" )</h2>
109 <p class="col-12 small text-center text-muted mb-2">@Translate("eCom Product - Specifications Disclaimer Measurement - Text", "+-3% på alle de angivne mål på produktet.")</p>
110 <div class="col-12 mb-3 px-2">
111 <h3 class="col-12 e-product-name mb-2">@Translate( "eCom Product - FieldDisplayGroups - Fabric", "Fabric" )</h3>
112 <table class="table table-sm">
113 @if ( espressoProduct.Fabric.Count > 0 )
114 {
115 foreach ( FieldDisplayGroupItem fabric in espressoProduct.Fabric )
116 {
117 <tr>
118 <th style="width: 50%">
119120 @fabric.Label
121 </th>
122 <td>
123 @fabric.Value
124 </td>
125 </tr>
126 }
127 }
128129 @{
130 string translateKeyFabricDescription = string.Format( "eCom Product - Fabric Description - {0} - Text", espressoProduct.ColorFamily );
131 string fabricDescriptionLabel = Translate( "eCom Product - FieldDisplayGroups - Description" );
132 string fabricDescriptionValue = Translate( translateKeyFabricDescription, espressoProduct.ColorFamily );
133 }
134135 <tr>
136 <th style="width: 50%">
137 @fabricDescriptionLabel
138 </th>
139 <td>
140 @fabricDescriptionValue
141 </td>
142 </tr>
143 </table>
144 </div>
145146 @if ( espressoProduct.LegsFeets.Count > 0 )
147 {
148 <div class="col-12 mb-3 px-2">
149150 <h3 class="col-12 e-product-name mb-2">@Translate( "eCom Product - FieldDisplayGroups - Legs & Feets", "Legs & Feets" )</h3>
151 <table class="table table-sm">
152 @foreach ( FieldDisplayGroupItem legsFeet in espressoProduct.LegsFeets )
153 {
154 <tr>
155 <th style="width: 50%">
156157 @legsFeet.Label
158 </th>
159 <td>
160 @legsFeet.Value
161 </td>
162 </tr>
163 }
164 </table>
165 </div>
166 }
167168 @if ( espressoProduct.Description.Count > 0 )
169 {
170 <div class="col-12 mb-3 px-2">
171172 <h3 class="col-12 e-product-name mb-2">@Translate( "eCom Product - FieldDisplayGroups - Description", "Description" )</h3>
173 <table class="table table-sm">
174 @foreach ( FieldDisplayGroupItem description in espressoProduct.Description )
175 {
176 <tr>
177 <th style="width: 50%">
178 @description.Label
179 </th>
180 <td>
181 @description.Value
182 </td>
183 </tr>
184 }
185 </table>
186 </div>
187 }
188189 @if ( espressoProduct.Logistics.Count > 0 )
190 {
191 <div class="col-12 mb-3 px-2">
192193 <h3 class="col-12 e-product-name mb-2">@Translate( "eCom Product - FieldDisplayGroups - Logistics", "Logistics" )</h3>
194 <table class="table table-sm">
195 @foreach ( FieldDisplayGroupItem logistic in espressoProduct.Logistics )
196 {
197 <tr>
198 <th style="width: 50%">
199 @logistic.Label
200 </th>
201 <td>
202 @logistic.Value
203 </td>
204 </tr>
205 }
206 </table>
207 </div>
208 }
209210 </div>
211 </div>
212 </div>
213214 <script class="js-e-handlebars-tmpl-theca-specifications" type="text/x-handlebars-template">
215 <div class="row">
216 <div class="col-12 col-xl-10 mx-auto e-section-collapse-toggle collapsed order-last text-center" data-toggle="collapse" data-target="#specifactions-collapse">
217 <button class="btn btn-primary e-section-collapse-toggle-btn" type="button">
218 <i class="material-icons e-section-collapse-toggle-icon">keyboard_arrow_down</i>
219 </button>
220 <small class="h4 e-section-collapse-toggle-text" data-expand-text="Show more" data-collapse-text="Show less"></small>
221 </div>
222 <div class="col-12 col-lg-7 px-3 mx-auto e-section-collapse-content collapse is-lg" id="specifactions-collapse">
223 <div class="row">
224 <h2 class="col-12 text-center mb-0">@Translate( "eCom Product - Specifications - Heading", "Specifications" )</h2>
225 <p class="col-12 small text-center text-muted mb-2">@Translate("eCom Product - Specifications Disclaimer Measurement - Text", "+-3% på alle de angivne mål på produktet.")</p>
226 {{#if specifications.fabrics.length}}
227 <div class="col-12 mb-3 px-2">
228 <h3 class="col-12 e-product-name mb-2">@Translate( "eCom Product - FieldDisplayGroups - Fabric", "Fabric" )</h3>
229 <table class="table table-sm">
230 {{#each specifications.fabrics}}
231 <tr>
232 <th style="width: 50%">
233 {{{Label}}}
234 </th>
235 <td>
236 {{{Value}}}
237 </td>
238 </tr>
239 {{/each}}
240 </table>
241 </div>
242 {{/if}}
243244 {{#if specifications.legsFeets.length}}
245 <div class="col-12 mb-3 px-2">
246 <h3 class="col-12 e-product-name mb-2">@Translate( "eCom Product - FieldDisplayGroups - Legs & Feets", "Legs & Feets" )</h3>
247 <table class="table table-sm">
248 {{#each specifications.legsFeets}}
249 <tr>
250 <th style="width: 50%">
251 {{{Label}}}
252 </th>
253 <td>
254 {{{Value}}}
255 </td>
256 </tr>
257 {{/each}}
258 </table>
259 </div>
260 {{/if}}
261262 {{#if specifications.description.length}}
263 <div class="col-12 mb-3 px-2">
264 <h3 class="col-12 e-product-name mb-2">@Translate( "eCom Product - FieldDisplayGroups - Description", "Description" )</h3>
265 <table class="table table-sm">
266 {{#each specifications.description}}
267 <tr>
268 <th style="width: 50%">
269 {{{Label}}}
270 </th>
271 <td>
272 {{{Value}}}
273 </td>
274 </tr>
275 {{/each}}
276 </table>
277 </div>
278 {{/if}}
279280 {{#if specifications.logistics.length}}
281 <div class="col-12 mb-3 px-2">
282 <h3 class="col-12 e-product-name mb-2">@Translate( "eCom Product - FieldDisplayGroups - Logistics", "Logistics" )</h3>
283 <table class="table table-sm">
284 {{#each specifications.logistics}}
285 <tr>
286 <th style="width: 50%">
287 {{{Label}}}
288 </th>
289 <td>
290 {{{Value}}}
291 </td>
292 </tr>
293 {{/each}}
294 </table>
295 </div>
296 {{/if}}
297298 </div>
299 </div>
300 </div>
301 </script>
302 </div>
303 </section>
304305306 @if ( espressoProduct.RelatedGroups[ "similarproducts" ].Products.Any() )
307 {
308 @RenderingService.Instance.SectionStart( new SectionSettings
309 {
310 Classes = new ClassList( "e-section pb-2 border-top pt-3" ),
311 ContentClasses = new ClassList( "col-12" )
312 } )
313 <div class="col-12">
314 <div class="e-productlist">
315 <div class="e-productlist-header">
316 <p class="h2 mb-2 text-center">@Translate( "eCom Product - Related group - SimilarItems - Heading", "Similar items" )</p>
317 </div>
318 <div class="e-productlist-main">
319 <div class="row">
320 <div class="col-12">
321 <div class="e-productlist">
322323 <div class="row justify-content-center">
324 @{
325 foreach ( EspressoProduct product in espressoProduct.RelatedGroups[ "similarproducts" ].Products.Take( 3 ) )
326 {
327 EspressoProduct primaryVariant = new EspressoProduct();
328 if ( product.IsVariantMaster )
329 {
330 Dynamicweb.Ecommerce.Products.Product dwMainProduct = new ProductService().GetProductById( product.Id, string.Empty, false );
331 primaryVariant = Co3.Espresso.Website.Services.ProductService.Instance.GetEspressoProduct( new ProductSettings()
332 {
333 Id = product.Id,
334 VariantId = dwMainProduct.DefaultVariantComboId,
335 PrimaryVariantId = dwMainProduct.DefaultVariantComboId,
336 EmbeddedInModelList = true
337 } );
338 }
339 else
340 {
341 primaryVariant = product;
342 }
343344 <div class="@ProductListService.Instance.GetItemClasses()">
345 @RenderingService.Instance.PartialView( "ecom/productlist/partials/item.cshtml", ( ThecaProduct ) primaryVariant )
346 </div>
347 }
348 }
349350 </div>
351352 </div>
353 </div>
354 </div>
355 </div>
356357358 </div>
359 </div>
360 @RenderingService.Instance.SectionEnd()
361 }
362363 @RenderingService.Instance.PartialView( "ecom/product/partials/metadata.cshtml", espressoProduct )
364 @RenderingService.Instance.PartialView( "ecom/product/partials/gtm-tracking.cshtml", espressoProduct )
365366 <code class="js-e-breadcrumb-item-append" data-text="@HttpUtility.HtmlAttributeEncode( espressoProduct.Name )" data-link="@HttpUtility.HtmlAttributeEncode( espressoProduct.Link )"></code>
367368 <script>
369 e4.data.set('@( espressoProduct.Id )_VariantCombinationTree',
370 JSON.parse(
371 '@HttpUtility.JavaScriptStringEncode( JsonService.Instance.ToJson( espressoProduct.VariantCombinationTree ) )'));
372 e4.data.set('@( espressoProduct.Id )_VariantCombinationIds',
373 JSON.parse(
374 '@HttpUtility.JavaScriptStringEncode( JsonService.Instance.ToJson( espressoProduct.VariantCombinations.Keys ) )'));
375 </script>
376377 </div>
378 @RenderingService.Instance.SectionStart( new SectionSettings() )
379380 <!-- How it works Modal -->
381382 <div aria-hidden="true" aria-labelledby="howItWorksModalLabel" class="fade modal" id="howItWorksModal" role="dialog" tabindex="-1">
383 <div class="modal-dialog" role="document">
384 <div class="modal-content">
385 <div class="modal-header">
386 <a class="arrow-left" data-dismiss="modal" aria-label="Close">@Translate( "eCom Product - Back to overview - Link", "Back to overview" )</a>
387 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
388 <span aria-hidden="true">×</span>
389 </button>
390 </div>
391 <div class="modal-body row p-6">
392 @if ( !string.IsNullOrEmpty( howItWorksPage ) )
393 {
394 @RenderPageContent( int.Parse( howItWorksPage ) )
395 }
396 </div>
397 </div>
398 </div>
399 </div>
400 