1 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.ParagraphViewModel>
2 @using Dynamicweb.Ecommerce.ProductCatalog
3
4 @functions
5 {
6 private string RenderCustomCSS(IEnumerable<string> decorations)
7 {
8 var cssClasses = new List<string>();
9
10 foreach (var itemId in decorations)
11 {
12 var item = Dynamicweb.Content.Services.Items.GetItem("Swift_Css", itemId);
13 item.TryGetValue("Class", out object classes);
14
15 if (classes is null)
16 {
17 continue;
18 }
19
20 var cssString = (string)classes;
21
22 if (cssString.StartsWith("["))
23 {
24 var cssArray = Dynamicweb.Core.Converter.Deserialize<string[]>(cssString);
25 cssClasses.AddRange(cssArray);
26 }
27 else
28 {
29 cssClasses.Add(cssString.Replace(",", " "));
30 }
31 }
32
33 return string.Join(" ", cssClasses).Trim();
34 }
35 }
36
37 @{
38 Dynamicweb.Frontend.LinkViewModel link1 = new Dynamicweb.Frontend.LinkViewModel();
39 Dynamicweb.Frontend.LinkViewModel link2 = new Dynamicweb.Frontend.LinkViewModel();
40
41 string theme = !string.IsNullOrWhiteSpace(Model.Item.GetRawValueString("Theme")) ? " theme " + Model.Item.GetRawValueString("Theme").Replace(" ", "").Trim().ToLower() : string.Empty;
42 var decorations = Model.Item?.GetList("CssDecorations")?.GetRawValue().OfType<string>() ?? Enumerable.Empty<string>();
43 string css = RenderCustomCSS(decorations);
44 string layout = Model.Item.GetRawValueString("Layout", "image-top");
45 string contentPadding = Model.Item.GetRawValueString("ContentPadding", string.Empty);
46 string contentPaddingClass = string.Empty;
47 string gapClass = " gap-3";
48
49 switch (contentPadding)
50 {
51 case "small":
52 contentPaddingClass = " p-3";
53 gapClass = " gap-0";
54 break;
55 case "large":
56 contentPaddingClass = " p-5";
57 gapClass = " gap-0";
58 break;
59 }
60
61 string maxWidth = Model.Item.GetRawValueString("TextReadability", string.Empty) == "max-width-on" ? " mw-75ch" : string.Empty;
62
63 bool hideTitle = Model.Item?.GetBoolean("HideTitle") ?? false;
64 string title = !hideTitle ? Model.Item.GetString("Title", string.Empty) : string.Empty;
65
66 string titleFontSize = Model.Item.GetString("TitleFontSize", "h2");
67 string titleColor = Model.Item.GetString("TitleColor", "text-inherit");
68 string titleOpacity = Model.Item.GetString("TitleOpacity", "opacity-100");
69
70 string headingLevel = Model.Item.GetString("HeadingLevel", "h2");
71 string headingLevelStart = $"<{headingLevel} class=\"{titleFontSize} {titleColor} {titleOpacity}{maxWidth} m-0\">";
72 string headingLevelStop = $"</{headingLevel}>";
73
74 string subtitleColor = Model.Item.GetString("SubtitleColor", "text-inherit");
75 string subtitleOpacity = Model.Item.GetString("SubtitleOpacity", "opacity-100");
76 string subtitleFontSize = Model.Item.GetRawValueString("SubtitleFontSize", "fs-5");
77
78 string textColor = Model.Item.GetString("TextColor", "text-inherit");
79 string textOpacity = Model.Item.GetString("TextOpacity", "opacity-100");
80
81 int xPos = Model.Item?.GetFile("Image")?.FocalPositionFromLeft ?? 50;
82 int yPos = Model.Item?.GetFile("Image")?.FocalPositionFromTop ?? 50;
83 string imageAspect = Model.Item.GetRawValueString("ImageAspectRatio", "0");
84 string ratioCssClass = imageAspect != "0" && imageAspect != "" ? "ratio" : string.Empty;
85 string ratioVariable = imageAspect != "0" && imageAspect != "" ? "style=\"--bs-aspect-ratio: " + imageAspect + "\"" : string.Empty;
86 string ImageObjectFit = Model.Item.GetRawValueString("ImageObjectFit", string.Empty);
87 ImageObjectFit = ImageObjectFit == "cover" ? string.Empty : ImageObjectFit;
88 ImageObjectFit = ImageObjectFit == "contain" ? "object-fit:contain" : ImageObjectFit;
89
90 var parms = new Dictionary<string, object>();
91 parms.Add("loading", "lazy");
92 parms.Add("style", ImageObjectFit);
93 parms.Add("alt", Model.Item.GetString("ImageAltText"));
94 parms.Add("columns", Model.GridRowColumnCount);
95
96 string figureCss = layout == "text-center" && imageAspect == "0" ? "d-flex flex-column align-items-center" : $"mb-0 {ratioCssClass}";
97
98 if (imageAspect == "0")
99 {
100 parms.Add("fullwidth", true);
101 parms.Add("cssClass", "img-fluid");
102 }
103
104 string linkType = Model.Item.GetRawValueString("LinkType", "page");
105 string linkType2 = Model.Item.GetRawValueString("LinkType2", "page2");
106
107 link1 = linkType == "page" && Model.Item.GetLink("ButtonLink") != null ? Model.Item.GetLink("ButtonLink") : link1;
108 link2 = linkType2 == "page2" && Model.Item.GetLink("ButtonLink2") != null ? Model.Item.GetLink("ButtonLink2") : link2;
109
110 if (linkType == "product-group")
111 {
112 IList<ProductGroupViewModel> selectedGroups = Model.Item.GetValue<IList<ProductGroupViewModel>>("ProductGroupLink");
113 IList<string> groupIds = new List<string> { };
114
115 if (selectedGroups != null)
116 {
117 foreach (var fromGroup in selectedGroups)
118 {
119 groupIds.Add(fromGroup.Id);
120 }
121 }
122
123 link1 = new Dynamicweb.Frontend.LinkViewModel()
124 {
125 Url = "/Default.aspx?ID=" + GetPageIdByNavigationTag("Shop") + "&GroupID=" + string.Join(",", groupIds).Trim(),
126 IsExternal = false
127 };
128 }
129
130 if (linkType2 == "product-group2")
131 {
132 IList<ProductGroupViewModel> selectedGroups = Model.Item.GetValue<IList<ProductGroupViewModel>>("ProductGroupLink2");
133 IList<string> groupIds = new List<string> { };
134
135 if (selectedGroups != null)
136 {
137 foreach (var fromGroup in selectedGroups)
138 {
139 groupIds.Add(fromGroup.Id);
140 }
141 }
142
143 link2 = new Dynamicweb.Frontend.LinkViewModel()
144 {
145 Url = "/Default.aspx?ID=" + GetPageIdByNavigationTag("Shop") + "&GroupID=" + string.Join(",", groupIds).Trim(),
146 IsExternal = false
147 };
148 }
149
150 if (linkType == "product")
151 {
152 ProductListViewModel products = Model.Item.GetValue<ProductListViewModel>("ProductLink");
153 IList<string> productIds = new List<string> { };
154
155 if (products != null && products.Products.Any())
156 {
157 foreach (var product in products.Products)
158 {
159 productIds.Add(product.Id);
160 }
161
162 string productParameter = productIds.Count == 1 ? "ProductID" : "MainProductId";
163 string productLink = products.Products?.FirstOrDefault()?.GetProductLink(GetPageIdByNavigationTag("Shop"), false);
164 productLink = productIds.Count != 1 ? "/Default.aspx?ID=" + GetPageIdByNavigationTag("Shop") + "&" + productParameter + "=" + string.Join(",", productIds).Trim() : productLink;
165
166 link1 = new Dynamicweb.Frontend.LinkViewModel()
167 {
168 Url = productLink,
169 IsExternal = false
170 };
171 }
172 }
173
174 if (linkType2 == "product2")
175 {
176 ProductListViewModel products = Model.Item.GetValue<ProductListViewModel>("ProductLink2");
177 IList<string> productIds = new List<string> { };
178
179 if (products != null && products.Products.Any())
180 {
181 foreach (var product in products.Products)
182 {
183 productIds.Add(product.Id);
184 }
185
186 string productParameter = productIds.Count == 1 ? "ProductID" : "MainProductId";
187 string productLink = products.Products?.FirstOrDefault()?.GetProductLink(GetPageIdByNavigationTag("Shop"), false);
188 productLink = productIds.Count != 1 ? "/Default.aspx?ID=" + GetPageIdByNavigationTag("Shop") + "&" + productParameter + "=" + string.Join(",", productIds).Trim() : productLink;
189
190 link2 = new Dynamicweb.Frontend.LinkViewModel()
191 {
192 Url = productLink,
193 IsExternal = false
194 };
195 }
196 }
197
198 string buttonStyle = Model.Item.GetRawValueString("ButtonStyle", "primary");
199 buttonStyle = buttonStyle == "primary" ? " btn-primary" : buttonStyle;
200 buttonStyle = buttonStyle == "secondary" ? " btn-secondary" : buttonStyle;
201 buttonStyle = buttonStyle == "link" ? " btn-link" : buttonStyle;
202 string buttonStyle2 = Model.Item.GetRawValueString("ButtonStyle2", "secondary");
203 buttonStyle2 = buttonStyle2 == "primary" ? " btn-primary" : buttonStyle2;
204 buttonStyle2 = buttonStyle2 == "secondary" ? " btn-secondary" : buttonStyle2;
205 buttonStyle2 = buttonStyle2 == "link" ? " btn-link" : buttonStyle2;
206 bool openLinksInNewTab = Pageview.AreaSettings.GetBoolean("OpenLinksInNewTab");
207 string target1 = openLinksInNewTab && link1.IsExternal ? "target=\"_blank\"" : string.Empty;
208 string target2 = openLinksInNewTab && link2.IsExternal ? "target=\"_blank\"" : string.Empty;
209 string rel1 = openLinksInNewTab && link1.IsExternal ? "rel=\"noopener\"" : string.Empty;
210 string rel2 = openLinksInNewTab && link2.IsExternal ? "rel=\"noopener\"" : string.Empty;
211 string buttonLabel = Model.Item.GetString("ButtonLabel", string.Empty);
212 bool buttonHasLabel = !string.IsNullOrEmpty(buttonLabel);
213 buttonLabel = string.IsNullOrEmpty(buttonLabel) ? title : buttonLabel;
214 string buttonLabel2 = Model.Item.GetString("ButtonLabel2", string.Empty);
215 bool buttonHasLabel2 = !string.IsNullOrEmpty(buttonLabel2);
216 buttonLabel2 = string.IsNullOrEmpty(buttonLabel2) ? title : buttonLabel2;
217 string stretchedLink = Model.Item.GetRawValueString("StretchedLink", "column-not-clickable");
218 string stretchedLink2 = Model.Item.GetRawValueString("StretchedLink2", "column-not-clickable");
219 string stretchedLinkClass = stretchedLink == "column-clickable" && !string.IsNullOrEmpty(link1.Url) ? " stretched-link" : string.Empty;
220 string stretchedLinkClass2 = stretchedLink2 == "column-clickable" && !string.IsNullOrEmpty(link2.Url) ? " stretched-link" : string.Empty;
221 string buttonSize = Model.Item.GetRawValueString("ButtonSize", "regular");
222 buttonSize = buttonSize == "small" ? " btn-sm" : buttonSize;
223 buttonSize = buttonSize == "regular" ? string.Empty : buttonSize;
224 buttonSize = buttonSize == "large" ? " btn-lg" : buttonSize;
225 string alignmentClass = Model.Item.GetString("Layout") == "text-center" ? " justify-content-center" : string.Empty;
226
227 string buttonVisuallyHidden = !buttonHasLabel ? " visually-hidden" : string.Empty;
228 string buttonClasses = buttonHasLabel ? $"text-nowrap btn{buttonStyle}{buttonSize}{stretchedLinkClass}{buttonVisuallyHidden}" : stretchedLinkClass;
229
230 string buttonVisuallyHidden2 = !buttonHasLabel2 ? " visually-hidden" : string.Empty;
231 string buttonClasses2 = buttonHasLabel2 ? $"text-nowrap btn{buttonStyle2}{buttonSize}{stretchedLinkClass2}{buttonVisuallyHidden2}" : stretchedLinkClass2;
232 }
233
234 <div class="d-flex flex-column@(gapClass) h-100 position-relative@(theme) @(css) item_@Model.Item.SystemName.ToLower()">
235 <div id="@Model.ID" class="user-select-none position-absolute top-0" style="scroll-margin-top:var(--header-height,150px)"></div>
236
237 @switch (layout)
238 {
239 case "title-top":
240 if (!string.IsNullOrEmpty(title))
241 {
242 <div class="@(contentPaddingClass)">
243 @if (!string.IsNullOrEmpty(title) && !hideTitle)
244 {
245 @headingLevelStart
246 @title
247 @headingLevelStop
248 }
249 </div>
250 }
251
252 if (!string.IsNullOrEmpty(Model.Item.GetString("Image")))
253 {
254 <figure class="@figureCss" @ratioVariable>
255 @RenderPartial("Components/Custom_Image.cshtml", Model.Item.GetFile("Image") ?? new Dynamicweb.Frontend.FileViewModel(), parms)
256 </figure>
257 }
258
259 if (!string.IsNullOrEmpty(Model.Item.GetString("Lead")) || !string.IsNullOrEmpty(Model.Item.GetString("Text")) || link1 != null && !string.IsNullOrEmpty(link1.Url) || link2 != null && !string.IsNullOrEmpty(link2.Url))
260 {
261 <div class="d-flex flex-column gap-3@(contentPaddingClass)">
262 @if (!string.IsNullOrEmpty(Model.Item.GetString("Lead")))
263 {
264 <p class="m-0 lead @(subtitleFontSize) @(subtitleColor) @(subtitleOpacity)@(maxWidth)">
265 @Model.Item.GetString("Lead")
266 </p>
267 }
268 @if (!string.IsNullOrEmpty(Model.Item.GetString("Text")))
269 {
270 <div class="mb-0-last-child @textColor @(textOpacity)@(maxWidth)">
271 @Model.Item.GetString("Text")
272 </div>
273 }
274 @if (link1 != null && !string.IsNullOrEmpty(link1.Url) || link2 != null && !string.IsNullOrEmpty(link2.Url))
275 {
276 <div class="d-flex flex-wrap gap-3@(alignmentClass)">
277 @if (link1 != null && !string.IsNullOrEmpty(link1.Url))
278 {
279 <a href="@link1.Url" @target1 @rel1 class="@buttonClasses">@buttonLabel</a>
280 }
281 @if (link2 != null && !string.IsNullOrEmpty(link2.Url))
282 {
283 <a href="@link2.Url" @target2 @rel2 class="@buttonClasses2">@buttonLabel2</a>
284 }
285 </div>
286 }
287 </div>
288 }
289 break;
290
291 case "title-lead-top":
292 if (!string.IsNullOrEmpty(title) || !string.IsNullOrEmpty(Model.Item.GetString("Lead")))
293 {
294 <div class="d-flex flex-column gap-3@(contentPaddingClass)">
295 @if (!string.IsNullOrEmpty(title) && !hideTitle)
296 {
297 @headingLevelStart
298 @title
299 @headingLevelStop
300 }
301
302 @if (!string.IsNullOrEmpty(Model.Item.GetString("Lead")))
303 {
304 <p class="m-0 lead @(subtitleFontSize) @(subtitleColor) @(subtitleOpacity)@(maxWidth)">
305 @Model.Item.GetString("Lead")
306 </p>
307 }
308 </div>
309 }
310
311 if (!string.IsNullOrEmpty(Model.Item.GetString("Image")))
312 {
313 <figure class="@figureCss" @ratioVariable>
314 @RenderPartial("Components/Custom_Image.cshtml", Model.Item.GetFile("Image") ?? new Dynamicweb.Frontend.FileViewModel(), parms)
315 </figure>
316 }
317
318 if (!string.IsNullOrEmpty(Model.Item.GetString("Text")) || link1 != null && !string.IsNullOrEmpty(link1.Url) || link2 != null && !string.IsNullOrEmpty(link2.Url))
319 {
320 <div class="d-flex flex-column gap-3@(contentPaddingClass)">
321 @if (!string.IsNullOrEmpty(Model.Item.GetString("Text")))
322 {
323 <div class="mb-0-last-child @textColor @(textOpacity)@(maxWidth)">
324 @Model.Item.GetString("Text")
325 </div>
326 }
327
328 @if (link1 != null && !string.IsNullOrEmpty(link1.Url) || link2 != null && !string.IsNullOrEmpty(link2.Url))
329 {
330 <div class="d-flex flex-wrap gap-3@(alignmentClass)">
331 @if (link1 != null && !string.IsNullOrEmpty(link1.Url))
332 {
333 <a href="@link1.Url" @target1 @rel1 class="@buttonClasses">@buttonLabel</a>
334 }
335 @if (link2 != null && !string.IsNullOrEmpty(link2.Url))
336 {
337 <a href="@link2.Url" @target2 @rel2 class="@buttonClasses2">@buttonLabel2</a>
338 }
339 </div>
340 }
341 </div>
342 }
343 break;
344
345 case "text-center":
346 if (!string.IsNullOrEmpty(Model.Item.GetString("Image")))
347 {
348 <figure class="@figureCss" @ratioVariable>
349 @RenderPartial("Components/Custom_Image.cshtml", Model.Item.GetFile("Image") ?? new Dynamicweb.Frontend.FileViewModel(), parms)
350 </figure>
351 }
352
353 if (!string.IsNullOrEmpty(title) || !string.IsNullOrEmpty(Model.Item.GetString("Lead")) || !string.IsNullOrEmpty(Model.Item.GetString("Text")) || link1 != null && !string.IsNullOrEmpty(link1.Url) || link2 != null && !string.IsNullOrEmpty(link2.Url))
354 {
355 <div class="d-flex flex-column gap-3 align-items-center text-center h-100@(contentPaddingClass)">
356 @if (!string.IsNullOrEmpty(title) && !hideTitle)
357 {
358 @headingLevelStart
359 @title
360 @headingLevelStop
361 }
362
363 @if (!string.IsNullOrEmpty(Model.Item.GetString("Lead")))
364 {
365 <p class="m-0 lead @(subtitleFontSize) @(subtitleColor) @(subtitleOpacity)@(maxWidth)">
366 @Model.Item.GetString("Lead")
367 </p>
368 }
369
370 @if (!string.IsNullOrEmpty(Model.Item.GetString("Text")))
371 {
372 <div class="mb-0-last-child @textColor @(textOpacity)@(maxWidth)">
373 @Model.Item.GetString("Text")
374 </div>
375 }
376
377 @if (link1 != null && !string.IsNullOrEmpty(link1.Url) || link2 != null && !string.IsNullOrEmpty(link2.Url))
378 {
379 <div class="d-flex flex-wrap gap-3@(alignmentClass)">
380 @if (link1 != null && !string.IsNullOrEmpty(link1.Url))
381 {
382 <a href="@link1.Url" @target1 @rel1 class="@buttonClasses">@buttonLabel</a>
383 }
384 @if (link2 != null && !string.IsNullOrEmpty(link2.Url))
385 {
386 <a href="@link2.Url" @target2 @rel2 class="@buttonClasses2">@buttonLabel2</a>
387 }
388 </div>
389 }
390 </div>
391 }
392 break;
393
394 case "image-top":
395 if (!string.IsNullOrEmpty(Model.Item.GetString("Image")))
396 {
397 <figure class="@figureCss" @ratioVariable>
398 @RenderPartial("Components/Custom_Image.cshtml", Model.Item.GetFile("Image") ?? new Dynamicweb.Frontend.FileViewModel(), parms)
399 </figure>
400 }
401
402 if (!string.IsNullOrEmpty(Model.Item.GetString("Title")) || !string.IsNullOrEmpty(Model.Item.GetString("Lead")) || !string.IsNullOrEmpty(Model.Item.GetString("Text")) || link1 != null && !string.IsNullOrEmpty(link1.Url) || link2 != null && !string.IsNullOrEmpty(link2.Url))
403 {
404 <div class="d-flex flex-column gap-3 h-100@(contentPaddingClass)">
405 @if (!string.IsNullOrEmpty(title) && !hideTitle)
406 {
407 @headingLevelStart
408 @title
409 @headingLevelStop
410 }
411
412 @if (!string.IsNullOrEmpty(Model.Item.GetString("Lead")))
413 {
414 <p class="m-0 lead @(subtitleFontSize) @(subtitleColor) @(subtitleOpacity)@(maxWidth)">
415 @Model.Item.GetString("Lead")
416 </p>
417 }
418
419 @if (!string.IsNullOrEmpty(Model.Item.GetString("Text")))
420 {
421 <div class="mb-0-last-child @textColor @(textOpacity)@(maxWidth)">
422 @Model.Item.GetString("Text")
423 </div>
424 }
425
426 @if (link1 != null && !string.IsNullOrEmpty(link1.Url) || link2 != null && !string.IsNullOrEmpty(link2.Url))
427 {
428 <div class="d-flex flex-wrap gap-3@(alignmentClass)">
429 @if (link1 != null && !string.IsNullOrEmpty(link1.Url))
430 {
431 <a href="@link1.Url" @target1 @rel1 class="@buttonClasses">@buttonLabel</a>
432 }
433 @if (link2 != null && !string.IsNullOrEmpty(link2.Url))
434 {
435 <a href="@link2.Url" @target2 @rel2 class="@buttonClasses2">@buttonLabel2</a>
436 }
437 </div>
438 }
439 </div>
440 }
441 break;
442
443 case "image-bottom":
444 if (!string.IsNullOrEmpty(title) || !string.IsNullOrEmpty(Model.Item.GetString("Lead")) || !string.IsNullOrEmpty(Model.Item.GetString("Text")) || link1 != null && !string.IsNullOrEmpty(link1.Url) || link2 != null && !string.IsNullOrEmpty(link2.Url))
445 {
446 <div class="d-flex flex-column gap-3@(contentPaddingClass)">
447 @if (!string.IsNullOrEmpty(title) && !hideTitle)
448 {
449 @headingLevelStart
450 @title
451 @headingLevelStop
452 }
453
454 @if (!string.IsNullOrEmpty(Model.Item.GetString("Lead")))
455 {
456 <p class="m-0 lead @(subtitleFontSize) @(subtitleColor) @(subtitleOpacity)@(maxWidth)">
457 @Model.Item.GetString("Lead")
458 </p>
459 }
460
461 @if (!string.IsNullOrEmpty(Model.Item.GetString("Text")))
462 {
463 <div class="mb-0-last-child @textColor @(textOpacity)@(maxWidth)">
464 @Model.Item.GetString("Text")
465 </div>
466 }
467
468 @if (link1 != null && !string.IsNullOrEmpty(link1.Url) || link2 != null && !string.IsNullOrEmpty(link2.Url))
469 {
470 <div class="d-flex flex-wrap gap-3@(alignmentClass)">
471 @if (link1 != null && !string.IsNullOrEmpty(link1.Url))
472 {
473 <a href="@link1.Url" @target1 @rel1 class="@buttonClasses">@buttonLabel</a>
474 }
475 @if (link2 != null && !string.IsNullOrEmpty(link2.Url))
476 {
477 <a href="@link2.Url" @target2 @rel2 class="@buttonClasses2">@buttonLabel2</a>
478 }
479 </div>
480 }
481 </div>
482 }
483
484 if (!string.IsNullOrEmpty(Model.Item.GetString("Image")))
485 {
486 <figure class="@figureCss" @ratioVariable>
487 @RenderPartial("Components/Custom_Image.cshtml", Model.Item.GetFile("Image") ?? new Dynamicweb.Frontend.FileViewModel(), parms)
488 </figure>
489 }
490 break;
491 }
492 </div>
493