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 @functions
8 {
9 string liveInfoClass = "";
10 }
11
12 @{
13 bool isDetailPage = !string.IsNullOrEmpty(Dynamicweb.Context.Current.Request.QueryString.Get("ProductID"));
14 string theme = !string.IsNullOrWhiteSpace(Model.Item.GetRawValueString("Theme")) ? " theme " + Model.Item.GetRawValueString("Theme").Replace(" ", "").Trim().ToLower() : "";
15
16 string productInfoFeed = "";
17 bool isLazyLoadingForProductInfoEnabled = Dynamicweb.Ecommerce.DynamicwebLiveIntegration.TemplatesHelper.IsLazyLoadingForProductInfoEnabled;
18 if (isLazyLoadingForProductInfoEnabled)
19 {
20 if (Dynamicweb.Context.Current.Items.Contains("ProductInfoFeed"))
21 {
22 productInfoFeed = Dynamicweb.Context.Current.Items["ProductInfoFeed"]?.ToString();
23 if (!string.IsNullOrEmpty(productInfoFeed))
24 {
25 productInfoFeed = $"data-product-info-feed=\"{productInfoFeed}\"";
26 }
27 }
28 liveInfoClass = "js-live-info";
29 }
30
31 }
32
33 @if (!isDetailPage) {
34 if (!string.IsNullOrEmpty(theme)) {
35 <div class="@(theme) item_@Model.Item.SystemName.ToLower()" @productInfoFeed>
36 @RenderProductList()
37 </div>
38 } else {
39 <div class="item_@Model.Item.SystemName.ToLower()" @productInfoFeed>
40 @RenderProductList()
41 </div>
42 }
43 }
44
45 @helper RenderProductList () {
46 bool isVisualEditor = !string.IsNullOrEmpty(Dynamicweb.Context.Current.Request.QueryString.Get("VisualEdit")) ? Convert.ToBoolean(Dynamicweb.Context.Current.Request.QueryString.Get("VisualEdit")) : false;
47
48 ProductListViewModel productList = new ProductListViewModel();
49
50 string googleAnalyticsTrackingID = Pageview.AreaSettings.GetString("GoogleAnalyticsTrackingID");
51 string googleAnalyticsMeasurementID = Pageview.AreaSettings.GetString("GoogleAnalyticsMeasurementID");
52 var cookieOptInLevel = CookieManager.GetCookieOptInLevel();
53 bool allowTracking = cookieOptInLevel == CookieOptInLevel.All || (cookieOptInLevel == CookieOptInLevel.Functional && CookieManager.GetCookieOptInCategories().Contains("Statistical"));
54
55 ProductListViewModelSettings productListSetting = new ProductListViewModelSettings
56 {
57 LanguageId = Dynamicweb.Ecommerce.Common.Context.LanguageID,
58 CurrencyCode = Dynamicweb.Ecommerce.Common.Context.Currency.Code,
59 CountryCode = Dynamicweb.Ecommerce.Common.Context.Country.Code2,
60 ShopId = Pageview.Area.EcomShopId
61 };
62
63 int productsCount = 0;
64 int maxProductsCounter = 0;
65
66 if (Dynamicweb.Context.Current.Items.Contains("ProductList"))
67 {
68 productList = (ProductListViewModel)Dynamicweb.Context.Current.Items["ProductList"];
69 }
70 else if (Pageview.Item["DummyProductGroup"] != null)
71 {
72 var pageViewModel = Dynamicweb.Frontend.ContentViewModelFactory.CreatePageInfoViewModel(Pageview.Page);
73 ProductListViewModel groupList = pageViewModel.Item.GetValue("DummyProductGroup") != null ? pageViewModel.Item.GetValue("DummyProductGroup") as ProductListViewModel : new ProductListViewModel();
74
75 if (groupList?.Group?.Id != null) {
76 productList = ViewModelFactory.CreateView(productListSetting, groupList.Group.Id);
77 Dynamicweb.Context.Current.Items.Add("ProductList", productList);
78 } else {
79 productList = ViewModelFactory.CreateView(productListSetting, Dynamicweb.Ecommerce.Services.ProductGroups.GetGroups(Dynamicweb.Ecommerce.Common.Context.LanguageID).FirstOrDefault().Id);
80
81 Dynamicweb.Context.Current.Items.Add("ProductList", productList);
82 }
83 }
84 else if (Pageview.Item["DummyProductGroup"] == null) {
85 productList = ViewModelFactory.CreateView(productListSetting, Dynamicweb.Ecommerce.Services.ProductGroups.GetGroups(Dynamicweb.Ecommerce.Common.Context.LanguageID).FirstOrDefault().Id);
86 Dynamicweb.Context.Current.Items.Add("ProductList", productList);
87 }
88
89 if (Pageview.Page.Item.SystemName == "Swift_ProductListComponentEdit") {
90 if (productList.TotalProductsCount == 0) {
91 ProductViewModelSettings productSetting = new ProductViewModelSettings
92 {
93 LanguageId = Dynamicweb.Ecommerce.Common.Context.LanguageID,
94 CurrencyCode = Dynamicweb.Ecommerce.Common.Context.Currency.Code,
95 CountryCode = Dynamicweb.Ecommerce.Common.Context.Country.Code2,
96 ShopId = Pageview.Area.EcomShopId
97 };
98
99 foreach (var product in Dynamicweb.Ecommerce.Services.Products.GetLastActiveProducts(3, Dynamicweb.Ecommerce.Common.Context.LanguageID, false)) {
100 var productView = ViewModelFactory.CreateView(productSetting, product.Id);
101 productList.Products.Add(productView);
102 }
103
104 Dynamicweb.Context.Current.Items["ProductList"] = productList;
105 }
106
107 productList.TotalProductsCount = 3;
108 productList.PageSize = 3;
109 maxProductsCounter = 3;
110 }
111
112 string groupId = productList?.Group?.Id != null ? productList.Group.Id : "";
113 string url = Dynamicweb.Context.Current.Request.RawUrl;
114
115 if (productList.TotalProductsCount > 0) {
116 int pageSizeSetting = 32;
117 int pageSize = productList.PageSize;
118 pageSize += pageSizeSetting;
119
120 int loadedProducts = productList.PageSize > productList.TotalProductsCount ? productList.TotalProductsCount : productList.PageSize;
121 string searchQuery = !string.IsNullOrEmpty(Dynamicweb.Context.Current.Request.QueryString.Get("q")) ? Dynamicweb.Context.Current.Request.QueryString.Get("q") : "";
122 string searchLayout = !string.IsNullOrEmpty(Dynamicweb.Context.Current.Request.QueryString.Get("SearchLayout")) ? Dynamicweb.Context.Current.Request.QueryString.Get("SearchLayout") : "";
123
124 int listItemSourcePageId = Model.Item.GetInt32("ListComponentSource");
125 var page = Dynamicweb.Services.Pages.GetPage(listItemSourcePageId);
126
127 if (page != null) {
128 var pageViewModel = Dynamicweb.Frontend.ContentViewModelFactory.CreatePageInfoViewModel(page);
129
130 string gridColumnSize = Model.Item.GetRawValueString("GridLayoutDesktop", "3-columns");
131 gridColumnSize = gridColumnSize == "2-columns" ? "g-col-lg-6" : gridColumnSize;
132 gridColumnSize = gridColumnSize == "3-columns" ? "g-col-lg-4" : gridColumnSize;
133 gridColumnSize = gridColumnSize == "4-columns" ? "g-col-lg-3" : gridColumnSize;
134 gridColumnSize = gridColumnSize == "6-columns" ? "g-col-lg-2" : gridColumnSize;
135 gridColumnSize = gridColumnSize == "list" ? "" : gridColumnSize;
136
137 string gridColumnMobileSize = Model.Item.GetRawValueString("GridLayoutMobile", "2-columns");
138 gridColumnMobileSize = gridColumnMobileSize == "list" ? "g-col-12" : gridColumnMobileSize;
139 gridColumnMobileSize = gridColumnMobileSize == "2-columns" ? "g-col-6" : gridColumnMobileSize;
140
141 string listItemTheme = " theme " + pageViewModel.Item.GetRawValueString("Theme", string.Empty).Replace(" ", "").Trim().ToLower();
142 string listItemPadding = pageViewModel.Item.GetRawValueString("ContentPadding", string.Empty);
143 string listItemPaddingClass = string.Empty;
144
145 switch(listItemPadding)
146 {
147 case "small":
148 listItemPaddingClass = " p-2 p-xl-3";
149 break;
150 case "large":
151 listItemPaddingClass = " p-3 p-xl-4";
152 break;
153 case "small-x":
154 listItemPaddingClass = " px-2 px-md-3";
155 break;
156 case "large-x":
157 listItemPaddingClass = " px-3 px-md-4";
158 break;
159 }
160
161 <div class="grid">
162 @if (!string.IsNullOrWhiteSpace(googleAnalyticsMeasurementID) && allowTracking)
163 {
164 <script>
165 gtag("event", "view_item_list", {
166 item_list_id: "product_list_item_repeater",
167 item_list_name: "Product list (Item Repeater)",
168 items: [
169 @foreach (ProductViewModel product in productList.Products)
170 {
171 <text>{
172 item_id: "@product.Number",
173 item_name: "@product.Name",
174 currency: "@product.Price.CurrencyCode",
175 price: @product.Price.Price
176 },</text>
177 }
178 ]
179 });
180 </script>
181 }
182
183 @foreach (ProductViewModel product in productList.Products)
184 {
185 if (maxProductsCounter == 0 || (productsCount < maxProductsCounter)) {
186 string detailsPageLink = !string.IsNullOrEmpty(GetPageIdByNavigationTag("Shop").ToString()) ? GetPageIdByNavigationTag("Shop").ToString() : string.Empty;
187 string selectedDetailPage = Dynamicweb.Ecommerce.Services.ProductGroups.GetGroup(product.PrimaryOrDefaultGroup.Id)?.Meta.PrimaryPage ?? string.Empty;
188 string detailsPageId = detailsPageLink != string.Empty ? detailsPageLink.Substring(detailsPageLink.LastIndexOf('=') + 1) : string.Empty;
189 string selectedDetailPageId = selectedDetailPage != string.Empty ? selectedDetailPage.Substring(selectedDetailPage.LastIndexOf('=') + 1) : string.Empty;
190 detailsPageId = string.IsNullOrEmpty(selectedDetailPage) ? detailsPageId : selectedDetailPageId;
191
192 string variantIdForLink = !string.IsNullOrEmpty(product.VariantId) ? $"&VariantID={product.VariantId}" : "";
193 variantIdForLink = string.IsNullOrEmpty(variantIdForLink) && !string.IsNullOrEmpty(product.DefaultVariantId) ? $"&VariantID={product.DefaultVariantId}" : variantIdForLink;
194
195 string link = "Default.aspx?ID=" + GetPageIdByNavigationTag("Shop");
196 link += $"&GroupID={product.PrimaryOrDefaultGroup.Id}";
197 link += $"&ProductID={product.Id}";
198 link += variantIdForLink;
199 link = Dynamicweb.Frontend.SearchEngineFriendlyURLs.GetFriendlyUrl(link);
200
201 if (Dynamicweb.Context.Current.Items.Contains("ProductDetails"))
202 {
203 Dynamicweb.Context.Current.Items["ProductDetails"] = product;
204 }
205 else
206 {
207 Dynamicweb.Context.Current.Items.Add("ProductDetails", product);
208 }
209
210 if (Model.Item.GetString("ListComponentSource") != null) {
211 <article class="@gridColumnMobileSize @gridColumnSize @listItemTheme @listItemPaddingClass d-flex flex-column position-relative product js-product @liveInfoClass p-3" data-product-id="@product.Id" itemscope itemtype="https://schema.org/Product">
212 @{
213 string clickProductLink = string.Empty;
214 if (!string.IsNullOrWhiteSpace(googleAnalyticsMeasurementID) && allowTracking)
215 {
216 clickProductLink = "onclick=\"return clickProductLink('" + @product.Id + "', '" + @product.Name + "', '" + @product.VariantName + "', '" + @product.Price.CurrencyCode + "', '" + @product.Price.Price + "')\"";
217 }
218 }
219 <a href="@link" class="stretched-link" onmouseover="swift.Image.swapImage(event)" onmouseout="swift.Image.swapImage(event)" @clickProductLink>
220 <span class="visually-hidden">@product.Name</span>
221 </a>
222 @if (!string.IsNullOrWhiteSpace(googleAnalyticsMeasurementID) && allowTracking)
223 {
224 <script>
225 function clickProductLink(productId, productName, productVariant, productCurrency, productPrice) {
226 if (typeof gtag !== "undefined") {
227 gtag("event", "select_item", {
228 item_list_id: "product_list_item_repeater",
229 item_list_name: "Product list (Item Repeater)",
230 items: [
231 {
232 item_id: productId,
233 item_name: productName,
234 currency: productCurrency,
235 item_list_id: "product_list_item_repeater",
236 item_list_name: "Product list (Item Repeater)",
237 item_variant: productVariant,
238 price: productPrice
239 }
240 ]
241 });
242 }
243 }
244 </script>
245 }
246 @RenderGrid(listItemSourcePageId)
247 </article>
248 }
249
250 productsCount++;
251 }
252 }
253 </div>
254
255 <div class="my-3">
256 <div class="text-center">
257 <div class="opacity-85 mb-3">@loadedProducts @Translate("out of") @productList.TotalProductsCount @Translate("products")</div>
258 @if (productList.PageCount != 1 && maxProductsCounter == 0) {
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
262 <form method="get" action="@url" data-response-target-element="content" class="w-100">
263 @if (productList?.FacetGroups != null) {
264 foreach (FacetGroupViewModel facetGroup in productList.FacetGroups)
265 {
266 foreach (FacetViewModel facetItem in facetGroup.Facets)
267 {
268 foreach (FacetOptionViewModel facetOption in facetItem.Options)
269 {
270 if (facetOption.Selected)
271 {
272 <input type="hidden" name="@facetItem.QueryParameter" value="[@facetOption.Value]">
273 }
274 }
275 }
276 }
277 }
278
279 @if (!string.IsNullOrEmpty(searchQuery)) {
280 <input type="hidden" name="q" value="@searchQuery">
281 <input type="hidden" name="SearchLayout" value="@searchLayout">
282 }
283 @*
284 @if (productList?.Group?.Id != null) {
285 <input type="hidden" name="GroupId" value="@productList.Group.Id">
286 }
287 *@
288 <input type="hidden" name="PageSize" value="@pageSize">
289 <input type="hidden" name="SortBy" value="@sortBySelection">
290 <input type="hidden" name="RequestType" value="UpdateList">
291
292 @{
293 string nextPageLink = "/Default.aspx?ID=" + Pageview.Page.ID + "&PageSize=" + pageSize + "&SortBy=" + sortBySelection;
294
295 foreach (FacetGroupViewModel facetGroup in productList.FacetGroups)
296 {
297 foreach (FacetViewModel facetItem in facetGroup.Facets)
298 {
299 foreach (FacetOptionViewModel facetOption in facetItem.Options)
300 {
301 if (facetOption.Selected)
302 {
303 nextPageLink += "&" + facetItem.QueryParameter + "=[" + facetOption.Value + "]";
304 }
305 }
306 }
307 }
308
309 nextPageLink += productList?.Group?.Id != null ? "&GroupID=" + productList.Group.Id : "";
310 nextPageLink += !string.IsNullOrEmpty(searchQuery) ? "&q=" + searchQuery : "";
311 }
312
313 <a href="@nextPageLink" class="btn btn-primary" type="button" onclick="swift.ProductList.Update(event)" id="LoadMoreButton_@Model.ID">@Translate("Load more products")</a>
314 </form>
315 }
316 </div>
317 </div>
318
319 <script>
320 function switchVariantProduct(id, price, imagesrc) {
321 var productImageElement = document.querySelector("#ProductImage_" + id);
322 var productPriceElement = document.querySelector("#ProductPrice_" + id + " .text-price");
323
324 if (productPriceElement) {
325 productPriceElement.innerText = price;
326 }
327
328 if (productImageElement) {
329 productImageElement.src = imagesrc;
330
331 var imageSrcset = productImageElement.srcset;
332 imageSrcset = imageSrcset.replace(/image=.*?&/g, 'image=' + imagesrc + "&");
333
334 productImageElement.srcset = imageSrcset;
335 }
336 }
337 </script>
338 } else if (Pageview.IsVisualEditorMode) {
339 <div class="alert alert-dark m-0" role="alert">
340 <span>@Translate("The selected component does not exist anymore")</span>
341 </div>
342 }
343 } else {
344 string noProductsFoundMessage = !string.IsNullOrEmpty(Model.Item.GetString("NoProductsFoundMessage")) ? Model.Item.GetString("NoProductsFoundMessage") : Translate("We did not find anything matching your search result");
345 bool hasSubgroups = false;
346
347 if (productList.SubGroups != null)
348 {
349 hasSubgroups = productList.SubGroups.Any();
350 }
351
352 if (!Model.Item.GetBoolean("HideNoProductsFoundMessage")) {
353 if (!isVisualEditor)
354 {
355 <div class="alert alert-dark m-0" role="alert">
356 @noProductsFoundMessage
357 </div>
358 } else {
359 <div class="alert alert-dark m-0" role="alert">
360 @Translate("Product list: The list will be shown here, if any")
361 </div>
362 }
363 } else if (!hasSubgroups)
364 {
365 <div class="alert alert-dark m-0" role="alert">
366 @noProductsFoundMessage
367 </div>
368 }
369 }
370 }
371