1 @inherits ViewModelTemplate<ProductListViewModel>
2 @using Dynamicweb.Frontend
3 @using Dynamicweb.Rendering
4 @using Dynamicweb.Ecommerce.ProductCatalog
5 @using Dynamicweb.Environment
6
7 @functions {
8 public ProductViewModel GetProduct()
9 {
10 ProductViewModel product = null;
11 if (Dynamicweb.Context.Current.Items.Contains("ProductDetails"))
12 {
13 product = (ProductViewModel)Dynamicweb.Context.Current.Items["ProductDetails"];
14 }
15
16 return product;
17 }
18 }
19
20 @{
21 string googleTagManagerID = Pageview.AreaSettings.GetString("GoogleTagManagerID");
22
23 bool allowTracking = true;
24 if (CookieManager.IsCookieManagementActive)
25 {
26 var cookieOptInLevel = CookieManager.GetCookieOptInLevel();
27 allowTracking = cookieOptInLevel == CookieOptInLevel.All || (cookieOptInLevel == CookieOptInLevel.Functional && CookieManager.GetCookieOptInCategories().Contains("Statistical"));
28 }
29
30 int paragraphId = !string.IsNullOrEmpty(Dynamicweb.Context.Current.Request.Form.Get("ParagraphId")) ? Convert.ToInt32(Dynamicweb.Context.Current.Request.Form.Get("ParagraphId")) : 0;
31 var paragraph = Dynamicweb.Content.Services.Paragraphs?.GetParagraph(paragraphId) ?? null;
32 ParagraphInfoViewModel paragraphViewModel = Dynamicweb.Frontend.ContentViewModelFactory.CreateParagraphInfoViewModel(paragraph);
33
34 int itemSourcePageId = Convert.ToInt32(paragraphViewModel.Item.GetRawValueString("ListComponentSource", "0"));
35
36 var pageService = new Dynamicweb.Content.PageService();
37 itemSourcePageId = itemSourcePageId > 0 && pageService.GetPageOrLanguage(itemSourcePageId, Pageview.AreaID) != null ? pageService.GetPageOrLanguage(itemSourcePageId, Pageview.AreaID).ID : itemSourcePageId;
38
39 var page = itemSourcePageId != 0 ? Dynamicweb.Content.Services.Pages.GetPage(itemSourcePageId) : null;
40 }
41
42
43 @if (paragraphViewModel != null && page != null)
44 {
45 if (Model.Products.Any())
46 {
47 string sourceType = paragraphViewModel.Item.GetRawValueString("RelationType", "Trending");
48 int modelId = paragraphViewModel.ID;
49
50 string navigationStyle = paragraphViewModel.Item.GetRawValueString("NavigationStyle", "slider-nav-round");
51 string navigationPlacement = paragraphViewModel.Item.GetRawValueString("NavigationPlacement", "slider-nav-on-slides");
52 string indicatorStyle = paragraphViewModel.Item.GetRawValueString("IndicatorStyle", string.Empty);
53 string revealSlides = paragraphViewModel.Item.GetRawValueString("RevealSlides", "no-reveal") == "reveal" ? "slider-item-reveal" : string.Empty;
54 string sliderItemsGap = paragraphViewModel.Item.GetRawValueString("SliderItemsGap", "slider-item-gap") == "slider-item-nogap" ? "slider-item-nogap" : string.Empty;
55 string navigationAlwaysVisible = (paragraphViewModel.Item.GetBoolean("NavigationAlwaysVisible")) ? "slider-nav-visible" : string.Empty;
56 string navigationVisibleOnTouch = (paragraphViewModel.Item.GetBoolean("NavigationVisibleOnTouch")) ? "slider-nav-touch" : string.Empty;
57 string navigationShowScrollbar = (paragraphViewModel.Item.GetBoolean("NavigationShowScrollbar")) ? "slider-nav-scrollbar" : string.Empty;
58 string scrollBarForceMobile = (paragraphViewModel.Item.GetBoolean("NavigationShowScrollbar")) ? "--swiffy-slider-track-height:0.5rem !important;" : string.Empty;
59 string navigationSmall = (paragraphViewModel.Item.GetBoolean("NavigationSmall")) ? "slider-nav-sm" : string.Empty;
60 string navigationInvertColors = (paragraphViewModel.Item.GetBoolean("NavigationInvertColors")) ? "slider-nav-dark" : string.Empty;
61 string navigationSlideEntirePage = (paragraphViewModel.Item.GetBoolean("NavigationSlideEntirePage")) ? "slider-nav-page" : string.Empty;
62 string navigationNoLoop = (paragraphViewModel.Item.GetBoolean("NavigationNoLoop")) ? "slider-nav-noloop" : string.Empty;
63 string indicatorsOutsideSlider = (paragraphViewModel.Item.GetBoolean("IndicatorsOutsideSlider") && indicatorStyle != string.Empty) ? "slider-indicators-outside" : string.Empty;
64 string indicatorsHighlightActive = (paragraphViewModel.Item.GetBoolean("IndicatorsHighlightActive")) ? "slider-indicators-highlight" : string.Empty;
65 string indicatorsInvertColors = (paragraphViewModel.Item.GetBoolean("IndicatorsInvertedColors")) ? "slider-indicators-dark" : string.Empty;
66 string indicatorsVisibleOnSmallDevices = (paragraphViewModel.Item.GetBoolean("IndicatorsVisibleOnSmallDevices")) ? "slider-indicators-sm" : string.Empty;
67 string animation = paragraphViewModel.Item.GetRawValueString("Animation", string.Empty) != string.Empty ? $"slider-nav-animation {paragraphViewModel.Item.GetRawValueString("Animation")}" : string.Empty;
68 string autoplay = (paragraphViewModel.Item.GetBoolean("Autoplay")) ? "slider-nav-autoplay" : string.Empty;
69 string autoplayInterval = paragraphViewModel.Item.GetRawValueString("AutoplayInterval", string.Empty);
70 bool hideSliderNavigation = false;
71
72 string gridColumnSize = paragraphViewModel.Item.GetRawValueString("SliderLayout", "3");
73 int itemsShown = Convert.ToInt32(gridColumnSize);
74
75 var pageViewModel = Dynamicweb.Frontend.ContentViewModelFactory.CreatePageInfoViewModel(page);
76
77 if (sourceType == "selected")
78 {
79 string productIds = !string.IsNullOrEmpty(Dynamicweb.Context.Current.Request.Form.Get("MainProductID")) ? Dynamicweb.Context.Current.Request.Form.Get("MainProductID") : string.Empty;
80 productIds = string.IsNullOrEmpty(productIds) ? Dynamicweb.Context.Current.Request.Form.Get("ProductVariantId") : productIds;
81
82 Model.Products = Model.Products.OrderBy(product => productIds.IndexOf(product.Id)).ToList();
83 }
84
85 if (navigationStyle == "slider-nav-none")
86 {
87 hideSliderNavigation = true;
88 }
89
90 <div class="grid gap-0">
91 <div id="slider_@(modelId)" class="g-col-12 swiffy-slider slider-item-show@(itemsShown) @(navigationStyle) @(revealSlides) @(navigationPlacement) @(navigationAlwaysVisible) @(navigationVisibleOnTouch) @(indicatorStyle) @(navigationShowScrollbar) @(navigationSmall) @(navigationInvertColors) @(indicatorsOutsideSlider) @(navigationNoLoop) @(indicatorsHighlightActive) @(indicatorsInvertColors) @(indicatorsVisibleOnSmallDevices) @(navigationSlideEntirePage)" style="@(scrollBarForceMobile)">
92 <ul class="slider-container">
93 @foreach (ProductViewModel product in Model.Products)
94 {
95 string link = product.GetProductLink(GetPageIdByNavigationTag("Shop"), false);
96
97 string clickProductLink = string.Empty;
98 if (!string.IsNullOrWhiteSpace(googleTagManagerID) && allowTracking)
99 {
100 clickProductLink = "onclick=\"return clickProductLink('" + @product.Id + "', '" + @Dynamicweb.Core.Encoders.HtmlEncoder.JavaScriptStringEncode(product.Name) + "', '" + @Dynamicweb.Core.Encoders.HtmlEncoder.JavaScriptStringEncode(product.VariantName) + "', '" + @product.Price.CurrencyCode + "', '" + @product.Price.ToStringInvariant() + "', '" + @product.Discount.ToStringInvariant() + "')\"";
101 }
102
103 if (Dynamicweb.Context.Current.Items.Contains("ProductDetails"))
104 {
105 Dynamicweb.Context.Current.Items["ProductDetails"] = product;
106 }
107 else
108 {
109 Dynamicweb.Context.Current.Items.Add("ProductDetails", product);
110 }
111
112 <li class="d-flex flex-column">
113 <a href="@link" class="stretched-link" @clickProductLink>
114 <span class="visually-hidden">@product.Name</span>
115 </a>
116 @{
117 @RenderGrid(itemSourcePageId)
118 }
119 </li>
120 }
121
122 @if (!Model.Products.Any() && Pageview.IsVisualEditorMode)
123 {
124 if (Dynamicweb.Context.Current.Items.Contains("ProductDetails"))
125 {
126 Dynamicweb.Context.Current.Items["ProductDetails"] = GetProduct();
127 }
128 else
129 {
130 Dynamicweb.Context.Current.Items.Add("ProductDetails", GetProduct());
131 }
132
133 for (int i = 0; i < 4; i++)
134 {
135 <li class="d-flex flex-column">
136 @{
137 @RenderGrid(itemSourcePageId)
138 }
139 </li>
140 }
141 }
142 </ul>
143
144 @if (!hideSliderNavigation)
145 {
146 <button type="button" title="@Translate("Previous slide")" class="slider-nav" style="z-index:2;">
147 <span class="visually-hidden">@Translate("Previous slide")</span>
148 </button>
149 <button type="button" title="@Translate("Next slide")" class="slider-nav slider-nav-next" style="z-index:2;">
150 <span class="visually-hidden">@Translate("Next slide")</span>
151 </button>
152 }
153
154 @if (indicatorStyle != "slider-indicators-hidden")
155 {
156 bool isActive = true;
157 int slideCount = 1;
158
159 <div class="slider-indicators" style="z-index:2;">
160 @foreach (var item in Model.Products)
161 {
162 <button @(isActive ? "class=\"active\"" : string.Empty) type="button" title='@Translate("Go to slide") @slideCount'>
163 <span class="visually-hidden">@Translate("Go to slide") @slideCount</span>
164 </button>
165 {
166 slideCount++;
167 }
168 isActive = false;
169 }
170 </div>
171 }
172 </div>
173 </div>
174
175 <script type="module">
176 swiffyslider.initSlider(document.querySelector('#slider_@(modelId)'));
177 </script>
178 }
179 }
180 else if (Pageview.IsVisualEditorMode == true)
181 {
182 <div class="alert alert-dark" role="alert">
183 <span>@Translate("Product component slider: The slider will be rendered here, if there is anything to show")</span>
184 </div>
185 }
186