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 Co3.Theca.Website.Services
12 @using Dynamicweb.Ecommerce
13 @using Dynamicweb.Ecommerce.Common
14 @using Dynamicweb.Ecommerce.Products
15 @using Dynamicweb.Ecommerce.Products.Categories
16 @using Dynamicweb.Ecommerce.Products.FieldDisplayGroups
17 @using Dynamicweb.Security.UserManagement
18 @using ProductService = Co3.Espresso.Website.Services.ProductService
19 20 21 @{
22 23 bool isUserAuthenticated = User.IsExtranetUserLoggedIn();
24 25 ThecaProduct espressoProduct = ( ThecaProduct ) ProductService.Instance.GetEspressoProduct(
26 new ProductSettings()
27 {
28 Id = GetString( "Ecom:Product.ID" ),
29 VariantId = GetString( "Ecom:Product.VariantID" ),
30 PrimaryVariantId = GetString( "Ecom:Product.DefaultVariantComboID" )
31 }
32 );
33 34 Product dwProduct = ProductService.Instance.GetProductById( GetString( "Ecom:Product.ID" ), GetString( "Ecom:Product.VariantID" ), false );
35 36 // Add auto generated relation groups fra Dynamicweb to RelatedGroups dictionary, in order to access them the same way, as the custom related product groups.
37 // espressoProduct.RelatedGroups.Add( espressoProduct.WhatAboutTheseProducts.Id, espressoProduct.WhatAboutTheseProducts );
38 // espressoProduct.RelatedGroups.Add( espressoProduct.CustomersWhoSawThisAlsoSaw.Id, espressoProduct.CustomersWhoSawThisAlsoSaw );
39 // espressoProduct.RelatedGroups.Add( espressoProduct.CustomersWhoBoughtThisItemAlsoBought.Id, espressoProduct.CustomersWhoBoughtThisItemAlsoBought );
40 // espressoProduct.RelatedGroups.Add( espressoProduct.YouHaveSeenTheseProducts.Id, espressoProduct.YouHaveSeenTheseProducts );
41 42 string howItWorksPage = Espresso.Page.Area.Item[ "EcommerceHowToOrderPage" ]?.ToString();
43 44 // Related product groups are rendered in this order.
45 string[] relatedGroupIds =
46 {
47 "similarproducts"
48 };
49 bool regularProduct = string.IsNullOrEmpty( espressoProduct.VariantId );
50 }
51 52 @RenderingService.Instance.SectionEnd()
53 54 <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">
55 56 @RenderingService.Instance.SectionStart( new SectionSettings
57 {
58 Classes = new ClassList( "e-section pb-1" ),
59 ContentClasses = new ClassList( "col-12 col-xl-8" )
60 } )
61 @RenderingService.Instance.PartialView( "ecom/product/partials/theca-product-header.cshtml", espressoProduct )
62 @RenderingService.Instance.SectionEnd()
63 64 @RenderingService.Instance.SectionStart( new SectionSettings
65 {
66 Classes = new ClassList( "e-section pb-2" ),
67 ContentClasses = new ClassList( "col-12" )
68 } )
69 <div class="col-12">
70 <div class="row">
71 <div class="col-12 col-lg-5 col-xl-4 pb-4">
72 <div class="e-product-text-container border border-dark p-2">
73 @RenderingService.Instance.PartialView( "ecom/product/partials/theca-variant-matrix.cshtml", espressoProduct )
74 </div>
75 </div>
76 <div class="col-12 col-lg-7 col-xl-8 order-first">
77 @RenderingService.Instance.PartialView("ecom/product/partials/cylindo-viewer.cshtml", espressoProduct)
78 @RenderingService.Instance.PartialView("ecom/product/partials/images.cshtml", espressoProduct)
79 </div>
80 </div>
81 </div>
82 @RenderingService.Instance.SectionEnd()
83 84 @RenderingService.Instance.PartialView( "ecom/product/partials/theca-product-description.cshtml", espressoProduct )
85 86 @{
87 string jsonSrc = "/system/data/product";
88 string jsonSrcGetParams = HttpUtility.HtmlAttributeEncode( JsonService.Instance.ToJson( new Dictionary< string, string >
89 {
90 {"productId", espressoProduct.Id},
91 {"variantId", espressoProduct.VariantId}
92 } ) );
93 }
94 <section class="e-section border-top py-3 e-section-collapse" id="specifications">
95 <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">
96 97 <div class="row">
98 <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">
99 <button class="btn btn-primary e-section-collapse-toggle-btn" type="button">
100 <i class="material-icons e-section-collapse-toggle-icon">keyboard_arrow_down</i>
101 </button><small class="h4 e-section-collapse-toggle-text" data-expand-text="Show more" data-collapse-text="Show less"></small>
102 </div>
103104 <div class="col-12 col-lg-7 px-3 mx-auto e-section-collapse-content collapse is-lg" id="specifactions-collapse">
105 <div class="row">
106107 <h2 class="col-12 text-center mb-0">@Translate( "eCom Product - Specifications - Heading", "Specifications" )</h2>
108 <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>
109 <div class="col-12 mb-3 px-2">
110 <h3 class="col-12 e-product-name mb-2">@Translate( "eCom Product - FieldDisplayGroups - Fabric", "Fabric" )</h3>
111 <table class="table table-sm">
112 @if ( espressoProduct.Fabric.Count > 0 )
113 {
114 foreach ( FieldDisplayGroupItem fabric in espressoProduct.Fabric.Where(f => !string.IsNullOrEmpty(f.Value)) )
115 {
116 <tr>
117 <th style="width: 50%">
118119 @fabric.Label
120 </th>
121 <td>
122 @fabric.Value
123 </td>
124 </tr>
125 }
126 }
127128 </table>
129 </div>
130131 @if ( espressoProduct.LegsFeets.Count > 0 )
132 {
133 <div class="col-12 mb-3 px-2">
134135 <h3 class="col-12 e-product-name mb-2">@Translate( "eCom Product - FieldDisplayGroups - Legs & Feets", "Legs & Feets" )</h3>
136 <table class="table table-sm">
137 @foreach ( FieldDisplayGroupItem legsFeet in espressoProduct.LegsFeets.Where(f => !string.IsNullOrEmpty(f.Value)) )
138 {
139 <tr>
140 <th style="width: 50%">
141142 @legsFeet.Label
143 </th>
144 <td>
145 @legsFeet.Value
146 </td>
147 </tr>
148 }
149 </table>
150 </div>
151 }
152153 @if ( espressoProduct.Description.Count > 0 )
154 {
155 <div class="col-12 mb-3 px-2">
156157 <h3 class="col-12 e-product-name mb-2">@Translate( "eCom Product - FieldDisplayGroups - Description", "Description" )</h3>
158 <table class="table table-sm">
159 @foreach ( FieldDisplayGroupItem description in espressoProduct.Description.Where(f => !string.IsNullOrEmpty(f.Value)) )
160 {
161 <tr>
162 <th style="width: 50%">
163 @description.Label
164 </th>
165 <td>
166 @description.Value
167 </td>
168 </tr>
169 }
170 </table>
171 </div>
172 }
173174 @if ( espressoProduct.Logistics.Count > 0 )
175 {
176 <div class="col-12 mb-3 px-2">
177178 <h3 class="col-12 e-product-name mb-2">@Translate( "eCom Product - FieldDisplayGroups - Logistics", "Logistics" )</h3>
179 <table class="table table-sm">
180 @foreach ( FieldDisplayGroupItem logistic in espressoProduct.Logistics.Where(f => !string.IsNullOrEmpty(f.Value)) )
181 {
182 <tr>
183 <th style="width: 50%">
184 @logistic.Label
185 </th>
186 <td>
187 @logistic.Value
188 </td>
189 </tr>
190 }
191 </table>
192 </div>
193 }
194195 </div>
196 </div>
197 </div>
198199 <script class="js-e-handlebars-tmpl-theca-specifications" type="text/x-handlebars-template">
200 <div class="row">
201 <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">
202 <button class="btn btn-primary e-section-collapse-toggle-btn" type="button">
203 <i class="material-icons e-section-collapse-toggle-icon">keyboard_arrow_down</i>
204 </button>
205 <small class="h4 e-section-collapse-toggle-text" data-expand-text="Show more" data-collapse-text="Show less"></small>
206 </div>
207 <div class="col-12 col-lg-7 px-3 mx-auto e-section-collapse-content collapse is-lg" id="specifactions-collapse">
208 <div class="row">
209 <h2 class="col-12 text-center mb-0">@Translate( "eCom Product - Specifications - Heading", "Specifications" )</h2>
210 <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>
211 {{#if specifications.fabrics.length}}
212 <div class="col-12 mb-3 px-2">
213 <h3 class="col-12 e-product-name mb-2">@Translate( "eCom Product - FieldDisplayGroups - Fabric", "Fabric" )</h3>
214 <table class="table table-sm">
215 {{#each specifications.fabrics}}
216 <tr>
217 <th style="width: 50%">
218 {{{Label}}}
219 </th>
220 <td>
221 {{{Value}}}
222 </td>
223 </tr>
224 {{/each}}
225 </table>
226 </div>
227 {{/if}}
228229 {{#if specifications.legsFeets.length}}
230 <div class="col-12 mb-3 px-2">
231 <h3 class="col-12 e-product-name mb-2">@Translate( "eCom Product - FieldDisplayGroups - Legs & Feets", "Legs & Feets" )</h3>
232 <table class="table table-sm">
233 {{#each specifications.legsFeets}}
234 <tr>
235 <th style="width: 50%">
236 {{{Label}}}
237 </th>
238 <td>
239 {{{Value}}}
240 </td>
241 </tr>
242 {{/each}}
243 </table>
244 </div>
245 {{/if}}
246247 {{#if specifications.description.length}}
248 <div class="col-12 mb-3 px-2">
249 <h3 class="col-12 e-product-name mb-2">@Translate( "eCom Product - FieldDisplayGroups - Description", "Description" )</h3>
250 <table class="table table-sm">
251 {{#each specifications.description}}
252 <tr>
253 <th style="width: 50%">
254 {{{Label}}}
255 </th>
256 <td>
257 {{{Value}}}
258 </td>
259 </tr>
260 {{/each}}
261 </table>
262 </div>
263 {{/if}}
264265 {{#if specifications.logistics.length}}
266 <div class="col-12 mb-3 px-2">
267 <h3 class="col-12 e-product-name mb-2">@Translate( "eCom Product - FieldDisplayGroups - Logistics", "Logistics" )</h3>
268 <table class="table table-sm">
269 {{#each specifications.logistics}}
270 <tr>
271 <th style="width: 50%">
272 {{{Label}}}
273 </th>
274 <td>
275 {{{Value}}}
276 </td>
277 </tr>
278 {{/each}}
279 </table>
280 </div>
281 {{/if}}
282283 </div>
284 </div>
285 </div>
286 </script>
287 </div>
288 </section>
289290291 @if ( espressoProduct.RelatedGroups[ "similarproducts" ].Products.Any() )
292 {
293 @RenderingService.Instance.SectionStart( new SectionSettings
294 {
295 Classes = new ClassList( "e-section pb-2 border-top pt-3" ),
296 ContentClasses = new ClassList( "col-12" )
297 } )
298 <div class="col-12">
299 <div class="e-productlist">
300 <div class="e-productlist-header">
301 <p class="h2 mb-2 text-center">@Translate( "eCom Product - Related group - SimilarItems - Heading", "Similar items" )</p>
302 </div>
303 <div class="e-productlist-main">
304 <div class="row">
305 <div class="col-12">
306 <div class="e-productlist">
307308 <div class="row justify-content-center">
309 @{
310 foreach ( EspressoProduct product in espressoProduct.RelatedGroups[ "similarproducts" ].Products.Take( 3 ) )
311 {
312 EspressoProduct primaryVariant = new EspressoProduct();
313 if ( product.IsVariantMaster )
314 {
315 Dynamicweb.Ecommerce.Products.Product dwMainProduct = new ProductService().GetProductById( product.Id, string.Empty, false );
316 primaryVariant = Co3.Espresso.Website.Services.ProductService.Instance.GetEspressoProduct( new ProductSettings()
317 {
318 Id = product.Id,
319 VariantId = dwMainProduct.DefaultVariantComboId,
320 PrimaryVariantId = dwMainProduct.DefaultVariantComboId,
321 EmbeddedInModelList = true
322 } );
323 }
324 else
325 {
326 primaryVariant = product;
327 }
328329 <div class="@ProductListService.Instance.GetItemClasses()">
330 @RenderingService.Instance.PartialView( "ecom/productlist/partials/item.cshtml", ( ThecaProduct ) primaryVariant )
331 </div>
332 }
333 }
334335 </div>
336337 </div>
338 </div>
339 </div>
340 </div>
341342343 </div>
344 </div>
345 @RenderingService.Instance.SectionEnd()
346 }
347348 @RenderingService.Instance.PartialView( "ecom/product/partials/metadata.cshtml", espressoProduct )
349 @RenderingService.Instance.PartialView( "ecom/product/partials/gtm-tracking.cshtml", espressoProduct )
350351 <code class="js-e-breadcrumb-item-append" data-text="@HttpUtility.HtmlAttributeEncode( espressoProduct.Name )" data-link="@HttpUtility.HtmlAttributeEncode( espressoProduct.Link )"></code>
352353 <script>
354 e4.data.set('@( espressoProduct.Id )_VariantCombinationTree',
355 JSON.parse(
356 '@HttpUtility.JavaScriptStringEncode( JsonService.Instance.ToJson( espressoProduct.VariantCombinationTree ) )'));
357 e4.data.set('@( espressoProduct.Id )_VariantCombinationIds',
358 JSON.parse(
359 '@HttpUtility.JavaScriptStringEncode( JsonService.Instance.ToJson( espressoProduct.VariantCombinations.Keys ) )'));
360 </script>
361362 </div>
363 @RenderingService.Instance.SectionStart( new SectionSettings() )
364365 <!-- How it works Modal -->
366367 <div aria-hidden="true" aria-labelledby="howItWorksModalLabel" class="fade modal" id="howItWorksModal" role="dialog" tabindex="-1">
368 <div class="modal-dialog" role="document">
369 <div class="modal-content">
370 <div class="modal-header">
371 <a class="arrow-left" data-dismiss="modal" aria-label="Close">@Translate( "eCom Product - Back to overview - Link", "Back to overview" )</a>
372 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
373 <span aria-hidden="true">×</span>
374 </button>
375 </div>
376 <div class="modal-body row p-6">
377 @if ( !string.IsNullOrEmpty( howItWorksPage ) )
378 {
379 @RenderPageContent( int.Parse( howItWorksPage ) )
380 }
381 </div>
382 </div>
383 </div>
384 </div>
385 