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