1 @using System.Linq
2 @using DLF.MyDLF.Webshop.Web.CustomCode.Products
3 @using NORRIQ.Common8.Ecom
4 @using Dynamicweb.Rendering
5 @using Dynamicweb.Ecommerce.ProductCatalog
6 @using Dynamicweb.Ecommerce.Products
7 @using Dynamicweb.Ecommerce.Variants
8 @using Dynamicweb.Rapido.Blocks.Components.Ecommerce
9 @using NORRIQ.Common8.Factory
10 @using NORRIQ.Seo.Canonical
11 @using ProductKey = NORRIQ.Common8.Ecom.ProductKey;
12
13 @inherits ViewModelTemplate<ProductViewModel>
14 @{
15 // EcomMedia settings
16 var productKey = new ProductKey(Model.Id, Model.VariantId, Model.LanguageId);
17 var images = NORRIQ.EcomMedia.Frontend.GetProductMedia(productKey);
18
19
20 //scores
21 var ratings = Model.ProductCategories.FirstOrDefault(cat => cat.Value.Fields.Where(field => field.Value.Value != null).All(field => field.Value.Value is int)).Value;
22 var maxScore = 9;
23
24 var productService = ObjectFactory.GetInstance<ProductService>();
25
26 var variantService = ObjectFactory.GetInstance<ProductVariantService>();
27 var activeVariants = variantService.GetActiveVariants(Model.Id, Model.LanguageId);
28
29
30 var urlService = ObjectFactory.GetInstance<IProductUrlService>();
31 var defaultVariant = variantService.GetMostExpensiveActiveVariant(Model.Id, Model.LanguageId);
32 var price = defaultVariant != null ? defaultVariant.PriceWithoutVat : Model.Price.PriceWithoutVat;
33 var mainProduct = Model.GetMainProduct();
34 var shortDesc = string.IsNullOrEmpty(Model.ShortDescription) && mainProduct != null ? mainProduct.ShortDescription : Model.ShortDescription;
35 var longDescription = string.IsNullOrEmpty(Model.LongDescription) && mainProduct != null ? mainProduct.LongDescription : Model.LongDescription;
36 var additionalText = Model.GetAdditionalText();
37
38
39 }
40 <product-details-basic-view default-variant="@Model.VariantId" inline-template has-variants="@activeVariants.Any()" default-price-without-vat="@price">
41 <div class="basic_view">
42 <section class="basic_view-pdp" itemscope="" itemtype="https://schema.org/Product">
43 <div class="basic_view-media">
44 @if (images.GetImages().Any())
45 {
46 if (images.GetImages().Count() > 1)
47 {
48 <slick ref="slick" class="basic_view-thumbs" id="pdp-thumbs" :options="slickOptionsThumbs">
49 @foreach (var img in images.GetImages())
50 {
51 <div class="basic_view-thumb">
52 <img src="/Admin/Public/GetImage.ashx?Width=60&Height=60&Compression=85&Crop=5&fillcanvas=true&Image=@(img.Url)"
53 alt="@Model.Name"
54 class="img-fluid" />
55 </div>
56 }
57 </slick>
58 <slick ref="slick"
59 class="basic_view-images basic_view-slick-images"
60 id="pdp-images"
61 :options="slickOptionsImages">
62 @foreach (var img in images.GetImages())
63 {
64 <picture class="basic_view-image">
65 @*<source media="(max-width:1199.98px)" srcset="/Admin/Public/GetImage.ashx?Width=630&Height=630&Compression=85&Crop=5&Image=@(img.Url)">*@
66 <source media="(max-width:991.98px)" srcset="/Admin/Public/GetImage.ashx?Width=530&Height=530&Compression=85&Crop=5&fillcanvas=true&Image=@(img.Url)">
67 <source media="(max-width:767.98px)" srcset="/Admin/Public/GetImage.ashx?Width=400&Height=400&Compression=85&Crop=5&fillcanvas=true&Image=@(img.Url)">
68 <img src="/Admin/Public/GetImage.ashx?Width=630&Height=630&Compression=85&Crop=5&fillcanvas=true&Image=@(img.Url)"
69 alt="@Model.Name"
70 class="img-fluid"
71 itemprop="image" />
72 </picture>
73 }
74 </slick>
75 }
76 else if (images.GetImages().Any())
77 {
78 var pdpImage = images.GetFirstImage().Url;
79 <div class="basic_view-images first">
80 <picture class="basic_view-image">
81 @*<source media="(max-width:1199.98px)" srcset="/Admin/Public/GetImage.ashx?Width=630&Height=630&Compression=85&Crop=5&Image=@(pdpImage)">*@
82 <source media="(max-width:991.98px)" srcset="/Admin/Public/GetImage.ashx?Width=530&Height=530&Compression=85&Crop=5&fillcanvas=true&Image=@(pdpImage)">
83 <source media="(max-width:767.98px)" srcset="/Admin/Public/GetImage.ashx?Width=400&Height=400&Compression=85&Crop=5&fillcanvas=true&Image=@(pdpImage)">
84 <img src="/Admin/Public/GetImage.ashx?Width=630&Height=630&Compression=85&Crop=5&fillcanvas=true&Image=@(pdpImage)"
85 alt="@Model.Name"
86 class="img-fluid"
87 itemprop="image">
88 </picture>
89 </div>
90 }
91 }
92 else
93 {
94 var pdpImage = "/Files/Images/default.jpg";
95 <div class="basic_view-image default">
96 <picture class="basic_view-image">
97 <source media="(max-width:1199.98px)" srcset="/Admin/Public/GetImage.ashx?Width=630&Height=630&Compression=85&Crop=5&fillcanvas=true&Image=@(pdpImage)">
98 <source media="(max-width:991.98px)" srcset="/Admin/Public/GetImage.ashx?Width=530&Height=530&Compression=85&Crop=5&fillcanvas=true&Image=@(pdpImage)">
99 <source media="(max-width:767.98px)" srcset="/Admin/Public/GetImage.ashx?Width=400&Height=400&Compression=85&Crop=5&fillcanvas=true&Image=@(pdpImage)">
100 <img src="/Admin/Public/GetImage.ashx?Width=870&Height=870&Compression=85&Crop=5&fillcanvas=true&Image=@(pdpImage)"
101 alt="@Translate(" No product picture")"
102 class="img-fluid"
103 itemprop="image">
104 </picture>
105 </div>
106 }
107 </div>
108 <div class="basic_view-content">
109 <h1 itemprop="name">
110 @Model.Name
111 </h1>
112 @if (!string.IsNullOrEmpty(additionalText))
113 {
114 <p>@additionalText</p>
115 }
116 <p class="basic_view-sku" data-caption="Varenummer" itemprop="sku">
117 @Translate("Product number"): @Model.Number
118 </p>
119
120 @if (Pageview.User == null)
121 {
122 var priceExplanation = Model.HasKgBaseUnit() ? Translate("Price/unit", " / KG") : Translate("Price per variant", "");
123 <template v-if="!noVariantPicked">
124 <div class="basic_view-async">
125 <p class="basic_view-list-price">
126 <span itemprop="priceCurrency" content=""></span>
127 <span itemprop="price">@Translate("From") {{ price | currency }} @priceExplanation</span>
128 </p>
129 </div>
130 </template>
131 }
132 else
133 {
134
135 <async-price class-type="basic_view" default-price-without-vat="@Model.Price.PriceWithoutVat" has-variants="@activeVariants.Any()" product-id="@Model.Id" :variant-id="variantId" unit-of-measure="" has-kg-base-unit="@Model.HasKgBaseUnit()"></async-price>
136 }
137 @if (activeVariants.Any())
138 {
139 <div class="basic_view-variants">
140 <div class="basic_view-variant">
141 <label for="variant-1">
142 @Translate("Variants")
143 </label>
144 <select id="variant-1" name="variant-1" class="form-control" v-model="variantId" @@change="variantSelected">
145 <option value="" selected disabled hidden>@Translate("Choose Variant")</option>
146 @foreach (var variant in activeVariants)
147 {
148 <option data-variant-price="@variant.Price.PriceWithoutVAT" value="@variant.VariantId">@variant.CleanVariantId()</option>
149 }
150 </select>
151 </div>
152 <template v-if="!noVariantPicked">
153 <p>@Translate("Buy variants text")</p>
154 </template>
155 </div>
156 }
157
158 <add-to-basket-simple v-if="!noVariantPicked" class="basic_view-form" product-id="@Model.Id" :variant-id="variantId" unit-of-measure="STK"></add-to-basket-simple>
159 @if (!string.IsNullOrEmpty(shortDesc))
160 {
161 <div class="basic_view-short-description">
162 @shortDesc
163 </div>
164 }
165 </div>
166 </section>
167
168 <section class="basic_view-tabs">
169 <h2 class="text-center">@Translate("Product Details")</h2>
170
171 <b-tabs nav-class="basic_view-tabs-nav" nav-wrapper-class="basic_view-tabs-navbar" content-class="basic_view-tabs-content">
172 @if (ratings != null)
173 {
174 <b-tab title="@Translate("Ratings")" active>
175 <div class="basic_view-ratings">
176 @foreach (var rating in ratings.Fields)
177 {
178 int score = -1;
179 if (!int.TryParse(rating.Value?.Value?.ToString(), out score) || score < 1)
180 {
181 continue;
182 }
183 <div class="seeds_rating">
184 <span class="seeds_rating-label">@rating.Value.Name</span>
185 <span class="seeds_rating-items">
186 @for (int counter = 1; counter <= maxScore; counter++)
187 {
188 if (counter <= score)
189 {
190 <span class="active"></span>
191 }
192 else
193 {
194 <span></span>
195 }
196
197 }
198
199 </span>
200 </div>
201 }
202 </div>
203 </b-tab>
204 }
205 @if (!string.IsNullOrEmpty(longDescription))
206 {
207 <b-tab title="@Translate(" Description")">
208 <div class="basic_view-long-description">@longDescription</div>
209 </b-tab>
210 }
211 </b-tabs>
212 </section>
213
214 @{
215 var relatedProducts = Model.GetRelatedProducts();
216 }
217
218
219 @if (relatedProducts.Count > 0)
220 {
221 <section class="basic_view-related">
222 <template>
223 <h2 class="text-center">
224 @Translate("Related Products")
225 </h2>
226 <div class="basic_view-related--grid">
227 <!-- Add id="plp-related", to show related products in a carousel -->
228 @foreach (var rel in relatedProducts)
229 {
230 var leastExpensiveVariant = variantService.GetLeastExpensiveActiveVariant(rel.Id, rel.LanguageId);
231 if (leastExpensiveVariant != null)
232 {
233 var url = urlService.GetProductUri(rel);
234 var relProductKey = new ProductKey(rel.Id, leastExpensiveVariant != null ? leastExpensiveVariant.VariantId : rel.VariantId, Model.LanguageId);
235 var relImage = NORRIQ.EcomMedia.Frontend.GetProductMedia(relProductKey).GetFirstImage();
236 var hasKgBaseUnit = (leastExpensiveVariant.HasKgBaseUnit) ? 1 : 0;
237
238 <div class="basic_view-related--item">
239 <article class="basic_view-related--product">
240 <a href="@url.PathAndQuery" class="basic_view-related--link">
241 <picture class="basic_view-related--image">
242 <source media="(max-width:767.98px)"
243 srcset="/Admin/Public/GetImage.ashx?Width=360&Height=360&Compression=85&Crop=5&fillcanvas=true&Image=@(relImage.Url)" />
244 <source media="(max-width:991.98px)"
245 srcset="/Admin/Public/GetImage.ashx?Width=300&Height=300&Compression=85&Crop=5&fillcanvas=true&Image=@(relImage.Url)" />
246 <img src="/Admin/Public/GetImage.ashx?Width=260&Height=260&Compression=85&Crop=5&fillcanvas=true&Image=@(relImage.Url)" alt="Product Name" itemprop="image" class="img-fluid" />
247 </picture>
248 <header class="basic_view-related--specs">
249 <h1>@rel.Name</h1>
250 <p class="basic_view-related--sku" data-caption="@Translate("Product Number")">@leastExpensiveVariant.Number</p>
251 </header>
252 </a>
253 <footer class="basic_view-related--foot">
254 <div class="basic_view-related--async">
255 <async-price class-type="basic_view-related--price"
256 default-price-without-vat="@leastExpensiveVariant.PriceWithoutVat"
257 product-id="@rel.Id"
258 variant-id="@leastExpensiveVariant.VariantId"
259 :has-kg-base-unit="@hasKgBaseUnit"
260 unit-of-measure=""></async-price>
261 </div>
262 @*@if (relProduct.VariantCount == 0)
263 {
264 <add-to-basket-button-only product-id="@rel.ProductId" variant-id="@rel.VariantId" unit-of-measure="" button-class="btn btn-primary" class="basic_view-related--form"></add-to-basket-button-only>
265 }
266 else
267 {
268 <a class="btn btn-primary" href="@url.PathAndQuery">
269 @Translate("See product")
270 </a>
271 }*@
272 </footer>
273 </article>
274 </div>
275 }
276
277
278
279 }
280 </div>
281 </template>
282 </section>
283 }
284 </div>
285 </product-details-basic-view>
286
287
288
