1<#assign zurichService = serviceLocator.findService("com.zurich.tools.util.ZurichToolsService")/>
2
3<#assign fondo = "">
4<#if background.getData() == "mist">
5 <#assign fondo = "bruma">
6<#elseif background.getData() == "mist2">
7 <#assign fondo = "bruma2">
8<#elseif background.getData() == "lightblue">
9 <#assign fondo = "lightblue">
10<#elseif background.getData() == "sandstone">
11 <#assign fondo = "sandstone">
12</#if>
13
14<#if custom_top_margin?? && custom_top_margin.getData() != "">
15 <#assign custom_top_margin = custom_top_margin.getData() />
16<#else>
17 <#assign custom_top_margin = "15px" />
18</#if>
19
20<#if custom_bottom_margin?? && custom_bottom_margin.getData() != "">
21 <#assign custom_bottom_margin = custom_bottom_margin.getData() />
22<#else>
23 <#assign custom_bottom_margin = "15px" />
24</#if>
25
26<#if title_align?? && title_align.getData() != "">
27 <#assign titleAlign = title_align.getData() />
28<#else>
29 <#assign titleAlign = "" />
30</#if>
31
32<#if subtitle_align?? && subtitle_align.getData() != "">
33 <#assign subtitleAlign = subtitle_align.getData() />
34<#else>
35 <#assign subtitleAlign = "" />
36</#if>
37
38<#assign popupSF=false/>
39<#assign popupSF_topic=false/>
40<#assign popupSF_new=false/>
41
42<div class="mod mod-Specifications threeH h ${fondo}" style="padding-bottom:${custom_bottom_margin}; padding-top:${custom_top_margin};">
43 <div class="container">
44 <div class="row">
45 <div class="col-md-12">
46 <#if title.getData()?? && title.getData() != "">
47 <#assign htmlTag = "h2"/>
48 <#if title.title_level?has_content>
49 <#assign htmlTag = title.title_level.getData()/>
50 </#if>
51 <div class="product-title" style="text-align: ${titleAlign}!important;">
52 <${htmlTag} class="h1-copycat">${htmlUtil.unescape(title.getData())}</${htmlTag}>
53 </div>
54 </#if>
55
56 <div class="product-subtitle" style="text-align: ${subtitleAlign};"><#if subtitle.getData()?? && subtitle.getData() != "">
57 ${htmlUtil.unescape(subtitle.getData())}
58 </#if></div>
59
60
61 <div class="container specifications modifiedButton">
62
63 <#if spec_title.getSiblings()?has_content>
64 <div class="slick-specifications row">
65 <#list spec_title.getSiblings() as cur_spec_title>
66 <div class="slick-specifications-col spec col-md-4">
67 <#if getterUtil.getBoolean(separator.getData())>
68 <div class="info line">
69 <#else>
70 <div class="info">
71 </#if>
72 <!-- Variables Url icono -->
73 <#assign icon_seoLink = "" />
74 <#assign icon_seoLink2 = "" />
75 <#assign extraAttr= "" />
76 <!--ESTABLECER SI PAGE, FILE O FREELINK HAS CONTENT-->
77 <#if cur_spec_title.spec_icon.icon_link_page_link?has_content | cur_spec_title.spec_icon.icon_link_file_link?has_content | cur_spec_title.spec_icon.icon_link_free_link?has_content>
78 <#if (cur_spec_title.spec_icon.icon_link_free_link.getData()?? && cur_spec_title.spec_icon.icon_link_free_link.getData() != "") |
79 (cur_spec_title.spec_icon.icon_link_page_link.getData()?? && cur_spec_title.spec_icon.icon_link_page_link.getData() != "") |
80 (cur_spec_title.spec_icon.icon_link_file_link.getData()?? && cur_spec_title.spec_icon.icon_link_file_link.getData() != "")>
81 <!--ASIGNAMOS EXTRA ATTR-->
82 <#list cur_spec_title.spec_icon.icon_link_attr_key.getSiblings() as cur_extra_attribute_key>
83 <#if cur_extra_attribute_key.getData()?? && cur_extra_attribute_key.getData()!="">
84 <#if cur_extra_attribute_key?is_first>
85 <#assign extraAttr="${cur_extra_attribute_key.getData()} / ${cur_extra_attribute_key.icon_link_attr_value.getData()}"/>
86 <#else>
87 <#assign extraAttr="${extraAttr} | ${cur_extra_attribute_key.getData()} / ${cur_extra_attribute_key.icon_link_attr_value.getData()}"/>
88 </#if>
89 </#if>
90 </#list>
91 <!--FIN ASIGNAMOS EXTRA ATTR-->
92 <#assign linkClass= "" />
93
94
95
96 <#assign nofollow1=cur_spec_title.spec_icon.icon_link_page_link.hasNofollow1?? && getterUtil.getBoolean(cur_spec_title.spec_icon.icon_link_page_link.hasNofollow1.getData())/>
97
98
99 <#assign icon_seoLink = zurichService.getSeoLink(groupId, .vars['reserved-article-id'].data, cur_spec_title.spec_icon.spec_alt_icon.getData(), cur_spec_title.spec_icon.icon_link_page_link.getFriendlyUrl(), cur_spec_title.spec_icon.icon_link_file_link.getData(), cur_spec_title.spec_icon.icon_link_free_link.getData(), getterUtil.getBoolean(cur_spec_title.spec_icon.icon_link_page_link.icon_link_new_tab.getData()), linkClass, cur_spec_title.spec_icon.icon_link_id_prefix.getData(), cur_spec_title.spec_icon.icon_link_id.getData(), extraAttr, nofollow1)/>
100 <#assign icon_seoLink2 = "</a>" />
101 <#if cur_spec_title.spec_icon.icon_link_page_link.modalSF??>
102 <#assign popupSF=getterUtil.getBoolean(cur_spec_title.spec_icon.icon_link_page_link.modalSF.getData())/>
103 </#if>
104 <#if popupSF==true>
105 <#if cur_spec_title.spec_icon.icon_link_page_link.productSelectModal?? && cur_spec_title.spec_icon.icon_link_page_link.productSelectModal.getData() != "">
106 <#assign linkProduct="${cur_spec_title.spec_icon.icon_link_page_link.productSelectModal.getData()}"/>
107 <#else>
108 <#assign linkProduct="nada"/>
109 </#if>
110 </#if>
111 </#if>
112 </#if>
113 <!--Fin Variables Url icono -->
114 <#if cur_spec_title.spec_icon.spec_src_icon.getData()?? && cur_spec_title.spec_icon.spec_src_icon.getData() != "">
115 <div class="text">
116 <#if cur_spec_title.spec_icon.icon_link_page_link.modalRCP?? && cur_spec_title.spec_icon.icon_link_page_link.modalRCP.getData() != "">
117 <div class="icon sfModalButton" onclick="openModalRCP${cur_spec_title.spec_icon.icon_link_page_link.modalRCP.getData()}()">
118 <#elseif popupSF==true>
119 <div class="icon sfModalButton" onclick="openSfModal('${linkProduct}')">
120 <#else>
121 <div class="icon">
122 </#if>
123 ${icon_seoLink}
124 <img width="75" height="75"
125 alt="${cur_spec_title.spec_icon.spec_alt_icon.getData()}"
126 src="${cur_spec_title.spec_icon.spec_src_icon.getData()}" loading="lazy"/>
127 ${icon_seoLink2}
128 </div>
129 <#elseif cur_spec_title.spec_icon.getData()?? && cur_spec_title.spec_icon.getData() != "">
130 <div class="text">
131 <#if cur_spec_title.spec_icon.icon_link_page_link.modalRCP?? && cur_spec_title.spec_icon.icon_link_page_link.modalRCP.getData() != "">
132 <div class="icon sfModalButton" onclick="openModalRCP${cur_spec_title.spec_icon.icon_link_page_link.modalRCP.getData()}()">
133 <#elseif popupSF==true>
134 <div class="icon sfModalButton" onclick="openSfModal('${linkProduct}')">
135 <#else>
136 <div class="icon">
137 </#if>
138 ${icon_seoLink}
139 <img width="75" height="75"
140 alt="${cur_spec_title.spec_icon.getAttribute('alt')}"
141 data-fileentryid="${cur_spec_title.spec_icon.getAttribute('fileEntryId')}"
142 src="${cur_spec_title.spec_icon.getData()}" loading="lazy" />
143 ${icon_seoLink2}
144 </div>
145 <#else>
146 <div class="text no-icon">
147 </#if>
148 <#if cur_spec_title.spec_topic.getData()?? && cur_spec_title.spec_topic.getData() != "">
149 <#if cur_spec_title.spec_topic.spec_topic_attr_key.getSiblings()?has_content>
150 <#list cur_spec_title.spec_topic.spec_topic_attr_key.getSiblings() as cur_extra_attribute_key>
151 <#if cur_extra_attribute_key.getData()?? && cur_extra_attribute_key.getData()!="">
152 <#if cur_extra_attribute_key?is_first>
153 <#assign extraAttr_topic="${cur_extra_attribute_key.getData()} / ${cur_extra_attribute_key.link_attr_value.getData()}"/>
154 <#else>
155 <#assign extraAttr_topic="${extraAttr} | ${cur_extra_attribute_key.getData()} / ${cur_extra_attribute_key.link_attr_value.getData()}"/>
156 </#if>
157 </#if>
158 </#list>
159 </#if>
160 <#assign linkClass=""/>
161 <#if cur_spec_title.spec_topic.modalSF_topic??>
162 <#assign popupSF_topic=getterUtil.getBoolean(cur_spec_title.spec_topic.modalSF_topic.getData())/>
163 </#if>
164 <#if popupSF_topic==true>
165 <#if cur_spec_title.spec_topic.productSelectModal_topic?? && cur_spec_title.spec_topic.productSelectModal_topic.getData() != "">
166 <#assign linkProduct_topic="${cur_spec_title.spec_topic.productSelectModal_topic.getData()}"/>
167 <#else>
168 <#assign linkProduct_topic="nada"/>
169 </#if>
170 </#if>
171 <#assign seoLink_topic = zurichService.getSeoLink(groupId, .vars['reserved-article-id'].data,cur_spec_title.spec_topic.spec_topic_title.getData(), cur_spec_title.spec_topic.spec_topic_page_link.getFriendlyUrl(),cur_spec_title.spec_topic.spec_topic_file_link.getData(), cur_spec_title.spec_topic.spec_topic_free_link.getData(),getterUtil.getBoolean(cur_spec_title.spec_topic.spec_topic_new_tab.getData()), linkClass, cur_spec_title.spec_topic.spec_topic_id_prefix.getData(), cur_spec_title.spec_topic.spec_topic_id.getData(),extraAttr_topic)/>
172 <#if cur_spec_title.spec_topic.modalRCP_topic?? && cur_spec_title.spec_topic.modalRCP_topic.getData() != "">
173 <div class="product-hashtag sfModalButton" onclick="openModalRCP${cur_spec_title.spec_topic.modalRCP_topic.getData()}()">
174 <#elseif popupSF_topic==true>
175 <div class="product-hashtag sfModalButton" onclick="openSfModal('${linkProduct_topic}')">
176 <#else>
177 <div class="product-hashtag">
178 </#if>
179 ${seoLink_topic}
180 ${cur_spec_title.spec_topic.getData()}
181 </a>
182 </div>
183 </#if>
184 <div class="product-title">
185 ${htmlUtil.unescape(cur_spec_title.getData())}
186 </div>
187 <#if spec_title.spec_description.getData()?? && spec_title.spec_description.getData() != "">
188 <div class="product-text">
189 ${cur_spec_title.spec_description.getData()}
190 </div>
191 </#if>
192 <#if cur_spec_title.spec_link.getData()?? && cur_spec_title.spec_link.getData() != "">
193 <#if cur_spec_title.spec_link.spec_link_attr_key.getSiblings()?has_content>
194 <#list cur_spec_title.spec_link.spec_link_attr_key.getSiblings() as cur_extra_attribute_key>
195 <#if cur_extra_attribute_key.getData()?? && cur_extra_attribute_key.getData()!="">
196 <#if cur_extra_attribute_key?is_first>
197 <#assign extraAttr_link="${cur_extra_attribute_key.getData()} / ${cur_extra_attribute_key.link_attr_value.getData()}"/>
198 <#else>
199 <#assign extraAttr_link="${extraAttr} | ${cur_extra_attribute_key.getData()} / ${cur_extra_attribute_key.link_attr_value.getData()}"/>
200 </#if>
201 </#if>
202 </#list>
203 </#if>
204 <#assign linkClass="link-${cur_spec_title.spec_link.spec_link_skin.getData()}"/>
205 <#if cur_spec_title.spec_link.modalSF_new??>
206 <#assign popupSF_new=getterUtil.getBoolean(cur_spec_title.spec_link.modalSF_new.getData())/>
207 </#if>
208 <#if popupSF_new==true>
209 <#if cur_spec_title.spec_link.productSelectModal_new?? && cur_spec_title.spec_link.productSelectModal_new.getData() != "">
210 <#assign linkProduct_new="${cur_spec_title.spec_link.productSelectModal_new.getData()}"/>
211 <#else>
212 <#assign linkProduct_new="nada"/>
213 </#if>
214 </#if>
215
216
217
218 <#assign nofollow3=cur_spec_title.spec_link.hasNofollow3?? && getterUtil.getBoolean(cur_spec_title.spec_link.hasNofollow3.getData())/>
219 <#assign seoLink_link = zurichService.getSeoLink(groupId, .vars['reserved-article-id'].data,cur_spec_title.spec_link.spec_link_title.getData(), cur_spec_title.spec_link.spec_link_page_link.getFriendlyUrl(),cur_spec_title.spec_link.spec_link_file_link.getData(), cur_spec_title.spec_link.spec_link_free_link.getData(),getterUtil.getBoolean(cur_spec_title.spec_link.spec_link_new_tab.getData()), linkClass, cur_spec_title.spec_link.spec_link_id_prefix.getData(), cur_spec_title.spec_link.spec_link_id.getData(),extraAttr_link, nofollow3)/>
220 <#if links_align.getData()?? && links_align.getData() != "">
221 <div class="align-${links_align.getData()} cta">
222 <#else>
223 <div class="align-middle cta">
224 </#if>
225 <#if cur_spec_title.spec_link.spec_link_skin.getData() == "default" || cur_spec_title.spec_link.spec_link_skin.getData() == "download">
226 <div class="button-link">
227 <#else>
228 <div class="button-link col-md-12">
229 </#if>
230 <#if cur_spec_title.spec_link.modalRCP_new?? && cur_spec_title.spec_link.modalRCP_new.getData() != "">
231 <div class="sfModalButton" onclick="openModalRCP${cur_spec_title.spec_link.modalRCP_new.getData()}()">
232 <#elseif popupSF_new==true>
233 <div class="sfModalButton" onclick="openSfModal('${linkProduct_new}')">
234 <#else>
235 <div>
236 </#if>
237 ${seoLink_link}
238 ${htmlUtil.unescape(cur_spec_title.spec_link.getData())}
239 </a>
240 </div>
241 </div>
242 </div>
243 </#if>
244 </div>
245 </div>
246 </div>
247 </#list>
248 </div>
249 </#if>
250 </div>
251 </div>
252 </div>
253 </div>
254</div>
255
256<script>
257$(".sfModalButton a").on( "click", function(event) {
258 event.preventDefault();
259} );
260</script>
261
262<script>
263
264$(document).ready(function () {
265
266
267function adjustWidth() {
268 let maxWidth = 0;
269
270 $('.mod-Specifications.threeH .slick-slide').each(function () {
271 $('.mod-Specifications.threeH .slick-slide').css('width', 'auto');
272 const currentWidth = $(this).outerWidth();
273
274 if (currentWidth > maxWidth) {
275
276 maxWidth = currentWidth;
277
278 }
279
280 });
281
282 $('.mod-Specifications.threeH .slick-slide').css('width', maxWidth + 'px');
283
284
285}
286
287setTimeout(function(){
288 adjustWidth();
289}, 1000);
290
291$('.tab-link').on('click', function() {
292 setTimeout(function(){
293 adjustWidth();
294 }, 500);
295});
296
297});
298</script>
