1<#--
2Web content templates are used to lay out the fields defined in a web
3content structure.
4Please use the left panel to quickly add commonly used variables.
5Autocomplete is also available and can be invoked by typing "${". 6
7-->
8
9<#global
10 globalCacheManager = cacheUtils.getCacheManager(themeDisplay.getScopeGroupId())!
11/>
12
13<#if globalCacheManager??>
14
15<#global
16
17 p_Map = productsMap?eval
18 c_Map = collectionsMap?eval
19 u_Layouts = userLayouts?eval
20
21 profile_layouts = u_Layouts.profileLayouts
22
23 profile_url = u_Layouts.profileUrl
24 logout_url = u_Layouts.logoutUrl
25 login_url = u_Layouts.loginUrl
26
27 marketTree = globalCacheManager.getMarketsTree()
28 hasCommerce = globalCacheManager.checkCommerce(request)
29 currentMarket = globalCacheManager.getCurrentMarket(request)
30 currentCountry = globalCacheManager.getCurrentCountry(request)
31
32/>
33
34<header class="js-header">
35<div class="main-header__wrapper">
36 <!-- supra menu -->
37 <section class="supramenu">
38 <div class="container">
39 <div class="row row-flex">
40 <div class="col-md-4 supramenu-left">
41 <ul class="supramenu__list supramenu__list--left">
42 <#if getterUtil.getBoolean(showLanguage.getData())>
43 <li class="supramenu__item supramenu__item--language" id="lang-list">
44 <div class="js-language-menu js-collapse-sm">
45 <div class="link-wrapper">
46 <a class="supramenu__link" href="javascript:void(0)">
47 <span>${themeDisplay.getLocale().getLanguage()}</span> 48 </a>
49 <#if localeList?? && localeList?has_content && localeList?size gt 1>
50 <span class="arrow"></span>
51 </#if>
52 </div>
53
54 <#if localeList?? && localeList?has_content && localeList?size gt 1>
55 <div id="language" class="js-menu-collapse dropdown-menu" aria-labelledby="toggle-user-menu">
56 <div class="wrapper">
57 <ul>
58 <#list localeList as marketLocale>
59 <#if themeDisplay.getLocale() != marketLocale>
60 <#assign lpath = "/" />
61 <#if currentCountry?? && currentCountry.code == "ES">
62 <#assign lpath = globalCacheManager.translate(themeDisplay.getLocale(), "/sobre-roca") />
63 </#if>
64 <li>
65 <a href="${globalCacheManager.getSiteURL(request, marketLocale, lpath, false)}"> 66 ${marketLocale.getDisplayLanguage(themeDisplay.getLocale())} 67 </a>
68 </li>
69 </#if>
70 </#list>
71 </ul>
72 </div>
73 </div>
74 </#if>
75 </div>
76 </li>
77 </#if>
78 <!-- Obtain the country -->
79 <#if getterUtil.getBoolean(showCountry.getData())>
80 <li class="supramenu__item supramenu__item--country menu-country-trigger">
81 <#if currentCountry?? && currentCountry?has_content>
82 <a class="supramenu__link" href="javascript:void(0)" data-groupid="${themeDisplay.getSiteGroupId()}" data-languageid="${themeDisplay.getLanguageId()}" data-target="country-menu-collapse">${currentCountry.getAssetCategory().getTitle(themeDisplay.getLocale())}</a> 83 </#if>
84 </li>
85 </#if>
86 <#if getterUtil.getBoolean(showAbout.getData())>
87 <#if about.aboutLink.getData()?has_content>
88 <li class="supramenu__item supramenu__item--about">
89 <#assign abtLink = globalCacheManager.parseLinkURL(request, about.aboutLink.getData()) />
90 <a class="supramenu__link" href="${abtLink}" target="_blank" rel="noopener noreferrer">${about.aboutText.getData()}</a> 91 </li>
92 </#if>
93 </#if>
94 </ul>
95 </div>
96 <div class="col-md-8 supramenu-right">
97 <ul class="supramenu__list supramenu__list--right">
98 <#if link.getSiblings()?has_content>
99 <#list link.getSiblings() as cur_headTopLink>
100 <li class="supramenu__item">
101 <#assign chtLink = globalCacheManager.parseLinkURL(request, cur_headTopLink.linkUrl.getData()) />
102 <a class="supramenu__link" href="${chtLink}" target="${globalCacheManager.getLinkTarget(chtLink)}">${cur_headTopLink.linkText.getData()}</a> 103 </li>
104 </#list>
105 </#if>
106 <#list icon.getSiblings() as cur_headIconLink>
107 <li class="supramenu__item supramenu__item--icon">
108 <#assign
109 chiLink = globalCacheManager.parseLinkURL(request, cur_headIconLink.iconLink.getData())
110 />
111 <#if chiLink?contains("comparator")> 112 <#assign typeIcon = globalCacheManager.translate(locale, "Comparator") />
113 <a class="supramenu__link" href="${chiLink}" target="${globalCacheManager.getLinkTarget(chiLink)}" title="${typeIcon}"> 114 <i class="${cur_headIconLink.iconClass.getData()}"></i> 115 <span>${cur_headIconLink.iconText.getData()}</span> 116 </a>
117 <#elseif chiLink?contains("favorites")> 118 <#assign typeIcon = globalCacheManager.translate(locale, "Favourites") />
119 <a class="supramenu__link" href="${chiLink}" target="${globalCacheManager.getLinkTarget(chiLink)}" title="${typeIcon}"> 120 <i class="${cur_headIconLink.iconClass.getData()}"></i> 121 <span>${cur_headIconLink.iconText.getData()}</span> 122 </a>
123 <#else>
124 <a class="supramenu__link" href="${chiLink}" target="${globalCacheManager.getLinkTarget(chiLink)}"> 125 <i class="${cur_headIconLink.iconClass.getData()}"></i> 126 <span>${cur_headIconLink.iconText.getData()}</span> 127 </a>
128 </#if>
129 </li>
130 </#list>
131 <#if getterUtil.getBoolean(showPrivate.getData())>
132 <li id="userMenuLi" class="supramenu__item supramenu__item--login"
133 data-group="${themeDisplay.getSiteGroupId()}" 134 data-market="${currentMarket.getCode()}" 135 data-language="${themeDisplay.getLanguageId()}" 136 data-debug="${globalCacheManager.debugMarginals()?c}" 137 >
138 <div class="loader-roca active">
139 <div class="lds-css"></div>
140 <div class="lds-load">
141 <div></div>
142 <div></div>
143 <div></div>
144 </div>
145 </div>
146 </li>
147 </#if>
148 </ul>
149 </div>
150 </div>
151 </div>
152 </section>
153 <section class="main-nav js-main-nav">
154 <div class="container">
155 <div class="row-flex">
156 <div class="logo-header">
157 <#if logoLink.getData()?has_content>
158 <#assign
159 lgLink = globalCacheManager.parseLinkURL(request, logoLink.getData())
160 />
161 <a href="${lgLink}" target="${globalCacheManager.getLinkTarget(lgLink)}"> 162
163 <img src="${logo.getData()}" style="<#if (logo.width)?? && logo.width.getData()?has_content && logo.width.getData() != "0" >width:${logo.width.getData()}px;</#if><#if (logo.height)?? && logo.height.getData()?has_content && logo.height.getData() != "0" >height:${logo.height.getData()}px;</#if> 164 "
165 alt="Roca">
166 </a>
167 <#else>
168 <img src="${logo.getData()}" style=" 169 <#if (logo.width)?? && logo.width.getData()?has_content && logo.width.getData() != "0">
170 width:${logo.width.getData()}px; 171 </#if>
172 <#if (logo.height)?? && logo.height.getData()?has_content && logo.height.getData() != "0">
173 height:${logo.height.getData()}px; 174 </#if>
175 "
176 alt="Roca">
177 </#if>
178 </div>
179 <nav class="main-menu__wrapper">
180 <#if menu.getSiblings()?has_content>
181 <ul class="main-menu__list" id="id001">
182 <#list menu.getSiblings() as cur_headNavItem>
183 <li class="main-menu__item js-collapse-sm">
184 <div class="link-wrapper">
185 <#assign
186 mUrlLink = globalCacheManager.parseLinkURL(request, cur_headNavItem.menuUrl.getData())
187 />
188 <a class="main-menu__link" href="${mUrlLink}" target="${globalCacheManager.getLinkTarget(mUrlLink)}">${cur_headNavItem.menuText.getData()}</a> 189 <#if cur_headNavItem.menuType.getData() == 'PRODUCTS'>
190 <span class="arrow"></span>
191 </div>
192
193 <div id="product-menu-2" class="js-menu-collapse dropdown-menu mega-menu products">
194 <div class="wrapper">
195 <section>
196 <div class="container">
197 <div class="row row-flex">
198 <div class="main-content col-xs-12 col-sm-12">
199 <div class="wrapper">
200 <ul class="row row-flex">
201 <#list p_Map?sort_by("websort") as item> 202 <li class="col-xs-6 col-md-4">
203 <div class="product-list-item">
204 <#assign itemLink = item.url />
205 <a href="${itemLink}"> 206 <#if item.title?has_content >
207 <div class="img-wrap">
208 <img src="${item.image!}" alt="${item.title}"> 209 </div>
210 <div class="text-wrap">
211 <span>${item.title}</span> 212 </div>
213 <#else>
214 <div class="img-wrap">
215 <img src="${item.image!}"> 216 </div>
217 <div class="text-wrap">
218 <span></span>
219 </div>
220 </#if>
221 </a>
222 </div>
223 </li>
224 </#list>
225 </ul>
226 </div>
227 </div>
228
229 <#-- <article class="col-xs-12 col-sm-4">
230 <div class="wrapper">
231 ${cur_headNavItem.menuPromo.menuPromoText.getData()} 232 </div>
233 <#if cur_headNavItem.menuPromo.menuPromoImage.getData()?has_content>
234 <span class="background-grow" style="background-image:url(${cur_headNavItem.menuPromo.menuPromoImage.getData()});background-repeat: no-repeat;background-size: cover;"></span> 235 <#else>
236 <span class="background-grow"></span>
237 </#if>
238 </article> -->
239 </div>
240 </div>
241
242 <footer>
243 <div class="row-flex">
244 <div class="goto-link">
245 <a href="${mUrlLink}">${globalCacheManager.translate(locale, "Go to")} ${cur_headNavItem.menuText.getData()}<span class="right-arrow"></span></a> 246 </div>
247 <#if cur_headNavItem.menuIcon.getSiblings()?has_content>
248 <#list cur_headNavItem.menuIcon.getSiblings() as cur_headNavItemBottomLink>
249 <div class="footer-link">
250 <#assign
251 iBottomLink = globalCacheManager.parseLinkURL(request, cur_headNavItemBottomLink.menuIconUrl.getData())
252 />
253 <a href="${iBottomLink}" target="${globalCacheManager.getLinkTarget(iBottomLink)}"> 254 <img src="${cur_headNavItemBottomLink.menuIconFile.getData()}" style=" 255 <#if cur_headNavItemBottomLink.menuIconFile.menuIconFileWidth?? && cur_headNavItemBottomLink.menuIconFile.menuIconFileWidth.getData()?has_content && cur_headNavItemBottomLink.menuIconFile.menuIconFileWidth.getData() != "0">
256 width: ${cur_headNavItemBottomLink.menuIconFile.menuIconFileWidth.getData()}px; 257 </#if>
258
259 <#if cur_headNavItemBottomLink.menuIconFile.menuIconFileHeight?? && cur_headNavItemBottomLink.menuIconFile.menuIconFileHeight.getData()?has_content && cur_headNavItemBottomLink.menuIconFile.menuIconFileHeight.getData() != "0">
260 height: ${cur_headNavItemBottomLink.menuIconFile.menuIconFileHeight.getData()}px; 261 </#if>
262 "
263 alt="${cur_headNavItemBottomLink.menuIconText.getData()}"> 264 <span>${cur_headNavItemBottomLink.menuIconText.getData()}</span></a> 265 </div>
266 </#list>
267 </#if>
268 </div>
269 </footer>
270 </section>
271 </div>
272 </div>
273 <#elseif cur_headNavItem.menuType.getData() == 'COLLECTIONS'>
274 <span class="arrow"></span>
275 </div>
276
277 <div id="collection-menu-2" class="js-menu-collapse dropdown-menu mega-menu">
278 <div class="wrapper">
279 <section>
280 <div class="container">
281 <div class="row row-flex">
282 <div class="main-content col-xs-12 col-xl-8">
283 <div class="wrapper">
284 <ul class="row row-flex">
285 <#list c_Map?sort_by("websort") as coll> 286 <#if coll.title?has_content >
287 <li class="col-xs-12 col-sm-6 col-lg-4">
288 <div class="collection-list-item">
289 <#if coll.url?? && coll.url?has_content>
290 <#assign collLink = coll.url />
291 <a href="${collLink}" class="collection">${coll.title}</a> 292 <#else>
293 <a href="#" class="collection">${coll.title}</a> 294 </#if>
295 <ul class="sub-items">
296 <#list coll.children as subColl>
297 <li class="sub-item">
298 <#if subColl.url?? && subColl.url?has_content>
299 <#assign sCollLink = subColl.url />
300 <a href="${sCollLink}">${subColl.title}</a> 301 <#else>
302 <a href="#">${subColl.title}</a> 303 </#if>
304 </#list>
305 <#if coll.children?size < coll.totalChildren>
306 ...</li>
307 <#else>
308 </li>
309 </#if>
310 </ul>
311 </div>
312 </li>
313 </#if>
314 </#list>
315 </ul>
316 </div>
317 </div>
318
319 <article class="col-xs-12 col-xl-4">
320 <div class="wrapper">
321 ${cur_headNavItem.menuPromo.menuPromoText.getData()} 322 </div>
323 <#if cur_headNavItem.menuPromo.menuPromoImage.getData()?has_content>
324 <span class="background-grow" style="background-image:url(${cur_headNavItem.menuPromo.menuPromoImage.getData()});background-repeat: no-repeat;background-size: cover;"></span> 325 <#else>
326 <span class="background-grow"></span>
327 </#if>
328 </article>
329 </div>
330 </div>
331
332 <footer>
333 <div class="row-flex">
334 <div class="goto-link">
335 <a href="${mUrlLink}">${globalCacheManager.translate(locale, "Go to")} ${cur_headNavItem.menuText.getData()}<span class="right-arrow"></span></a> 336 </div>
337 <#if cur_headNavItem.menuIcon.getSiblings()?has_content>
338 <#list cur_headNavItem.menuIcon.getSiblings() as cur_headNavItemBottomLink>
339 <div class="footer-link">
340 <#assign
341 iBottomLink = globalCacheManager.parseLinkURL(request, cur_headNavItemBottomLink.menuIconUrl.getData())
342 />
343 <a href="${iBottomLink}" target="${globalCacheManager.getLinkTarget(iBottomLink)}"> 344 <img src="${cur_headNavItemBottomLink.menuIconFile.getData()}" style=" 345 <#if cur_headNavItemBottomLink.menuIconFile.menuIconFileWidth?? && cur_headNavItemBottomLink.menuIconFile.menuIconFileWidth.getData()?has_content && cur_headNavItemBottomLink.menuIconFile.menuIconFileWidth.getData() != "0">
346 width: ${cur_headNavItemBottomLink.menuIconFile.menuIconFileWidth.getData()}px; 347 </#if>
348
349 <#if cur_headNavItemBottomLink.menuIconFile.menuIconFileHeight?? && cur_headNavItemBottomLink.menuIconFile.menuIconFileHeight.getData()?has_content && cur_headNavItemBottomLink.menuIconFile.menuIconFileHeight.getData() != "0">
350 height: ${cur_headNavItemBottomLink.menuIconFile.menuIconFileHeight.getData()}px; 351 </#if>
352 "
353 alt="${cur_headNavItemBottomLink.menuIconText.getData()}"> 354 <span>${cur_headNavItemBottomLink.menuIconText.getData()}</span></a> 355 </div>
356 </#list>
357 </#if>
358 </div>
359 </footer>
360 </section>
361 </div>
362 </div>
363 <#elseif cur_headNavItem.menuType.getData() == 'PROFESSIONALS'>
364 <span class="arrow"></span>
365 </div>
366
367 <div id="pro-menu-2" class="js-menu-collapse dropdown-menu mega-menu">
368 <div class="wrapper">
369 <section>
370 <div class="container">
371 <div class="row">
372
373 <div class="main-content col-xs-12 col-xl-8 blue-theme">
374 <div class="wrapper">
375 <div class="pro-box">
376 <#if cur_headNavItem.menuPro.menuProImage.getData()?has_content>
377 <#assign
378 proImageLink = globalCacheManager.parseLinkURL(request, cur_headNavItem.menuPro.menuProImageUrl.getData())
379 />
380 <a href="${proImageLink}" target="${globalCacheManager.getLinkTarget(proImageLink)}"> 381 <img src="${cur_headNavItem.menuPro.menuProImage.getData()}" style=" 382 <#if cur_headNavItem.menuPro.menuProImage.menuProImageWidth?? && cur_headNavItem.menuPro.menuProImage.menuProImageWidth.getData()?has_content && cur_headNavItem.menuPro.menuProImage.menuProImageWidth.getData() != "0">
383 width: ${cur_headNavItem.menuPro.menuProImage.menuProImageWidth.getData()}px; 384 </#if>
385
386 <#if cur_headNavItem.menuPro.menuProImage.menuProImageHeight?? && cur_headNavItem.menuPro.menuProImage.menuProImageHeight.getData()?has_content && cur_headNavItem.menuPro.menuProImage.menuProImageHeight.getData() != "0">
387 height: ${cur_headNavItem.menuPro.menuProImage.menuProImageHeight.getData()}px; 388 </#if>
389 "
390 alt="Pro">
391 </a>
392 </#if>
393 <#if cur_headNavItem.menuPro.menuProText.getData()?has_content>
394 <div class="text-content">
395 ${cur_headNavItem.menuPro.menuProText.getData()} 396 </div>
397 </#if>
398 <#if cur_headNavItem.menuPro.menuProSection.getSiblings()?has_content>
399 <ul class="pro-list-items">
400 <#list cur_headNavItem.menuPro.menuProSection.getSiblings() as cur_proSection>
401 <li class="pro-list-item">
402 <#assign
403 proSectionLink = globalCacheManager.parseLinkURL(request, cur_proSection.menuProSectionLink.getData())
404 />
405 <a href="${proSectionLink}" target="${globalCacheManager.getLinkTarget(proSectionLink)}">${cur_proSection.menuProSectionText.getData()}</a> 406 </li>
407 </#list>
408 </ul>
409 </#if>
410 </div>
411 </div>
412 <span class="background-grow"></span>
413 </div>
414
415 <article class="col-xs-12 col-xl-4 grey-theme">
416 <div class="wrapper">
417 <div class="pro-box">
418 <#if cur_headNavItem.menuContract.menuContractImage.getData()?has_content>
419 <#assign
420 contractImageLink = globalCacheManager.parseLinkURL(request, cur_headNavItem.menuContract.menuContractImageUrl.getData())
421 />
422 <a href="${contractImageLink}" target="${globalCacheManager.getLinkTarget(contractImageLink)}"> 423 <img src="${cur_headNavItem.menuContract.menuContractImage.getData()}" style=" 424 <#if cur_headNavItem.menuContract.menuContractImage.menuContractImageWidth?? && cur_headNavItem.menuContract.menuContractImage.menuContractImageWidth.getData()?has_content && cur_headNavItem.menuContract.menuContractImage.menuContractImageWidth.getData() != "0">
425 width: ${cur_headNavItem.menuContract.menuContractImage.menuContractImageWidth.getData()}px; 426 </#if>
427
428 <#if cur_headNavItem.menuContract.menuContractImage.menuContractImageHeight?? && cur_headNavItem.menuContract.menuContractImage.menuContractImageHeight.getData()?has_content && cur_headNavItem.menuContract.menuContractImage.menuContractImageHeight.getData() != "0">
429 height: ${cur_headNavItem.menuContract.menuContractImage.menuContractImageHeight.getData()}px; 430 </#if>
431 "
432
433 alt="Contract">
434 </a>
435 </#if>
436 <#if cur_headNavItem.menuContract.menuContractText.getData()?has_content>
437 <div class="text-content">
438 ${cur_headNavItem.menuContract.menuContractText.getData()} 439 </div>
440 </#if>
441 <#if cur_headNavItem.menuContract.menuContractSection?? && cur_headNavItem.menuContract.menuContractSection.getSiblings()?has_content>
442 <ul class="pro-list-items">
443 <#list cur_headNavItem.menuContract.menuContractSection.getSiblings() as cur_contractSection>
444 <li class="pro-list-item">
445 <#assign
446 contractSectionLink = globalCacheManager.parseLinkURL(request, cur_contractSection.menuContractSectionLink.getData())
447 />
448 <a href="${contractSectionLink}" target="${globalCacheManager.getLinkTarget(contractSectionLink)}">${cur_contractSection.menuContractSectionText.getData()}</a> 449 </li>
450 </#list>
451 </ul>
452 </#if>
453 </div>
454 </div>
455 <span class="background-grow"></span>
456 </article>
457 </div>
458 </div>
459
460 <footer>
461 <div class="row-flex">
462 <div class="goto-link">
463 <a href="${mUrlLink}">${globalCacheManager.translate(locale, "Go to")} ${cur_headNavItem.menuText.getData()} <span class="right-arrow"></span> 464 </a>
465 </div>
466 <#if cur_headNavItem.menuIcon.getSiblings()?has_content>
467 <#list cur_headNavItem.menuIcon.getSiblings() as cur_headNavItemBottomLink>
468 <div class="footer-link">
469 <#assign
470 iBottomLink = globalCacheManager.parseLinkURL(request, cur_headNavItemBottomLink.menuIconUrl.getData())
471 />
472 <a href="${iBottomLink}" target="${globalCacheManager.getLinkTarget(iBottomLink)}"> 473 <img src="${cur_headNavItemBottomLink.menuIconFile.getData()}" style="<#if cur_headNavItemBottomLink.menuIconFile.menuIconFileWidth?? && cur_headNavItemBottomLink.menuIconFile.menuIconFileWidth.getData()?has_content && cur_headNavItemBottomLink.menuIconFile.menuIconFileWidth.getData() != "0">width: ${cur_headNavItemBottomLink.menuIconFile.menuIconFileWidth.getData()}px;</#if> 474
475 <#if cur_headNavItemBottomLink.menuIconFile.menuIconFileHeight?? && cur_headNavItemBottomLink.menuIconFile.menuIconFileHeight.getData()?has_content && cur_headNavItemBottomLink.menuIconFile.menuIconFileHeight.getData() != "0">height: ${cur_headNavItemBottomLink.menuIconFile.menuIconFileHeight.getData()}px;</#if>" 476
477 alt="${cur_headNavItemBottomLink.menuIconText.getData()}"> 478 <span>${cur_headNavItemBottomLink.menuIconText.getData()}</span></a> 479 </div>
480 </#list>
481 </#if>
482 </div>
483 </footer>
484 </section>
485 </div>
486 </div>
487 <#elseif cur_headNavItem.menuType.getData() == 'LINK'>
488 </div>
489 <#elseif cur_headNavItem.menuType.getData() == 'CERAMICS'>
490 <span class="arrow"></span>
491 </div>
492
493 <div id="about-us-menu-${cur_headNavItem?index}" class="js-menu-collapse dropdown-menu mega-menu" aria-labelledby="toggle-news-menu"> 494 <div class="wrapper">
495 <section>
496 <div class="container">
497 <div class="row row-flex">
498 <div class="main-content col-12 col-xl-12">
499 <div class="wrapper">
500
501 <ul class="row row-flex">
502 <#list cur_headNavItem.menuSub.getSiblings() as cur_subLinks>
503 <li class="col-12 col-sm-6 col-xl-3">
504 <div class="collection-list-item">
505 <#assign ceramicsLinkUrl = globalCacheManager.parseLinkURL(request, cur_subLinks.menuSubUrl.getData())>
506 <a class="collection" href="${ceramicsLinkUrl}" target="${globalCacheManager.getLinkTarget(ceramicsLinkUrl)}">${cur_subLinks.menuSubText.getData()}</a> 507 </div>
508 </li>
509 </#list>
510 </ul>
511 </div>
512
513 </div>
514 </div>
515
516 </section>
517 </div>
518 </div>
519 <#elseif cur_headNavItem.menuType.getData() == 'PROFESSIONAL_ZONE'>
520 <span class="arrow"></span>
521 </div>
522
523 <div id="menu-section-${cur_headNavItem?index}" class="js-menu-collapse dropdown-menu mega-menu" aria-labelledby="toggle-news-menu"> 524 <div class="wrapper">
525 <section>
526 <div class="container content-Submenu">
527 <div class="row row-flex">
528 <#if cur_headNavItem.menuPromo.menuPromoImage.getData()?has_content>
529 <div class="main-content col-12 col-xl-8">
530 <#else>
531 <div class="main-content col-12 col-xl-12">
532 </#if>
533 <div class="wrapper footer__lists" id="menuSection01">
534 <#if cur_headNavItem.menuSection.getSiblings()?has_content >
535 <#assign
536 menuSectionCounter = 0
537 menuSectionNextSingle = false
538 />
539 <#assign menuSectionId = 1/>
540 <#list cur_headNavItem.menuSection.getSiblings() as cur_section>
541 <#if cur_section.menuSectionSub.getSiblings()?has_content && cur_section.menuSectionSub.getSiblings()[0].menuSectionSubLink.getData()?has_content >
542 <div class="js-collapse-wrapper collection-list-item col-12 col-md-3">
543 <#assign hLink = globalCacheManager.parseLinkURL(request, cur_section.menuSectionLink.getData()) />
544 <#if hLink?? && hLink?has_content>
545 <h2>
546 <a class="collection" style="font-size: 13px;" href="${hLink}" target="${cur_section.menuSectionTarget.getData()}"> 547 ${cur_section.menuSectionText.getData()} 548 </a>
549 </h2>
550 <#else>
551 <h2>
552 <p class="collection" style="background-size: 0px;font-size: 13px;">
553 ${cur_section.menuSectionText.getData()} 554 </p>
555 </h2>
556 </#if>
557 <div class="collapseble-wrapper collapse" id="menu-section-collapse-${menuSectionId}" style="display: block !important;"> 558 <#assign menuSectionId = menuSectionId+1/>
559 <ul class="row row-flex" style="flex-flow: column;">
560 <#list cur_section.menuSectionSub.getSiblings() as cur_sectionSub>
561 <li class="col-12">
562 <#assign ssLink = globalCacheManager.parseLinkURL(request, cur_sectionSub.menuSectionSubLink.getData()) />
563 <a class ="collection" style="font-family: 'Roboto-Regular';" href="${ssLink}" target="${cur_sectionSub.menuSectionSubTarget.getData()}"> 564 ${cur_sectionSub.menuSectionSubText.getData()} 565 </a>
566 </li>
567 </#list>
568 </ul>
569 </div>
570 </div>
571 <#else>
572 <#if menuSectionNextSingle = false >
573 <div class="js-collapse-wrapper collection-list-item col-12 col-md-3">
574 </#if>
575 <#assign msLink = globalCacheManager.parseLinkURL(request, cur_section.menuSectionLink.getData()) />
576 <#if msLink?? && msLink?has_content>
577 <h2>
578 <a class="collection" style="font-size: 13px;" href="${msLink}" target="${cur_section.menuSectionTarget.getData()}"> 579 ${cur_section.menuSectionText.getData()} 580 </a>
581 </h2>
582 <#else>
583 <h2>
584 <p class="collection" style="background-size: 0px;font-size: 13px;">
585 ${cur_section.menuSectionText.getData()} 586 </p>
587 </h2>
588 </#if>
589 <#if menuSectionCounter lt cur_headNavItem.menuSection.getSiblings()?size && cur_headNavItem.menuSection.getSiblings()[menuSectionCounter].menuSectionSub.getSiblings()[0].menuSectionSubLink.getData()?has_content >
590 </div>
591 <#elseif menuSectionCounter = cur_headNavItem.menuSection.getSiblings()?size >
592 </div>
593 <#else>
594 </div>
595 <#assign menuSectionNextSingle = true />
596 </#if>
597 </#if>
598 <#assign menuSectionCounter = menuSectionCounter + 1 />
599 </#list>
600 </#if>
601 </div>
602 </div>
603
604 <#if cur_headNavItem.menuPromo.menuPromoImage.getData()?has_content>
605 <article class="col-12 col-xl-4 cont-article">
606 <#assign mpLink = globalCacheManager.parseLinkURL(request, cur_headNavItem.menuPromo.menuPromoUrl.getData()) />
607 <#if mpLink?? && mpLink?has_content>
608 <a href="${mpLink}" class="cont-linkArrow"> 609 </#if>
610 <div class="wrapper cta-black" >
611 ${cur_headNavItem.menuPromo.menuPromoText.getData()} 612 </div>
613 <span class="background-grow" style="background-image:url(${cur_headNavItem.menuPromo.menuPromoImage.getData()});"></span> 614 <#if mpLink?? && mpLink?has_content>
615 </a>
616 </#if>
617 </article>
618 </#if>
619 </div>
620 </div>
621 </section>
622 </div>
623 </div>
624 </#if>
625 </li>
626 </#list>
627 <#list promo.getSiblings() as promo_item>
628 <li class="main-menu__item js-collapse-sm">
629 <div class="link-wrapper">
630 <#assign
631 promoLink = globalCacheManager.parseLinkURL(request, promo_item.promoUrl.getData())
632 />
633 <a class="main-menu__link" href="${promoLink}" target="${globalCacheManager.getLinkTarget(promoLink)}">${promo_item.promoText.getData()}</a> 634 </div>
635 </li>
636 </#list>
637 </ul>
638 </#if>
639 </nav>
640 <nav class="right-menu__wrapper">
641 <ul class="right-menu__list js-h-search">
642 <#if getterUtil.getBoolean(showSearch.getData())>
643 <li class="right-menu__item">
644 <#assign searchLink = globalCacheManager.parseLinkURL(request, globalCacheManager.translate(locale, "/search")) />
645 <a href="${searchLink}" target="${globalCacheManager.getLinkTarget(searchLink)}" class="right-menu__link" title="${globalCacheManager.translate(locale, "Search")}"> 646 <i class="icon-search-24"></i>
647 </a>
648 </li>
649 </#if>
650 <#if getterUtil.getBoolean(showCart.getData()) && hasCommerce>
651 <li class="right-menu__item js-h-cart">
652 <#assign cartLink = globalCacheManager.getEcommerceURL(request, "/checkout/cart") />
653 <a href="${cartLink}" class="right-menu__link" title="${globalCacheManager.translate(locale, "Go to cart")}"> 654 <span class="items-cart">-</span>
655 <i class="icon-cart-24"></i>
656 </a>
657 </li>
658 </#if>
659 <li class="right-menu__item js-h-hamburger menu-trigger">
660 <a href="javascript:void(0)" data-target="main-menu-collapse" class="right-menu__link">
661 <i class="icon-menu-24"></i>
662 </a>
663 </li>
664 </ul>
665 </nav>
666 </section>
667 <div class="r-modal main-menu-collapse">
668 <div class="close-menu">
669 <div class="wrapper">
670 <a href="javascript:void(0)" class="js-close icon-cross-24"></a>
671 </div>
672 </div>
673 <div class="r-modal__wrapper">
674 </div>
675 </div>
676
677 <div class="r-modal country-menu-collapse">
678 <div class="close-menu">
679 <div class="wrapper">
680 <a href="javascript:void(0)" class="js-close icon-cross-24"></a>
681 </div>
682 </div>
683 <div class="r-modal__wrapper">
684 <div class="container">
685 <div class="row">
686 <div class="col-xs-12">
687 <h2>${globalCacheManager.translate(locale, "Select your country")}</h2> 688 </div>
689 </div>
690 <div class="row row-flex" id="continent-parent">
691
692 <!-- this div ends the country selector -->
693 </div>
694 </div>
695 </div>
696 </div>
697
698</div>
699
700<#if getterUtil.getBoolean(showPrivate.getData()) >
701 <div id="mobileUserAreaDiv" class="js-submenu" style="display:none;">
702 </div>
703</#if>
704
705</header>
706
707<#if promoBanner?? && getterUtil.getBoolean(promoBanner.showPromoBanner.getData()) >
708
709 <#if promoBanner.promoBannerText.getData()?? && promoBanner.promoBannerText.getData()?has_content >
710 <div class="js-submenu promoSubmenu">
711 <section class="promomenu-section">
712 <div class="background-grow">
713 <div class="main-nav js-main-nav">
714 <p class="promomenu-text">${promoBanner.promoBannerText.getData()} 715 <#if promoBanner.promoBannerHTML.getData()?? && promoBanner.promoBannerHTML.getData()?has_content >
716 <a class="promomenu-link" data-toggle="modal" data-target="#promoBannerDisp" href="#">
717 <img class="promomenu-info" src="${themeDisplay.getPathThemeImages()}/icons/info-18white.svg" alt="${globalCacheManager.translate(locale, "Promotion info")}"> 718 </a>
719 </#if>
720 </p>
721 </div>
722 </div>
723 </section>
724 </div>
725
726 <#if promoBanner.promoBannerHTML.getData()?? && promoBanner.promoBannerHTML.getData()?has_content >
727 <div class="lightbox-wrapper">
728 <div class="modal fade modal-lightbox" id="promoBannerDisp" tabindex="-1" role="dialog" aria-labelledby=""
729 style="display: none;" aria-hidden="true">
730 <div class="modal-dialog modal-lg" role="document" style="top: 20%;">
731 <div class="container">
732 <div class="close-menu">
733 <div class="wrapper">
734 <a role="button" data-dismiss="modal" id="promoBannerDisp" class="js-close icon-cross-24"></a>
735 </div>
736 </div>
737 </div>
738 <div class="r-modal__wrapper">
739 <div class="container">
740 <section style="background-color:white !important;" class="form-modal">
741 <div class="container">
742 <div class="row">
743 <div class="col-12 col-md-12 promomenu-modal">
744 ${promoBanner.promoBannerHTML.getData()} 745 </div>
746 </div>
747 </div>
748 </section>
749 </div>
750 </div>
751 </div>
752 </div>
753 </div>
754 </#if>
755 </#if>
756
757</#if>
758
759</#if>