1 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.ParagraphViewModel>
2 @using Dynamicweb.Ecommerce.ProductCatalog
3 @using Dynamicweb.Core
4 @using Dynamicweb.Ecommerce.CustomerExperienceCenter.Favorites
5 @using Dynamicweb.Environment
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 groupId = productList?.Group?.Id != null ? productList.Group.Id : "";
50 string url = Dynamicweb.Context.Current.Request.RawUrl;
51
52 if (productList.TotalProductsCount > 0)
53 {
54 int pageSizeSetting = Converter.ToInt32(Dynamicweb.Context.Current.Request.QueryString.Get("OriginalPageSize")) > 0 ? Converter.ToInt32(Dynamicweb.Context.Current.Request.QueryString.Get("OriginalPageSize")) : productList.PageSize;
55 int pageNumber = Converter.ToInt32(Dynamicweb.Context.Current.Request.QueryString.Get("PageNum")) > 0 ? Converter.ToInt32(Dynamicweb.Context.Current.Request.QueryString.Get("PageNum")) : productList.CurrentPage;
56 int pageSize = Converter.ToInt32(Dynamicweb.Context.Current.Request.QueryString.Get("PageSize")) > 0 ? Converter.ToInt32(Dynamicweb.Context.Current.Request.QueryString.Get("PageSize")) : productList.PageSize;
57 pageNumber = pageSize != pageSizeSetting ? (pageSize / pageSizeSetting) : pageNumber;
58 int loadedProducts = productList.PageSize > productList.TotalProductsCount ? productList.TotalProductsCount : pageSizeSetting * pageNumber;
59 loadedProducts = loadedProducts > productList.TotalProductsCount ? productList.TotalProductsCount : loadedProducts;
60
61 pageNumber += 1;
62
63 string searchQuery = !string.IsNullOrEmpty(Dynamicweb.Context.Current.Request.QueryString.Get("q")) ? Dynamicweb.Context.Current.Request.QueryString.Get("q") : "";
64 string searchLayout = !string.IsNullOrEmpty(Dynamicweb.Context.Current.Request.QueryString.Get("SearchLayout")) ? Dynamicweb.Context.Current.Request.QueryString.Get("SearchLayout") : "";
65
66 int listItemSourcePageId = Model.Item.GetInt32("ListComponentSource");
67 var page = Dynamicweb.Content.Services.Pages.GetPage(listItemSourcePageId);
68
69 if (page != null)
70 {
71 var pageViewModel = Dynamicweb.Frontend.ContentViewModelFactory.CreatePageInfoViewModel(page);
72
73 string gridColumnSize = Model.Item.GetRawValueString("GridLayoutDesktop", "3-columns");
74 gridColumnSize = gridColumnSize == "2-columns" ? "g-col-lg-6" : gridColumnSize;
75 gridColumnSize = gridColumnSize == "3-columns" ? "g-col-lg-4" : gridColumnSize;
76 gridColumnSize = gridColumnSize == "4-columns" ? "g-col-lg-3" : gridColumnSize;
77 gridColumnSize = gridColumnSize == "6-columns" ? "g-col-lg-2" : gridColumnSize;
78 gridColumnSize = gridColumnSize == "list" ? "" : gridColumnSize;
79
80 string gridColumnMobileSize = Model.Item.GetRawValueString("GridLayoutMobile", "2-columns");
81 gridColumnMobileSize = gridColumnMobileSize == "list" ? "g-col-12" : gridColumnMobileSize;
82 gridColumnMobileSize = gridColumnMobileSize == "2-columns" ? "g-col-6" : gridColumnMobileSize;
83
84 string listItemTheme = " theme " + pageViewModel.Item.GetRawValueString("Theme", string.Empty).Replace(" ", "").Trim().ToLower();
85 string listItemPadding = pageViewModel.Item.GetRawValueString("ContentPadding", string.Empty);
86 string listItemPaddingClass = string.Empty;
87
88 switch (listItemPadding)
89 {
90 case "small":
91 listItemPaddingClass = " p-2 p-xl-3";
92 break;
93 case "large":
94 listItemPaddingClass = " p-3 p-xl-4";
95 break;
96 case "small-x":
97 listItemPaddingClass = " px-2 px-md-3";
98 break;
99 case "large-x":
100 listItemPaddingClass = " px-3 px-md-4";
101 break;
102 }
103
104 <div class="grid">
105 <script>
106 gtag("event", "view_item_list", {
107 item_list_id: "product_list_item_repeater",
108 item_list_name: "Product list (Item Repeater)",
109 items: [
110 @foreach (ProductViewModel product in productList.Products)
111 {
112 <text>{
113 item_id: "@product.Number",
114 item_name: "@Dynamicweb.Core.Encoders.HtmlEncoder.JavaScriptStringEncode(product.Name)",
115 currency: "@product.Price.CurrencyCode",
116 price: @PriceViewModelExtensions.ToStringInvariant(product.Price)
117 },</text>
118 }
119 ]
120 });
121 </script>
122
123 @foreach (ProductViewModel product in productList.Products)
124 {
125 if (maxProductsCounter == 0 || (productsCount < maxProductsCounter))
126 {
127 string link = product.GetProductLink(GetPageIdByNavigationTag("Shop"), false);
128
129 if (Dynamicweb.Context.Current.Items.Contains("ProductDetails"))
130 {
131 Dynamicweb.Context.Current.Items["ProductDetails"] = product;
132 }
133 else
134 {
135 Dynamicweb.Context.Current.Items.Add("ProductDetails", product);
136 }
137
138 if (Model.Item.GetString("ListComponentSource") != null)
139 {
140 <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">
141 @{
142 string clickProductLink = "onclick=\"return clickProductLink('" + @product.Id + "', '" + @product.Name + "', '" + @product.VariantName + "', '" + @product.Price.CurrencyCode + "', '" + @PriceViewModelExtensions.ToStringInvariant(product.Price) + "')\"";
143 }
144 <a href="@link" class="stretched-link" onmouseover="swift.Image.swapImage(event)" onmouseout="swift.Image.swapImage(event)" @clickProductLink>
145 <span class="visually-hidden">@product.Name</span>
146 </a>
147 <script>
148 function clickProductLink(productId, productName, productVariant, productCurrency, productPrice) {
149 if (typeof gtag !== "undefined") {
150 gtag("event", "select_item", {
151 item_list_id: "product_list_item_repeater",
152 item_list_name: "Product list (Item Repeater)",
153 items: [
154 {
155 item_id: productId,
156 item_name: productName,
157 currency: productCurrency,
158 item_list_id: "product_list_item_repeater",
159 item_list_name: "Product list (Item Repeater)",
160 item_variant: productVariant,
161 price: productPrice
162 }
163 ]
164 });
165 }
166 }
167 </script>
168
169 @RenderGrid(listItemSourcePageId)
170 </article>
171 }
172
173 productsCount++;
174 }
175 }
176 </div>
177
178 <div class="my-3" id="ProductListLoadMore">
179 <div class="text-center">
180 <div class="opacity-85 mb-3">@loadedProducts @Translate("out of") @productList.TotalProductsCount @Translate("products")</div>
181 @if (productList.PageCount != 1 && maxProductsCounter == 0 && loadedProducts < productList.TotalProductsCount)
182 {
183 string sortBySelection = Dynamicweb.Context.Current.Request?.Form["SortBy"] ?? "";
184 sortBySelection = !string.IsNullOrEmpty(Dynamicweb.Context.Current.Request.QueryString.Get("SortBy")) ? Dynamicweb.Context.Current.Request.QueryString.Get("SortBy") : sortBySelection;
185 string mainProductId = !string.IsNullOrEmpty(Dynamicweb.Context.Current.Request.QueryString.Get("MainProductID")) ? Dynamicweb.Context.Current.Request.QueryString.Get("MainProductID") : "";
186
187 <form method="get" action="@url" data-response-target-element=".product-list" data-swap="afterend" class="w-100">
188 @if (productList?.FacetGroups != null)
189 {
190 foreach (FacetGroupViewModel facetGroup in productList.FacetGroups)
191 {
192 foreach (FacetViewModel facetItem in facetGroup.Facets)
193 {
194 foreach (FacetOptionViewModel facetOption in facetItem.Options)
195 {
196 if (facetOption.Selected)
197 {
198 <input type="hidden" name="@facetItem.QueryParameter" value="[@facetOption.Value]">
199 }
200 }
201 }
202 }
203 }
204
205 @if (!string.IsNullOrEmpty(searchQuery))
206 {
207 <input type="hidden" name="q" value="@searchQuery">
208 <input type="hidden" name="SearchLayout" value="@searchLayout">
209 }
210
211 @if (!string.IsNullOrEmpty(mainProductId))
212 {
213 <input type="hidden" name="MainProductID" value="@mainProductId">
214 }
215
216 @if (productList?.Group?.Id != null)
217 {
218 <input type="hidden" name="GroupId" value="@productList.Group.Id">
219 }
220
221 <input type="hidden" name="OriginalPageSize" value="@pageSizeSetting">
222 <input type="hidden" name="PageSize" value="@(loadedProducts + pageSizeSetting)">
223 <input type="hidden" name="PageNum" value="@pageNumber">
224 <input type="hidden" name="SortBy" value="@sortBySelection">
225 <input type="hidden" name="RequestType" value="UpdateList">
226 <input type="hidden" name="ParagraphID" value="@Model.ID">
227
228 @if (productList?.FacetGroups is object)
229 {
230 string nextPageLink = $"/Default.aspx?ID={Pageview.Page.ID}&PageNum={pageNumber}&SortBy={sortBySelection}";
231
232 foreach (FacetGroupViewModel facetGroup in productList.FacetGroups)
233 {
234 foreach (FacetViewModel facetItem in facetGroup.Facets)
235 {
236 foreach (FacetOptionViewModel facetOption in facetItem.Options)
237 {
238 if (facetOption.Selected)
239 {
240 nextPageLink += "&" + facetItem.QueryParameter + "=[" + facetOption.Value + "]";
241 }
242 }
243 }
244 }
245
246 nextPageLink += productList?.Group?.Id != null ? "&GroupID=" + productList.Group.Id : "";
247 nextPageLink += !string.IsNullOrEmpty(searchQuery) ? "&q=" + searchQuery : "";
248 string disableLoadMore = isLazyLoadingForProductInfoEnabled ? "d-none" : "";
249
250 <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>
251 }
252 </form>
253 }
254 </div>
255 </div>
256
257 <script>
258 function switchVariantProduct(id, price, imagesrc) {
259 var productImageElement = document.querySelector("#ProductImage_" + id);
260 var productPriceElement = document.querySelector("#ProductPrice_" + id + " .text-price");
261
262 if (productPriceElement) {
263 productPriceElement.innerText = price;
264 }
265
266 if (productImageElement) {
267 productImageElement.src = imagesrc;
268
269 var imageSrcset = productImageElement.srcset;
270 imageSrcset = imageSrcset.replace(/image=.*?&/g, 'image=' + imagesrc + "&");
271
272 productImageElement.srcset = imageSrcset;
273 }
274 }
275 </script>
276 }
277 else if (Pageview.IsVisualEditorMode)
278 {
279 <div class="alert alert-dark m-0" role="alert">
280 <span>@Translate("The selected component does not exist anymore")</span>
281 </div>
282 }
283 }
284 else
285 {
286 string noProductsFoundMessage = !string.IsNullOrEmpty(Model.Item.GetString("NoProductsFoundMessage")) ? Model.Item.GetString("NoProductsFoundMessage") : Translate("We did not find anything matching your search result");
287 bool hasSubgroups = false;
288
289 if (productList.SubGroups != null)
290 {
291 hasSubgroups = productList.SubGroups.Any();
292 }
293
294 if (!Model.Item.GetBoolean("HideNoProductsFoundMessage"))
295 {
296 if (!isVisualEditor)
297 {
298 <div class="alert alert-dark m-0" role="alert">
299 @noProductsFoundMessage
300 </div>
301 }
302 else
303 {
304 <div class="alert alert-dark m-0" role="alert">
305 @Translate("Product list: The list will be shown here, if any")
306 </div>
307 }
308 }
309 else if (!hasSubgroups)
310 {
311 <div class="alert alert-dark m-0" role="alert">
312 @noProductsFoundMessage
313 </div>
314 }
315 }
316 }
317 </div>
318 }
319 else if (Pageview.IsVisualEditorMode)
320 {
321 <div class="alert alert-dark m-0" role="alert">
322 <span>@Translate("Product list item repeater: The repeater paragraph will be shown here, if any products are available")</span>
323 </div>
324 }
325
