1 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.ParagraphViewModel>
2 @using Dynamicweb.Ecommerce.ProductCatalog
3 @using Dynamicweb.Core
4
5 @{
6 int productsCount = 0;
7 int maxProductsCounter = 0;
8
9 ProductListViewModel? productList = null;
10 if (Dynamicweb.Context.Current is not null && Dynamicweb.Context.Current.Items.Contains("ProductList"))
11 {
12 productList = (ProductListViewModel?)Dynamicweb.Context.Current.Items["ProductList"];
13 }
14 }
15
16 @if (productList is not null)
17 {
18 <div class="h-100 product-list" data-dw-colorscheme="@Model.ColorScheme?.Id">
19 @{
20 bool isVisualEditor = !string.IsNullOrEmpty(Dynamicweb.Context.Current?.Request.QueryString.Get("VisualEdit")) ? Convert.ToBoolean(Dynamicweb.Context.Current.Request.QueryString.Get("VisualEdit")) : false;
21
22 string groupId = productList?.Group?.Id != null ? productList.Group.Id : "";
23
24 if (productList?.TotalProductsCount > 0)
25 {
26 int pageSizeSetting = Converter.ToInt32(Dynamicweb.Context.Current?.Request.QueryString.Get("OriginalPageSize")) > 0 ? Converter.ToInt32(Dynamicweb.Context.Current.Request.QueryString.Get("OriginalPageSize")) : productList.PageSize;
27 int pageNumber = Converter.ToInt32(Dynamicweb.Context.Current?.Request.QueryString.Get("PageNum")) > 0 ? Converter.ToInt32(Dynamicweb.Context.Current.Request.QueryString.Get("PageNum")) : productList.CurrentPage;
28 int pageSize = Converter.ToInt32(Dynamicweb.Context.Current?.Request.QueryString.Get("PageSize")) > 0 ? Converter.ToInt32(Dynamicweb.Context.Current.Request.QueryString.Get("PageSize")) : productList.PageSize;
29 pageNumber = pageSize != pageSizeSetting ? (pageSize / pageSizeSetting) : pageNumber;
30 int loadedProducts = productList.PageSize > productList.TotalProductsCount ? productList.TotalProductsCount : pageSizeSetting * pageNumber;
31 loadedProducts = loadedProducts > productList.TotalProductsCount ? productList.TotalProductsCount : loadedProducts;
32
33 pageNumber += 1;
34
35 string? searchQuery = Dynamicweb.Context.Current?.Request["q"];
36
37 string? searchLayout = Dynamicweb.Context.Current?.Request.QueryString.Get("SearchLayout");
38
39 int itemSourcePageId = Convert.ToInt32(Model.Item?.GetRawValueString("ListComponentSource", "0"));
40 itemSourcePageId = Dynamicweb.Content.Services.Pages.GetPageOrLanguage(itemSourcePageId, Pageview.AreaID)?.ID ?? itemSourcePageId;
41
42 var page = Dynamicweb.Content.Services.Pages.GetPage(itemSourcePageId);
43
44 if (page != null)
45 {
46 var pageViewModel = Dynamicweb.Frontend.ContentViewModelFactory.CreatePageInfoViewModel(page);
47
48 string? gridColumnSize = Model.Item?.GetRawValueString("GridLayoutDesktop", "3-columns");
49 gridColumnSize = gridColumnSize == "2-columns" ? "g-col-lg-6" : gridColumnSize;
50 gridColumnSize = gridColumnSize == "3-columns" ? "g-col-lg-4" : gridColumnSize;
51 gridColumnSize = gridColumnSize == "4-columns" ? "g-col-lg-3" : gridColumnSize;
52 gridColumnSize = gridColumnSize == "6-columns" ? "g-col-lg-2" : gridColumnSize;
53 gridColumnSize = gridColumnSize == "list" ? "g-col-lg-12" : gridColumnSize;
54
55 string? gridColumnMobileSize = Model.Item?.GetRawValueString("GridLayoutMobile", "2-columns");
56 gridColumnMobileSize = gridColumnMobileSize == "list" ? "g-col-12" : gridColumnMobileSize;
57 gridColumnMobileSize = gridColumnMobileSize == "2-columns" ? "g-col-6" : gridColumnMobileSize;
58
59 <div class="grid pb-3">
60 <script>
61 window.dataLayer = window.dataLayer || [];
62 window.dataLayer.push({
63 event: "view_item_list",
64 ecommerce: {
65 item_list_id: "product_list_item_repeater",
66 item_list_name: "Product list (Item Repeater)",
67 items: [
68 @foreach (ProductViewModel product in productList.Products)
69 {
70 <text>{
71 item_id: "@product.Number",
72 item_name: "@Dynamicweb.Core.Encoders.HtmlEncoder.JavaScriptStringEncode(product.Name)",
73 currency: "@product.Price.CurrencyCode",
74 price: @product.Price.ToStringInvariant(),
75 discount: @product.Discount.ToStringInvariant()
76 },</text>
77 }
78 ]
79 }
80 });
81 </script>
82
83 @foreach (ProductViewModel product in productList.Products)
84 {
85 if (maxProductsCounter == 0 || (productsCount < maxProductsCounter))
86 {
87 string link = product.GetProductLink(GetPageIdByNavigationTag("Shop"), false);
88
89 if (Dynamicweb.Context.Current?.Items.Contains("ProductDetails") != null)
90 {
91 Dynamicweb.Context.Current.Items["ProductDetails"] = product;
92 }
93 else
94 {
95 Dynamicweb.Context.Current?.Items.Add("ProductDetails", product);
96 }
97
98 if (Model.Item?.GetString("ListComponentSource") != null)
99 {
100 <article class="@gridColumnMobileSize @gridColumnSize 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">
101 @{
102 string clickProductLink = $"return clickProductLink('{product.Id}', '{Dynamicweb.Core.Encoders.HtmlEncoder.JavaScriptStringEncode(product.Name)}', '{Dynamicweb.Core.Encoders.HtmlEncoder.JavaScriptStringEncode(product.VariantName)}', '{product.Price.CurrencyCode}', '{product.Price.ToStringInvariant()}', '{product.Discount.ToStringInvariant()}')";
103 }
104 <a href="@link" class="stretched-link" onmouseenter="swift.Image.swapImage(event)" onmouseout="swift.Image.swapImage(event)" onclick="@clickProductLink">
105 <span class="visually-hidden">@product.Name</span>
106 </a>
107
108 <script>
109 function clickProductLink(productId, productName, productVariant, productCurrency, productPrice, productDiscount) {
110 window.dataLayer = window.dataLayer || [];
111 window.dataLayer.push({
112 event: "select_item",
113 ecommerce: {
114 item_list_id: "product_list_item_repeater",
115 item_list_name: "Product list (Item Repeater)",
116 items: [
117 {
118 item_id: productId,
119 item_name: productName,
120 currency: productCurrency,
121 item_list_id: "product_list_item_repeater",
122 item_list_name: "Product list (Item Repeater)",
123 item_variant: productVariant,
124 price: productPrice,
125 discount: productDiscount
126 }
127 ]
128 }
129 });
130 }
131 </script>
132
133 @RenderGrid(itemSourcePageId)
134 </article>
135 }
136
137 productsCount++;
138 }
139 }
140 </div>
141
142 <div class="my-3" id="ProductListLoadMore">
143 <div class="text-center">
144 <div class="opacity-85 mb-3">@loadedProducts @Translate("out of") @productList.TotalProductsCount @Translate("products")</div>
145 @if (productList.PageCount != 1 && maxProductsCounter == 0 && loadedProducts < productList.TotalProductsCount)
146 {
147 string? sortBySelection = Dynamicweb.Context.Current?.Request.Form["SortBy"] ?? "";
148 sortBySelection = Dynamicweb.Context.Current?.Request.QueryString.Get("SortBy") ?? sortBySelection;
149 string? mainProductId = Dynamicweb.Context.Current?.Request.QueryString.Get("MainProductID");
150
151 <form method="get" data-response-target-element=".product-list" data-swap="afterend" class="w-100">
152 @if (productList?.FacetGroups != null)
153 {
154 foreach (FacetGroupViewModel facetGroup in productList.FacetGroups)
155 {
156 foreach (FacetViewModel facetItem in facetGroup.Facets)
157 {
158 foreach (FacetOptionViewModel facetOption in facetItem.Options)
159 {
160 if (facetOption.Selected)
161 {
162 <input type="hidden" name="@facetItem.QueryParameter" value="[@facetOption.Value]">
163 }
164 }
165 }
166 }
167 }
168
169 @if (!string.IsNullOrEmpty(searchQuery))
170 {
171 <input type="hidden" name="q" value="@searchQuery">
172 <input type="hidden" name="SearchLayout" value="@searchLayout">
173 }
174
175 @if (!string.IsNullOrEmpty(mainProductId))
176 {
177 <input type="hidden" name="MainProductID" value="@mainProductId">
178 }
179
180 @if (productList?.Group?.Id != null)
181 {
182 <input type="hidden" name="GroupId" value="@groupId">
183 }
184
185 <input type="hidden" name="OriginalPageSize" value="@pageSizeSetting">
186 <input type="hidden" name="PageSize" value="@(loadedProducts + pageSizeSetting)">
187 <input type="hidden" name="PageNum" value="@pageNumber">
188 <input type="hidden" name="SortBy" value="@sortBySelection">
189 <input type="hidden" name="RequestType" value="UpdateList">
190 <input type="hidden" name="ParagraphID" value="@Model.ID">
191
192 @if (productList?.FacetGroups is object)
193 {
194 string nextPageLink = $"/Default.aspx?ID={Model.PageID}&PageNum={pageNumber}&SortBy={sortBySelection}";
195
196 foreach (FacetGroupViewModel facetGroup in productList.FacetGroups)
197 {
198 foreach (FacetViewModel facetItem in facetGroup.Facets)
199 {
200 foreach (FacetOptionViewModel facetOption in facetItem.Options)
201 {
202 if (facetOption.Selected)
203 {
204 nextPageLink += "&" + facetItem.QueryParameter + "=[" + facetOption.Value + "]";
205 }
206 }
207 }
208 }
209
210 nextPageLink += !string.IsNullOrEmpty(searchQuery) ? "&q=" + searchQuery : "";
211
212 <a href="@nextPageLink" class="btn btn-primary swift_load_more_button" data-dw-button="primary" onclick="swift.ProductList.Update(event)" id="LoadMoreButton_@Model.ID">@Translate("Load more products")</a>
213 }
214 </form>
215 }
216 </div>
217 </div>
218
219 <script>
220 function switchVariantProduct(id, price, imagesrc) {
221 var productImageElement = document.querySelector("#ProductImage_" + id);
222 var productPriceElement = document.querySelector("#ProductPrice_" + id + " .text-price");
223
224 if (productPriceElement) {
225 productPriceElement.innerText = price;
226 }
227
228 if (productImageElement) {
229 productImageElement.src = imagesrc;
230
231 var imageSrcset = productImageElement.srcset;
232 imageSrcset = imageSrcset.replace(/image=.*?&/g, 'image=' + imagesrc + "&");
233
234 productImageElement.srcset = imageSrcset;
235 }
236 }
237 </script>
238 }
239 else if (Pageview.IsVisualEditorMode)
240 {
241 <div class="alert alert-dark m-0" role="alert">
242 <span>@Translate("The selected component does not exist anymore")</span>
243 </div>
244 }
245 }
246 else
247 {
248 string? noProductsFoundMessage = null;
249 if(Model.Item?.TryGetString("NoProductsFoundMessage", out var message) is true && !string.IsNullOrEmpty(message))
250 {
251 noProductsFoundMessage = message;
252 }
253 else
254 {
255 noProductsFoundMessage = Translate("No products found");
256 }
257 bool hasSubgroups = false;
258
259 if (productList?.SubGroups != null)
260 {
261 hasSubgroups = productList.SubGroups.Any();
262 }
263
264 if (Model.Item is not null && !Model.Item.GetBoolean("HideNoProductsFoundMessage"))
265 {
266 if (!isVisualEditor)
267 {
268 string emptyStateUrl = Pageview.SearchFriendlyUrl ?? string.Empty;
269 emptyStateUrl = emptyStateUrl.LastIndexOf("?") != -1 ? emptyStateUrl.Substring(0, emptyStateUrl.LastIndexOf("?")) : emptyStateUrl;
270
271 if (Dynamicweb.Context.Current?.Request.QueryString.Get("GroupID") is string groupIdQueryValue)
272 {
273 emptyStateUrl += "?GroupID=" + groupIdQueryValue;
274 }
275
276 bool hasActiveFacets = productList?.FacetGroups != null && productList.FacetGroups.Any(fg => fg.Facets.Any(f => f.OptionActiveCount > 0));
277
278 <div data-swift-text class="border border-2 rounded-3 text-center p-5 mx-auto" style="--bs-border-style: dashed;">
279
280 <div data-swift-empty-state>
281 <div data-swift-empty-state-icon>
282 <span class="icon">
283 @ReadFile("/Files/Images/Icons/filter.svg")
284 </span>
285 </div>
286 </div>
287
288 <h5 class="mb-2">@noProductsFoundMessage</h5>
289 <p class="text-muted m-0">@Translate("Try clearing filters, or widen your search")</p>
290
291 @if (hasActiveFacets)
292 {
293 <form method="get" action="@emptyStateUrl" data-response-target-element="content" class="d-inline-block">
294 <input type="hidden" name="RequestType" value="UpdateList">
295 <button type="button" class="btn badge badge-neutral-light hstack gap-2" data-dw-button onclick="swift.ProductList.Update(event)">
296 <span class="icon">@ReadFile("/Files/Images/Icons/xmark.svg")</span>
297 @Translate("Clear all filters")
298 </button>
299 </form>
300 }
301 </div>
302 }
303 else
304 {
305 <div class="alert alert-dark m-0" role="alert">
306 @Translate("Product list: The list will be shown here, if any")
307 </div>
308 }
309 }
310 else if (!hasSubgroups)
311 {
312 <div class="alert alert-dark m-0" role="alert">
313 @noProductsFoundMessage
314 </div>
315 }
316 }
317 }
318 </div>
319 }
320 else if (Pageview.IsVisualEditorMode)
321 {
322 <div class="alert alert-dark m-0" role="alert">
323 <span>@Translate("Product list item repeater: The repeater paragraph will be shown here, if any products are available")</span>
324 </div>
325 }
326