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 isCollection = productServiceForProductList.IsGroupACollection(Model.Group.Id, Pageview.Area.EcomLanguageId);
16 var shopPageId = GetPageIdByNavigationTag("ProductsPage");
17 var columnCss = isCollection ? "2" : "3";
18 var displayCss = isCollection ? "u-hidden" : "";
19 var cropMode = isCollection ? "0" : "5";
20 var paddingFix = isCollection ? "product-list__grid-item__collection-price-info" : string.Empty;
21 var imageBorder = isCollection ? "product-list__grid-item__no_border" : "product-list__grid-item__border";
22 var hideArticleNumberCss = isCollection ? "u-hidden collection-item" : string.Empty;
23 var groupId = Model.Group.Id;
24 var rendera_4 = Convert.ToBoolean(Model.Group.GroupFields.FirstOrDefault(f => f.SystemName == "Rendera_4bilden")?.Value);
25 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";
26 }
27 28 <!--HEADER-->
29 <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">
30 <div class="grid ">
31 <div class="u-pull--left">
32 <h1><i class=""></i>@Model.Group.Name</h1>
33 </div>
34 <div class="grid__col-xs-12 grid__col-md-6 dw-mod">
35 </div>
36 </div>
37 </div>
38 39 <!--FACETS-->
40 <div class="grid__col-lg-3 grid__col-md-3 grid__col-sm-12 grid__col-xs-12 dw-mod" id="Block__Navigation">
41 <input type="checkbox" id="CheckFacetGroups" class="js-remember-state u-hidden" data-expand="CheckFacetGroups" data-loaded="true">
42 <div class="facets-container facets-container--left expandable--collapsed dw-mod" data-trigger="CheckFacetGroups">
43 44 @{
45 bool facetsFound = false;
46 int selectedFacetsCount = 0;
47 48 49 if (Model.FacetGroups != null)
50 {
51 foreach (FacetGroupViewModel facetGroup in Model.FacetGroups)
52 {
53 54 foreach (FacetViewModel facet in facetGroup.Facets)
55 {
56 if (facet.OptionResultTotalCount > 0)
57 {
58 var optionGroupId = $"OptionsGroup_{facet.Name}";
59 60 <input type="checkbox" id="@optionGroupId" class="expand-trigger js-remember-state" data-loaded="true" />
61 62 <div class="expand-container facets-container__box dw-mod js-filter">
63 <label class="expand-container__btn facets-container__header dw-mod" for="@optionGroupId">@Translate(facet.Name)</label>
64 <div class="expand-container__content js-facet-container dw-mod" data-input="@optionGroupId">
65 66 @if (facet.Options.Count() > 0)
67 {
68 var faceListId = $"facetList{facet.Name}";
69 70 facetsFound = true;
71 72 <div id="@faceListId" class="facets-container__list dw-mod">
73 @foreach (FacetOptionViewModel option in facet.Options)
74 {
75 var facetOptionId = $"{facet.QueryParameter}{option.Name}";
76 var selected = string.Empty;
77 string facetLabel = Translate(option.Label);
78 79 if (facetLabel.ToLower() == "true")
80 {
81 facetLabel = Translate("Yes");
82 }
83 84 if (facetLabel.ToLower() == "false")
85 {
86 facetLabel = Translate("No");
87 }
88 89 if (option.Selected)
90 {
91 selected = "checked";
92 selectedFacetsCount++;
93 }
94 95 if (facet.RenderType != "Range" && facet.Name != "Bredd")
96 {
97 <div class="form__field-group u-no-margin dw-mod">
98 <input type="checkbox" class=" checkbox-facet__checkbox form__control dw-mod" onclick="Facets.UpdateFacets(this);" id="@facetOptionId" @selected name="@facet.QueryParameter" value="[@option.Label]" />
99 <label class=" checkbox-facet dw-mod" data-filter-value="@facetLabel" for="@facetOptionId">
100 <span class="checkbox-facet__label dw-mod">@facetLabel</span>
101 @if (isCollection)
102 {
103 <span class="checkbox-facet__count dw-mod">(@option.Count)</span>
104 }
105106 </label>
107 </div>
108 }
109 else if (facet.Name == "Bredd")
110 {
111112 }
113114115116117 }
118 </div>
119 }
120121 </div>
122 </div>
123 }
124125126 }
127 }
128129 }
130 }
131132 </div>
133 </div>
134135 <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>
136 <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>
137138 <!--PRODUCTLIST COLLECTION-->
139140 <div class="grid__col-auto">
141142 <div class="buttons-collection u-margin-bottom" id="selectedFacets">
143144 @foreach (FacetGroupViewModel faceGroup in Model.FacetGroups)
145 {
146 foreach (FacetViewModel facet in faceGroup.Facets)
147 {
148 if (facet.OptionResultTotalCount > 0)
149 {
150 foreach (FacetOptionViewModel option in facet.Options)
151 {
152 if (option.Selected)
153 {
154 <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")">
155 @Translate(facet.Name) : @Translate(option.Label) <i class="fal fa-times"></i>
156 </button>
157 }
158 }
159 }
160 }
161 }
162163 </div>
164165 <div id="ProductsContainer" class="grid product-list grid--external-bleed-x dw-mod grid--align-content-start" data-save-cookie="true">
166167 @foreach (ProductViewModel product in Model.Products)
168 {
169170 var productName = product.Name;
171 var productId = product.Id;
172 var productVariantId = product.VariantId;
173 var productUnit = product.DefaultUnitId;
174 var uniqueId = Guid.NewGuid().ToString("N");
175 var productLoopCounter = $"ProductLoopCounter{uniqueId}";
176 var productLoopId = $"ProductID{uniqueId}";
177 var variantLoopName = $"VariantID{uniqueId}";
178 var variantLoopId = $"Variant_{uniqueId}";
179 var unitLoopName = $"UnitID{uniqueId}";
180 var unitLoopId = $"Unit_{uniqueId}";
181 var quantityLoopName = $"Quantity{uniqueId}";
182 var quantityLoopId = $"Quantity_{uniqueId}";
183 var cartButtonId = $"CartButton_{uniqueId}";
184 var productImagePath = product.DefaultImage.GetFileViewModel().PathUrlEncoded;
185 var imagePath = $"/Admin/Public/GetImage.ashx?format=webp&width=300&height=300&crop=0&Compression=75&FillCanvas=true&DoNotUpscale=true&image={productImagePath}";
186 var productLink = product.GetProductLink(shopPageId, false);
187 var collectionData = Convert.ToString(product.ProductFields["ProductNumbersInCollection"].Value);
188189190 if (isCollection && !string.IsNullOrWhiteSpace(collectionData))
191 {
192 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";
193 var randomProduct = GetRandomProduct(collectionData, rendera_4);
194195 productLink = $"/Default.aspx?ID={shopPageId}&GroupId={groupId}&ProductId={productId}&VariantID={randomProduct.VariantId}";
196 imagePath = $"/Admin/Public/GetImage.ashx?format=webp&width=300&height=300&crop=0&Compression=75&FillCanvas=true&DoNotUpscale=true&image={randomProduct.Image}";
197198 }
199 else
200 {
201 imagePath = $"/Admin/Public/GetImage.ashx?format=webp&width=300&height=300&crop=0&Compression=75&FillCanvas=true&DoNotUpscale=true&image={productImagePath}";
202 productLink = $"/Default.aspx?ID={shopPageId}&GroupId={groupId}&ProductId={productId}";
203204 if (!string.IsNullOrWhiteSpace(productVariantId))
205 {
206 productLink += $"&VariantID={productVariantId}";
207 }
208 }
209210 <div id="Product" class="@gridCSS">
211212 <div class="grid__col--auto js-product-scroll-trigger u-no-padding u-full-height" data-params="">
213 <input type="hidden" name="@productLoopCounter" value="@uniqueId">
214 <input type="hidden" name="@productLoopId" value="@productId">
215 <input type="hidden" name="@variantLoopId" value="@productVariantId" id="@variantLoopId">
216 <input type="hidden" name="@unitLoopName" value="@productUnit" id="@unitLoopId">
217 <input type="hidden" name="@quantityLoopName" value="1" id="@quantityLoopId">
218 <div class="grid__cell product-list__grid-item__image dw-mod ">
219 <a href="@productLink" onclick="" title="@productName" class="u-block u-position-relative image-hover__wrapper dw-mod">
220 <img width="168" height="168" class="grid__cell-img grid__cell-img--centered b-lazy b-loaded" src="@imagePath" alt="@productName">
221 </a>
222 <div class="favorites favorites--for-grid-view u-pull--right dw-mod">
223 </div>
224225 </div>
226 <div class="grid__cell product-list__grid-item__price-info dw-mod collection-item ">
227 <a href="@productLink" class="u-color-inherit" onclick="" title="@productName">
228 <h6 class=" u-bold">@productName</h6>
229 </a>
230231 @if (!isCollection)
232 {
233 <p class="u-margin-top"></p>
234 <div class="item-number dw-mod @displayCss @hideArticleNumberCss ">@Translate("ArtNr", "Art. nr"): @product.Number </div>
235236237 if (Dynamicweb.Frontend.PageView.Current().Device != Dynamicweb.Frontend.Devices.DeviceType.Mobile)
238 {
239 // login to see price
240 bool userLoggedIn = Dynamicweb.Security.UserManagement.User.IsExtranetUserLoggedIn();
241242 if (userLoggedIn)
243 {
244 <div class="price price--product-list dw-mod">@product.Price.PriceFormatted</div>
245246 }
247 else
248 {
249 <div class="u-ta-left dw-mod @displayCss">
250 <label for="SignInModalTrigger" class="item-number sign-in-modal-trigger-button" onclick="setTimeout(function () { document.getElementById('LoginUsername').focus() }, 10)">
251 @Translate("Logga_in_for_pris_och_kop")
252 </label>
253 </div>
254 }
255 }
256 }
257258 </div>
259 <div class="product-list__grid-item__footer dw-mod @displayCss">
260 <div>
261 <a class="u-no-margin btn btn--secondary dw-mod" title="Visa" id="@cartButtonId" onclick="" href="@productLink">@Translate("View")</a>
262 </div>
263 </div>
264 </div>
265 </div>
266267 }
268269 </div>
270 </div>
271272 <div class="grid">
273 <div class="grid__col-12 u-no-padding">
274275 @{
276277 var nextPageCount = 0;
278 if (Model.CurrentPage < Model.PageCount)
279 {
280 nextPageCount = Model.PageSize + 36;
281 }
282283 var baseUrl = $"{Dynamicweb.Context.Current.Request.Path}?ID={Dynamicweb.Frontend.PageView.Current().ID}&GroupId={Model.Group.Id}&pagesize={nextPageCount}";
284285 if (Model.PageCount > Model.CurrentPage)
286 {
287 <a href="@baseUrl" id="LoadMoreButton" class="btn btn--primary btn--full dw-mod" data-current="1" data-page-size="@Model.PageSize;" data-total="4">
288 @Translate("Load") 36 @Translate("more")
289 </a>
290 }
291 }
292293 <button type="button" class="btn btn--clean" onclick="window.scroll(0, 0)">@Translate("Return to top")</button>
294 </div>
295 </div>
296 @functions {
297298 private static readonly Random _rnd = new Random();
299300 public RandomVariant GetRandomProduct(string rawData, bool render_4)
301 {
302303 if (string.IsNullOrWhiteSpace(rawData))
304 return null;
305306 var variants = rawData
307 .Split(';')
308 .Select(item => item.Split(','))
309 .Where(parts => parts.Length >= 3)
310 .Select(parts => new RandomVariant
311 {
312 ProductId = parts[0].Trim(),
313 VariantId = parts[1].Trim(),
314 Name = parts[2].Trim()
315 })
316 .ToList();
317318 if (!variants.Any())
319 return null;
320321 var image_4 = string.Empty;
322323324 var randomVariant = variants[_rnd.Next(variants.Count)];
325326 if (render_4)
327 {
328 image_4 = "_4";
329 }
330331 randomVariant.Image = $"/files/images/produktbilder/{randomVariant.ProductId}{image_4}.jpg";
332333 return randomVariant;
334335 }
336337 public class RandomVariant
338 {
339 public string ProductId { get; set; }
340 public string VariantId { get; set; }
341 public string Name { get; set; }
342 public string Image { get; set; }
343 }
344 }