1 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.ParagraphViewModel>
2 @using Dynamicweb.Core
3 @using Dynamicweb.Ecommerce.ProductCatalog
4
5 @{
6 ProductViewModel product = null;
7 if (Dynamicweb.Context.Current.Items.Contains("ProductDetails"))
8 {
9 product = (ProductViewModel)Dynamicweb.Context.Current.Items["ProductDetails"];
10 }
11 else if (Pageview.Page.Item["DummyProduct"] != null && Pageview.IsVisualEditorMode)
12 {
13 var pageViewModel = Dynamicweb.Frontend.ContentViewModelFactory.CreatePageInfoViewModel(Pageview.Page);
14 ProductListViewModel productList = pageViewModel.Item.GetValue("DummyProduct") != null ? pageViewModel.Item.GetValue("DummyProduct") as ProductListViewModel : new ProductListViewModel();
15
16 if (productList?.Products is object)
17 {
18 product = productList.Products[0];
19 }
20 }
21
22 string title = Model?.Item?.GetRawValueString("Title", Translate("Products"));
23 string campaignValues = string.Join(",", Model.Item.GetList("CampaignBadges")?.GetRawValue().OfType<string>().ToList());
24
25 //Styling
26 string titleFontSize = Model.Item.GetRawValueString("TitleFontSize", "h3");
27 string subtitleFontSize = Model.Item.GetRawValueString("SubtitleFontSize", "fs-5");
28 string buttonStyle = Model.Item.GetRawValueString("ButtonStyle", "");
29 buttonStyle = buttonStyle == "primary" ? " btn-primary" : buttonStyle;
30 buttonStyle = buttonStyle == "secondary" ? " btn-secondary" : buttonStyle;
31 buttonStyle = buttonStyle == "link" ? " btn-link" : buttonStyle;
32 string maxWidth = Model.Item.GetRawValueString("TextReadability", "");
33 maxWidth = maxWidth == "max-width-on" ? " mw-75ch" : maxWidth;
34 maxWidth = maxWidth == "max-width-off" ? "" : maxWidth;
35
36 string generalTheme = !string.IsNullOrWhiteSpace(Model.Item.GetRawValueString("GeneralTheme")) ? " theme " + Model.Item.GetRawValueString("GeneralTheme").Replace(" ", "").Trim().ToLower() : "";
37 string theme = !string.IsNullOrWhiteSpace(Model.Item.GetRawValueString("Theme")) ? " theme " + Model.Item.GetRawValueString("Theme").Replace(" ", "").Trim().ToLower() : "";
38 string imageTheme = !string.IsNullOrWhiteSpace(Model.Item.GetRawValueString("ImageTheme")) ? " theme " + Model.Item.GetRawValueString("ImageTheme").Replace(" ", "").Trim().ToLower() : "";
39
40 //Link generation
41 string pageId = !string.IsNullOrEmpty(Model.Item.GetRawValueString("ProductSliderServicePage")) ? Model.Item.GetLink("ProductSliderServicePage").PageId.ToString() : "";
42 if (string.IsNullOrEmpty(pageId))
43 {
44 pageId = GetPageIdByNavigationTag("ProductSliderService").ToString();
45 }
46
47 string url = "/Default.aspx?ID=" + pageId;
48 if (!url.Contains("LayoutTemplate", StringComparison.OrdinalIgnoreCase))
49 {
50 url += url.Contains("?") ? "&LayoutTemplate=Designs/Swift/Swift_PageClean.cshtml" : "?LayoutTemplate=Designs/Swift/Swift_PageClean.cshtml";
51 }
52 if (Pageview.IsVisualEditorMode)
53 {
54 url += "&VisualEdit=True";
55 }
56
57 bool isLazyLoadingForProductInfoEnabled = Dynamicweb.Core.Converter.ToBoolean(Dynamicweb.Context.Current.Items["IsLazyLoadingForProductInfoEnabled"]);
58 if (isLazyLoadingForProductInfoEnabled)
59 {
60 url += "&getproductinfo=true";
61 }
62
63 //Source type
64 string sourceType = Model.Item.GetRawValueString("RelationType", "trending");
65 IList<string> relateFromGroupIds = new List<string> { };
66 IList<string> relateFromProductVariantIds = new List<string> { };
67 IList<string> relateFromProductIds = new List<string> { };
68 bool hasVariants = false;
69
70 //--- VARIANTS ---
71 if (sourceType == "variants" && Model.Item.GetValue<ProductListViewModel>("ProductsToRelateToVariants") is ProductListViewModel productsToRelateToVariants)
72 {
73 foreach (var productSelection in productsToRelateToVariants.Products)
74 {
75 relateFromProductIds.Add(productSelection.Id);
76 }
77 }
78
79 //--- MOST SOLD ---
80 if (sourceType == "most-sold" && Model.Item.GetValue<IList<ProductGroupViewModel>>("GroupsToRelateToMostSold") is IList<ProductGroupViewModel> groupsToRelateToMostSold)
81 {
82 foreach (var fromGroup in groupsToRelateToMostSold)
83 {
84 relateFromGroupIds.Add(fromGroup.Id);
85 }
86 }
87
88 //--- TRENDING ---
89 if (sourceType == "trending" && Model.Item.GetValue<IList<ProductGroupViewModel>>("GroupsToRelateToTrending") is IList<ProductGroupViewModel> groupsToRelateToTrending)
90 {
91 foreach (var fromGroup in groupsToRelateToTrending)
92 {
93 relateFromGroupIds.Add(fromGroup.Id);
94 }
95 }
96
97 //--- LATEST ---
98 if (sourceType == "latest" && Model.Item.GetValue<IList<ProductGroupViewModel>>("GroupsToRelateToLatest") is IList<ProductGroupViewModel> groupsToRelateToLatest)
99 {
100 foreach (var fromGroup in groupsToRelateToLatest)
101 {
102 relateFromGroupIds.Add(fromGroup.Id);
103 }
104 }
105
106 //--- FREQUENTLY BOUGHT ---
107 if (sourceType == "frequently" && Model.Item.GetValue<ProductListViewModel>("ProductsToRelateTo") is ProductListViewModel productsToRelateTo)
108 {
109 foreach (var fromProduct in productsToRelateTo.Products)
110 {
111 relateFromProductIds.Add(fromProduct.Id);
112 }
113 }
114
115 //--- SELECTED PRODUCTS ---
116 if ((sourceType == "selected" || sourceType == "frequently") && Model.Item.GetValue<ProductListViewModel>("Products") is ProductListViewModel products)
117 {
118 hasVariants = products.Products.Any(p => !string.IsNullOrEmpty(p.VariantId));
119 foreach (var productSelection in products.Products)
120 {
121 if (hasVariants)
122 {
123 if (!string.IsNullOrEmpty(productSelection.VariantId))
124 {
125 relateFromProductVariantIds.Add($"{productSelection.Id} {productSelection.VariantId}");
126 }
127 else
128 {
129 relateFromProductVariantIds.Add($"{productSelection.Id}");
130 }
131 }
132 relateFromProductIds.Add($"{productSelection.Id}");
133 }
134 }
135
136 //--- RELATED PRODUCTS ---
137 if (sourceType == "related-products" && Model.Item.GetValue<ProductListViewModel>("ProductsToRelateTo2") is ProductListViewModel selectedRelationProduct)
138 {
139 if (selectedRelationProduct.Products.Any())
140 {
141 product = selectedRelationProduct.Products.FirstOrDefault();
142 }
143
144 if (product?.RelatedGroups != null)
145 {
146 foreach (var group in product.RelatedGroups)
147 {
148 foreach (var relatedProduct in group.Products)
149 {
150 if (!string.IsNullOrEmpty(relatedProduct.VariantId))
151 {
152 relateFromProductVariantIds.Add($"{relatedProduct.ProductId} {relatedProduct.VariantId}");
153 }
154 else
155 {
156 relateFromProductVariantIds.Add($"{relatedProduct.ProductId}");
157 }
158 }
159 }
160 }
161 }
162
163 //Create group id collection and products id collection strings
164 string groupIds = product is object ? product.PrimaryOrDefaultGroup.Id : string.Join(",", relateFromGroupIds);
165 string productVariantIds = relateFromProductVariantIds.Count > 0 ? string.Join(",", relateFromProductVariantIds) : "";
166 string productIds = product is object && relateFromProductIds.Count == 0 ? product.Id : string.Join(",", relateFromProductIds);
167
168 //Set the parameters to the url
169 string linkParameters = "";
170 linkParameters += sourceType != "related-products" && sourceType != "frequently" && sourceType != "selected" ? "&GroupId=" + groupIds : "";
171 linkParameters += !string.IsNullOrEmpty(productIds) && sourceType != "most-sold" && sourceType != "trending" && sourceType != "latest" && sourceType != "frequently" && sourceType != "related-products" ? "&MainProductId=" + productIds : "";
172 linkParameters += !string.IsNullOrEmpty(productVariantIds) && sourceType == "related-products" ? "&ProductVariantId=" + productVariantIds : "";
173 linkParameters += sourceType == "variants" ? "&IsVariant=true" : "";
174 linkParameters += sourceType == "latest" ? "&SortBy=Created" : "";
175 linkParameters += sourceType == "most-sold" ? "&SortBy=OrderCount" : "";
176 linkParameters += sourceType == "trending" ? "&SortBy=OrderCountGrowth" : "";
177 linkParameters += !string.IsNullOrEmpty(productIds) && sourceType == "frequently" ? $"&BoughtWithProductIds=[{productIds}]" : "";
178 var productListPageId = GetPageIdByNavigationTag("Shop");
179 string link = "/Default.aspx?ID=" + productListPageId + linkParameters;
180
181 // Slider settings (documentation: swiffyslider.com/configuration)
182 string navigationStyle = $"{Model.Item.GetRawValueString("NavigationStyle", "slider-nav-round")}";
183 string navigationPlacement = $"{Model.Item.GetRawValueString("NavigationPlacement", "slider-nav-on-slides")}";
184 string indicatorStyle = $"{Model.Item.GetRawValueString("IndicatorStyle", "slider-indicators-hidden")}";
185 string revealSlides = Model.Item.GetRawValueString("RevealSlides", "no-reveal") == "reveal" ? "slider-item-reveal" : string.Empty;
186 string navigationAlwaysVisible = (Model.Item.GetBoolean("NavigationAlwaysVisible")) ? "slider-nav-visible" : string.Empty;
187 string navigationVisibleOnTouch = (Model.Item.GetBoolean("NavigationVisibleOnTouch")) ? "slider-nav-touch" : string.Empty;
188 string navigationShowScrollbar = (Model.Item.GetBoolean("NavigationShowScrollbar")) ? "slider-nav-scrollbar" : string.Empty;
189 string navigationSmall = (Model.Item.GetBoolean("NavigationSmall")) ? "slider-nav-sm" : string.Empty;
190 string navigationInvertColors = (Model.Item.GetBoolean("NavigationInvertColors")) ? "slider-nav-dark" : string.Empty;
191 string navigationSlideEntirePage = (Model.Item.GetBoolean("NavigationSlideEntirePage")) ? "slider-nav-page" : string.Empty;
192 string navigationNoLoop = (Model.Item.GetBoolean("NavigationNoLoop")) ? "slider-nav-noloop" : string.Empty;
193 string indicatorsOutsideSlider = (Model.Item.GetBoolean("IndicatorsOutsideSlider") && indicatorStyle != string.Empty) ? "slider-indicators-outside" : string.Empty;
194 string indicatorsHighlightActive = (Model.Item.GetBoolean("IndicatorsHighlightActive")) ? "slider-indicators-highlight" : string.Empty;
195 string indicatorsInvertColors = (Model.Item.GetBoolean("IndicatorsInvertedColors")) ? "slider-indicators-dark" : string.Empty;
196 string indicatorsVisibleOnSmallDevices = (Model.Item.GetBoolean("IndicatorsVisibleOnSmallDevices")) ? "slider-indicators-sm" : string.Empty;
197
198 bool productsFound = true;
199 if (string.IsNullOrEmpty(groupIds) && string.IsNullOrEmpty(productIds) && string.IsNullOrEmpty(productVariantIds))
200 {
201 if (Pageview.IsVisualEditorMode)
202 {
203 productIds = product.Id;
204 sourceType = "selected";
205 }
206 else
207 {
208 productsFound = false;
209 }
210 }
211 }
212
213 @*Container element for the request*@
214 @if (productsFound)
215 {
216 <form method="post" action="@url" id="RelatedProductsForm_@Model.ID" data-response-target-element="RelatedProducts_@Model.ID" data-preloader="inline" data-update-url="false" class="item_@Model.Item.SystemName.ToLower()">
217 <input type="hidden" name="ModelID" value="@Model.ID">
218 <input type="hidden" name="SourceType" value="@sourceType">
219
220 @*--- SLIDER SETTINGS ---*@
221 <input type="hidden" name="NavigationStyle" value="@navigationStyle">
222 <input type="hidden" name="NavigationPlacement" value="@navigationPlacement">
223 <input type="hidden" name="IndicatorStyle" value="@indicatorStyle">
224 <input type="hidden" name="RevealSlides" value="@revealSlides">
225 <input type="hidden" name="NavigationAlwaysVisible" value="@(navigationAlwaysVisible)">
226 <input type="hidden" name="NavigationVisibleOnTouch" value="@(navigationVisibleOnTouch)">
227 <input type="hidden" name="NavigationShowScrollbar" value="@(navigationShowScrollbar)">
228 <input type="hidden" name="NavigationSmall" value="@(navigationSmall)">
229 <input type="hidden" name="NavigationInvertColors" value="@(navigationInvertColors)">
230 <input type="hidden" name="NavigationNoLoop" value="@(navigationNoLoop)">
231 <input type="hidden" name="NavigationSlideEntirePage" value="@(navigationSlideEntirePage)">
232 <input type="hidden" name="IndicatorsOutsideSlider" value="@(indicatorsOutsideSlider)">
233 <input type="hidden" name="IndicatorsHighlightActive" value="@(indicatorsHighlightActive)">
234 <input type="hidden" name="IndicatorsInvertColors" value="@(indicatorsInvertColors)">
235 <input type="hidden" name="IndicatorsVisibleOnSmallDevices" value="@(indicatorsVisibleOnSmallDevices)">
236
237 @*--- VARIANTS ---*@
238 @if (sourceType == "variants")
239 {
240 <input type="hidden" name="isVariant" value="true">
241 <input type="hidden" name="MainProductID" id="MainProductID_@Model.ID" value="@productIds">
242 }
243
244 @*--- MOST SOLD ---*@
245 @if (sourceType == "most-sold")
246 {
247 <input type="hidden" name="SortBy" value="OrderCount">
248 if (groupIds != "")
249 {
250 <input type="hidden" name="GroupId" value="@groupIds">
251 }
252 }
253
254 @*--- TRENDING ---*@
255 @if (sourceType == "trending")
256 {
257 <input type="hidden" name="SortBy" value="OrderCountGrowth">
258 if (groupIds != "")
259 {
260 <input type="hidden" name="GroupId" value="@groupIds">
261 }
262 }
263
264 @*--- FREQUENTLY BOUGHT ---*@
265 @if (sourceType == "frequently" && !string.IsNullOrEmpty(productIds))
266 {
267 <input type="hidden" name="BoughtWithProductIds" value="[@productIds]">
268 }
269 @if (sourceType != "frequently" && hasVariants)
270 {
271 <input type="hidden" name="ProductVariantId" value="@productVariantIds">
272 }
273
274 @*--- LATEST ---*@
275 @if (sourceType == "latest")
276 {
277 <input type="hidden" name="SortBy" value="Created">
278 <input type="hidden" name="GroupId" value="@groupIds">
279 }
280
281 @*--- SELECTED PRODUCTS ---*@
282 @if (sourceType == "selected" && !string.IsNullOrEmpty(productIds) && !hasVariants)
283 {
284 <input type="hidden" name="MainProductId" id="MainProductID_@Model.ID" value="@productIds">
285 }
286 @if (sourceType == "selected" && hasVariants)
287 {
288 <input type="hidden" name="ProductVariantId" value="@productVariantIds">
289 }
290
291 @*--- RELATED PRODUCTS ---*@
292 @if (sourceType == "related-products")
293 {
294 <input type="hidden" name="ProductVariantId" id="MainProductID_@Model.ID" value="@productVariantIds">
295 }
296
297 @* General parameters *@
298 <input type="hidden" name="Link" value="@link">
299 <input type="hidden" name="HideTitle" value="@Model.Item.GetString("HideTitle")">
300
301 @if (Model.Item.GetInt32("ProductsCount") != 0)
302 {
303 <input type="hidden" name="PageSize" value="@Model.Item.GetInt32("ProductsCount")">
304 }
305 <input type="hidden" name="HeadingTitle" id="RelatedProductsTitle_@Model.ID" value="@title">
306 @if (!string.IsNullOrEmpty(Model.Item.GetString("Subtitle")))
307 {
308 <input type="hidden" name="Subtitle" value="@Model.Item.GetString("Subtitle")">
309 }
310 @if (!string.IsNullOrEmpty(Model.Item.GetString("LinkText")))
311 {
312 <input type="hidden" name="LinkText" value="@Model.Item.GetString("LinkText")">
313 }
314 @if (!string.IsNullOrEmpty(Model.Item.GetString("ImageAspectRatio")))
315 {
316 string ratio = Model.Item.GetRawValueString("ImageAspectRatio", "");
317 ratio = ratio != "0" ? ratio : "";
318 <input type="hidden" name="ImageAspectRatio" value="@ratio">
319 }
320 @if (!string.IsNullOrEmpty(Model.Item.GetString("Layout")))
321 {
322 <input type="hidden" name="Layout" value="@Model.Item.GetRawValueString("Layout")">
323 }
324 @if (titleFontSize != "")
325 {
326 <input type="hidden" name="TitleFontSize" value="@titleFontSize">
327 }
328 @if (subtitleFontSize != "")
329 {
330 <input type="hidden" name="SubtitleFontSize" value="@subtitleFontSize">
331 }
332 @if (buttonStyle != "")
333 {
334 <input type="hidden" name="ButtonStyle" value="@buttonStyle">
335 }
336 @if (generalTheme != "")
337 {
338 <input type="hidden" name="GeneralTheme" value="@generalTheme">
339 }
340 @if (theme != "")
341 {
342 <input type="hidden" name="Theme" value="@theme">
343 }
344 @if (imageTheme != "")
345 {
346 <input type="hidden" name="ImageTheme" value="@imageTheme">
347 }
348 @if (!string.IsNullOrEmpty(Model.Item.GetString("ContentPadding")))
349 {
350 string contentPadding = Model.Item.GetRawValueString("ContentPadding");
351 <input type="hidden" name="ContentPadding" value="@contentPadding">
352 }
353 <input type="hidden" name="TextReadability" value="@maxWidth">
354 <input type="hidden" name="ParentColumnSize" id="ParentColumnSize_@Model.ID" value="12">
355
356 <input type="hidden" name="SaleBadgeType" value="@Model.Item.GetRawValue("SaleBadgeType")">
357 <input type="hidden" name="SaleBadgeCssClassName" value="@Model.Item.GetRawValue("SaleBadgeDesign")">
358 <input type="hidden" name="NewBadgeCssClassName" value="@Model.Item.GetRawValue("NewBadgeDesign")">
359 <input type="hidden" name="NewPublicationDays" value="@Model.Item.GetInt32("NewPublicationDays")">
360
361 @if (campaignValues != string.Empty)
362 {
363 <input type="hidden" name="CampaignBadgesValues" value="@campaignValues">
364 }
365 </form>
366
367 <script type="module" src="/Files/Templates/Designs/Swift/Assets/js/swiffy-slider.js"></script>
368 <script>
369 window.addEventListener("load", () => {
370 swift.AssetLoader.Load('/Files/Templates/Designs/Swift/Assets/css/swiffy-slider.min.css', 'css');
371 });
372 </script>
373
374 if (Pageview.IsVisualEditorMode)
375 {
376 <div class="alert alert-info" role="alert">
377 <span>@Translate("Product slider: Edit this column to configure")</span>
378 </div>
379 }
380
381 if (sourceType != "related-products")
382 {
383 <div class="w-100 h-100">
384 <div id="@Model.ID" class="user-select-none" style="scroll-margin-top:var(--header-height,150px)"></div>
385 <div id="RelatedProducts_@Model.ID" class="h-100 swift_product_slider_container"></div>
386 </div>
387 }
388 else if (product?.RelatedGroups != null)
389 {
390 @* Create multiple slider containers, if type is Product relation *@
391 <div class="grid w-100 h-100@(generalTheme)" style="grid-row-gap: 4rem">
392 <div id="@Model.ID" class="user-select-none" style="scroll-margin-top:var(--header-height,150px)"></div>
393 @foreach (var group in product.RelatedGroups)
394 {
395 <div id="RelatedProducts_@(Model.ID)_@group.Id" class="g-col-12 h-100 swift_product_slider_container"></div>
396 }
397 </div>
398 }
399
400 @* Initialize *@
401 if (sourceType != "related-products")
402 {
403 <script type="module">
404 if (document.querySelector("#RelatedProducts_@Model.ID").closest("[data-col-size]")) {
405 document.querySelector("#ParentColumnSize_@Model.ID").value = document.querySelector("#RelatedProducts_@Model.ID").closest("[data-col-size]").getAttribute("data-col-size");
406 }
407 swift.PageUpdater.Update(document.querySelector("#RelatedProductsForm_@Model.ID")).then(function () {
408 setTimeout(function() {
409 const isVisualEditor = @(Converter.ToString(Pageview.IsVisualEditorMode).ToLowerInvariant());
410 const productSliderContainer = document.querySelector(".swift_product_slider_container");
411
412 if (productSliderContainer && productSliderContainer.innerHTML !== "") {
413 productSliderContainer.classList.remove("d-none");
414 }
415 else if (!isVisualEditor) {
416 productSliderContainer.closest("[class*=column]").classList.add("d-none");
417 }
418 }, 150);
419 });
420 </script>
421 }
422 else if (product?.RelatedGroups != null)
423 {
424 @* Create multiple sliders, if type is Product relation *@
425 foreach (var group in product.RelatedGroups)
426 {
427 IList<string> fromProductIds = new List<string> { };
428
429 foreach (var relatedProduct in group.Products)
430 {
431 if (!string.IsNullOrEmpty(relatedProduct.VariantId))
432 {
433 fromProductIds.Add($"{relatedProduct.ProductId} {relatedProduct.VariantId}");
434 }
435 else
436 {
437 fromProductIds.Add($"{relatedProduct.ProductId}");
438 }
439 }
440 <script type="module">
441 document.querySelector("#ParentColumnSize_@Model.ID").value = document.querySelector("#RelatedProducts_@(Model.ID)_@group.Id").closest("[data-col-size]").getAttribute("data-col-size");
442 document.querySelector("#MainProductID_@Model.ID").value = "@string.Join(",", fromProductIds)";
443 document.querySelector("#RelatedProductsTitle_@Model.ID").value = "@group.Name";
444 document.querySelector("#RelatedProductsForm_@Model.ID").setAttribute("data-response-target-element", "RelatedProducts_@(Model.ID)_@group.Id");
445
446 swift.PageUpdater.Update(document.querySelector("#RelatedProductsForm_@Model.ID"));
447 </script>
448 }
449 }
450 }
451
