1 @inherits ViewModelTemplate<ProductListViewModel>
2 @using Dynamicweb.Rendering
3 @using Dynamicweb.Ecommerce.ProductCatalog
4 @using Dynamicweb.Ecommerce;
5 @using System.Collections.Generic;
6 @using System.Web;
7 @using System.Linq;
8 @using Nevotex.Data.Cache
9 @using Nevotex.Data.Entities
10 @using Nevotex.Data.Helpers
11 @using Nevotex.Data.Services
12 13 @{
14 var productServiceForProductList = new ProductService();
15 var shopPageId = GetPageIdByNavigationTag("ProductsPage");
16 var listName = HttpContext.Current?.Request["ListName"];
17 //var groupId = Model.Group.Id;
18 //var rendera_4 = Convert.ToBoolean(Model.Group.GroupFields.FirstOrDefault(f => f.SystemName == "Rendera_4bilden")?.Value);
19 var gridCSS = "grid__col-lg-3 grid__col-md-3 grid__col-sm-3 grid__col-xs-6 product-list__grid-item image-hover--zoom dw-mod";
20 21 //var isCollection = productServiceForProductList.IsGroupACollection(Model.Group.Id, Pageview.Area.EcomLanguageId);
22 23 var groupId = Model?.Group?.Id;
24 var languageId = Pageview?.Area?.EcomLanguageId;
25 26 var isCollection = groupId != null && languageId != null
27 ? productServiceForProductList.IsGroupACollection(groupId, languageId)
28 : false;
29 30 var isSearch = !string.IsNullOrWhiteSpace(HttpContext.Current.Request.QueryString.Get("Search"));
31 var onlyShowVariants = HttpContext.Current.Request.QueryString.Get("OnlyShowVariants") == "true";
32 var kulorFilterPresent = !string.IsNullOrWhiteSpace(Dynamicweb.Context.Current.Request.QueryString["Kulorfilter"]);
33 var columnCss = isCollection ? "2" : "3";
34 var displayCss = isCollection ? "u-hidden" : "";
35 var cropMode = isCollection ? "0" : "5";
36 var paddingFix = isCollection ? "product-list__grid-item__collection-price-info" : string.Empty;
37 var imageBorder = isCollection ? "product-list__grid-item__no_border" : "product-list__grid-item__border";
38 var hideArticleNumberCss = isCollection ? "u-hidden collection-item" : string.Empty;
39 40 41 var value = Model?.Group?.GroupFields?
42 .FirstOrDefault(f => f.SystemName == "Rendera_4bilden")
43 ?.Value?.ToString();
44 45 var rendera_4 = bool.TryParse(value, out var result) && result;
46 47 48 }
49 50 <!--HEADER-->
51 <div class="grid grid--align-content-start grid--justify-start grid--bleed u-margin-bottom--lg u-padding grid--wrap u-flex-grow--0 dw-mod">
52 <div class="grid ">
53 <div class="u-pull--left">
54 <h1>
55 <i class=""></i>@(string.IsNullOrWhiteSpace(listName)
56 ? Model?.Group?.Name
57 : listName)
58 </h1>
59 </div>
60 <div class="grid__col-xs-12 grid__col-md-6 dw-mod">
61 </div>
62 </div>
63 </div>
64 65 <!--FACETS-->
66 <div class="grid__col-lg-3 grid__col-md-3 grid__col-sm-12 grid__col-xs-12 dw-mod" id="Block__Navigation">
67 <input type="checkbox" id="CheckFacetGroups" class="js-remember-state u-hidden" data-expand="CheckFacetGroups" data-loaded="true">
68 <div class="facets-container facets-container--left expandable--collapsed dw-mod" data-trigger="CheckFacetGroups">
69 70 @{
71 bool facetsFound = false;
72 int selectedFacetsCount = 0;
73 74 75 if (Model.FacetGroups != null)
76 {
77 foreach (FacetGroupViewModel facetGroup in Model.FacetGroups)
78 {
79 80 foreach (FacetViewModel facet in facetGroup.Facets)
81 {
82 83 if (kulorFilterPresent && facet.Name == "Kulör")
84 {
85 continue;
86 }
87 88 if (facet.OptionResultTotalCount > 0)
89 {
90 var optionGroupId = $"OptionsGroup_{facet.Name}";
91 92 <input type="checkbox" id="@optionGroupId" class="expand-trigger js-remember-state" data-loaded="true" />
93 94 <div class="expand-container facets-container__box dw-mod js-filter">
95 <label class="expand-container__btn facets-container__header dw-mod" for="@optionGroupId">@Translate(facet.Name)</label>
96 <div class="expand-container__content js-facet-container dw-mod" data-input="@optionGroupId">
97 98 @if (facet.Options.Count() > 0)
99 {
100 var faceListId = $"facetList{facet.Name}";
101102 facetsFound = true;
103104 <div id="@faceListId" class="facets-container__list dw-mod">
105 @foreach (FacetOptionViewModel option in facet.Options)
106 {
107 var facetOptionId = $"{facet.QueryParameter}{option.Name}";
108 var selected = string.Empty;
109 string facetLabel = Translate(option.Label);
110111 if (facetLabel.ToLower() == "true")
112 {
113 facetLabel = Translate("Yes");
114 }
115116 if (facetLabel.ToLower() == "false")
117 {
118 facetLabel = Translate("No");
119 }
120121 if (option.Selected)
122 {
123 selected = "checked";
124 selectedFacetsCount++;
125 }
126127 if (facet.RenderType != "Range" && facet.Name != "Bredd")
128 {
129 <div class="form__field-group u-no-margin dw-mod">
130 <input type="checkbox" class=" checkbox-facet__checkbox form__control dw-mod" onclick="Facets.UpdateFacets(this);" id="@facetOptionId" @selected name="@facet.QueryParameter" value="[@option.Name]" />
131 <label class=" checkbox-facet dw-mod" data-filter-value="@facetLabel" for="@facetOptionId">
132 <span class="checkbox-facet__label dw-mod">@facetLabel</span>
133 @if (isCollection)
134 {
135 <span class="checkbox-facet__count dw-mod">(@option.Count)</span>
136 }
137138 </label>
139 </div>
140 }
141 else if (facet.Name == "Bredd")
142 {
143144 }
145146147148149 }
150 </div>
151 }
152153 </div>
154 </div>
155 }
156157158 }
159 }
160161 }
162 }
163164 </div>
165 </div>
166167 <label for="CheckFacetGroups" class="btn btn--primary btn--full u-no-margin dw-mod js-expand-hide facets-container-trigger" data-trigger="CheckFacetGroups">Filtrera</label>
168 <label for="CheckFacetGroups" class="btn btn--primary btn--full u-no-margin dw-mod expandable--collapsed facets-container-trigger" data-trigger="CheckFacetGroups">Stäng filter</label>
169170 <!--PRODUCTLIST COLLECTION-->
171172 <div class="grid__col-auto">
173174 <div class="buttons-collection u-margin-bottom" id="selectedFacets">
175176 @foreach (FacetGroupViewModel faceGroup in Model.FacetGroups)
177 {
178 foreach (FacetViewModel facet in faceGroup.Facets)
179 {
180 if (facet.OptionResultTotalCount > 0)
181 {
182 foreach (FacetOptionViewModel option in facet.Options)
183 {
184 if (option.Selected)
185 {
186 <button type="button" class="btn btn--tag dw-mod" data-check="checked" onclick="Facets.UpdateFacets(this);" name="@facet.QueryParameter" value="[@option.Value]" title="@Translate("Remove filter")">
187 @Translate(facet.Name) : @Translate(option.Label) <i class="fal fa-times"></i>
188 </button>
189 }
190 }
191 }
192 }
193 }
194195 </div>
196197 <div id="ProductsContainer" class="grid product-list grid--external-bleed-x dw-mod grid--align-content-start" data-save-cookie="true">
198199 @foreach (ProductViewModel product in Model.Products)
200 {
201202 var productName = product.Name;
203 var productId = product.Id;
204 var productVariantId = product.VariantId;
205 var productUnit = product.DefaultUnitId;
206 var uniqueId = Guid.NewGuid().ToString("N");
207 var productLoopCounter = $"ProductLoopCounter{uniqueId}";
208 var productLoopId = $"ProductID{uniqueId}";
209 var variantLoopName = $"VariantID{uniqueId}";
210 var variantLoopId = $"Variant_{uniqueId}";
211 var unitLoopName = $"UnitID{uniqueId}";
212 var unitLoopId = $"Unit_{uniqueId}";
213 var quantityLoopName = $"Quantity{uniqueId}";
214 var quantityLoopId = $"Quantity_{uniqueId}";
215 var cartButtonId = $"CartButton_{uniqueId}";
216 var productImagePath = product.DefaultImage.GetFileViewModel().PathUrlEncoded;
217 var imagePath = $"/Admin/Public/GetImage.ashx?format=webp&width=300&height=300&crop=0&Compression=75&FillCanvas=true&DoNotUpscale=true&image={productImagePath}";
218 var productLink = product.GetProductLink(shopPageId, false);
219 var collectionData = Convert.ToString(product.ProductFields["ProductNumbersInCollection"].Value);
220 bool hasVariants = product.VariantGroups().Count > 0;
221222 if ((isCollection || hasVariants) && !string.IsNullOrWhiteSpace(collectionData) && !onlyShowVariants && !isSearch)
223 {
224 gridCSS = "grid__col-lg-2 grid__col-md-2 grid__col-sm-2 grid__col-xs-6 product-list__grid-item image-hover--zoom dw-mod";
225 var randomProduct = GetRandomProduct(collectionData, rendera_4, productName);
226227 if (randomProduct == null)
228 {
229 <div>Colldata: @collectionData Rendera : @rendera_4</div>
230 }
231232 productLink = $"/Default.aspx?ID={shopPageId}&GroupId={groupId}&ProductId={productId}&VariantID={randomProduct.VariantId}";
233 imagePath = $"/Admin/Public/GetImage.ashx?format=webp&width=300&height=300&crop=0&Compression=75&FillCanvas=true&DoNotUpscale=true&image={randomProduct.Image}";
234 }
235 else
236 {
237 imagePath = $"/Admin/Public/GetImage.ashx?format=webp&width=300&height=300&crop=0&Compression=75&FillCanvas=true&DoNotUpscale=true&image={productImagePath}";
238 productLink = $"/Default.aspx?ID={shopPageId}&GroupId={groupId}&ProductId={productId}";
239240 if (!string.IsNullOrWhiteSpace(productVariantId))
241 {
242 productLink += $"&VariantID={productVariantId}";
243 }
244 }
245246 <div id="Product" class="@gridCSS" data-collection-data="@collectionData">
247248 <div class="grid__col--auto js-product-scroll-trigger u-no-padding u-full-height" data-params="">
249 <input type="hidden" name="@productLoopCounter" value="@uniqueId">
250 <input type="hidden" name="@productLoopId" value="@productId">
251 <input type="hidden" name="@variantLoopId" value="@productVariantId" id="@variantLoopId">
252 <input type="hidden" name="@unitLoopName" value="@productUnit" id="@unitLoopId">
253 <input type="hidden" name="@quantityLoopName" value="1" id="@quantityLoopId">
254 <div class="grid__cell product-list__grid-item__image dw-mod ">
255 <a href="@productLink" onclick="" title="@productName" class="u-block u-position-relative image-hover__wrapper dw-mod">
256 <img width="168" height="168" class="grid__cell-img grid__cell-img--centered b-lazy b-loaded" src="@imagePath" alt="@productName">
257 </a>
258 <div class="favorites favorites--for-grid-view u-pull--right dw-mod">
259 </div>
260261 </div>
262 <div class="grid__cell product-list__grid-item__price-info dw-mod collection-item ">
263 <a href="@productLink" class="u-color-inherit" onclick="" title="@productName">
264 <h6 class=" u-bold">@productName</h6>
265 </a>
266267 @if (!isCollection)
268 {
269 <p class="u-margin-top"></p>
270 <div class="item-number dw-mod @displayCss @hideArticleNumberCss ">@Translate("ArtNr", "Art. nr"): @product.Number </div>
271272273 if (Dynamicweb.Frontend.PageView.Current().Device != Dynamicweb.Frontend.Devices.DeviceType.Mobile)
274 {
275 // login to see price
276 bool userLoggedIn = Dynamicweb.Security.UserManagement.User.IsExtranetUserLoggedIn();
277278 if (userLoggedIn)
279 {
280 <div class="price price--product-list dw-mod">@product.Price.PriceFormatted</div>
281282 }
283 else
284 {
285 <div class="u-ta-left dw-mod @displayCss">
286 <label for="SignInModalTrigger" class="item-number sign-in-modal-trigger-button" onclick="setTimeout(function () { document.getElementById('LoginUsername').focus() }, 10)">
287 @Translate("Logga_in_for_pris_och_kop")
288 </label>
289 </div>
290 }
291 }
292 }
293294 </div>
295 <div class="product-list__grid-item__footer dw-mod @displayCss">
296 <div>
297 <a class="u-no-margin btn btn--secondary dw-mod" title="Visa" id="@cartButtonId" onclick="" href="@productLink">@Translate("View")</a>
298 </div>
299 </div>
300 </div>
301 </div>
302303 }
304305 </div>
306 </div>
307308 <div class="grid">
309 <div class="grid__col-12 u-no-padding">
310311 @{
312313 var nextPageCount = 0;
314 if (Model.CurrentPage < Model.PageCount)
315 {
316 nextPageCount = Model.PageSize + 36;
317 }
318319 var baseUrl = $"{Dynamicweb.Context.Current.Request.Path}?ID={Dynamicweb.Frontend.PageView.Current().ID}&GroupId={Model?.Group?.Id}&pagesize={nextPageCount}";
320 var filters = string.Empty;
321 var loadMoreUrl = baseUrl;
322323 foreach(var qs in System.Web.HttpContext.Current.Request.QueryString.AllKeys) {
324 if(qs != "ID" && qs.ToLower() != "groupid" && qs.ToLower() != "pagesize")
325 {
326 filters += $"&{qs}={Convert.ToString(System.Web.HttpContext.Current.Request.QueryString[qs])}";
327328 }
329 }
330331 loadMoreUrl += filters;
332333 if (Model.PageCount > Model.CurrentPage)
334 {
335 <a href="@loadMoreUrl" id="LoadMoreButton" data-filters="@filters" class="btn btn--primary btn--full dw-mod" data-current="1" data-page-size="@Model.PageSize;" data-total="4">
336 @Translate("Load") 36 @Translate("more")
337 </a>
338 }
339 }
340341 <button type="button" class="btn btn--clean" onclick="window.scroll(0, 0)">@Translate("Return to top")</button>
342 </div>
343 </div>
344 @functions {
345346 private static readonly Random _rnd = new Random();
347348 public RandomVariant GetRandomProduct(string rawData, bool render_4, string defaultName)
349 {
350351 if (string.IsNullOrWhiteSpace(rawData))
352 return null;
353354 var variants = (rawData ?? string.Empty)
355 .Split(new[] { ';' }, StringSplitOptions.RemoveEmptyEntries)
356 .Select(item => item.Split(','))
357 .Where(parts => parts.Length >= 2) // allow 2 or more
358 .Select(parts =>
359 {
360 var safeParts = parts.Length >= 3
361 ? parts
362 : new[] { parts[0], parts[1], defaultName }; // 👈 fallback
363364 return new RandomVariant
365 {
366 ProductId = safeParts[0].Trim(),
367 VariantId = safeParts[1].Trim(),
368 Name = safeParts[2].Trim()
369 };
370 })
371 .ToList();
372373 if (!variants.Any())
374 return null;
375376 var image_4 = string.Empty;
377378379 var randomVariant = variants[_rnd.Next(variants.Count)];
380381 if (render_4)
382 {
383 image_4 = "_4";
384 }
385386 randomVariant.Image = $"/files/images/produktbilder/{randomVariant.ProductId}{image_4}.jpg";
387388 return randomVariant;
389390 }
391392 public class RandomVariant
393 {
394 public string ProductId { get; set; }
395 public string VariantId { get; set; }
396 public string Name { get; set; }
397 public string Image { get; set; }
398 }
399 }