1<#assign cache = cacheUtils.getCacheManager(themeDisplay.getScopeGroupId())! />
2
3<#if cache??>
4
5 <#macro initSupraMenus>
6 <#if shortcuts.shortcutsShortcut.getSiblings()?has_content>
7 <#list shortcuts.shortcutsShortcut.getSiblings() as curShortcut>
8 <#assign
9 pos = curShortcut.shortcutsShortcutPos.getData()
10 icon = curShortcut.shortcutsShortcutIcon.getData()
11 iconWidth = curShortcut.shortcutsShortcutWidth.getData()
12 iconHeight = curShortcut.shortcutsShortcutHeight.getData()
13 text = curShortcut.shortcutsShortcutText.getData()
14 tooltipIcon=curShortcut.tooltipIcon.getData()
15 link = (curShortcut.shortcutsShortcutLink.getData()?has_content)?string(cache.parseLinkURL(request, curShortcut.shortcutsShortcutLink.getData()), "")
16 target = (link?has_content)?string((curShortcut.shortcutsShortcutTargetLink.getData()?has_content)?string(curShortcut.shortcutsShortcutTargetLink.getData(), cache.getLinkTarget(link)), "")
17 />
18
19 <#assign html = "" />
20 <#assign cssLiClass = "supramenu__item" />
21 <#if pos == "C1" && link?has_content && link?contains(cache.translate(themeDisplay.getLocale(), "/sobre-roca"))>
22 <#assign cssLiClass += " about-us" />
23 </#if>
24
25 <#assign html += "<li class=\"${cssLiClass}\">" /> 26 <#if link?has_content>
27 <#if tooltipIcon?has_content>
28 <#assign html += "<a class=\"supramenu__link test1\" href=\"" + link + "\" title=\"" + tooltipIcon + "\" target=\"" + target + "\">" />
29 <#else>
30 <#assign html += "<a class=\"supramenu__link test2\" href=\"" + link + "\" target=\"" + target + "\">" />
31 </#if>
32 </#if>
33 <#if icon?has_content>
34 <#assign style = "" />
35 <#if iconWidth?has_content && iconWidth != "0">
36 <#assign style += "width: " + iconWidth + "px;" />
37 </#if>
38 <#if iconHeight?has_content && iconHeight != "0">
39 <#assign style += "height: " + iconHeight + "px;" />
40 </#if>
41
42 <#if text?has_content>
43 <#assign html += "<img class=\"icon-right-space\" alt=\"" + curShortcut.shortcutsShortcutIcon.getAttribute("alt") + "\" data-fileentryid=\"" + curShortcut.shortcutsShortcutIcon.getAttribute("fileEntryId") + "\" src=\"" + icon + "\" title=\"" + text + "\" style=\"" + style + "\" />" /> 44 <#else>
45 <#assign html += "<img alt=\"" + curShortcut.shortcutsShortcutIcon.getAttribute("alt") + "\" data-fileentryid=\"" + curShortcut.shortcutsShortcutIcon.getAttribute("fileEntryId") + "\" src=\"" + icon + "\" style=\"" + style + "\" />" /> 46 </#if>
47 </#if>
48 <#if text?has_content>
49 <#assign html += "<div><span>" + text + "</span></div>" />
50 </#if>
51 <#if link?has_content>
52 <#assign html += "</a>" />
53 </#if>
54 <#assign html += "</li>" />
55
56
57 <#if html?has_content>
58 <#if pos == "C1">
59 <#if link?has_content && link?contains(cache.translate(themeDisplay.getLocale(), "/sobre-roca"))>
60 <#assign htmlAbout += html />
61 </#if>
62 <#assign htmlC1 += html />
63 <#elseif pos == "C2">
64 <#assign htmlC2 += html />
65 <#elseif pos == "C3">
66 <#assign htmlC3 += html />
67 </#if>
68 </#if>
69 </#list>
70
71 <#assign
72 html = ""
73 icon = shortcuts.shortcutsCta.shortcutsCtaIcon.getData()
74 iconWidth = shortcuts.shortcutsCta.shortcutsCtaWidth.getData()
75 iconHeight = shortcuts.shortcutsCta.shortcutsCtaHeight.getData()
76 text = shortcuts.shortcutsCta.shortcutsCtaText.getData()
77 link = (shortcuts.shortcutsCta.shortcutsCtaLink.getData()?has_content)?string(cache.parseLinkURL(request, shortcuts.shortcutsCta.shortcutsCtaLink.getData()), "")
78 target = (link?has_content)?string((shortcuts.shortcutsCta.shortcutsCtaTargetLink.getData()?has_content)?string(shortcuts.shortcutsCta.shortcutsCtaTargetLink.getData(), cache.getLinkTarget(link)), "")
79 />
80
81 <#if link?has_content>
82 <#assign html += "<a class=\"supramenu__btn\" href=\"" + link + "\" target=\"" + target + "\">" />
83 </#if>
84 <#if icon?has_content>
85 <#assign style = "" />
86 <#if iconWidth?has_content && iconWidth != "0">
87 <#assign style += "width: " + iconWidth + "px;" />
88 </#if>
89 <#if iconHeight?has_content && iconHeight != "0">
90 <#assign style += "height: " + iconHeight + "px;" />
91 </#if>
92
93 <#if text?has_content>
94 <#assign html += "<img class=\"icon-right-space\" alt=\"" + shortcuts.shortcutsCta.shortcutsCtaIcon.getAttribute("alt") + "\" data-fileentryid=\"" + shortcuts.shortcutsCta.shortcutsCtaIcon.getAttribute("fileEntryId") + "\" src=\"" + icon + "\" title=\"" + text + "\" style=\"" + style + "\" />" /> 95 <#else>
96 <#assign html += "<img alt=\"" + shortcuts.shortcutsCta.shortcutsCtaIcon.getAttribute("alt") + "\" data-fileentryid=\"" + shortcuts.shortcutsCta.shortcutsCtaIcon.getAttribute("fileEntryId") + "\" src=\"" + icon+ "\" style=\"" + style + "\" />" /> 97 </#if>
98 </#if>
99 <#if text?has_content>
100 <#assign html += "<div><span>" + text + "</span></div>" />
101 </#if>
102 <#if link?has_content>
103 <#assign html += "</a>" />
104 </#if>
105
106
107 <#if html?has_content>
108 <#assign htmlCCta += html />
109 </#if>
110 </#if>
111 </#macro>
112
113 <#macro drawDesktopMainMenu>
114 <ul class="main-menu__list" id="id001">
115 <#list mainMenu.mainMenuItems.getSiblings() as curMenuItem>
116 <#assign
117 type = curMenuItem.mainMenuItemsType.getData()
118 sectionsHtml = ""
119 bannerHtml = ""
120 footerHtml = ""
121
122 slider = curMenuItem.mainMenuItemsBannersSlider.getData()
123 items = 0
124 />
125
126 <#list curMenuItem.mainMenuItemsBanners.getSiblings() as curBanner>
127 <#assign
128 img = curBanner.mainMenuItemsBannersImage.getData()
129 text = curBanner.mainMenuItemsBannersText.getData()
130 link = (curBanner.mainMenuItemsBannersLink.getData()?has_content)?string(cache.parseLinkURL(request, curBanner.mainMenuItemsBannersLink.getData()), "")
131 target = (link?has_content)?string((curBanner.mainMenuItemsBannersTargetLink.getData()?has_content)?string(curBanner.mainMenuItemsBannersTargetLink.getData(), cache.getLinkTarget(link)), "")
132 />
133
134 <#if img?has_content>
135 <#assign bannerHtml += "<div class=\"menu-carousel-item\" style=\"background-image: url('${img}');\">" /> 136 <#if link?has_content>
137 <#assign bannerHtml += "<a href=\"${link}\" target=\"${target}\">" /> 138 </#if>
139 <#if text?has_content>
140 <#assign bannerHtml += "<span>${text}</span>" /> 141 </#if>
142 <#if link?has_content>
143 <#assign bannerHtml += "</a>" />
144 </#if>
145 <#assign bannerHtml += "</div>" />
146
147 <#assign items++ />
148 </#if>
149 </#list>
150
151 <#list curMenuItem.mainMenuItemsSections.getSiblings() as curSection>
152 <#assign section = curSection.mainMenuItemsSectionsType.getData() />
153
154 <#if type == "LINK" || ((type == "PRODUCTS" || type == "COLLECTIONS") && section == "FOOTER")>
155 <#assign
156 text = curSection.mainMenuItemsSectionsText.getData()
157 link = (curSection.mainMenuItemsSectionsLink.getData()?has_content)?string(cache.parseLinkURL(request, curSection.mainMenuItemsSectionsLink.getData()), "")
158 target = (link?has_content)?string((curSection.mainMenuItemsSectionsTargetLink.getData()?has_content)?string(curSection.mainMenuItemsSectionsTargetLink.getData(), cache.getLinkTarget(link)), "")
159 isSection = (section != "FOOTER" && text?has_content)
160 />
161
162 <#if isSection>
163 <#assign cssColClass = "main-menu__section col-xl-3 col-lg-3 col-4" />
164 <#if items gt 0 && bannerHtml?has_content && slider = "2C">
165 <#assign cssColClass = "col-xl-12 col-lg-12 col-4" />
166 </#if>
167
168 <#assign sectionsHtml += "<li class=\"${cssColClass}\">" /> 169 <#if link?has_content>
170 <#assign sectionsHtml += "<a href=\"${link}\" target=\"${target}\">" /> 171 </#if>
172 <#assign sectionsHtml += "<span class=\"main-menu__sublist-title\">${text} <span class=\"icon-chevron-up\" data-toggle=\"collapse\" href=\"#main-menu-${curMenuItem?index}__section-${curSection?index}\" role=\"button\" aria-expanded=\"true\"></span></span>" /> 173 <#if link?has_content>
174 <#assign sectionsHtml += "</a>" />
175 </#if>
176 <#assign sectionsHtml += "<ul id=\"main-menu-${curMenuItem?index}__section-${curSection?index}\" class=\"row collapse show main-menu__sublist\">" /> 177 </#if>
178
179 <#list curSection.mainMenuItemsSectionsSubitems.getSiblings() as curSubitem>
180 <#assign
181 img = curSubitem.mainMenuItemsSectionsSubitemsImage.getData()
182 imgWidth = curSubitem.mainMenuItemsSectionsSubitemsWidth.getData()
183 imgHeight = curSubitem.mainMenuItemsSectionsSubitemsHeight.getData()
184 text = curSubitem.mainMenuItemsSectionsSubitemsText.getData()
185 link = (curSubitem.mainMenuItemsSectionsSubitemsLink.getData()?has_content)?string(cache.parseLinkURL(request, curSubitem.mainMenuItemsSectionsSubitemsLink.getData()), "")
186 target = (link?has_content)?string((curSubitem.mainMenuItemsSectionsSubitemsTargetLink.getData()?has_content)?string(curSubitem.mainMenuItemsSectionsSubitemsTargetLink.getData(), cache.getLinkTarget(link)), "")
187 />
188
189 <#assign style = "" />
190 <#if imgWidth?has_content && imgWidth != "0">
191 <#assign style += "width: " + imgWidth + "px;" />
192 </#if>
193 <#if imgHeight?has_content && imgHeight != "0">
194 <#assign style += "height: " + imgHeight + "px;" />
195 </#if>
196
197 <#if section == "FOOTER">
198 <#if img?has_content || text?has_content>
199 <#assign footerHtml += "<div class=\"footer-link\">" />
200 <#if link?has_content>
201 <#assign footerHtml += "<a href=\"${link}\" target=\"${target}\">" /> 202 </#if>
203 <#if img?has_content>
204 <#assign footerHtml += "<img alt=\"${curSubitem.mainMenuItemsSectionsSubitemsImage.getAttribute('alt')}\" data-fileentryid=\"${curSubitem.mainMenuItemsSectionsSubitemsImage.getAttribute('fileEntryId')}\" src=\"${img}\" style=\"${style}\" />" /> 205 </#if>
206 <#if text?has_content>
207 <#assign footerHtml += "<div><span>${text}</span></div>" /> 208 </#if>
209 <#if link?has_content>
210 <#assign footerHtml += "</a>" />
211 </#if>
212 <#assign footerHtml += "</div>" />
213 </#if>
214 <#else>
215 <#if text?has_content>
216 <#if isSection>
217 <#assign sectionsHtml += "<li class=\"col-xl-12 col-lg-12 col-4\">" />
218 <#else>
219 <#if items gt 0 && bannerHtml?has_content && slider = "2C">
220 <#assign sectionsHtml += "<li class=\"col-xl-12 col-lg-12 col-4\">" />
221 <#else>
222 <#assign sectionsHtml += "<li class=\"col-xl-3 col-lg-3 col-4\">" />
223 </#if>
224 </#if>
225 <#if link?has_content>
226 <#assign sectionsHtml += "<a href=\"${link}\" target=\"${target}\">" /> 227 </#if>
228 <#if img?has_content>
229 <#assign sectionsHtml += "<img alt=\"${curSubitem.mainMenuItemsSectionsSubitemsImage.getAttribute('alt')}\" data-fileentryid=\"${curSubitem.mainMenuItemsSectionsSubitemsImage.getAttribute('fileEntryId')}\" src=\"${img}\" style=\"${style}\" />" /> 230 </#if>
231 <#assign sectionsHtml += "<div><span>${text}</span></div>" /> 232 <#if link?has_content>
233 <#assign sectionsHtml += "</a>" />
234 </#if>
235 <#assign sectionsHtml += "</li>" />
236 </#if>
237 </#if>
238 </#list>
239
240 <#if isSection>
241 <#assign sectionsHtml += "</ul></li>" />
242 </#if>
243 </#if>
244 </#list>
245
246
247 <li class="main-menu__item js-collapse-sm">
248 <#assign
249 type = curMenuItem.mainMenuItemsType.getData()
250 text = curMenuItem.mainMenuItemsText.getData()
251 link = (curMenuItem.mainMenuLink.getData()?has_content)?string(cache.parseLinkURL(request, curMenuItem.mainMenuLink.getData()), "")
252 target = (link?has_content)?string((curMenuItem.mainMenuItemsTargetLink.getData()?has_content)?string(curMenuItem.mainMenuItemsTargetLink.getData(), cache.getLinkTarget(link)), "")
253 />
254
255 <div class="link-wrapper">
256 <#if link?has_content>
257 <a class="main-menu__link" href="${link}" target="${target}"> 258 </#if>
259 ${text} 260 <#if link?has_content>
261 </a>
262 </#if>
263 </div>
264
265 <#if (type == "LINK" && sectionsHtml?has_content) || type == "PRODUCTS" || type == "COLLECTIONS">
266 <div id="menu-section-${curMenuItem?index + 1}" class="js-menu-collapse dropdown-menu mega-menu"> 267 <div class="wrapper">
268 <section>
269 <div class="container">
270 <div class="row">
271 <div class="main-content <#if items gt 0 && bannerHtml?has_content && slider == "1C">col-xl-8 col-lg-8<#elseif items gt 0 && bannerHtml?has_content && slider = "2C">col-xl-6 col-lg-6</#if> col-12">
272 <div class="header-menu">
273 ${text} 274 <#if getterUtil.getBoolean(curMenuItem.mainMenuItemsShowLink.getData())>
275 <a class="desktop-go-to" href="${link}"><div><span>${cache.translate(locale, "Go to")} ${text}</span></div> <i class="icon-arrow-right"></i></a> 276 </#if>
277 </div>
278 <div class="wrapper">
279 <ul class="row">
280 <#if type == "LINK">
281 ${sectionsHtml} 282 <#elseif type == "PRODUCTS">
283 <#list p_Map?sort_by("websort") as item> 284 <li class="<#if items gt 0 && bannerHtml?has_content && slider = "1C"><#elseif items gt 0 && bannerHtml?has_content && slider = "2C">col-xl-6 col-lg-12<#else>col-xl-3 col-lg-3</#if> col-4">
285 <a href="${item.url}"> 286 <#if item.title?has_content>
287 <img src="${item.image!}" alt="${item.title}"> 288 <div><span>${item.title}</span></div> 289 <#else>
290 <img src="${item.image!}"> 291 <span></span>
292 </#if>
293 </a>
294 </li>
295 </#list>
296 <#elseif type == "COLLECTIONS">
297 <#list c_Map?sort_by("websort") as item> 298 <li class="<#if items gt 0 && bannerHtml?has_content && slider = "1C"><#elseif items gt 0 && bannerHtml?has_content && slider = "2C">col-xl-6 col-lg-12<#else>col-xl-3 col-lg-3</#if> col-4">
299 <a href="${item.url}"> 300 <#if item.title?has_content>
301 <img src="${item.image!}" alt="${item.title}"> 302 <div><span>${item.title}</span></div> 303 <#else>
304 <img src="${item.image!}"> 305 <span></span>
306 </#if>
307 </a>
308 </li>
309 </#list>
310 </#if>
311 </ul>
312 </div>
313 </div>
314
315 <#if items gt 0 && bannerHtml?has_content>
316 <div id="banner-${curMenuItem?index + 1}" class="banner-content <#if slider == "1C">col-xl-4 col-lg-4<#elseif slider = "2C">col-xl-6 col-lg-6</#if> col-12"> 317 <div class="menu-carousel-container <#if slider == "2C">two</#if>">
318 <div class="menu-carousel-buttons">
319 <button class="menu-carousel-button prev icon-chevron-left disabled" onclick="showMenuCarouselItem('banner-${curMenuItem?index + 1}', -1);"></button> 320 <button class="menu-carousel-button next icon-chevron-right" onclick="showMenuCarouselItem('banner-${curMenuItem?index + 1}', 1);"></button> 321 </div>
322
323 <div class="menu-carousel" data-index="0">
324 ${bannerHtml} 325 </div>
326 </div>
327 </div>
328 </#if>
329 </div>
330 <#if footerHtml?has_content>
331 <div class="row footer-menu">
332 <div class="footer-links col-12">
333 ${footerHtml} 334 </div>
335 </div>
336 </#if>
337 </div>
338 </section>
339 </div>
340 </div>
341 </#if>
342 </li>
343 </#list>
344 </ul>
345 </#macro>
346
347 <#macro drawMobileMainMenu>
348 <#assign collapseIds = "" />
349
350 <#list mainMenu.mainMenuItems.getSiblings() as curMenuItem>
351 <#assign
352 collapse = "clpsMbM-" + curMenuItem?index
353 type = curMenuItem.mainMenuItemsType.getData()
354 sectionsHtml = ""
355 bannerHtml = ""
356 footerHtml = ""
357
358 slider = curMenuItem.mainMenuItemsBannersSlider.getData()
359 items = 0
360 />
361
362 <#list curMenuItem.mainMenuItemsBanners.getSiblings() as curBanner>
363 <#assign
364 img = curBanner.mainMenuItemsBannersImage.getData()
365 text = curBanner.mainMenuItemsBannersText.getData()
366 link = (curBanner.mainMenuItemsBannersLink.getData()?has_content)?string(cache.parseLinkURL(request, curBanner.mainMenuItemsBannersLink.getData()), "")
367 target = (link?has_content)?string((curBanner.mainMenuItemsBannersTargetLink.getData()?has_content)?string(curBanner.mainMenuItemsBannersTargetLink.getData(), cache.getLinkTarget(link)), "")
368 />
369
370 <#if img?has_content>
371 <#assign bannerHtml += "<div class=\"menu-carousel-item\" style=\"background-image: url('${img}');\">" /> 372 <#if link?has_content>
373 <#assign bannerHtml += "<a href=\"${link}\" target=\"${target}\">" /> 374 </#if>
375 <#if text?has_content>
376 <#assign bannerHtml += "<span>${text}</span>" /> 377 </#if>
378 <#if link?has_content>
379 <#assign bannerHtml += "</a>" />
380 </#if>
381 <#assign bannerHtml += "</div>" />
382
383 <#assign items++ />
384 </#if>
385 </#list>
386
387 <#list curMenuItem.mainMenuItemsSections.getSiblings() as curSection>
388 <#assign section = curSection.mainMenuItemsSectionsType.getData() />
389
390 <#if type == "LINK" || ((type == "PRODUCTS" || type == "COLLECTIONS") && section == "FOOTER")>
391 <#assign
392 text = curSection.mainMenuItemsSectionsText.getData()
393 link = (curSection.mainMenuItemsSectionsLink.getData()?has_content)?string(cache.parseLinkURL(request, curSection.mainMenuItemsSectionsLink.getData()), "")
394 target = (link?has_content)?string((curSection.mainMenuItemsSectionsTargetLink.getData()?has_content)?string(curSection.mainMenuItemsSectionsTargetLink.getData(), cache.getLinkTarget(link)), "")
395 isSection = (section != "FOOTER" && text?has_content)
396 />
397
398 <#if isSection>
399 <#assign cssColClass = "main-menu__section col-xl-3 col-lg-3 col-4" />
400 <#if items gt 0 && bannerHtml?has_content && slider = "2C">
401 <#assign cssColClass = "col-12" />
402 </#if>
403
404 <#assign sectionsHtml += "<li class=\"${cssColClass}\">" /> 405 <#assign sectionsHtml += "<span class=\"main-menu__sublist-title\">" />
406 <#if link?has_content>
407 <#assign sectionsHtml += "<a href=\"${link}\" target=\"${target}\">" /> 408 </#if>
409 <#assign sectionsHtml += text />
410 <#if link?has_content>
411 <#assign sectionsHtml += "</a>" />
412 </#if>
413 <#assign sectionsHtml += "<span class=\"icon-chevron-up\" data-toggle=\"collapse\" href=\"#main-menu-mb-${curMenuItem?index}__section-${curSection?index}\" role=\"button\" aria-expanded=\"true\"></span></span>" /> 414 <#assign sectionsHtml += "<ul id=\"main-menu-mb-${curMenuItem?index}__section-${curSection?index}\" class=\"row collapse show main-menu__sublist\">" /> 415 </#if>
416
417 <#list curSection.mainMenuItemsSectionsSubitems.getSiblings() as curSubitem>
418 <#assign
419 img = curSubitem.mainMenuItemsSectionsSubitemsImage.getData()
420 imgWidth = curSubitem.mainMenuItemsSectionsSubitemsWidth.getData()
421 imgHeight = curSubitem.mainMenuItemsSectionsSubitemsHeight.getData()
422 text = curSubitem.mainMenuItemsSectionsSubitemsText.getData()
423 link = (curSubitem.mainMenuItemsSectionsSubitemsLink.getData()?has_content)?string(cache.parseLinkURL(request, curSubitem.mainMenuItemsSectionsSubitemsLink.getData()), "")
424 target = (link?has_content)?string((curSubitem.mainMenuItemsSectionsSubitemsTargetLink.getData()?has_content)?string(curSubitem.mainMenuItemsSectionsSubitemsTargetLink.getData(), cache.getLinkTarget(link)), "")
425 />
426
427 <#assign style = "" />
428 <#if imgWidth?has_content && imgWidth != "0">
429 <#assign style += "width: " + imgWidth + "px;" />
430 </#if>
431 <#if imgHeight?has_content && imgHeight != "0">
432 <#assign style += "height: " + imgHeight + "px;" />
433 </#if>
434
435 <#if section == "FOOTER">
436 <#if img?has_content || text?has_content>
437 <#assign footerHtml += "<div class=\"footer-link\">" />
438 <#if link?has_content>
439 <#assign footerHtml += "<a href=\"${link}\" target=\"${target}\">" /> 440 </#if>
441 <#if img?has_content>
442 <#assign footerHtml += "<img alt=\"${curSubitem.mainMenuItemsSectionsSubitemsImage.getAttribute('alt')}\" data-fileentryid=\"${curSubitem.mainMenuItemsSectionsSubitemsImage.getAttribute('fileEntryId')}\" src=\"${img}\" style=\"${style}\" />" /> 443 </#if>
444 <#if text?has_content>
445 <#assign footerHtml += "<div><span>${text}</span></div>" /> 446 </#if>
447 <#if link?has_content>
448 <#assign footerHtml += "</a>" />
449 </#if>
450 <#assign footerHtml += "</div>" />
451 </#if>
452 <#else>
453 <#if text?has_content>
454 <#if type == "PRODUCTS" || type == "COLLECTIONS">
455 <#assign sectionsHtml += "<li class=\"col-4\">" />
456 <#else>
457 <#assign sectionsHtml += "<li class=\"col-12 align-items-start\">" />
458 </#if>
459 <#if link?has_content>
460 <#assign sectionsHtml += "<a href=\"${link}\" target=\"${target}\">" /> 461 </#if>
462 <#if img?has_content>
463 <#assign sectionsHtml += "<img alt=\"${curSubitem.mainMenuItemsSectionsSubitemsImage.getAttribute('alt')}\" data-fileentryid=\"${curSubitem.mainMenuItemsSectionsSubitemsImage.getAttribute('fileEntryId')}\" src=\"${img}\" style=\"${style}\" />" /> 464 </#if>
465 <#assign sectionsHtml += "<div><span>${text}</span></div>" /> 466 <#if link?has_content>
467 <#assign sectionsHtml += "</a>" />
468 </#if>
469 <#assign sectionsHtml += "</li>" />
470 </#if>
471 </#if>
472 </#list>
473
474 <#if isSection>
475 <#assign sectionsHtml += "</ul></li>" />
476 </#if>
477 </#if>
478 </#list>
479
480 <#if (type == "LINK" && sectionsHtml?has_content) || type == "PRODUCTS" || type == "COLLECTIONS">
481 <#if collapseIds?has_content>
482 <#assign collapseIds += "|" + collapse />
483 <#else>
484 <#assign collapseIds = collapse />
485 </#if>
486 <div class="main-submenu__list" id="${collapse}" style="display: none;"> 487 <div class="container">
488 <div class="row">
489 <div class="col-12">
490 <button class="arrow" type="button" onclick="showMobileSubmenu('${collapse}', true);"> 491 ${cache.translate(locale, "Back")} 492 </button>
493 </div>
494 <div class="col-12">
495 <span class="main-submenu__title">${curMenuItem.mainMenuItemsText.getData()}</span> 496 </div>
497 </div>
498
499 <ul class="row">
500 <#if type == "LINK">
501 ${sectionsHtml} 502 <#elseif type == "PRODUCTS">
503 <#list p_Map?sort_by("websort") as item> 504 <li class="<#if items gt 0 && bannerHtml?has_content && slider = "1C"><#elseif items gt 0 && bannerHtml?has_content && slider = "2C">col-xl-6 col-lg-12<#else>col-xl-3 col-lg-3</#if> col-4">
505 <a href="${item.url}" class="px-2"> 506 <#if item.title?has_content>
507 <img src="${item.image!}" alt="${item.title}"> 508 <div class="text-center m-0"><span>${item.title}</span></div> 509 <#else>
510 <img src="${item.image!}"> 511 <span></span>
512 </#if>
513 </a>
514 </li>
515 </#list>
516 <#elseif type == "COLLECTIONS">
517 <#list c_Map?sort_by("websort") as item> 518 <li class="<#if items gt 0 && bannerHtml?has_content && slider = "1C"><#elseif items gt 0 && bannerHtml?has_content && slider = "2C">col-xl-6 col-lg-12<#else>col-xl-3 col-lg-3</#if> col-4">
519 <a href="${item.url}" class="px-2"> 520 <#if item.title?has_content>
521 <img src="${item.image!}" alt="${item.title}"> 522 <div class="text-center m-0"><span>${item.title}</span></div> 523 <#else>
524 <img src="${item.image!}"> 525 <span></span>
526 </#if>
527 </a>
528 </li>
529 </#list>
530 </#if>
531 </ul>
532 <#if getterUtil.getBoolean(curMenuItem.mainMenuItemsShowLink.getData())>
533 <div class="row">
534 <div class="col-12">
535 <a class="mobile-go-to" href="${(curMenuItem.mainMenuLink.getData()?has_content)?string(cache.parseLinkURL(request, curMenuItem.mainMenuLink.getData()), "")}"><div><span class="text">${cache.translate(locale, "Go to")} ${curMenuItem.mainMenuItemsText.getData()}</span></div> <span class="icon-arrow-right"></span></a> 536 </div>
537 </div>
538 </#if>
539
540 <#if items gt 0 && bannerHtml?has_content>
541 <div class="row">
542 <div id="banner-mb-${curMenuItem?index + 1}" class="banner-content <#if slider == "1C">col-xl-4 col-lg-4<#elseif slider = "2C">col-xl-6 col-lg-6</#if> col-12"> 543 <div class="menu-carousel-container <#if slider == "2C">two</#if>">
544 <div class="menu-carousel-buttons">
545 <button class="menu-carousel-button prev icon-chevron-left disabled" onclick="showMenuCarouselItem('banner-mb-${curMenuItem?index + 1}', -1);"></button> 546 <button class="menu-carousel-button next icon-chevron-right" onclick="showMenuCarouselItem('banner-mb-${curMenuItem?index + 1}', 1);"></button> 547 </div>
548
549 <div class="menu-carousel" data-index="0">
550 ${bannerHtml} 551 </div>
552 </div>
553 </div>
554 </div>
555 </#if>
556 <#if footerHtml?has_content>
557 <div class="row footer-menu">
558 <div class="footer-links col-12">
559 ${footerHtml} 560 </div>
561 </div>
562 </#if>
563 </div>
564 </div>
565 </#if>
566 </#list>
567
568 <ul class="main-menu__list">
569 <#list mainMenu.mainMenuItems.getSiblings() as curMenuItem>
570 <li class="main-menu__item js-collapse-sm">
571 <#assign
572 collapse = "clpsMbM-" + curMenuItem?index
573 type = curMenuItem.mainMenuItemsType.getData()
574 text = curMenuItem.mainMenuItemsText.getData()
575 link = (curMenuItem.mainMenuLink.getData()?has_content)?string(cache.parseLinkURL(request, curMenuItem.mainMenuLink.getData()), "")
576 target = (link?has_content)?string((curMenuItem.mainMenuItemsTargetLink.getData()?has_content)?string(curMenuItem.mainMenuItemsTargetLink.getData(), cache.getLinkTarget(link)), "")
577 />
578
579 <div class="link-wrapper">
580 <#if link?has_content>
581 <a class="main-menu__link" href="${link}" target="${target}"> 582 </#if>
583 ${text} 584 <#if link?has_content>
585 </a>
586 </#if>
587
588 <#if collapseIds?contains(collapse)>
589 <button class="arrow" type="button" onclick="showMobileSubmenu('${collapse}', false);"></button> 590 </#if>
591 </div>
592 </li>
593 </#list>
594 </ul>
595 </#macro>
596
597 <#macro drawSearchHeader device>
598 <#assign searchLink = cache.parseLinkURL(request, cache.translate(locale, "/search" )) />
599
600 <div class="search-header">
601 <a id="${device}-search-icon" class="search-icon" href="javascript:void(0);" role="button" title="${cache.translate(themeDisplay.getLocale(), "Enter your search")}"> 602 <span class="icon-search"></span>
603 </a>
604 <input id="${device}-search-input" class="search-input" data-url="${searchLink}" name="q" placeholder="${cache.translate(themeDisplay.getLocale(), "What are you looking for?")}" type="search" /> 605 </div>
606 </#macro>
607
608 <#function getUserInitials>
609 <#local userInitials = "" />
610 <#if themeDisplay.getUser().getFirstName()?? && themeDisplay.getUser().getFirstName()?has_content>
611 <#local firstName = themeDisplay.getUser().getFirstName() />
612 <#local userInitials += firstName?substring(0, 1) />
613 </#if>
614 <#if themeDisplay.getUser().getLastName()?? && themeDisplay.getUser().getLastName()?has_content>
615 <#local lastName = themeDisplay.getUser().getLastName() />
616 <#local userInitials += lastName?substring(0, 1) />
617 </#if>
618
619 <#return userInitials?upper_case />
620 </#function>
621
622
623
624 <#assign
625 p_Map = productsMap?eval
626 c_Map = collectionsMap?eval
627 u_Layouts = userLayouts?eval
628
629 profile_layouts = u_Layouts.profileLayouts
630
631 profile_url = u_Layouts.profileUrl
632 logout_url = u_Layouts.logoutUrl
633 login_url = u_Layouts.loginUrl
634
635 marketTree = cache.getMarketsTree()
636 hasCommerce = cache.checkCommerce(request)
637 currentMarket = cache.getCurrentMarket(request)
638 currentCountry = cache.getCurrentCountry(request)
639
640 htmlC1 = ""
641 htmlC2 = ""
642 htmlC3 = ""
643 htmlAbout = ""
644 htmlCCta = ""
645 />
646
647
648
649 <#-- INIT PROMOTIONAL BANNER -->
650
651 <#if getterUtil.getBoolean(promoBanner.promoBannerShow.getData()) && promoBanner.promoBannerText.getData()??>
652 <div class="promoSubmenu">
653 <section class="promomenu-section">
654 <#if promoBanner.promoBannerPopup.getData()?? && promoBanner.promoBannerPopup.getData()?has_content>
655 <a class="promomenu-link" data-toggle="modal" data-target="#promoBannerDisp" href="#">
656 ${promoBanner.promoBannerText.getData()} 657 </a>
658 <#else>
659 <p class="promomenu-text">${promoBanner.promoBannerText.getData()}</p> 660 </#if>
661 </section>
662 </div>
663 </#if>
664
665 <#-- END PROMOTIONAL BANNER -->
666
667
668
669 <header class="js-header">
670 <#if themeDisplay.isSignedIn()>
671 <input type="hidden" id="user-initials" value="${getUserInitials()}"> 672 </#if>
673
674 <div class="main-header__wrapper">
675
676 <#-- INIT SUPRA MENU -->
677
678 <@initSupraMenus />
679
680 <#if (htmlC1?has_content) || (htmlC2?has_content || getterUtil.getBoolean(config.configAuxElements.configAuxElementsShowCountry.getData()) || getterUtil.getBoolean(config.configAuxElements.configAuxElementsShowLanguage.getData())) || (htmlC3?has_content || htmlCCta?has_content || getterUtil.getBoolean(config.configAuxElements.configAuxElementsShowPrivate.getData()) || getterUtil.getBoolean(config.configAuxElements.configAuxElementsShowCart.getData()))>
681 <section class="supramenu">
682 <div class="container">
683 <div class="row">
684 <div class="col-12 supramenu-cols">
685 <#if htmlC1?has_content>
686 <div class="supramenu-left">
687 <ul class="supramenu__list supramenu__list--left">
688 ${htmlC1} 689 </ul>
690 </div>
691 </#if>
692
693 <#if htmlC2?has_content || getterUtil.getBoolean(config.configAuxElements.configAuxElementsShowCountry.getData()) || getterUtil.getBoolean(config.configAuxElements.configAuxElementsShowLanguage.getData())>
694 <div class="supramenu-center">
695 <ul class="supramenu__list supramenu__list--center">
696 <#if htmlC2?has_content>
697 ${htmlC2} 698 </#if>
699
700
701 <#-- INIT LANGUAGE & COUNTRY SELECTOR -->
702
703 <#if getterUtil.getBoolean(config.configAuxElements.configAuxElementsShowCountry.getData()) || getterUtil.getBoolean(config.configAuxElements.configAuxElementsShowLanguage.getData())>
704 <li class="supramenu__item supramenu__item--country menu-country-trigger">
705 <a class="supramenu__link menu-country-link" href="javascript:void(0)" data-groupid="${themeDisplay.getSiteGroupId()}" data-languageid="${themeDisplay.getLanguageId()}" data-target="country-menu-collapse"> 706 <#if getterUtil.getBoolean(config.configAuxElements.configAuxElementsShowCountry.getData())>
707 <span class="menu-country-text-link">
708 <i class="icon-language icon-right-space"></i>
709 <div><span>${currentCountry.getAssetCategory().getTitle(themeDisplay.getLocale())}</span></div> 710 </span>
711 </#if>
712
713 <#if getterUtil.getBoolean(config.configAuxElements.configAuxElementsShowLanguage.getData())>
714 <span class="menu-country-text-link">
715 <div><span>${themeDisplay.getLocale().getLanguage()}</span></div> 716 <#if localeList?? && localeList?has_content && localeList?size gt 1>
717 <i class="icon-chevron-down icon-size-28"></i>
718 </#if>
719 </span>
720 </#if>
721 </a>
722 </li>
723 </#if>
724
725 <#-- END LANGUAGE & COUNTRY SELECTOR -->
726 </ul>
727 </div>
728 </#if>
729
730 <#if htmlC3?has_content || htmlCCta?has_content || getterUtil.getBoolean(config.configAuxElements.configAuxElementsShowPrivate.getData()) || getterUtil.getBoolean(config.configAuxElements.configAuxElementsShowCart.getData())>
731 <div class="supramenu-right">
732 <ul class="supramenu__list supramenu__list--right">
733 <#if htmlC3?has_content>
734 ${htmlC3} 735 </#if>
736
737 <#if getterUtil.getBoolean(config.configAuxElements.configAuxElementsShowPrivate.getData())>
738 <li id="userMenuLi" title="${cache.translate(locale, "Sign in")}" class="supramenu__item supramenu__item--login" 739 data-group="${themeDisplay.getSiteGroupId()}" 740 data-market="${currentMarket.getCode()}" 741 data-language="${themeDisplay.getLanguageId()}" 742 data-debug="${cache.debugMarginals()?c}" 743 >
744 <div class="loader-roca active">
745 <div class="lds-css">
746 </div>
747 <div class="lds-load">
748 <div></div>
749 <div></div>
750 <div></div>
751 </div>
752 </li>
753 </#if>
754
755
756 <#if getterUtil.getBoolean(config.configAuxElements.configAuxElementsShowCart.getData())>
757 <li class="supramenu__item js-h-cart">
758 <a class="right-menu__link" id="cartIcon" href="${cache.getEcommerceURL(request, "/checkout/cart")}" title="${cache.translate(locale, "Go to cart")}"> 759 <span class="icon-cart"></span>
760 <span class="items-cart">-</span>
761 </a>
762 </li>
763 </#if>
764 </ul>
765
766 <#if htmlCCta?has_content>
767 <div class="supramenu__item--cta">
768 ${htmlCCta} 769 </div>
770 </#if>
771 </div>
772 </#if>
773 </div>
774 </div>
775 </div>
776 </section>
777 </#if>
778
779 <#-- END SUPRA MENU -->
780
781
782
783 <#-- INIT MAIN MENU -->
784
785 <section class="main-nav js-main-nav">
786 <div class="main-nav-container container">
787 <div class="d-flex align-items-center justify-content-between">
788 <div class="logo-search-header">
789
790 <div class="js-h-hamburger menu-trigger">
791 <a href="javascript:void(0)" data-target="main-menu-collapse">
792 <span class="icon-hamburger"></span>
793 </a>
794 </div>
795
796 <#if config.configLogo.configLogoImage.getData()?has_content>
797 <#assign
798 logoImg = config.configLogo.configLogoImage.getData()
799 logoImgWidth = config.configLogo.configLogoWidth.getData()
800 logoImgHeight = config.configLogo.configLogoHeight.getData()
801 link = (config.configLogo.configLogoLink.getData()?has_content)?string(cache.parseLinkURL(request, config.configLogo.configLogoLink.getData()), "")
802 target = (link?has_content)?string((config.configLogo.configLogoTargetLink.getData()?has_content)?string(config.configLogo.configLogoTargetLink.getData(), cache.getLinkTarget(link)), "")
803 />
804
805 <div class="logo-header">
806 <#if link?has_content>
807 <a href="${link}" target="${target}"> 808 </#if>
809
810 <#assign style = "" />
811 <#if logoImgWidth?has_content && logoImgWidth != "0">
812 <#assign style += "width: " + logoImgWidth + "px;" />
813 </#if>
814 <#if logoImgHeight?has_content && logoImgHeight != "0">
815 <#assign style += "height: " + logoImgHeight + "px;" />
816 </#if>
817
818 <img alt="${config.configLogo.configLogoImage.getAttribute("alt")}" data-fileentryid="${config.configLogo.configLogoImage.getAttribute("fileEntryId")}" src="${logoImg}" style="${style}" /> 819 <#if link?has_content>
820 </a>
821 </#if>
822 </div>
823 </#if>
824
825 <#if getterUtil.getBoolean(config.configAuxElements.configAuxElementsShowSearch.getData())>
826 <@drawSearchHeader "desktop" />
827 </#if>
828 </div>
829
830 <nav class="main-menu__wrapper">
831 <@drawDesktopMainMenu />
832
833 <#if htmlC3?has_content || getterUtil.getBoolean(config.configAuxElements.configAuxElementsShowPrivate.getData()) || getterUtil.getBoolean(config.configAuxElements.configAuxElementsShowCart.getData())>
834 <ul class="supramenu__list supramenu__list--right">
835 <#if htmlC3?has_content>
836 ${htmlC3} 837 </#if>
838
839 <#if getterUtil.getBoolean(config.configAuxElements.configAuxElementsShowPrivate.getData())>
840 <li id="mobileUserAreaDiv" title="${cache.translate(locale, "Sign in")}" class="supramenu__item js-submenu"></li> 841 </#if>
842
843
844 <#if getterUtil.getBoolean(config.configAuxElements.configAuxElementsShowCart.getData())>
845 <li class="supramenu__item js-h-cart">
846 <a class="right-menu__link" id="cartIcon" href="${cache.getEcommerceURL(request, "/checkout/cart")}" title="${cache.translate(locale, "Go to cart")}"> 847 <span class="icon-cart"></span>
848 <span class="items-cart">-</span>
849 </a>
850 </li>
851 </#if>
852 </ul>
853 </#if>
854 </nav>
855 </div>
856
857 <#if getterUtil.getBoolean(config.configAuxElements.configAuxElementsShowSearch.getData())>
858 <div class="mobile-search-header">
859 <@drawSearchHeader "mobile" />
860 </div>
861 </#if>
862 </div>
863 </section>
864
865 <div class="r-modal main-menu-collapse">
866 <div class="r-modal__wrapper">
867
868 <@drawMobileMainMenu />
869
870 <#if htmlC1?has_content>
871 <ul class="supramenu__list supramenu__list--left">
872 ${htmlC1} 873 </ul>
874 </#if>
875
876 <#if htmlC2?has_content || htmlAbout?has_content || getterUtil.getBoolean(config.configAuxElements.configAuxElementsShowCountry.getData()) || getterUtil.getBoolean(config.configAuxElements.configAuxElementsShowLanguage.getData())>
877 <ul class="supramenu__list supramenu__list--center">
878 <#if htmlC2?has_content>
879 ${htmlC2} 880 </#if>
881
882
883 <#-- INIT LANGUAGE & COUNTRY SELECTOR -->
884
885 <#if getterUtil.getBoolean(config.configAuxElements.configAuxElementsShowCountry.getData()) || getterUtil.getBoolean(config.configAuxElements.configAuxElementsShowLanguage.getData())>
886 <li class="supramenu__item supramenu__item--country menu-country-trigger">
887 <a class="supramenu__link menu-country-link" href="javascript:void(0)" data-groupid="${themeDisplay.getSiteGroupId()}" data-languageid="${themeDisplay.getLanguageId()}" data-target="country-menu-collapse"> 888 <#if getterUtil.getBoolean(config.configAuxElements.configAuxElementsShowCountry.getData())>
889 <span class="menu-country-text-link">
890 <i class="icon-language icon-right-space"></i>
891 <div><span>${currentCountry.getAssetCategory().getTitle(themeDisplay.getLocale())}</span></div> 892 </span>
893 </#if>
894
895 <#if getterUtil.getBoolean(config.configAuxElements.configAuxElementsShowLanguage.getData())>
896 <span class="menu-country-text-link">
897 <div><span>${themeDisplay.getLocale().getLanguage()}</span></div> 898 <#if localeList?? && localeList?has_content && localeList?size gt 1>
899 <i class="icon-chevron-down icon-size-28"></i>
900 </#if>
901 </span>
902 </#if>
903 </a>
904 </li>
905 </#if>
906
907 <#-- END LANGUAGE & COUNTRY SELECTOR -->
908
909
910 <#if htmlAbout?has_content>
911 ${htmlAbout} 912 </#if>
913 </ul>
914 </#if>
915
916 <#if htmlCCta?has_content>
917 <div class="supramenu__item--cta">
918 ${htmlCCta} 919 </div>
920 </#if>
921 </div>
922 </div>
923
924 <#-- END MAIN MENU -->
925
926
927 <#-- INIT SEARCH MODAL -->
928
929 <div id="rs-search-modal" class="r-modal search-modal"></div>
930
931 <#-- END SEARCH MODAL -->
932
933
934 <#-- INIT LANGUAGE & COUNTRY MODAL -->
935
936 <#if (getterUtil.getBoolean(config.configAuxElements.configAuxElementsShowLanguage.getData()) && localeList?? && localeList?has_content && localeList?size gt 1) || (getterUtil.getBoolean(config.configAuxElements.configAuxElementsShowCountry.getData()) && currentCountry?? && currentCountry?has_content)>
937 <div class="r-modal country-menu-collapse">
938 <div class="close-menu">
939 <div class="wrapper">
940 <a href="javascript:void(0)" class="js-close icon-close"></a>
941 </div>
942 </div>
943 <div class="r-modal__wrapper">
944 <div class="container">
945
946 <#if getterUtil.getBoolean(config.configAuxElements.configAuxElementsShowLanguage.getData()) && localeList?? && localeList?has_content && localeList?size gt 1>
947 <div class="row">
948 <div class="col-12">
949 <h2>${cache.translate(locale, "Select language")}</h2> 950 <ul class="language-list">
951 <#list localeList as marketLocale>
952 <#if themeDisplay.getLocale() != marketLocale>
953 <#assign lpath = "/" />
954 <#if currentCountry?? && currentCountry.code == "ES">
955 <#assign lpath = cache.translate(themeDisplay.getLocale(), "/sobre-roca") />
956 </#if>
957 </#if>
958 <li <#if themeDisplay.getLocale() == marketLocale>class="active"</#if>>
959 <a href="${cache.getSiteURL(request, marketLocale, lpath, false)}"> 960 ${marketLocale.getDisplayLanguage(themeDisplay.getLocale())} 961 </a>
962 </li>
963 </#list>
964 </ul>
965 </div>
966 </div>
967 </#if>
968
969 <#if getterUtil.getBoolean(config.configAuxElements.configAuxElementsShowCountry.getData()) && currentCountry?? && currentCountry?has_content>
970 <div class="row">
971 <div class="col-12">
972 <h2>${cache.translate(locale, "Select your country")}</h2> 973 <a class="international-site" href="https://www.roca.com"><span class="international-site-link">${cache.translate(locale, "International site - Go to website")}</span><span class="icon-arrow-right"></span></a> 974 </div>
975 </div>
976 <div class="row" id="continent-parent"></div>
977 </#if>
978 </div>
979 </div>
980 </div>
981 </#if>
982
983 <#-- END LANGUAGE & COUNTRY MODAL -->
984
985
986 <#-- INIT MINI-CART MODAL -->
987
988 <div class="r-modal mini-cart-collapse">
989 <div class="close-menu">
990 <div class="wrapper">
991 <a href="javascript:void(0)" class="js-close icon-close"></a>
992 </div>
993 </div>
994 <div class="r-modal__wrapper"></div>
995 </div>
996
997 <#-- END MINI-CART MODAL -->
998
999
1000 <#-- INIT PROMOTIONAL BANNER MODAL -->
1001
1002 <#if promoBanner.promoBannerPopup.getData()?? && promoBanner.promoBannerPopup.getData()?has_content>
1003 <div class="lightbox-wrapper">
1004 <div class="modal fade modal-lightbox" id="promoBannerDisp" tabindex="-1" role="dialog" aria-labelledby="" style="display: none;" aria-hidden="true">
1005 <div class="modal-dialog modal-lg" role="document" style="top: 20%;">
1006 <div class="container">
1007 <div class="close-menu">
1008 <div class="wrapper">
1009 <a role="button" data-dismiss="modal" id="promoBannerDisp" class="js-close icon-close"></a>
1010 </div>
1011 </div>
1012 </div>
1013 <div class="r-modal__wrapper">
1014 <div class="container">
1015 <section style="background-color:white !important;" class="form-modal">
1016 <div class="container">
1017 <div class="row">
1018 <div class="col-12 col-md-12 promomenu-modal">
1019 ${promoBanner.promoBannerPopup.getData()} 1020 </div>
1021 </div>
1022 </div>
1023 </section>
1024 </div>
1025 </div>
1026 </div>
1027 </div>
1028 </div>
1029 </#if>
1030
1031 <#-- END PROMOTIONAL BANNER MODAL -->
1032 </div>
1033 </header>
1034</#if>