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","0"));
90 string icon = !string.IsNullOrEmpty(paragraphViewModel.Item.GetRawValueString("Icon")) ? paragraphViewModel.Item.GetRawValueString("Icon") : string.Empty;
91 string iconSize = paragraphViewModel.Item.GetRawValueString("IconSize", "1.5");
92 bool overflowing = Convert.ToBoolean(paragraphViewModel.Item.GetRawValueString("Overflowing", "False"));
93 string overflowingCss = overflowing ? "overflowing" : string.Empty;
94
95 // Styling
96 string theme = !string.IsNullOrWhiteSpace(paragraphViewModel.Item.GetRawValueString("Theme")) ? $"theme {paragraphViewModel.Item.GetRawValueString("Theme").Replace(" ", "").Trim().ToLower()}" : string.Empty;
97 string itemTheme = !string.IsNullOrWhiteSpace(paragraphViewModel.Item.GetRawValueString("ItemTheme")) ? $"theme {paragraphViewModel.Item.GetRawValueString("ItemTheme").Replace(" ", "").Trim().ToLower()}" : string.Empty;
98
99 //Carousel Icon Style Attribute
100 var styleIconVariableCollection = new List<string>();
101 styleIconVariableCollection.Add($"--ignite-icon-size: {iconSize}rem");
102 string iconVariables = string.Join(";", styleIconVariableCollection).Trim();
103
104 //Carousel Style Attribute
105 var itemStyleCollection = new List<string>();
106 itemStyleCollection.Add($"--desktop-items: {desktopColumns}");
107 itemStyleCollection.Add($"--mobile-items: {mobileColumns}");
108 itemStyleCollection.Add($"--desktop-gap: var(--ignite-gap-{gap})");
109 if (gap < 2) {
110 itemStyleCollection.Add($"--mobile-gap: var(--ignite-gap-{gap})");
111 } else {
112 itemStyleCollection.Add($"--mobile-gap: var(--ignite-gap-2)");
113 }
114 string itemStyle = string.Join(";", itemStyleCollection).Trim();
115 }
116
117
118 @if (paragraphViewModel != null && page != null)
119 {
120 if (Model.Products.Any())
121 {
122 string sourceType = paragraphViewModel.Item.GetRawValueString("RelationType", "Trending");
123 int modelId = paragraphViewModel.ID;
124 var pageViewModel = Dynamicweb.Frontend.ContentViewModelFactory.CreatePageInfoViewModel(page);
125
126 string listItemPadding = pageViewModel.Item.GetRawValueString("ContentPadding", string.Empty);
127 string listItemPaddingClass = string.Empty;
128
129 switch (listItemPadding)
130 {
131 case "small":
132 listItemPaddingClass = " p-2 p-xl-3";
133 break;
134 case "large":
135 listItemPaddingClass = " p-3 p-xl-4";
136 break;
137 case "small-x":
138 listItemPaddingClass = " px-2 px-md-3";
139 break;
140 case "large-x":
141 listItemPaddingClass = " px-3 px-md-4";
142 break;
143 }
144
145
146
147 if (sourceType == "selected")
148 {
149 string productIds = !string.IsNullOrEmpty(Dynamicweb.Context.Current.Request.Form.Get("MainProductID")) ? Dynamicweb.Context.Current.Request.Form.Get("MainProductID") : string.Empty;
150 productIds = string.IsNullOrEmpty(productIds) ? Dynamicweb.Context.Current.Request.Form.Get("ProductVariantId") : productIds;
151
152 Model.Products = Model.Products.OrderBy(product => productIds.IndexOf(product.Id)).ToList(); }
153
154
155 <div class="ignite-carousel @(theme) @(overflowingCss)" style="@(itemStyle);">
156 <div class="track">
157 @foreach (ProductViewModel product in Model.Products)
158 {
159 string link = product.GetProductLink(GetPageIdByNavigationTag("Shop"), false);
160
161 string clickProductLink = string.Empty;
162 if ((!string.IsNullOrWhiteSpace(googleAnalyticsMeasurementID) || !string.IsNullOrWhiteSpace(googleTagManagerID)) && allowTracking)
163 {
164 clickProductLink = "onclick=\"return clickProductLink('" + @product.Id + "', '" + @product.Name + "', '" + @product.VariantName + "', '" + @product.Price.CurrencyCode + "', '" + @product.Price.Price + "')\"";
165 }
166
167 if (Dynamicweb.Context.Current.Items.Contains("ProductDetails"))
168 {
169 Dynamicweb.Context.Current.Items["ProductDetails"] = product;
170 }
171 else
172 {
173 Dynamicweb.Context.Current.Items.Add("ProductDetails", product);
174 }
175
176 <article class="item @(itemTheme) @listItemPaddingClass">
177 <a href="@link" class="stretched-link" @clickProductLink>
178 <span class="visually-hidden">@product.Name</span>
179 </a>
180 @{
181 @RenderGrid(itemSourcePageId)
182 }
183 </article>
184 }
185
186 @if (!Model.Products.Any() && Pageview.IsVisualEditorMode)
187 {
188 if (Dynamicweb.Context.Current.Items.Contains("ProductDetails"))
189 {
190 Dynamicweb.Context.Current.Items["ProductDetails"] = GetDummyProduct();
191 }
192 else
193 {
194 Dynamicweb.Context.Current.Items.Add("ProductDetails", GetDummyProduct());
195 }
196
197 for (int i = 0; i < 4; i++)
198 {
199 <li class="d-flex flex-column">
200 @{
201 @RenderGrid(itemSourcePageId)
202 }
203 </li>
204 }
205 }
206 </div>
207 <button class="btn prev arrow position-absolute" aria-label="show previous carousel items" style="@(iconVariables);display: none;">
208 @if (string.IsNullOrEmpty(icon))
209 {
210 <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>
211 }
212 else
213 {
214 @RenderIgniteIcon(icon)
215 }
216 <span class="visually-hidden">@Translate("Previous")</span>
217 </button>
218 <button class="btn next arrow position-absolute" aria-label="show next carousel items" style="@(iconVariables)">
219 @if (string.IsNullOrEmpty(icon))
220 {
221 <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>
222 }
223 else
224 {
225 @RenderIgniteIcon(icon)
226 }
227 <span class="visually-hidden">@Translate("Next")</span>
228 </button>
229 </div>
230 }
231 }
232 else if (Pageview.IsVisualEditorMode == true)
233 {
234 <div class="alert alert-dark" role="alert">
235 <span>@Translate("Product component slider: The slider will be rendered here, if there is anything to show")</span>
236 </div>
237 }
238