1 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.ParagraphViewModel>
2 @using Dynamicweb.Ecommerce.ProductCatalog
3 @using Dynamicweb.Ecommerce.Variants
4 @using Dynamicweb.Frontend
5 @using System.IO
6
7 @{
8 ProductViewModel product = null;
9 if (Dynamicweb.Context.Current.Items.Contains("ProductDetails"))
10 {
11 product = (ProductViewModel)Dynamicweb.Context.Current.Items["ProductDetails"];
12 }
13 else if (Pageview.Page.Item["DummyProduct"] != null && Pageview.IsVisualEditorMode)
14 {
15 var pageViewModel = Dynamicweb.Frontend.ContentViewModelFactory.CreatePageInfoViewModel(Pageview.Page);
16 ProductListViewModel productList = pageViewModel.Item.GetValue("DummyProduct") != null ? pageViewModel.Item.GetValue("DummyProduct") as ProductListViewModel : new ProductListViewModel();
17
18 if (productList?.Products is object)
19 {
20 product = productList.Products[0];
21 }
22 }
23 }
24
25 @if (product is object)
26 {
27 string horizontalAlign = Model.Item.GetRawValueString("HorizontalAlignment", "");
28 horizontalAlign = horizontalAlign == "center" ? "align-items-center text-center" : horizontalAlign;
29 horizontalAlign = horizontalAlign == "end" ? "align-items-end text-end" : horizontalAlign;
30
31 bool hideGroupHeaders = Model.Item.GetBoolean("HideGroupHeaders");
32 string variantsLayout = Model.Item.GetRawValueString("Layout", "images");
33
34 bool isLazyLoadingForProductInfoEnabled = Dynamicweb.Core.Converter.ToBoolean(Dynamicweb.Context.Current.Items["IsLazyLoadingForProductInfoEnabled"]);
35
36 string anonymousUsersLimitations = Pageview.AreaSettings.GetRawValueString("AnonymousUsers", "");
37 bool anonymousUser = Pageview.User == null;
38 bool hidePrice = anonymousUsersLimitations.Contains("price") && anonymousUser || Pageview.AreaSettings.GetBoolean("ErpDownHidePrices") && !Dynamicweb.Core.Converter.ToBoolean(Dynamicweb.Context.Current.Items["IsWebServiceConnectionAvailable"]);
39
40 var selectedGroups = Model.Item.GetList("Groups")?.GetRawValue().OfType<string>();
41 int showMaxVariants = Model.Item.GetInt32("MaxVariantsToRender") != 0 ? Model.Item.GetInt32("MaxVariantsToRender") : 1;
42
43 if (product.VariantGroups().Count != 0)
44 {
45 <div class="d-flex flex-column @horizontalAlign item_@Model.Item.SystemName.ToLower()">
46 @foreach (var variantGroup in product.VariantGroups())
47 {
48 int variantsCount = 0;
49 string groupId = variantGroup.Id;
50 var displayType = variantGroup.DisplayType;
51
52 <div>
53 @foreach (var selectedGroupId in selectedGroups)
54 {
55 if (!hideGroupHeaders && groupId == selectedGroupId)
56 {
57 <h3 class="h6 m-0">@variantGroup.Name</h3>
58 }
59 }
60 <div class="d-flex gap-2 mb-2">
61 @foreach (var variant in variantGroup.Options)
62 {
63 foreach (var selectedGroupId in selectedGroups)
64 {
65 if (groupId == selectedGroupId)
66 {
67 var optionsCount = variantGroup.Options.Count();
68
69 if (variantsCount < showMaxVariants)
70 {
71 <article title="@product.Name @variant.Name @variant.Id" class="d-flex" style="z-index: 1">
72 @{
73 string defaultProductImage = Dynamicweb.Context.Current.Server.UrlEncode(product.DefaultImage.Value);
74 string variantImage = Dynamicweb.Context.Current.Server.UrlEncode(variant.Image.Value);
75 string defaultPrice = !hidePrice ? product.Price.PriceFormatted : "0";
76 string variantPrice = !hidePrice ? product.Price.PriceFormatted : "0";
77 displayType = displayType == VariantGroupDisplayType.NothingSelected && !string.IsNullOrEmpty(variant.Color) ? VariantGroupDisplayType.VariantColor : displayType;
78 displayType = displayType == VariantGroupDisplayType.NothingSelected && string.IsNullOrEmpty(variant.OptionImage.Value) && string.IsNullOrEmpty(variant.Color) ? VariantGroupDisplayType.VariantName : displayType;
79 displayType = displayType == VariantGroupDisplayType.NothingSelected && !string.IsNullOrEmpty(variant.OptionImage.Value) ? VariantGroupDisplayType.VariantOptionImage : displayType;
80
81
82 if (variantsLayout == "images")
83 {
84 switch (displayType)
85 {
86 case VariantGroupDisplayType.VariantImage:
87 if (isLazyLoadingForProductInfoEnabled)
88 {
89 <figure class="w-100 d-block m-0" data-price-formatted=""
90 onmouseover="swift.StaticVariants.SwitchProduct(event, '@product.Id', this.getAttribute('data-price-formatted'), '@variantImage'); event.stopPropagation();"
91 onmouseout="swift.StaticVariants.SwitchProduct(event, '@product.Id', this.getAttribute('data-price-formatted'), '@defaultProductImage')"
92 style="z-index: 1">
93 <div class="d-flex align-items-center justify-content-center">
94 <img src="/admin/public/GetImage.ashx?image=@variantImage&width=75&height=75&crop=5&FillCanvas=true&format=webp" height="75" width="75" class="p-1 text-small w-100 h-100" loading="lazy" decoding="async" alt="@product.Name, @variant.Name" style="z-index: 1">
95 </div>
96 </figure>
97 }
98 else
99 {
100 <figure class="w-100 d-block m-0"
101 onmouseover="swift.StaticVariants.SwitchProduct(event, '@product.Id', '@defaultPrice', '@variantImage')"
102 onmouseout="swift.StaticVariants.SwitchProduct(event, '@product.Id', '@variantPrice', '@defaultProductImage')"
103 style="z-index: 1">
104 <div class="d-flex align-items-center justify-content-center">
105 <img src="/admin/public/GetImage.ashx?image=@variantImage&width=75&height=75&crop=5&FillCanvas=true&format=webp" height="75" width="75" class="p-1 text-small w-100 h-100" loading="lazy" decoding="async" alt="@product.Name, @variant.Name">
106 </div>
107 </figure>
108 }
109 break;
110 case VariantGroupDisplayType.VariantColor:
111 if (!string.IsNullOrEmpty(variant.Color))
112 {
113 <span class="colorbox border" style="background-color: @variant.Color"></span>
114 }
115 else if (!string.IsNullOrEmpty(variant.OptionImage.Value) && string.IsNullOrEmpty(variant.Color))
116 {
117 <img src="/Admin/Public/GetImage.ashx?image=@(variant.OptionImage.Value)&width=40&format=webp" class="border" style="width: 42px; height: 42px;">
118 }
119 else
120 {
121 <div class="d-flex align-items-center justify-content-center">
122 @variant.Name
123 </div>
124 }
125 break;
126 case VariantGroupDisplayType.VariantName:
127 <div class="d-flex align-items-center justify-content-center">
128 @variant.Name
129 </div>
130 break;
131 case VariantGroupDisplayType.VariantOptionImage:
132 if (!string.IsNullOrEmpty(variant.OptionImage.Value))
133 {
134 <img src="/Admin/Public/GetImage.ashx?image=@(variant.OptionImage.Value)&width=42&format=webp" style="width: 42px; height: 42px;">
135 }
136 else
137 {
138 <span class="colorbox border" style="background-color:@variant.Color;"></span>
139 }
140 break;
141 case VariantGroupDisplayType.NothingSelected:
142 <span class="colorbox border" style="background-color: @variant.Color"></span>
143 break;
144 default:
145 <div class="d-flex align-items-center justify-content-center">
146 @variant.Name
147 </div>
148 break;
149 }
150
151 }
152 else if (variantsLayout == "swatches")
153 {
154 if (!string.IsNullOrEmpty(variant.Color))
155 {
156 <span class="colorbox colorbox-sm rounded-circle border me-1" style="background-color: @variant.Color"
157 onmouseover="swift.StaticVariants.SwitchProduct(event, '@product.Id', '@defaultPrice', '@variantImage')"
158 onmouseout="swift.StaticVariants.SwitchProduct(event, '@product.Id', '@variantPrice', '@defaultProductImage')">
159 </span>
160 }
161 else if (!string.IsNullOrEmpty(variant.OptionImage.Value) && string.IsNullOrEmpty(variant.Color))
162 {
163 <span class="ratio ratio-1x1 colorbox-sm rounded-circle border me-1 overflow-hidden"
164 onmouseover="swift.StaticVariants.SwitchProduct(event, '@product.Id', '@defaultPrice', '@variantImage')"
165 onmouseout="swift.StaticVariants.SwitchProduct(event, '@product.Id', '@variantPrice', '@defaultProductImage')">
166 <img src="/Admin/Public/GetImage.ashx?image=@(variant.OptionImage.Value)&width=42&format=webp">
167 </span>
168 }
169 else
170 {
171 <div class="d-flex align-items-center justify-content-center">
172 @variant.Name
173 </div>
174 }
175 }
176
177 <div class="visually-hidden">
178 <h4>@Translate("Variant Name")</h4>
179 <p>@product.Name, @variant.Name</p>
180 @if (!hidePrice)
181 {
182 <h4>@Translate("Variant Price")</h4>
183 if (isLazyLoadingForProductInfoEnabled)
184 {
185 <p><span class="text-price js-text-price"></span></p>
186 }
187 else
188 {
189 <p><span class="text-price">@product.Price.PriceFormatted</span></p>
190 }
191 }
192 </div>
193 }
194 </article>
195
196 variantsCount++;
197
198 if (variantsCount == showMaxVariants && optionsCount != showMaxVariants)
199 {
200 int left = optionsCount - showMaxVariants;
201 <div class="variant-option ms-1 d-flex justify-content-center align-items-center">
202 <span>+@left</span>
203 </div>
204 }
205 }
206
207 }
208 }
209 }
210
211 @if (variantsCount == 0 && Pageview.IsVisualEditorMode)
212 {
213 <div class="alert alert-dark m-0">@Translate("No variants available")</div>
214 }
215 </div>
216 </div>
217 }
218 </div>
219 }
220 }
221 else if (Pageview.IsVisualEditorMode)
222 {
223 <div class="alert alert-dark m-0">@Translate("No products available")</div>
224 }
225
