1 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.ParagraphViewModel>
2 @using Dynamicweb.Content
3 @using Dynamicweb.Content.Items
4 @using Dynamicweb.Frontend
5 @using Page = Dynamicweb.Content.Page
6 @using Dynamicweb.Ecommerce.ProductCatalog
7 @functions
8 {
9 private string GetImageHandlerImage(FileViewModel imageFile)
10 {
11 int imageWidth = GetImageWidth();
12 string imagePath = imageFile?.Path ?? "";
13 string focalPoints = imageFile?.GetFocalPointParameters() ?? "";
14 string imageRatio = GetImageRatio();
15 string image = $"/Admin/Public/GetImage.ashx?width={imageWidth}";
16 string crop = "7";
17
18 if (imageRatio != "original")
19 {
20 if (!string.IsNullOrEmpty(imageRatio))
21 {
22 image += $"&height={GetImageHeight(imageRatio, imageWidth)}&fillcanvas=true&{focalPoints}";
23 }
24 }
25
26 image += $"&crop={crop}&image={imagePath}";
27
28 return image;
29 }
30
31 private int GetImageWidth()
32 {
33 int newsletterWidth = Pageview != null ? Dynamicweb.Core.Converter.ToInt32(Pageview.Page.Item["Width"]) : 660;
34
35 GridRow grid = Dynamicweb.Services.Grids.GetGridRowById(Pageview.CurrentParagraph.GridRowId);
36 int padding = Convert.ToInt16(Model.Item.GetRawValueString("ContentPadding", "0")) * 2;
37
38 if (grid == null) return newsletterWidth - padding;
39
40 var definitionId = grid.DefinitionId;
41
42 if (definitionId == "1Column") return newsletterWidth - padding;
43
44 var item = Dynamicweb.Services.Items.GetItem(grid.ItemType, grid.ItemId);
45 var spaceBetweenColumns = item["SpaceBetweenColumns"].ToString();
46 var spacing = 20;
47
48 return spaceBetweenColumns != "spacing" ? newsletterWidth / 2 - padding : (newsletterWidth - spacing) / 2 - padding;
49 }
50
51 private static string GetImageHeight(string imageRatio, int imageWidth)
52 {
53 string[] ratioValues = imageRatio.Split('-');
54 double ratio = ratioValues.Length == 2 ? Dynamicweb.Core.Converter.ToDouble(ratioValues[1]) / Dynamicweb.Core.Converter.ToDouble(ratioValues[0]) : 1;
55 return Dynamicweb.Core.Converter.ToInt32(Dynamicweb.Core.Converter.ToInt32(imageWidth) * ratio).ToString();
56 }
57
58 private string GetImageRatio()
59 {
60 return Model.Item.GetRawValueString("ImageAspectRatio", "original");
61 }
62
63 private string GetThemeValue(string systemName)
64 {
65 int themesPageId = Pageview.AreaSettings.GetLink("ThemesPage") != null ? Pageview.AreaSettings.GetLink("ThemesPage").PageId : 0;
66 if (themesPageId == 0) return "";
67
68 List<Paragraph> themesPageParagraphs = Dynamicweb.Services.Paragraphs.GetParagraphsByPageId(themesPageId)?.ToList();
69 string theme = GetSelectedTheme();
70 Paragraph themeParagraph = themesPageParagraphs?.FirstOrDefault(p => p.Item["Name"].ToString().ToLower().Equals(theme));
71 if (themeParagraph == null) return "";
72 string themeValue = themeParagraph.Item[systemName] != null ? themeParagraph.Item[systemName].ToString() : "";
73 themeValue = themeValue == "" ? "unset" : themeValue;
74 return themeValue;
75 }
76
77 private string GetSelectedTheme()
78 {
79 string theme = !string.IsNullOrEmpty(Pageview.CurrentParagraph.Item["Theme"]?.ToString()) ? Pageview.CurrentParagraph.Item["Theme"].ToString().ToLower() : "";
80 if (!string.IsNullOrEmpty(theme) && theme != "theme default") return theme;
81
82 GridRow grid = Dynamicweb.Services.Grids.GetGridRowById(Pageview.CurrentParagraph.GridRowId);
83 Item item = Dynamicweb.Services.Items.GetItem(grid.ItemType, grid.ItemId);
84 theme = item["Theme"]?.ToString().ToLower();
85
86 if (!string.IsNullOrEmpty(theme) && theme != "theme default") return theme;
87
88 theme = Dynamicweb.Core.Converter.ToString(Pageview.Page.Item["Theme"])?.ToLower();
89 return !string.IsNullOrEmpty(theme) && theme != "theme default" ? theme : "";
90 }
91
92 private string GetFontStyle(string type)
93 {
94 int brandingPageId = Pageview.AreaSettings.GetLink("BrandingPage") != null ? Pageview.AreaSettings.GetLink("BrandingPage").PageId : 0;
95 if (brandingPageId == 0) return "";
96
97 Page brandingPage = Dynamicweb.Services.Pages?.GetPage(brandingPageId);
98 if (brandingPage == null) return "";
99
100 string fontStyle = "";
101 dynamic font = Newtonsoft.Json.JsonConvert.DeserializeObject(brandingPage.Item[type + "Font"].ToString());
102 if (font != null)
103 {
104 fontStyle += $"font-family:{font.Family}, sans-serif;";
105 fontStyle += $"font-weight:{font.SelectedVariant};";
106 }
107 fontStyle += $"text-transform:{brandingPage.Item[type + "Casing"]};";
108 fontStyle += $"line-height:{brandingPage.Item[type + "LineHeight"]};";
109 fontStyle += $"letter-spacing:{brandingPage.Item[type + "LetterSpacing"]};";
110 return fontStyle;
111 }
112 }
113 @{
114 string layout = Model.Item.GetRawValueString("Layout", "image-top");
115 string backgroundColor = !string.IsNullOrEmpty(GetSelectedTheme()) ? GetThemeValue("BackgroundColor") : "transparent";
116 string bodyFontStyle = GetFontStyle("Body");
117 string padding = Model.Item.GetRawValueString("ContentPadding", "0") + "px";
118 }
119 <td class="mb-0" style="padding:@padding;background-color:@backgroundColor;vertical-align:center;font-size: 16px;">
120 <div style="@bodyFontStyle">
121 @switch (layout)
122 {
123 case "image-top":
124 @RenderImage()
125 @RenderTitle()
126 @RenderLead()
127 @RenderText()
128 @RenderButton()
129 break;
130
131 case "title-top":
132 @RenderTitle()
133 @RenderImage()
134 @RenderLead()
135 @RenderText()
136 @RenderButton()
137 break;
138
139 case "title-lead-top":
140 @RenderTitle()
141 @RenderLead()
142 @RenderImage()
143 @RenderText()
144 @RenderButton()
145 break;
146
147 case "text-center":
148 @RenderImage("center")
149 @RenderTitle("center")
150 @RenderLead("center")
151 @RenderText("center")
152 @RenderButton("center")
153 break;
154 }
155 </div>
156 </td>
157
158 @helper RenderImage(string horizontalAlignment = "left")
159 {
160 FileViewModel imageFile = Model.Item.GetFile("Image");
161
162 if (imageFile != null)
163 {
164 string altText = Model.Item.GetString("Title"); //TODO: add alt text to image?
165 string width = GetImageRatio() == "original" ? "" : "width:100%";
166 <div align="@horizontalAlignment" style="margin-bottom: 16px">
167 <img style="border: 0;display: block;height: auto;max-width: 100%;@width" alt="@altText" src="@GetImageHandlerImage(imageFile)">
168 </div>
169 }
170 }
171
172 @helper RenderTitle(string horizontalAlignment = "left")
173 {
174 string title = Model.Item.GetString("Title");
175 string titleFontSizeClass = Model.Item?.GetRawValueString("TitleFontSize", "size-44");
176 string titleFontSize = (titleFontSizeClass?.Split('-')[1] ?? "44") + "px";
177 string foregroundColor = !string.IsNullOrEmpty(GetSelectedTheme()) ? GetThemeValue("ForegroundColor") : "#000000";
178 string headerFontStyle = GetFontStyle("Header");
179
180 if (!string.IsNullOrEmpty(title) && !Model.Item.GetBoolean("HideTitle"))
181 {
182 <div style="margin-bottom:16px;mso-line-height-rule: exactly;mso-text-raise: 11px;vertical-align: middle;">
183 <h1 class="@titleFontSizeClass" style="text-align:@horizontalAlignment;margin:0;font-size:@titleFontSize;@headerFontStyle;" lang="x-@titleFontSizeClass">
184 <span>
185 <span style="color:@foregroundColor">
186 <strong>@title</strong>
187 </span>
188 </span>
189 </h1>
190 </div>
191 }
192 }
193
194 @helper RenderLead(string horizontalAlignment = "left")
195 {
196 string lead = Model.Item.GetString("Lead");
197 string subtitleFontSizeClass = Model.Item.GetRawValueString("SubtitleFontSize", "size-20");
198 string subtitleFontSize = (subtitleFontSizeClass?.Split('-')[1] ?? "20") + "px";
199 string foregroundColor = !string.IsNullOrEmpty(GetSelectedTheme()) ? GetThemeValue("ForegroundColor") : "#000000";
200 string displayFontStyle = GetFontStyle("Display");
201
202 if (!string.IsNullOrEmpty(lead))
203 {
204 <div style="margin-bottom:16px;text-align:@horizontalAlignment;mso-line-height-rule: exactly;mso-text-raise: 11px;vertical-align: middle;">
205 <p class="@subtitleFontSizeClass" style="margin:0;font-size:@subtitleFontSize;color:@foregroundColor;@displayFontStyle" lang="x-@subtitleFontSizeClass">
206 @lead
207 </p>
208 </div>
209 }
210 }
211
212 @helper RenderText(string horizontalAlignment = "left")
213 {
214 string text = Model.Item?.GetString("Text") ?? "";
215 string foregroundColor = !string.IsNullOrEmpty(GetSelectedTheme()) ? GetThemeValue("ForegroundColor") : "#000000";
216
217 if (!string.IsNullOrEmpty(text))
218 {
219 <div class="mb-0 mt-0" style="text-align:@horizontalAlignment;mso-line-height-rule: exactly;mso-text-raise: 11px;vertical-align: middle;color:@foregroundColor">
220 @text
221 </div>
222 }
223 }
224
225 @helper RenderButton(string horizontalAlignment = "left")
226 {
227 string label = Model.Item?.GetString("ButtonLabel") ?? "";
228 string buttonBackgroundColor = !string.IsNullOrEmpty(GetSelectedTheme()) ? GetThemeValue("ButtonPrimaryBackgroundColor") : "#000000";
229 string buttonForegroundColor = !string.IsNullOrEmpty(GetSelectedTheme()) ? GetThemeValue("ButtonPrimaryForegroundColor") : "#FFFFFF";
230
231 string linkType = Model.Item.GetRawValueString("LinkType", "page");
232 var uri = Dynamicweb.Context.Current.Request.Url;
233 var hostname = uri.Scheme + Uri.SchemeDelimiter + uri.Host;
234
235 Dynamicweb.Frontend.LinkViewModel link = new Dynamicweb.Frontend.LinkViewModel();
236
237 if (linkType == "page" && Model.Item.GetLink("ButtonLink") != null)
238 {
239 link = Model.Item.GetLink("ButtonLink");
240 }
241
242 if (linkType == "product-group")
243 {
244 IList<ProductGroupViewModel> selectedGroups = Model.Item.GetValue<IList<ProductGroupViewModel>>("ProductGroupLink");
245 IList<string> groupIds = new List<string> { };
246
247 if (selectedGroups != null)
248 {
249 foreach (var fromGroup in selectedGroups)
250 {
251 groupIds.Add(fromGroup.Id);
252 }
253 }
254
255 link = new Dynamicweb.Frontend.LinkViewModel()
256 {
257 Url = "/Default.aspx?ID=" + GetPageIdByNavigationTag("Shop") + "&GroupID=" + string.Join(",", groupIds).Trim(),
258 IsExternal = false
259 };
260 }
261
262 if (linkType == "product")
263 {
264 ProductListViewModel products = Model.Item.GetValue<ProductListViewModel>("ProductLink");
265 IList<string> productIds = new List<string> { };
266
267 if (products != null)
268 {
269 foreach (var product in products.Products)
270 {
271 productIds.Add(product.Id);
272 }
273 }
274
275 string productParameter = productIds.Count == 1 ? "ProductID" : "MainProductId";
276 string pageTag = productIds.Count == 1 ? "ProductDetailPage" : "Shop";
277 link = new Dynamicweb.Frontend.LinkViewModel()
278 {
279 Url = "/Default.aspx?ID=" + GetPageIdByNavigationTag(pageTag) + "&" + productParameter + "=" + string.Join(",", productIds).Trim(),
280 IsExternal = false
281 };
282 }
283
284 if (link != null && !string.IsNullOrEmpty(label))
285 {
286 string formatedUrl = string.Empty;
287
288 if (!link.IsExternal)
289 {
290 formatedUrl = hostname+link.Url;
291 }
292 else
293 {
294 formatedUrl = link.Url;
295 }
296
297 <div class="btn" style="text-align:@horizontalAlignment;">
298 <![if !mso]>
299 <a href="@formatedUrl" style="border-radius: 0;display: inline-block;font-size: 14px;font-weight: bold;line-height: 24px;padding: 12px 24px;text-align: center;text-decoration: none !important;transition: opacity 0.1s ease-in;color: @buttonForegroundColor !important;background-color:@buttonBackgroundColor;">
300 @label
301 </a>
302 <![endif]>
303 <!--[if mso]>
304 <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="@formatedUrl" style="height:60px;width:300px;margin-top:20px;v-text-anchor:middle;" fillcolor="@buttonBackgroundColor" stroke="f">
305 <v:textbox style="mso-fit-shape-to-text:t" inset="10px,12px,10px,12px">
306 <center style="font-size:14px;line-height:24px;color:@buttonForegroundColor;background-color:@buttonBackgroundColor">
307 @label
308 </center>
309 </v:textbox>
310 </v:rect>
311 <![endif]-->
312 </div>
313 }
314 }
315
