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