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 = new ProductViewModel();
11
12 ProductViewModelSettings productSetting = new ProductViewModelSettings
13 {
14 LanguageId = Dynamicweb.Ecommerce.Common.Context.LanguageID,
15 CurrencyCode = Dynamicweb.Ecommerce.Common.Context.Currency.Code,
16 CountryCode = Dynamicweb.Ecommerce.Common.Context.Country.Code2,
17 ShopId = Pageview.Area.EcomShopId
18 };
19
20 if (Dynamicweb.Context.Current.Items.Contains("ProductDetails"))
21 {
22 product = (ProductViewModel)Dynamicweb.Context.Current.Items["ProductDetails"];
23 }
24 else
25 {
26 product = ViewModelFactory.CreateView(productSetting, Dynamicweb.Ecommerce.Services.Products.GetLastActiveProducts(1, Dynamicweb.Ecommerce.Common.Context.LanguageID, false).FirstOrDefault().Id);
27 }
28
29 return product;
30 }
31
32 private bool AllowTracking()
33 {
34 bool allowTracking = true;
35 if (CookieManager.IsCookieManagementActive)
36 {
37 var cookieOptInLevel = CookieManager.GetCookieOptInLevel();
38 var cookieOptInCategories = CookieManager.GetCookieOptInCategories();
39
40 bool consentEither = (cookieOptInCategories.Contains("Statistical") || cookieOptInCategories.Contains("Marketing"));
41 bool consentFunctional = cookieOptInLevel == CookieOptInLevel.Functional;
42 bool consentAtLeastOne = cookieOptInLevel == CookieOptInLevel.All || (consentFunctional && consentEither);
43
44 allowTracking = consentAtLeastOne;
45 }
46 return allowTracking;
47 }
48 }
49
50 @{
51 string googleAnalyticsTrackingID = Pageview.AreaSettings.GetString("GoogleAnalyticsTrackingID");
52 string googleAnalyticsMeasurementID = Pageview.AreaSettings.GetString("GoogleAnalyticsMeasurementID");
53 var cookieOptInLevel = CookieManager.GetCookieOptInLevel();
54 bool allowTracking = AllowTracking(); //cookieOptInLevel == CookieOptInLevel.All || (cookieOptInLevel == CookieOptInLevel.Functional && CookieManager.GetCookieOptInCategories().Contains("Statistical"));
55
56 int paragraphId = !string.IsNullOrEmpty(Dynamicweb.Context.Current.Request.Form.Get("ParagraphId")) ? Convert.ToInt32(Dynamicweb.Context.Current.Request.Form.Get("ParagraphId")) : 0;
57
58 var paragraph = Dynamicweb.Services.Paragraphs?.GetParagraph(paragraphId) ?? null;
59 ParagraphInfoViewModel paragraphViewModel = Dynamicweb.Frontend.ContentViewModelFactory.CreateParagraphInfoViewModel(paragraph);
60
61 string contentPadding = paragraphViewModel.Item.GetRawValueString("ContentPadding");
62
63 int listItemSourcePageId = paragraphViewModel.Item.GetInt32("ListComponentSource");
64 var page = listItemSourcePageId != 0 ? Dynamicweb.Services.Pages.GetPage(listItemSourcePageId) : null;
65 string headingTitle = Dynamicweb.Context.Current.Request.Form["HeadingTitle"];
66 string headingFormatted = "";
67
68 }
69
70
71
72
73 @if (paragraphViewModel != null && page != null)
74 {
75 if (Model.Products.Any())
76 {
77 int modelId = paragraphViewModel.ID;
78
79 string navigationStyle = $"{paragraphViewModel.Item.GetRawValueString("NavigationStyle", "slider-nav-round")}";
80 string navigationPlacement = $"{paragraphViewModel.Item.GetRawValueString("NavigationPlacement", "slider-nav-on-slides")}";
81 string indicatorStyle = $"{paragraphViewModel.Item.GetRawValueString("IndicatorStyle", string.Empty)}";
82 string revealSlides = paragraphViewModel.Item.GetRawValueString("RevealSlides", "no-reveal") == "reveal" ? "slider-item-reveal" : string.Empty;
83 string sliderItemsGap = paragraphViewModel.Item.GetRawValueString("SliderItemsGap", "slider-item-gap") == "slider-item-nogap" ? "slider-item-nogap" : string.Empty;
84 string navigationAlwaysVisible = (paragraphViewModel.Item.GetBoolean("NavigationAlwaysVisible")) ? "slider-nav-visible" : string.Empty;
85 string navigationVisibleOnTouch = (paragraphViewModel.Item.GetBoolean("NavigationVisibleOnTouch")) ? "slider-nav-touch" : string.Empty;
86 string navigationShowScrollbar = (paragraphViewModel.Item.GetBoolean("NavigationShowScrollbar")) ? "slider-nav-scrollbar" : string.Empty;
87 string scrollBarForceMobile = (paragraphViewModel.Item.GetBoolean("NavigationShowScrollbar")) ? "--swiffy-slider-track-height:0.5rem !important;" : string.Empty;
88 string navigationSmall = (paragraphViewModel.Item.GetBoolean("NavigationSmall")) ? "slider-nav-sm" : string.Empty;
89 string navigationInvertColors = (paragraphViewModel.Item.GetBoolean("NavigationInvertColors")) ? "slider-nav-dark" : string.Empty;
90 string navigationSlideEntirePage = (paragraphViewModel.Item.GetBoolean("NavigationSlideEntirePage")) ? "slider-nav-page" : string.Empty;
91 string navigationNoLoop = (paragraphViewModel.Item.GetBoolean("NavigationNoLoop")) ? "slider-nav-noloop" : string.Empty;
92 string indicatorsOutsideSlider = (paragraphViewModel.Item.GetBoolean("IndicatorsOutsideSlider") && indicatorStyle != string.Empty) ? "slider-indicators-outside" : string.Empty;
93 string indicatorsHighlightActive = (paragraphViewModel.Item.GetBoolean("IndicatorsHighlightActive")) ? "slider-indicators-highlight" : string.Empty;
94 string indicatorsInvertColors = (paragraphViewModel.Item.GetBoolean("IndicatorsInvertedColors")) ? "slider-indicators-dark" : string.Empty;
95 string indicatorsVisibleOnSmallDevices = (paragraphViewModel.Item.GetBoolean("IndicatorsVisibleOnSmallDevices")) ? "slider-indicators-sm" : string.Empty;
96 string animation = paragraphViewModel.Item.GetRawValueString("Animation", string.Empty) != string.Empty ? $"slider-nav-animation {paragraphViewModel.Item.GetRawValueString("Animation")}" : string.Empty;
97 string autoplay = (paragraphViewModel.Item.GetBoolean("Autoplay")) ? "slider-nav-autoplay" : string.Empty;
98 string autoplayInterval = paragraphViewModel.Item.GetRawValueString("AutoplayInterval", string.Empty);
99 bool hideSliderNavigation = false;
100
101 string gridColumnSize = paragraphViewModel.Item.GetRawValueString("SliderLayout", "3");
102 int itemsShown = Convert.ToInt32(gridColumnSize);
103
104 var pageViewModel = Dynamicweb.Frontend.ContentViewModelFactory.CreatePageInfoViewModel(page);
105 string listItemTheme = " theme " + pageViewModel.Item.GetRawValueString("Theme", string.Empty).Replace(" ", "").Trim().ToLower();
106 string listItemPadding = pageViewModel.Item.GetRawValueString("ContentPadding", string.Empty);
107 string listItemPaddingClass = string.Empty;
108
109 switch (listItemPadding)
110 {
111 case "small":
112 listItemPaddingClass = " p-2 p-xl-3";
113 break;
114 case "large":
115 listItemPaddingClass = " p-3 p-xl-4";
116 break;
117 case "small-x":
118 listItemPaddingClass = " px-2 px-md-3";
119 break;
120 case "large-x":
121 listItemPaddingClass = " px-3 px-md-4";
122 break;
123 }
124
125 if (navigationStyle == "slider-nav-none")
126 {
127 hideSliderNavigation = true;
128 }
129 if(!string.IsNullOrEmpty(headingTitle)) {
130 <h2 style="color: #0548B8;" class="m-0">@Translate(headingTitle)</h2>
131 }
132
133 if(!string.IsNullOrEmpty(headingTitle)) {
134 headingFormatted = headingTitle.Replace(" ","_");
135 }
136
137
138 <div class="grid gap-0 @contentPadding">
139 <div id="slider_@(modelId)_@(headingFormatted)" 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="--swiffy-slider-nav-light:var(--swift-foreground-color);--swiffy-slider-nav-dark:var(--swift-background-color);@(scrollBarForceMobile)">
140 <ul class="slider-container">
141 @foreach (ProductViewModel product in Model.Products)
142 {
143 string detailsPageLink = !string.IsNullOrEmpty(GetPageIdByNavigationTag("Shop").ToString()) ? GetPageIdByNavigationTag("Shop").ToString() : string.Empty;
144 string selectedDetailPage = Dynamicweb.Ecommerce.Services.ProductGroups.GetGroup(product.PrimaryOrDefaultGroup.Id)?.Meta.PrimaryPage ?? string.Empty;
145 string detailsPageId = detailsPageLink != string.Empty ? detailsPageLink.Substring(detailsPageLink.LastIndexOf('=') + 1) : string.Empty;
146 string selectedDetailPageId = selectedDetailPage != string.Empty ? selectedDetailPage.Substring(selectedDetailPage.LastIndexOf('=') + 1) : string.Empty;
147 detailsPageId = string.IsNullOrEmpty(selectedDetailPage) ? detailsPageId : selectedDetailPageId;
148
149 string variantIdForLink = !string.IsNullOrEmpty(product.VariantId) ? $"&VariantID={product.VariantId}" : "";
150 variantIdForLink = string.IsNullOrEmpty(variantIdForLink) && !string.IsNullOrEmpty(product.DefaultVariantId) ? $"&VariantID={product.DefaultVariantId}" : variantIdForLink;
151
152 string link = "Default.aspx?ID=" + GetPageIdByNavigationTag("Shop");
153 link += $"&GroupID={product.PrimaryOrDefaultGroup.Id}";
154 link += $"&ProductID={product.Id}";
155 link += variantIdForLink;
156 link = Dynamicweb.Frontend.SearchEngineFriendlyURLs.GetFriendlyUrl(link);
157
158 string clickProductLink = string.Empty;
159 if (!string.IsNullOrWhiteSpace(googleAnalyticsMeasurementID) && allowTracking)
160 {
161 clickProductLink = "onclick=\"return clickProductLink('" + @product.Id + "', '" + @product.Name + "', '" + @product.VariantName + "', '" + @product.Price.CurrencyCode + "', '" + @product.Price.Price + "')\"";
162 }
163
164 if (Dynamicweb.Context.Current.Items.Contains("ProductDetails"))
165 {
166 Dynamicweb.Context.Current.Items["ProductDetails"] = product;
167 }
168 else
169 {
170 Dynamicweb.Context.Current.Items.Add("ProductDetails", product);
171 }
172
173 <li class="d-flex flex-column @listItemTheme @listItemPaddingClass">
174 <a href="@link" class="stretched-link" @clickProductLink>
175 <span class="visually-hidden">@product.Name</span>
176 </a>
177 @{
178 @RenderGrid(listItemSourcePageId)
179 }
180 </li>
181 }
182
183 @if (!Model.Products.Any() && Pageview.IsVisualEditorMode)
184 {
185 if (Dynamicweb.Context.Current.Items.Contains("ProductDetails"))
186 {
187 Dynamicweb.Context.Current.Items["ProductDetails"] = GetDummyProduct();
188 }
189 else
190 {
191 Dynamicweb.Context.Current.Items.Add("ProductDetails", GetDummyProduct());
192 }
193
194 for (int i = 0; i < 4; i++)
195 {
196 <li class="d-flex flex-column @listItemTheme @listItemPaddingClass">
197 @{
198 @RenderGrid(listItemSourcePageId)
199 }
200 </li>
201 }
202 }
203 </ul>
204
205 @if (!hideSliderNavigation)
206 {
207 <button type="button" title="@Translate("Previous slide")" class="slider-nav" style="z-index:2;">
208 <span class="visually-hidden">@Translate("Previous slide")</span>
209 </button>
210 <button type="button" title="@Translate("Next slide")" class="slider-nav slider-nav-next" style="z-index:2;">
211 <span class="visually-hidden">@Translate("Next slide")</span>
212 </button>
213 }
214
215 @if (indicatorStyle != "slider-indicators-hidden")
216 {
217 bool isActive = true;
218 int slideCount = 1;
219 var counting = 1;
220
221 <div class="slider-indicators typer" style="z-index:2;">
222
223 @foreach (var item in Model.Products)
224 {
225 if(counting == itemsShown){
226 <button @(isActive ? "class=\"active\"" : string.Empty) type="button" title='@Translate("Go to slide") @slideCount'>
227 <span class="visually-hidden">@Translate("Go to slide") @slideCount</span>
228 </button>
229 counting = 1;
230 }
231 {
232 slideCount++;
233 counting ++;
234 }
235 isActive = false;
236 }
237 </div>
238 }
239 </div>
240 </div>
241
242 <script type="module">
243 swiffyslider.initSlider(document.querySelector('#slider_@(modelId)_@(headingFormatted)'));
244 </script>
245 }
246 }
247 else if (Pageview.IsVisualEditorMode == true)
248 {
249 <div class="alert alert-dark" role="alert">
250 <span>@Translate("Product component slider: The slider will be rendered here, if there is anything to show")</span>
251 </div>
252 }
253
