1 @inherits ViewModelTemplate<ProductListViewModel>
2 @using Dynamicweb.Frontend
3 @using Dynamicweb.Rendering
4 @using Dynamicweb.Ecommerce.ProductCatalog
5 @using Dynamicweb.Environment
6
7
8 @functions
9 {
10 private string RenderIgniteIcon(string icon)
11 {
12 if (icon.EndsWith(".svg", StringComparison.OrdinalIgnoreCase) && !icon.EndsWith("none.svg", StringComparison.OrdinalIgnoreCase))
13 {
14 string iconPath = Dynamicweb.Context.Current.Server.MapPath(icon);
15
16 return $"<span class=\"ignite-icon\">{ReadFile(iconPath)}</span>";
17 }
18 else
19 {
20 return string.Empty;
21 }
22 }
23 private string RenderIgniteSvg(string icon)
24 {
25 if (icon.EndsWith(".svg", StringComparison.OrdinalIgnoreCase) && !icon.EndsWith("none.svg", StringComparison.OrdinalIgnoreCase))
26 {
27 string iconPath = Dynamicweb.Context.Current.Server.MapPath(icon);
28
29 return $"<span class=\"ignite-svg\">{ReadFile(iconPath)}</span>";
30 }
31 else
32 {
33 return string.Empty;
34 }
35 }
36 }
37
38
39 @functions {
40 public ProductViewModel GetDummyProduct()
41 {
42 ProductViewModel product = null;
43 if (Dynamicweb.Context.Current.Items.Contains("ProductDetails"))
44 {
45 product = (ProductViewModel)Dynamicweb.Context.Current.Items["ProductDetails"];
46 }
47 else if (Pageview.Page.Item["DummyProduct"] != null && Pageview.IsVisualEditorMode)
48 {
49 var pageViewModel = Dynamicweb.Frontend.ContentViewModelFactory.CreatePageInfoViewModel(Pageview.Page);
50 ProductListViewModel productList = pageViewModel.Item.GetValue("DummyProduct") != null ? pageViewModel.Item.GetValue("DummyProduct") as ProductListViewModel : new ProductListViewModel();
51
52 if (productList?.Products is object)
53 {
54 product = productList.Products[0];
55 }
56 }
57
58 return product;
59 }
60 }
61
62 @{
63 string googleTagManagerID = Pageview.AreaSettings.GetString("GoogleTagManagerID");
64 string googleAnalyticsMeasurementID = Pageview.AreaSettings.GetString("GoogleAnalyticsMeasurementID");
65
66 bool allowTracking = true;
67 if (CookieManager.IsCookieManagementActive)
68 {
69 var cookieOptInLevel = CookieManager.GetCookieOptInLevel();
70 allowTracking = cookieOptInLevel == CookieOptInLevel.All || (cookieOptInLevel == CookieOptInLevel.Functional && CookieManager.GetCookieOptInCategories().Contains("Statistical"));
71 }
72
73 int paragraphId = !string.IsNullOrEmpty(Dynamicweb.Context.Current.Request.Form.Get("ParagraphId")) ? Convert.ToInt32(Dynamicweb.Context.Current.Request.Form.Get("ParagraphId")) : 0;
74 var paragraph = Dynamicweb.Content.Services.Paragraphs?.GetParagraph(paragraphId) ?? null;
75 ParagraphInfoViewModel paragraphViewModel = Dynamicweb.Frontend.ContentViewModelFactory.CreateParagraphInfoViewModel(paragraph);
76
77
78 int itemSourcePageId = Convert.ToInt32(paragraphViewModel.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 = itemSourcePageId != 0 ? Dynamicweb.Content.Services.Pages.GetPage(itemSourcePageId) : null;
84
85
86 //Carousel Options
87 int desktopColumns = Dynamicweb.Core.Converter.ToInt32(paragraphViewModel.Item.GetRawValueString("DesktopColumns","5"));
88 string mobileColumns = paragraphViewModel.Item.GetRawValueString("MobileColumns","1");
89 int gap = Convert.ToInt32(paragraphViewModel.Item.GetRawValueString("Gap","3"));
90 string icon = paragraphViewModel.Item.GetRawValueString("Icon", string.Empty);
91 string uploadIcon = paragraphViewModel.Item.GetRawValueString("UploadIcon", string.Empty);
92 icon = !string.IsNullOrWhiteSpace(uploadIcon) ? uploadIcon : icon;
93 string iconSize = paragraphViewModel.Item.GetRawValueString("IconSize", "1.5");
94 bool overflowing = Convert.ToBoolean(paragraphViewModel.Item.GetRawValueString("Overflowing", "False"));
95 string overflowingCss = overflowing ? "overflowing" : string.Empty;
96
97 // Styling
98 string theme = !string.IsNullOrWhiteSpace(paragraphViewModel.Item.GetRawValueString("Theme")) ? $"theme {paragraphViewModel.Item.GetRawValueString("Theme").Replace(" ", "").Trim().ToLower()}" : string.Empty;
99 string itemTheme = !string.IsNullOrWhiteSpace(paragraphViewModel.Item.GetRawValueString("ItemTheme")) ? $"theme {paragraphViewModel.Item.GetRawValueString("ItemTheme").Replace(" ", "").Trim().ToLower()}" : string.Empty;
100
101 //Carousel Icon Style Attribute
102 var styleIconVariableCollection = new List<string>();
103 styleIconVariableCollection.Add($"--ignite-icon-size: {iconSize}rem");
104 string iconVariables = string.Join(";", styleIconVariableCollection).Trim();
105
106 //Carousel Style Attribute
107 var itemStyleCollection = new List<string>();
108 itemStyleCollection.Add($"--desktop-items: {desktopColumns};");
109 itemStyleCollection.Add($"--mobile-items: {mobileColumns};");
110 itemStyleCollection.Add($"--desktop-gap: var(--bs-spacing-{gap});");
111 if (gap < 2) {
112 itemStyleCollection.Add($"--mobile-gap: var(--bs-spacing-{gap});");
113 } else {
114 itemStyleCollection.Add($"--mobile-gap: var(--bs-spacing-2);");
115 }
116 string itemStyle = string.Join("", itemStyleCollection).Trim();
117 }
118
119
120 @if (paragraphViewModel != null && page != null)
121 {
122 if (Model.Products.Any())
123 {
124 string sourceType = paragraphViewModel.Item.GetRawValueString("RelationType", "Trending");
125 int modelId = paragraphViewModel.ID;
126 var pageViewModel = Dynamicweb.Frontend.ContentViewModelFactory.CreatePageInfoViewModel(page);
127
128 string listItemPadding = pageViewModel.Item.GetRawValueString("ContentPadding", string.Empty);
129 string listItemPaddingClass = string.Empty;
130
131 switch (listItemPadding)
132 {
133 case "small":
134 listItemPaddingClass = " p-2 p-xl-3";
135 break;
136 case "large":
137 listItemPaddingClass = " p-3 p-xl-4";
138 break;
139 case "small-x":
140 listItemPaddingClass = " px-2 px-md-3";
141 break;
142 case "large-x":
143 listItemPaddingClass = " px-3 px-md-4";
144 break;
145 }
146
147
148
149 if (sourceType == "selected")
150 {
151 string productIds = !string.IsNullOrEmpty(Dynamicweb.Context.Current.Request.Form.Get("MainProductID")) ? Dynamicweb.Context.Current.Request.Form.Get("MainProductID") : string.Empty;
152 productIds = string.IsNullOrEmpty(productIds) ? Dynamicweb.Context.Current.Request.Form.Get("ProductVariantId") : productIds;
153
154 Model.Products = Model.Products.OrderBy(product => productIds.IndexOf(product.Id)).ToList();
155 }
156
157 <div class="ignite-carousel @(theme) @(overflowingCss)" style="@(itemStyle)">
158 <div class="track">
159 @foreach (ProductViewModel product in Model.Products)
160 {
161 string link = product.GetProductLink(GetPageIdByNavigationTag("Shop"), false);
162
163 string clickProductLink = string.Empty;
164 if ((!string.IsNullOrWhiteSpace(googleAnalyticsMeasurementID) || !string.IsNullOrWhiteSpace(googleTagManagerID)) && allowTracking)
165 {
166 clickProductLink = "onclick=\"return clickProductLink('" + @product.Id + "', '" + @product.Name + "', '" + @product.VariantName + "', '" + @product.Price.CurrencyCode + "', '" + @product.Price.Price + "')\"";
167 }
168
169 if (Dynamicweb.Context.Current.Items.Contains("ProductDetails"))
170 {
171 Dynamicweb.Context.Current.Items["ProductDetails"] = product;
172 }
173 else
174 {
175 Dynamicweb.Context.Current.Items.Add("ProductDetails", product);
176 }
177
178 <article class="item @(itemTheme) @listItemPaddingClass">
179 <a href="@link" class="stretched-link" @clickProductLink>
180 <span class="visually-hidden">@product.Name</span>
181 </a>
182 @{
183 @RenderGrid(itemSourcePageId)
184 }
185 </article>
186 }
187
188 @if (!Model.Products.Any() && Pageview.IsVisualEditorMode)
189 {
190 if (Dynamicweb.Context.Current.Items.Contains("ProductDetails"))
191 {
192 Dynamicweb.Context.Current.Items["ProductDetails"] = GetDummyProduct();
193 }
194 else
195 {
196 Dynamicweb.Context.Current.Items.Add("ProductDetails", GetDummyProduct());
197 }
198
199 for (int i = 0; i < 4; i++)
200 {
201 <li class="d-flex flex-column">
202 @{
203 @RenderGrid(itemSourcePageId)
204 }
205 </li>
206 }
207 }
208 </div>
209 <button class="btn prev arrow position-absolute" aria-label="show previous carousel items" style="@(iconVariables);display: none;color: #000;">
210 @if (string.IsNullOrEmpty(icon))
211 {
212 <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="currentColor"><path d="M646-440H200q-17 0-28.5-11.5T160-480q0-17 11.5-28.5T200-520h446L532-634q-12-12-11.5-28t11.5-28q12-12 28.5-12.5T589-691l183 183q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L589-269q-12 12-28.5 11.5T532-270q-11-12-11.5-28t11.5-28l114-114Z"/></svg>
213 }
214 else
215 {
216 @RenderIgniteIcon(icon)
217 }
218 <span class="visually-hidden">@Translate("Previous")</span>
219 </button>
220 <button class="btn next arrow position-absolute" aria-label="show next carousel items" style="@(iconVariables);color:#000;">
221 @if (string.IsNullOrEmpty(icon))
222 {
223 <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="currentColor"><path d="M646-440H200q-17 0-28.5-11.5T160-480q0-17 11.5-28.5T200-520h446L532-634q-12-12-11.5-28t11.5-28q12-12 28.5-12.5T589-691l183 183q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L589-269q-12 12-28.5 11.5T532-270q-11-12-11.5-28t11.5-28l114-114Z"/></svg>
224 }
225 else
226 {
227 @RenderIgniteIcon(icon)
228 }
229 <span class="visually-hidden">@Translate("Next")</span>
230 </button>
231 </div>
232 }
233 }
234 else if (Pageview.IsVisualEditorMode == true)
235 {
236 <div class="alert alert-dark" role="alert">
237 <span>@Translate("Product component slider: The slider will be rendered here, if there is anything to show")</span>
238 </div>
239 }
240
241
242
243
244