1 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.ParagraphViewModel>
2 @using Dynamicweb.Ecommerce.ProductCatalog
3 @using Dynamicweb.Core
4 @using NextechDWAddIn.Common
5
6 @{
7 string theme = !string.IsNullOrWhiteSpace(Model.Item.GetRawValueString("Theme")) ? " theme " + Model.Item.GetRawValueString("Theme").Replace(" ", "").Trim().ToLower() : "";
8 int productsCount = 0;
9 int maxProductsCounter = 0;
10
11 string productInfoFeed = "";
12 bool isLazyLoadingForProductInfoEnabled = Dynamicweb.Core.Converter.ToBoolean(Dynamicweb.Context.Current.Items["IsLazyLoadingForProductInfoEnabled"]);
13 if (isLazyLoadingForProductInfoEnabled)
14 {
15 if (Dynamicweb.Context.Current.Items.Contains("ProductInfoFeed"))
16 {
17 productInfoFeed = Dynamicweb.Context.Current.Items["ProductInfoFeed"]?.ToString();
18 if (!string.IsNullOrEmpty(productInfoFeed))
19 {
20 productInfoFeed = $"data-product-info-feed=\"{productInfoFeed}\"";
21 }
22 }
23 }
24
25 ProductListViewModel productList = null;
26 if (Dynamicweb.Context.Current.Items.Contains("ProductList"))
27 {
28 productList = (ProductListViewModel)Dynamicweb.Context.Current.Items["ProductList"];
29 }
30 else if (Pageview.Page.Item["DummyProductGroup"] != null && Pageview.IsVisualEditorMode)
31 {
32 var pageViewModel = Dynamicweb.Frontend.ContentViewModelFactory.CreatePageInfoViewModel(Pageview.Page);
33 ProductListViewModel groupList = pageViewModel.Item.GetValue("DummyProduct") != null ? pageViewModel.Item.GetValue("DummyProduct") as ProductListViewModel : new ProductListViewModel();
34
35 if (groupList?.Products is object)
36 {
37 productList = groupList;
38 }
39 }
40 }
41
42 @if (productList is object)
43 {
44 <div class="h-100@(theme) product-list item_@Model.Item.SystemName.ToLower()" @productInfoFeed>
45 @{
46 bool isVisualEditor = !string.IsNullOrEmpty(Dynamicweb.Context.Current.Request.QueryString.Get("VisualEdit")) ? Convert.ToBoolean(Dynamicweb.Context.Current.Request.QueryString.Get("VisualEdit")) : false;
47
48 string groupId = productList?.Group?.Id != null ? productList.Group.Id : "";
49 string url = Dynamicweb.Context.Current.Request.RawUrl;
50
51 if (productList.TotalProductsCount > 0)
52 {
53 int pageSizeSetting = Converter.ToInt32(Dynamicweb.Context.Current.Request.QueryString.Get("OriginalPageSize")) > 0 ? Converter.ToInt32(Dynamicweb.Context.Current.Request.QueryString.Get("OriginalPageSize")) : productList.PageSize;
54 int pageNumber = Converter.ToInt32(Dynamicweb.Context.Current.Request.QueryString.Get("PageNum")) > 0 ? Converter.ToInt32(Dynamicweb.Context.Current.Request.QueryString.Get("PageNum")) : productList.CurrentPage;
55 int pageSize = Converter.ToInt32(Dynamicweb.Context.Current.Request.QueryString.Get("PageSize")) > 0 ? Converter.ToInt32(Dynamicweb.Context.Current.Request.QueryString.Get("PageSize")) : productList.PageSize;
56 pageNumber = pageSize != pageSizeSetting ? (pageSize / pageSizeSetting) : pageNumber;
57 int loadedProducts = productList.PageSize > productList.TotalProductsCount ? productList.TotalProductsCount : pageSizeSetting * pageNumber;
58 loadedProducts = loadedProducts > productList.TotalProductsCount ? productList.TotalProductsCount : loadedProducts;
59
60 int currentPageNumber = pageNumber;//CS NT
61 pageNumber += 1;
62
63 string searchQuery = !string.IsNullOrEmpty(Dynamicweb.Context.Current.Request.QueryString.Get("q")) ? Dynamicweb.Context.Current.Request.QueryString.Get("q") : string.Empty;
64 searchQuery = !string.IsNullOrEmpty(Dynamicweb.Context.Current.Request.Form.Get("q")) ? Dynamicweb.Context.Current.Request.Form.Get("q") : searchQuery;
65
66 //CS NT SearchQueryNT == eq
67 string searchQueryNT = !string.IsNullOrEmpty(Dynamicweb.Context.Current.Request.QueryString.Get("eq")) ? Dynamicweb.Context.Current.Request.QueryString.Get("eq") : string.Empty;
68 searchQueryNT = !string.IsNullOrEmpty(Dynamicweb.Context.Current.Request.Form.Get("eq")) ? Dynamicweb.Context.Current.Request.Form.Get("eq") : searchQueryNT;
69
70 string categoryNT = !string.IsNullOrEmpty(Dynamicweb.Context.Current.Request.QueryString.Get("Category")) ? Dynamicweb.Context.Current.Request.QueryString.Get("Category") : string.Empty;
71 categoryNT = !string.IsNullOrEmpty(Dynamicweb.Context.Current.Request.Form.Get("Category")) ? Dynamicweb.Context.Current.Request.Form.Get("Category") : categoryNT;
72
73 string brandNT = !string.IsNullOrEmpty(Dynamicweb.Context.Current.Request.QueryString.Get("Brand")) ? Dynamicweb.Context.Current.Request.QueryString.Get("Brand") : string.Empty;
74 brandNT = !string.IsNullOrEmpty(Dynamicweb.Context.Current.Request.Form.Get("Brand")) ? Dynamicweb.Context.Current.Request.Form.Get("Brand") : brandNT;
75
76 string searchLayout = !string.IsNullOrEmpty(Dynamicweb.Context.Current.Request.QueryString.Get("SearchLayout")) ? Dynamicweb.Context.Current.Request.QueryString.Get("SearchLayout") : string.Empty;
77
78 int itemSourcePageId = Convert.ToInt32(Model.Item.GetRawValueString("ListComponentSource", "0"));
79
80 var pageService = new Dynamicweb.Content.PageService();
81 itemSourcePageId = itemSourcePageId > 0 && pageService.GetPageOrLanguage(itemSourcePageId, Pageview.AreaID) != null ? pageService.GetPageOrLanguage(itemSourcePageId, Pageview.AreaID).ID : itemSourcePageId;
82
83 var page = Dynamicweb.Content.Services.Pages.GetPage(itemSourcePageId);
84
85 if (page != null)
86 {
87 var pageViewModel = Dynamicweb.Frontend.ContentViewModelFactory.CreatePageInfoViewModel(page);
88
89 string gridColumnSize = Model.Item.GetRawValueString("GridLayoutDesktop", "3-columns");
90 gridColumnSize = gridColumnSize == "2-columns" ? "g-col-lg-6" : gridColumnSize;
91 gridColumnSize = gridColumnSize == "3-columns" ? "g-col-lg-4" : gridColumnSize;
92 gridColumnSize = gridColumnSize == "4-columns" ? "g-col-lg-3" : gridColumnSize;
93 gridColumnSize = gridColumnSize == "6-columns" ? "g-col-lg-2" : gridColumnSize;
94 gridColumnSize = gridColumnSize == "list" ? "g-col-lg-12" : gridColumnSize;
95
96 string gridColumnMobileSize = Model.Item.GetRawValueString("GridLayoutMobile", "2-columns");
97 gridColumnMobileSize = gridColumnMobileSize == "list" ? "g-col-12" : gridColumnMobileSize;
98 gridColumnMobileSize = gridColumnMobileSize == "2-columns" ? "g-col-6" : gridColumnMobileSize;
99
100 string listItemTheme = " theme " + pageViewModel.Item.GetRawValueString("Theme", string.Empty).Replace(" ", "").Trim().ToLower();
101 string listItemPadding = pageViewModel.Item.GetRawValueString("ContentPadding", string.Empty);
102 string listItemPaddingClass = string.Empty;
103
104 switch (listItemPadding)
105 {
106 case "small":
107 listItemPaddingClass = " p-2 p-xl-3";
108 break;
109 case "large":
110 listItemPaddingClass = " p-3 p-xl-4";
111 break;
112 case "small-x":
113 listItemPaddingClass = " px-2 px-md-3";
114 break;
115 case "large-x":
116 listItemPaddingClass = " px-3 px-md-4";
117 break;
118 }
119
120 <div class="grid pb-3">
121 <script>
122 gtag("event", "view_item_list", {
123 item_list_id: "product_list_item_repeater",
124 item_list_name: "Product list (Item Repeater)",
125 items: [
126 @foreach (ProductViewModel product in productList.Products)
127 {
128 string itemCategory = "";
129 string itemCategory2 = "";
130 string itemCategory3 = "";
131 string itemCategory4 = "";
132 string itemCategory5 = "";
133 var prodCategories = CommonFunctions.GetProductCategories(Dynamicweb.Ecommerce.Services.ProductGroups.GetGroup(product.PrimaryOrDefaultGroup.Id));
134 if (prodCategories != null && prodCategories.Count >= 1)
135 {
136 prodCategories.Reverse();
137 for(int i = 0; i < prodCategories.Count; i++)
138 {
139 if(i == 0)
140 {
141 itemCategory = prodCategories[i];
142 }else if(i == 1)
143 {
144 itemCategory2 = prodCategories[i];
145 }
146 else if (i == 2)
147 {
148 itemCategory3 = prodCategories[i];
149 }
150 else if (i == 3)
151 {
152 itemCategory4 = prodCategories[i];
153 }
154 else if (i == 4)
155 {
156 itemCategory5 = prodCategories[i];
157 }
158 }
159 }
160 string brand = "";
161 if(product.ProductFields != null && product.ProductFields.Count > 0)
162 {
163 foreach(var p in product.ProductFields)
164 {
165 if(p.Key == "Brand" && p.Value != null)
166 {
167 brand = p.Value.ToString();
168 }
169 }
170 }
171 <text>{
172 item_id: "@product.Number",
173 item_name: "@Dynamicweb.Core.Encoders.HtmlEncoder.JavaScriptStringEncode(product.Name)",
174 currency: "@product.Price.CurrencyCode",
175 price: @PriceViewModelExtensions.ToStringInvariant(product.Price),
176 item_brand: "@brand",
177 item_category: "@itemCategory",
178 item_category2: "@itemCategory2",
179 item_category3: "@itemCategory3",
180 item_category4: "@itemCategory4",
181 item_category5: "@itemCategory5"
182 },</text>
183 }
184 ]
185 });
186 </script>
187
188 @foreach (ProductViewModel product in productList.Products)
189 {
190 if (maxProductsCounter == 0 || (productsCount < maxProductsCounter))
191 {
192 string link = product.GetProductLink(GetPageIdByNavigationTag("Shop"), false);
193
194 if (Dynamicweb.Context.Current.Items.Contains("ProductDetails"))
195 {
196 Dynamicweb.Context.Current.Items["ProductDetails"] = product;
197 }
198 else
199 {
200 Dynamicweb.Context.Current.Items.Add("ProductDetails", product);
201 }
202
203 if (Model.Item.GetString("ListComponentSource") != null)
204 {
205 <article class="@gridColumnMobileSize @gridColumnSize @listItemTheme @listItemPaddingClass d-flex flex-column position-relative product js-product" data-product-id="@product.Id" data-variant-id="@product.VariantId" itemscope itemtype="https://schema.org/Product">
206 @{
207 string clickProductLink = "onclick=\"return clickProductLink('" + @product.Id + "', '" + @product.Name + "', '" + @product.VariantName + "', '" + @product.Price.CurrencyCode + "', '" + @PriceViewModelExtensions.ToStringInvariant(product.Price) + "')\"";
208 }
209 <a href="@link" class="stretched-link" onmouseover="swift.Image.swapImage(event)" onmouseout="swift.Image.swapImage(event)" @clickProductLink>
210 <span class="visually-hidden">@product.Name</span>
211 </a>
212
213 <script>
214 function clickProductLink(productId, productName, productVariant, productCurrency, productPrice) {
215 if (typeof gtag !== "undefined") {
216 gtag("event", "select_item", {
217 item_list_id: "product_list_item_repeater",
218 item_list_name: "Product list (Item Repeater)",
219 items: [
220 {
221 item_id: productId,
222 item_name: productName,
223 currency: productCurrency,
224 item_list_id: "product_list_item_repeater",
225 item_list_name: "Product list (Item Repeater)",
226 item_variant: productVariant,
227 price: productPrice
228 }
229 ]
230 });
231 }
232 }
233 </script>
234
235 @RenderGrid(itemSourcePageId)
236 </article>
237 }
238
239 productsCount++;
240 }
241 }
242 </div>
243
244 <div class="my-3" id="ProductListLoadMore">
245 <div class="text-center">
246 <!--CS NT Hide <div class="opacity-85 mb-3">@loadedProducts @Translate("out of") @productList.TotalProductsCount @Translate("products")</div>-->
247 @*CS NT if (productList.PageCount != 1 && maxProductsCounter == 0 && loadedProducts < productList.TotalProductsCount)*@
248 @if (productList.PageCount != 1)
249 {
250 string sortBySelection = Dynamicweb.Context.Current.Request?.Form["SortBy"] ?? "";
251 sortBySelection = !string.IsNullOrEmpty(Dynamicweb.Context.Current.Request.QueryString.Get("SortBy")) ? Dynamicweb.Context.Current.Request.QueryString.Get("SortBy") : sortBySelection;
252 string mainProductId = !string.IsNullOrEmpty(Dynamicweb.Context.Current.Request.QueryString.Get("MainProductID")) ? Dynamicweb.Context.Current.Request.QueryString.Get("MainProductID") : "";
253
254 <form method="get" action="@url" data-response-target-element=".product-list" data-swap="afterend" class="w-100">
255 @if (productList?.FacetGroups != null)
256 {
257 foreach (FacetGroupViewModel facetGroup in productList.FacetGroups)
258 {
259 foreach (FacetViewModel facetItem in facetGroup.Facets)
260 {
261 foreach (FacetOptionViewModel facetOption in facetItem.Options)
262 {
263 if (facetOption.Selected)
264 {
265 <input type="hidden" name="@facetItem.QueryParameter" value="[@facetOption.Value]">
266 }
267 }
268 }
269 }
270 }
271
272 @if (!string.IsNullOrEmpty(searchQuery))
273 {
274 <input type="hidden" name="q" value="@searchQuery">
275 <input type="hidden" name="SearchLayout" value="@searchLayout">
276 }
277 @if (!string.IsNullOrEmpty(searchQueryNT))
278 {
279 <input type="hidden" name="eq" value="@searchQueryNT">
280 <input type="hidden" name="SearchLayout" value="@searchLayout">
281 }
282
283 @if (!string.IsNullOrEmpty(mainProductId))
284 {
285 <input type="hidden" name="MainProductID" value="@mainProductId">
286 }
287
288 @if (productList?.Group?.Id != null)
289 {
290 <input type="hidden" name="GroupId" value="@groupId">
291 }
292
293 <input type="hidden" name="OriginalPageSize" value="@pageSizeSetting">
294 <input type="hidden" name="PageSize" value="@(loadedProducts + pageSizeSetting)">
295 <input type="hidden" name="PageNum" value="@pageNumber">
296 <input type="hidden" name="SortBy" value="@sortBySelection">
297 <input type="hidden" name="RequestType" value="UpdateList">
298 <input type="hidden" name="ParagraphID" value="@Model.ID">
299
300 @if (productList?.FacetGroups is object)
301 {
302 //string nextPageLink = $"/Default.aspx?ID={Pageview.Page.ID}&PageNum={pageNumber}&SortBy={sortBySelection}";
303
304 string pageLink_ = $"/Default.aspx?ID={Pageview.Page.ID}&GroupId={groupId}&PageNum=[PageNum]&SortBy={sortBySelection}";
305
306 foreach (FacetGroupViewModel facetGroup in productList.FacetGroups)
307 {
308 foreach (FacetViewModel facetItem in facetGroup.Facets)
309 {
310 foreach (FacetOptionViewModel facetOption in facetItem.Options)
311 {
312 if (facetOption.Selected)
313 {
314 string fo = facetOption.Value.Replace(" ","+");
315 fo=fo.Replace("&","%26");
316 //pageLink_ += "&" + facetItem.QueryParameter + "=[" + facetOption.Value + "]";
317 pageLink_ += "&" + facetItem.QueryParameter + "=[" + fo + "]";
318 }
319 }
320 }
321 }
322
323 pageLink_ += !string.IsNullOrEmpty(searchQuery) ? "&q=" + searchQuery : "";
324 pageLink_ += !string.IsNullOrEmpty(searchQueryNT) ? "&eq=" + searchQueryNT : "";
325 pageLink_ += !string.IsNullOrEmpty(categoryNT) ? "&Category=" + categoryNT : "";
326 pageLink_ += !string.IsNullOrEmpty(brandNT) ? "&Brand=" + brandNT : "";
327
328
329 string disableLoadMore = isLazyLoadingForProductInfoEnabled ? "d-none" : "";
330
331 @*CS NT Pagination 20240522..*@
332 string prevPageDisabledNT = currentPageNumber == 1 ? "disabled" : "";
333 string nextPageDisabledNT = productList.PageCount == currentPageNumber ? "disabled" : "";
334
335 string firstPageLink = pageLink_.Replace("[PageNum]","1");
336 string lastPageLink = pageLink_.Replace("[PageNum]",productList.PageCount.ToString());
337 string iconPath = "/Files/Templates/Designs/Swift/Assets/icons/";
338
339
340 string nextPageLink_ = pageLink_.Replace("[PageNum]",(currentPageNumber + 1).ToString());
341 string prevPageLink_ = pageLink_.Replace("[PageNum]",(currentPageNumber - 1).ToString());
342
343
344
345 <div class="grid" style="margin-top: 2em;margin-bottom: 2em;text-align:center;">
346 <div class="g-col-12">
347 <div id="productlistnavigation">
348 <span id="pagenavigation">
349 <a id="goToFirstProductPage" href="@firstPageLink" onclick="" class="@prevPageDisabledNT">
350 <span><i class="fa fa-chevron-double-left"></i> First</span>
351 </a>
352
353 <a id="prevPageNT" class="pagination--button @prevPageDisabledNT" href="@prevPageLink_">
354 <span class="icon-2 ms-1 position-md-static end-0">
355 @ReadFile(iconPath + "chevron-left.svg")
356 </span>
357 </a>
358
359 <span id="pagecount"> @Translate("Page") @currentPageNumber @Translate("of") @productList.PageCount</span>
360
361 <a id="nextPageNT" class="pagination--button @nextPageDisabledNT" href="@nextPageLink_">
362 <span class="icon-2 ms-1 position-md-static end-0">
363 @ReadFile(iconPath + "chevron-right.svg")
364 </span>
365 </a>
366
367 <a id="goToLastProductPage" href="@lastPageLink" class="@nextPageDisabledNT">
368 <span>Last </span>
369 </a>
370 <br>
371 </span>
372 </div>
373 </div>
374 </div>
375
376
377
378 @*..CS NT Pagination 20240522*@
379 @*<a href="@nextPageLink" class="btn btn-primary swift_load_more_button @disableLoadMore" onclick="swift.ProductList.Update(event)" id="LoadMoreButton_@Model.ID">@Translate("Load more products")</a>*@
380 }
381 </form>
382 }
383 </div>
384 </div>
385
386 <script>
387 function switchVariantProduct(id, price, imagesrc) {
388 var productImageElement = document.querySelector("#ProductImage_" + id);
389 var productPriceElement = document.querySelector("#ProductPrice_" + id + " .text-price");
390
391 if (productPriceElement) {
392 productPriceElement.innerText = price;
393 }
394
395 if (productImageElement) {
396 productImageElement.src = imagesrc;
397
398 var imageSrcset = productImageElement.srcset;
399 imageSrcset = imageSrcset.replace(/image=.*?&/g, 'image=' + imagesrc + "&");
400
401 productImageElement.srcset = imageSrcset;
402 }
403 }
404 </script>
405 }
406 else if (Pageview.IsVisualEditorMode)
407 {
408 <div class="alert alert-dark m-0" role="alert">
409 <span>@Translate("The selected component does not exist anymore")</span>
410 </div>
411 }
412 }
413 else
414 {
415 string noProductsFoundMessage = !string.IsNullOrEmpty(Model.Item.GetString("NoProductsFoundMessage")) ? Model.Item.GetString("NoProductsFoundMessage") : Translate("We did not find anything matching your search result");
416 bool hasSubgroups = false;
417
418 if (productList.SubGroups != null)
419 {
420 hasSubgroups = productList.SubGroups.Any();
421 }
422
423 if (!Model.Item.GetBoolean("HideNoProductsFoundMessage"))
424 {
425 if (!isVisualEditor)
426 {
427 <div class="alert alert-dark m-0" role="alert">
428 @noProductsFoundMessage
429 </div>
430 }
431 else
432 {
433 <div class="alert alert-dark m-0" role="alert">
434 @Translate("Product list: The list will be shown here, if any")
435 </div>
436 }
437 }
438 else if (!hasSubgroups)
439 {
440 <div class="alert alert-dark m-0" role="alert">
441 @noProductsFoundMessage
442 </div>
443 }
444 }
445 }
446 </div>
447 }
448 else if (Pageview.IsVisualEditorMode)
449 {
450 <div class="alert alert-dark m-0" role="alert">
451 <span>@Translate("Product list item repeater: The repeater paragraph will be shown here, if any products are available")</span>
452 </div>
453 }
454
