1 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.ParagraphViewModel>
2 @using Dynamicweb.Ecommerce.ProductCatalog
3 @using Dynamicweb.Ecommerce.CustomerExperienceCenter.Favorites
4 @using Dynamicweb.Ecommerce.Products.FieldDisplayGroups
5 @using Dynamicweb.Frontend
6 @using System.Web
7
8
9 @{
10 string iconPath = "/Files/Icons/";
11 }
12
13 <style>
14 #container {
15 width: 100%;
16 overflow-x: scroll;
17 scroll-behavior: smooth;
18 }
19
20 #items {
21 display: flex;
22 }
23
24 #container li {
25 list-style-type: none;
26
27 margin-right: 1rem;
28 margin-left: 1rem;
29 background-color: #F3F3F3;
30 padding: 0.4rem 1rem;
31 border-radius: 5px;
32 }
33
34 #container::-webkit-scrollbar {
35 display: none;
36 }
37 </style>
38 @*<div class="my-3 swiffy-slider slider-item-show6 slider-nav-outside slider-nav-dark slider-nav-visible">
39 <div class="slider-container">
40 @RenderGroups()
41 </div>
42 <button type="button" title="@Translate("Slider navigation button - Previous slider")" class="slider-nav ps-0 "></button>
43 <button type="button" title="@Translate("Slider navigation button - Next slider")" class="slider-nav slider-nav-next pe-0"></button>
44 <script type="module" src="~/Files/Templates/Designs/Swift/Assets/js/swiffy-slider.js"></script>
45 <script type="module">swiffyslider.init()</script>
46
47 </div>*@
48 <div class="grid">
49 <div class="g-col-12">
50 <div style="display:flex; align-items: center; margin: 1rem 0;">
51 <div id="slideLeft" style="cursor: pointer;">
52 <span class="icon-3 ms-2">
53 @ReadFile(iconPath + "chevron-left.svg")
54 </span>
55 </div>
56 <div id="container">
57 <div id="items">
58 @RenderGroups()
59 </div>
60 </div>
61 <div id="slideRight" style="cursor: pointer;">
62 <span class="icon-3 ms-2">
63 @ReadFile(iconPath + "chevron-right.svg")
64 </span>
65 </div>
66 </div>
67 </div>
68 </div>
69 @helper RenderGroups()
70 {
71 var shopId = Dynamicweb.Frontend.PageView.Current().Area.EcomShopId;
72
73 var shop = !string.IsNullOrEmpty(shopId) ? Dynamicweb.Ecommerce.Services.Shops.GetShop(shopId) :
74 Dynamicweb.Ecommerce.Services.Shops.GetDefaultShop();
75
76 if (shop != null)
77 {
78 var currentUrl = Dynamicweb.Frontend.PageView.Current().SearchFriendlyUrl;
79 var topLevelGroups = shop.TopLevelGroups;
80
81 foreach (var topLevelGroup in topLevelGroups)
82 {
83 var subGroups = topLevelGroup.Subgroups;
84
85 if (Model.Item.GetValue("Group") != null)
86 {
87 var grouplist = Model.Item.GetValue("Group") as List<ProductGroupViewModel>;
88 if (grouplist != null)
89 {
90 foreach (var groups in grouplist)
91 {
92 if (topLevelGroup.Id == groups.Id)
93 {
94
95 var activePageAllTilhenger = currentUrl.Equals("https://tysse.no/tilhengere") == true ? "activemenu" : "";
96 var activePageAllSpare = currentUrl.Equals("https://tysse.no/ekstrautstyr/reservedeler-og-ekstrautstyr") == true ? "activemenu" : "";
97 var setActivePageAll = currentUrl.Contains("tilhengere") == true ? activePageAllTilhenger : activePageAllSpare;
98
99 <li class="nav-item @setActivePageAll">
100 <a class="text-decoration-none" href='@Model.Item.GetString("All_ProductsLink")'>Alle</a>
101 </li>
102 foreach (var group in subGroups)
103 {
104 var fields = group.ProductGroupFieldValues;
105
106 var linkPath = groups.Id != "Reservedelerogekstrautstyr" ? topLevelGroup.Name.Replace(" ", "-") + "/" : "ekstrautstyr/" + topLevelGroup.Name.Replace(" ", "-") + "/";
107 var url = linkPath + group.Name.Replace("å", "aa").Replace(" ", "-").Replace(",", "").Replace("ø", "oe");
108 var active = currentUrl.ToLower() == url.ToLower() ? "active" : "";
109 var metaUrl = group.Meta.Url;
110 var link = !string.IsNullOrEmpty(metaUrl) ? metaUrl : url;
111 var activePage = currentUrl.Equals("https://tysse.no/tilhengere/" + group.Name.ToLower().Replace("å", "aa").Replace(" ", "-").Replace(",", "").Replace("ø", "oe")) == true ? "activemenu" : "";
112 var activePageSpare = currentUrl.Equals("https://tysse.no/ekstrautstyr/reservedeler-og-ekstrautstyr/" + group.Name.ToLower().Replace("å", "aa").Replace(" ", "-").Replace(",", "").Replace("ø", "oe")) == true ? "activemenu" : "";
113 var setActive = currentUrl.Contains("tilhengere") == true ? activePage : activePageSpare;
114 <li class=" @setActive">
115 <a href="@url" class="text-decoration-none nav-link-clean text-nowrap nav-link-underline">@group.Name</a>
116 </li>
117 }
118 }
119 }
120 }
121 }
122
123 }
124 }
125 }
126
127 <script>
128 var slideLeft = document.getElementById("slideLeft");
129 var slideRight = document.getElementById("slideRight");
130 var container = document.getElementById("container");
131 var items = document.getElementById("items");
132
133 // Function to scroll to the active element
134 function scrollToActiveElement() {
135 var activeElement = items.querySelector(".activemenu");
136 if (activeElement) {
137 var activeElementRect = activeElement.getBoundingClientRect();
138 var containerRect = container.getBoundingClientRect();
139 container.scrollBy({
140 top: 0,
141 left: activeElementRect.left - containerRect.left,
142 behavior: "smooth"
143 });
144 }
145 }
146
147 // Right and left sliding event listeners
148 slideRight.addEventListener("click", function () {
149 container.scrollBy(300, 0);
150 });
151
152 slideLeft.addEventListener("click", function () {
153 container.scrollBy(-300, 0);
154 });
155
156 // Adding click event listeners to all list items
157 var listItems = items.querySelectorAll("li");
158 for (var i = 0; i < listItems.length; i++) {
159 listItems[i].addEventListener("click", function () {
160 var activeListItem = document.querySelector(".activemenu");
161 if (activeListItem) {
162 activeListItem.classList.remove("activemenu");
163 }
164 this.classList.add("activemenu");
165 scrollToActiveElement();
166 });
167 }
168
169 // Scroll to active element on window load
170 window.addEventListener("load", function() {
171 // This could be a direct call or set up with some initial delay or condition
172 scrollToActiveElement();
173 });
174 </script>
175
+1920x900.jpg&width=640&format=webp)
