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 if (!string.IsNullOrEmpty(productIds))
83 {
84 Model.Products = Model.Products.OrderBy(product => productIds.IndexOf(product.Id)).ToList();
85 }
86 }
87
88 if (navigationStyle == "slider-nav-none")
89 {
90 hideSliderNavigation = true;
91 }
92
93 <div class="grid gap-0">
94 <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)">
95 <ul class="slider-container">
96 @foreach (ProductViewModel product in Model.Products)
97 {
98 string link = product.GetProductLink(GetPageIdByNavigationTag("Shop"), false);
99
100 string clickProductLink = null;
101 if (!string.IsNullOrWhiteSpace(googleTagManagerID) && allowTracking)
102 {
103 clickProductLink = $"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()}')";
104 }
105
106 if (Dynamicweb.Context.Current.Items.Contains("ProductDetails"))
107 {
108 Dynamicweb.Context.Current.Items["ProductDetails"] = product;
109 }
110 else
111 {
112 Dynamicweb.Context.Current.Items.Add("ProductDetails", product);
113 }
114
115 <li class="d-flex flex-column">
116 <a href="@link" class="stretched-link" onclick="@clickProductLink">
117 <span class="visually-hidden">@product.Name</span>
118 </a>
119 @{
120 @RenderGrid(itemSourcePageId)
121 }
122 </li>
123 }
124
125 @if (!Model.Products.Any() && Pageview.IsVisualEditorMode)
126 {
127 if (Dynamicweb.Context.Current.Items.Contains("ProductDetails"))
128 {
129 Dynamicweb.Context.Current.Items["ProductDetails"] = GetProduct();
130 }
131 else
132 {
133 Dynamicweb.Context.Current.Items.Add("ProductDetails", GetProduct());
134 }
135
136 for (int i = 0; i < 4; i++)
137 {
138 <li class="d-flex flex-column">
139 @{
140 @RenderGrid(itemSourcePageId)
141 }
142 </li>
143 }
144 }
145 </ul>
146
147 @if (!hideSliderNavigation)
148 {
149 <button type="button" title="@Translate("Previous slide")" class="slider-nav" style="z-index:2;">
150 <span class="visually-hidden">@Translate("Previous slide")</span>
151 </button>
152 <button type="button" title="@Translate("Next slide")" class="slider-nav slider-nav-next" style="z-index:2;">
153 <span class="visually-hidden">@Translate("Next slide")</span>
154 </button>
155 }
156
157 @if (indicatorStyle != "slider-indicators-hidden")
158 {
159 bool isActive = true;
160 int slideCount = 1;
161
162 <div class="slider-indicators" style="z-index:2;">
163 @foreach (var item in Model.Products)
164 {
165 <button @(isActive ? "class=\"active\"" : string.Empty) type="button" title='@Translate("Go to slide") @slideCount'>
166 <span class="visually-hidden">@Translate("Go to slide") @slideCount</span>
167 </button>
168 {
169 slideCount++;
170 }
171 isActive = false;
172 }
173 </div>
174 }
175 </div>
176 </div>
177
178 <script type="module">
179 import { swiffyslider } from 'swiffy-slider';
180 swiffyslider.initSlider(document.querySelector('#slider_@(modelId)'));
181 </script>
182 }
183 }
184 else if (Pageview.IsVisualEditorMode == true)
185 {
186 <div class="alert alert-dark" role="alert">
187 <span>@Translate("Product component slider: The slider will be rendered here, if there is anything to show")</span>
188 </div>
189 }
190