Se ha producido un error al procesar la plantilla.
The following has evaluated to null or missing:
==> BannerPaginaModelo.TituloBannerModelo.ColorTextoBanner [in template "44292#44331#726894" at line 56, column 69]
----
Tip: It's the step after the last dot that caused this error, not those before it.
----
Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
----
----
FTL stack trace ("~" means nesting-related):
- Failed at: ${BannerPaginaModelo.TituloBannerMode... [in template "44292#44331#726894" at line 56, column 67]
----
1<script src="https://www.youtube.com/iframe_api"></script>
2<style>
3 .text-black {
4 color: #000 !important;
5 }
6 .row-caracteristica {
7 font-family: var(--wb-font-text);
8 color:var(--wb-white);
9 display: flex;
10 flex-wrap: wrap;
11 margin: 40px 35px;
12 }
13 @media (min-width: 990px){
14 .row-caracteristica {
15 margin: 40px 125px;
16 }
17 }
18 .caracter-label{
19 font-size: 16px;
20 min-height: 24px;
21 }
22 .caracter-value{
23 font-family: var(--wb-font-title);
24 font-size: 48px;
25 }
26
27 .banner-contenido .texto-contenido .texto-container{
28 width:25% !important;
29 }
30 .caracter-desc{
31 font-size: 12px;
32 }
33</style>
34
35<div class="bg-black">
36 <div class="row-banner">
37 <#if (BannerPaginaModelo.getData())?? && BannerPaginaModelo.getData() != "">
38 <div class="banner">
39 <img class="img-responsive banner-desktop" src="${BannerPaginaModelo.getData()}" alt="${BannerPaginaModelo.getAttribute("alt")}" />
40 <#if (BannerPaginaModelo.BannerPaginaModeloMobile.getData())?? && BannerPaginaModelo.BannerPaginaModeloMobile.getData() != "">
41 <img class="img-responsive banner-mobile" src="${BannerPaginaModelo.BannerPaginaModeloMobile.getData()}" alt="${BannerPaginaModelo.BannerPaginaModeloMobile.getAttribute("alt")}" />
42
43
44 <#else>
45
46 <#if (BannerPaginaModelo.getData())?? && BannerPaginaModelo.getData() != "">
47 <img class="img-responsive banner-mobile" src="${BannerPaginaModelo.getData()}" alt="${BannerPaginaModelo.getAttribute("alt")}" />
48
49 </#if>
50 </#if>
51 </div>
52 <div class="banner-contenido-container">
53 <div class="banner-contenido">
54 <div class="texto-contenido">
55 <div class="texto-container">
56 <h1 class="titulo-l texto-titulo text-${BannerPaginaModelo.TituloBannerModelo.ColorTextoBanner.getData()}"><p>${BannerPaginaModelo.TituloBannerModelo.getData()}</p></h1>
57 <h2 class="parrafo texto-subtitulo text-${BannerPaginaModelo.TituloBannerModelo.ColorTextoBanner.getData()}"><p>${BannerPaginaModelo.TituloBannerModelo.SubtituloBannerModelo.getData()}</p></h2>
58
59 <#if (BannerPaginaModelo.TituloBannerModelo.SubtituloBannerModelo2.getData())?? && BannerPaginaModelo.TituloBannerModelo.SubtituloBannerModelo2.getData() != "">
60 <div class="texto-sub-leyend d-xl-none d-lg-none"> ${BannerPaginaModelo.TituloBannerModelo.SubtituloBannerModelo2.getData()}</div>
61 </#if>
62 </div>
63 </div>
64 <div class="slider-botones-contenido">
65 <div class="botones-contenido">
66 <div class="botones-container">
67 <#if (BannerPaginaModelo.TextoBotonBannerModelo.getData())?? && BannerPaginaModelo.TextoBotonBannerModelo.getData() != "" && (BannerPaginaModelo.TextoBotonBannerModelo.LinkTextoBotonBannerModelo.getData())?? && BannerPaginaModelo.TextoBotonBannerModelo.LinkTextoBotonBannerModelo.getData() != "" >
68 <a target="_blank" href="${BannerPaginaModelo.TextoBotonBannerModelo.LinkTextoBotonBannerModelo.getData()}" onclick="layerModeloDetalleCotizarClick('${BannerPaginaModelo.TextoBotonBannerModelo.getData()}')" class="parrafo boton-primario">${BannerPaginaModelo.TextoBotonBannerModelo.getData()}</a>
69 </#if>
70 </div>
71 </div>
72 </div>
73 </div>
74 </div>
75 </#if>
76 </div>
77 <div class="row-caracteristica">
78 <div class="col-sm-3">
79 <div class="col-sm-12 caracter-label"><#if (CaracterísticaModelo.caracteristica1.caracteristica_label_1.getData())??>${CaracterísticaModelo.caracteristica1.caracteristica_label_1.getData()}</#if></div>
80 <div class="col-sm-12 caracter-value"><#if (CaracterísticaModelo.caracteristica1.caracteristica_value_1.getData())??>${CaracterísticaModelo.caracteristica1.caracteristica_value_1.getData()}</#if></div>
81 <div class="col-sm-12 caracter-desc"><#if (CaracterísticaModelo.caracteristica1.caracteristica_descripcion_1.getData())??>${CaracterísticaModelo.caracteristica1.caracteristica_descripcion_1.getData()}</#if></div>
82 </div>
83 <div class="col-sm-3">
84 <div class="col-sm-12 caracter-label"><#if (CaracterísticaModelo.caracteristica2.caracteristica_label_2.getData())??>${CaracterísticaModelo.caracteristica2.caracteristica_label_2.getData()}</#if></div>
85 <div class="col-sm-12 caracter-value"><#if (CaracterísticaModelo.caracteristica2.caracteristica_value_2.getData())??>${CaracterísticaModelo.caracteristica2.caracteristica_value_2.getData()}</#if></div>
86 <div class="col-sm-12 caracter-desc"><#if (CaracterísticaModelo.caracteristica2.caracteristica_descripcion_2.getData())??>${CaracterísticaModelo.caracteristica2.caracteristica_descripcion_2.getData()}</#if></div>
87 </div>
88 <div class="col-sm-3">
89 <div class="col-sm-12 caracter-label"><#if (CaracterísticaModelo.caracteristica3.caracteristica_label_3.getData())??>${CaracterísticaModelo.caracteristica3.caracteristica_label_3.getData()}</#if></div>
90 <div class="col-sm-12 caracter-value"><#if (CaracterísticaModelo.caracteristica3.caracteristica_value_3.getData())??>${CaracterísticaModelo.caracteristica3.caracteristica_value_3.getData()}</#if></div>
91 <div class="col-sm-12 caracter-desc"><#if (CaracterísticaModelo.caracteristica3.caracteristica_descripcion_3.getData())??>${CaracterísticaModelo.caracteristica3.caracteristica_descripcion_3.getData()}</#if></div>
92 </div>
93 <div class="col-sm-3">
94 <div class="col-sm-12 caracter-label"><#if (CaracterísticaModelo.caracteristica4.caracteristica_label_4.getData())??>${CaracterísticaModelo.caracteristica4.caracteristica_label_4.getData()}</#if></div>
95 <div class="col-sm-12 caracter-value"><#if (CaracterísticaModelo.caracteristica4.caracteristica_value_4.getData())??>${CaracterísticaModelo.caracteristica4.caracteristica_value_4.getData()}</#if></div>
96 <div class="col-sm-12 caracter-desc"><#if (CaracterísticaModelo.caracteristica4.caracteristica_descripcion_4.getData())??>${CaracterísticaModelo.caracteristica4.caracteristica_descripcion_4.getData()}</#if></div>
97 </div>
98 </div>
99
100 <div class="row-filtro">
101 <div class="filtro-container">
102 <#if TituloContenidoPaginaModelo.getSiblings()?has_content>
103 <ul>
104 <#list TituloContenidoPaginaModelo.getSiblings() as cur_TituloContenidoPaginaModelo>
105 <#if (cur_TituloContenidoPaginaModelo.getData())?? && cur_TituloContenidoPaginaModelo.getData() != "">
106 <li><a class="parrafo filtro-item" href="#${cur_TituloContenidoPaginaModelo.getData()?lower_case}" onclick="layerModeloDetalleClick('${cur_TituloContenidoPaginaModelo.getData()}', '${BannerPaginaModelo.TituloBannerModelo.getData()}')">${cur_TituloContenidoPaginaModelo.getData()}</a></li>
107 </#if>
108 </#list>
109 <#if getterUtil.getBoolean(GaleriaExterior.getData()) || getterUtil.getBoolean(GaleriaInterior.getData())>
110 <li><a class="parrafo filtro-item" href="#galeria" onclick="layerModeloDetalleClick('galeria', '${BannerPaginaModelo.TituloBannerModelo.getData()}')">Galería</a></li>
111 </#if>
112 <#if getterUtil.getBoolean(VersionesModelo.getData()) || ((CatalogoModelo.getData())?? && CatalogoModelo.getData() != "")>
113 <li><a class="parrafo filtro-item" href="#versiones" onclick="layerModeloDetalleClick('versiones', '${BannerPaginaModelo.TituloBannerModelo.getData()}')">Versiones</a></li>
114 </#if>
115 </ul>
116 </#if>
117 </div>
118 </div>
119 <div class="row-video">
120 <#if (VideoPaginaModelo.getData())?? && VideoPaginaModelo.getData() != "">
121 <div id="yt_${VideoPaginaModelo.getData()?replace("-","_")}_principal" class="iframe_landing" ></div>
122
123 </#if>
124 </div>
125 <div class="row-contenido">
126 <#if TituloContenidoPaginaModelo.getSiblings()?has_content>
127 <#list TituloContenidoPaginaModelo.getSiblings() as cur_TituloContenidoPaginaModelo>
128 <#if cur_TituloContenidoPaginaModelo.DireccionContenidoPaginaModelo.getData() == "1">
129 <div class="landing_info" <#if (cur_TituloContenidoPaginaModelo.getData())?? && cur_TituloContenidoPaginaModelo.getData() != "">id="${cur_TituloContenidoPaginaModelo.getData()?lower_case}"</#if>>
130 <#if (cur_TituloContenidoPaginaModelo.getData())?? && cur_TituloContenidoPaginaModelo.getData() != "">
131 <h2 class="w-100 titulo-separador titulo titulo-seccion">${cur_TituloContenidoPaginaModelo.getData()}</h2>
132 </#if>
133 <#if (cur_TituloContenidoPaginaModelo.SubtituloContenidoPaginaModelo.getData())?? && cur_TituloContenidoPaginaModelo.SubtituloContenidoPaginaModelo.getData() != "">
134 <h2 class="w-100 titulo-m titulo-seccion">${cur_TituloContenidoPaginaModelo.SubtituloContenidoPaginaModelo.getData()}</h2>
135 </#if>
136 <div class="col-sm-12 col-lg-6 pl-0 pr-0">
137 <#if cur_TituloContenidoPaginaModelo.TipoContenidoPaginaModelo.getData() == "1">
138 <#if (cur_TituloContenidoPaginaModelo.ImagenContenidoPaginaModelo.getData())?? && cur_TituloContenidoPaginaModelo.ImagenContenidoPaginaModelo.getData() != "">
139 <img src="${cur_TituloContenidoPaginaModelo.ImagenContenidoPaginaModelo.getData()}" alt="${cur_TituloContenidoPaginaModelo.ImagenContenidoPaginaModelo.getAttribute("alt")}" />
140 </#if>
141 <#elseif cur_TituloContenidoPaginaModelo.TipoContenidoPaginaModelo.getData() == "2">
142 <#if (cur_TituloContenidoPaginaModelo.VideoContenidoPaginaModelo.getData())?? && cur_TituloContenidoPaginaModelo.VideoContenidoPaginaModelo.getData() != "">
143 <!--iframe class="iframe_landing_card" src="https://www.youtube.com/embed/${cur_TituloContenidoPaginaModelo.VideoContenidoPaginaModelo.getData()}" title="YouTube video" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe-->
144 <div id="yt_${cur_TituloContenidoPaginaModelo.VideoContenidoPaginaModelo.getData()?replace("-","_")}"></div>
145 </#if>
146 </#if>
147 </div>
148 <div class="col-sm-12 col-lg-6 izquierda">
149 <#if cur_TituloContenidoPaginaModelo.TextoContenidoPaginaModelo.getSiblings()?has_content>
150 <#list cur_TituloContenidoPaginaModelo.TextoContenidoPaginaModelo.getSiblings() as cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo>
151 <#if cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo.TipoTexto.getData() == "1" >
152 <h2 class="titulo information-title <#if getterUtil.getBoolean(cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo.DestacarTexto.getData())>destacar</#if>">${cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo.getData()}</h2>
153 <#elseif cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo.TipoTexto.getData() == "2" >
154 <h4 class="subtitulo information-subtitle <#if getterUtil.getBoolean(cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo.DestacarTexto.getData())>destacar</#if>">${cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo.getData()}</h4>
155 <#elseif cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo.TipoTexto.getData() == "3" >
156 <ul class="ml-4">
157 <#if cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo.TextoItemLista.getSiblings()?has_content>
158 <#list cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo.TextoItemLista.getSiblings() as cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo_TextoItemLista>
159 <li class="parrafo <#if getterUtil.getBoolean(cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo.DestacarTexto.getData())>destacar</#if>">${cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo_TextoItemLista.getData()}</li>
160 </#list>
161 </#if>
162 </ul><br>
163 <#elseif cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo.TipoTexto.getData() == "4" >
164 ${cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo.getData()}
165 <#elseif cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo.TipoTexto.getData() == "5" >
166 <small>${cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo.getData()}</small>
167 </#if>
168 </#list>
169 </#if>
170 </div>
171 </div>
172 <#elseif cur_TituloContenidoPaginaModelo.DireccionContenidoPaginaModelo.getData() == "2">
173 <div class="landing_info" <#if (cur_TituloContenidoPaginaModelo.getData())?? && cur_TituloContenidoPaginaModelo.getData() != "">id="${cur_TituloContenidoPaginaModelo.getData()?lower_case}"</#if>>
174 <#if (cur_TituloContenidoPaginaModelo.getData())?? && cur_TituloContenidoPaginaModelo.getData() != "">
175 <h2 class="w-100 titulo-separador titulo titulo-seccion">${cur_TituloContenidoPaginaModelo.getData()}</h2>
176 </#if>
177 <#if (cur_TituloContenidoPaginaModelo.SubtituloContenidoPaginaModelo.getData())?? && cur_TituloContenidoPaginaModelo.SubtituloContenidoPaginaModelo.getData() != "">
178 <h2 class="w-100 titulo-m titulo-seccion">${cur_TituloContenidoPaginaModelo.SubtituloContenidoPaginaModelo.getData()}</h2>
179 </#if>
180 <div class="col-sm-12 col-lg-6 derecha">
181 <#if cur_TituloContenidoPaginaModelo.TextoContenidoPaginaModelo.getSiblings()?has_content>
182 <#list cur_TituloContenidoPaginaModelo.TextoContenidoPaginaModelo.getSiblings() as cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo>
183 <#if cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo.TipoTexto.getData() == "1" >
184 <h2 class="titulo information-title <#if getterUtil.getBoolean(cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo.DestacarTexto.getData())>destacar</#if>">${cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo.getData()}</h2>
185 <#elseif cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo.TipoTexto.getData() == "2" >
186 <h4 class="subtitulo information-subtitle <#if getterUtil.getBoolean(cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo.DestacarTexto.getData())>destacar</#if>">${cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo.getData()}</h4>
187 <#elseif cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo.TipoTexto.getData() == "3" >
188 <ul class="ml-4">
189 <#if cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo.TextoItemLista.getSiblings()?has_content>
190 <#list cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo.TextoItemLista.getSiblings() as cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo_TextoItemLista>
191 <li class="parrafo <#if getterUtil.getBoolean(cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo.DestacarTexto.getData())>destacar</#if>">${cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo_TextoItemLista.getData()}</li>
192 </#list>
193 </#if>
194 </ul><br>
195 <#elseif cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo.TipoTexto.getData() == "4" >
196 ${cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo.getData()}
197 <#elseif cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo.TipoTexto.getData() == "5" >
198 <small>${cur_TituloContenidoPaginaModelo_TextoContenidoPaginaModelo.getData()}</small>
199 </#if>
200 </#list>
201 </#if>
202 </div>
203 <div class="col-sm-12 col-lg-6 pl-0 pr-0">
204 <#if cur_TituloContenidoPaginaModelo.TipoContenidoPaginaModelo.getData() == "1">
205 <#if (cur_TituloContenidoPaginaModelo.ImagenContenidoPaginaModelo.getData())?? && cur_TituloContenidoPaginaModelo.ImagenContenidoPaginaModelo.getData() != "">
206 <img src="${cur_TituloContenidoPaginaModelo.ImagenContenidoPaginaModelo.getData()}" alt="${cur_TituloContenidoPaginaModelo.ImagenContenidoPaginaModelo.getAttribute("alt")}" />
207 </#if>
208 <#elseif cur_TituloContenidoPaginaModelo.TipoContenidoPaginaModelo.getData() == "2">
209 <#if (cur_TituloContenidoPaginaModelo.VideoContenidoPaginaModelo.getData())?? && cur_TituloContenidoPaginaModelo.VideoContenidoPaginaModelo.getData() != "">
210 <!--iframe class="iframe_landing_card" src="https://www.youtube.com/embed/${cur_TituloContenidoPaginaModelo.VideoContenidoPaginaModelo.getData()}" title="YouTube video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe-->
211 <div id="yt_${cur_TituloContenidoPaginaModelo.VideoContenidoPaginaModelo.getData()?replace("-","_")}"></div>
212 </#if>
213 </#if>
214 </div>
215 </div>
216 </#if>
217 </#list>
218 </#if>
219 </div>
220 <div class="row-navegacion-galeria" id="galeria">
221 <h2 class="w-100 titulo-separador titulo titulo-seccion">Galería</h2>
222 <nav class="new-gle-tab mt-3">
223 <div class="nav nav-tabs" id="nav-tab" role="tablist">
224 <a aria-controls="nav-exterior" aria-selected="false" class="titulo-m nav-item nav-link active" data-toggle="tab" href="#nav-exterior" id="nav-exterior-tab" role="tab" onclick="layerModeloDetalleClickGaleriaExt('${BannerPaginaModelo.TituloBannerModelo.getData()}', 'galeria - exterior')">Exterior</a>
225 <a aria-controls="nav-interior" aria-selected="true" class="titulo-m nav-item nav-link" data-toggle="tab" href="#nav-interior" id="nav-interior-tab" role="tab" onclick="layerModeloDetalleClickGaleriaInt('${BannerPaginaModelo.TituloBannerModelo.getData()}', 'galeria - interior')">Interior</a>
226 </div>
227 </nav>
228 </div>
229 <div class="row-galeria">
230 <div>
231 <#if getterUtil.getBoolean(GaleriaExterior.getData())>
232 <div aria-labelledby="nav-exterior-tab" class="tab-pane fade exterior-desktop active show" id="nav-exterior" role="tabpanel">
233 <div class="container pr-0 pl-0 galeria-desktop">
234 <div class="row">
235 <div class="gallery-content exterior-desktop">
236 <div class="col-sm-12 col-md-8 first-new pl-0 pr-0">
237 <#if (GaleriaExterior.ImagenPrincipalExteriorGaleria.getData())?? && GaleriaExterior.ImagenPrincipalExteriorGaleria.getData() != "">
238 <img src="${GaleriaExterior.ImagenPrincipalExteriorGaleria.getData()}" onclick="showModal('galeria-exterior-1')"
239 alt="${GaleriaExterior.ImagenPrincipalExteriorGaleria.getAttribute("alt")}"/>
240 </#if>
241 </div>
242 <div class="col-sm-12 col-md-4 pr-0">
243 <div class="col-sm-12 col-md-12 mb-2 pl-0 pr-0">
244 <#if (GaleriaExterior.ImagenSecundariaExteriorGaleria.getData())?? && GaleriaExterior.ImagenSecundariaExteriorGaleria.getData() != "">
245 <img src="${GaleriaExterior.ImagenSecundariaExteriorGaleria.getData()}" onclick="showModal('galeria-exterior-2')"
246 alt="${GaleriaExterior.ImagenSecundariaExteriorGaleria.getAttribute("alt")}"/>
247 </#if>
248 </div>
249 <div class="col-sm-12 col-md-10 pl-0 pr-0">
250 <#if (GaleriaExterior.ImagenTerciariaExteriorGaleria.getData())?? && GaleriaExterior.ImagenTerciariaExteriorGaleria.getData() != "">
251 <img src="${GaleriaExterior.ImagenTerciariaExteriorGaleria.getData()}" onclick="showModal('galeria-exterior-3')"
252 alt="${GaleriaExterior.ImagenTerciariaExteriorGaleria.getAttribute("alt")}"/>
253 </#if>
254 </div>
255 </div>
256 </div>
257 </div>
258 </div>
259 <div class="container pr-0 pl-0 galeria-mobile exterior">
260 <div>
261 <#if (GaleriaExterior.ImagenPrincipalExteriorGaleria.ImagenPrincipalExteriorMobile.getData())?? && GaleriaExterior.ImagenPrincipalExteriorGaleria.ImagenPrincipalExteriorMobile.getData() != "">
262 <img src="${GaleriaExterior.ImagenPrincipalExteriorGaleria.ImagenPrincipalExteriorMobile.getData()}" onclick="showModal('galeria-exterior-1')" style="max-width: 100%;"
263 alt="${GaleriaExterior.ImagenPrincipalExteriorGaleria.getAttribute("alt")}"/>
264 <#else>
265 <#if (GaleriaExterior.ImagenPrincipalExteriorGaleria.getData())?? && GaleriaExterior.ImagenPrincipalExteriorGaleria.getData() != "">
266 <img src="${GaleriaExterior.ImagenPrincipalExteriorGaleria.getData()}" onclick="showModal('galeria-exterior-1')"
267 alt="${GaleriaExterior.ImagenPrincipalExteriorGaleria.getAttribute("alt")}"/>
268 </#if>
269 </#if>
270 </div>
271 <div>
272 <#if (GaleriaExterior.ImagenSecundariaExteriorGaleria.ImagenSecundariaExteriorMobile.getData())?? && GaleriaExterior.ImagenSecundariaExteriorGaleria.ImagenSecundariaExteriorMobile.getData() != "">
273 <img src="${GaleriaExterior.ImagenSecundariaExteriorGaleria.ImagenSecundariaExteriorMobile.getData()}" onclick="showModal('galeria-exterior-2')" style="max-width: 100%;"
274 alt="${GaleriaExterior.ImagenSecundariaExteriorGaleria.getAttribute("alt")}"/>
275 <#else>
276
277 <#if (GaleriaExterior.ImagenSecundariaExteriorGaleria.getData())?? && GaleriaExterior.ImagenSecundariaExteriorGaleria.getData() != "">
278 <img src="${GaleriaExterior.ImagenSecundariaExteriorGaleria.getData()}" onclick="showModal('galeria-exterior-2')"
279 alt="${GaleriaExterior.ImagenSecundariaExteriorGaleria.getAttribute("alt")}"/>
280 </#if>
281 </#if>
282 </div>
283 <div>
284 <#if (GaleriaExterior.ImagenTerciariaExteriorGaleria.ImagenTerciariaExteriorMobile.getData())?? && GaleriaExterior.ImagenTerciariaExteriorGaleria.ImagenTerciariaExteriorMobile.getData() != "">
285 <img src="${GaleriaExterior.ImagenTerciariaExteriorGaleria.ImagenTerciariaExteriorMobile.getData()}" onclick="showModal('galeria-exterior-3')" style="max-width: 100%;"
286 alt="${GaleriaExterior.ImagenTerciariaExteriorGaleria.getAttribute("alt")}"/>
287 <#else>
288
289 <#if (GaleriaExterior.ImagenTerciariaExteriorGaleria.getData())?? && GaleriaExterior.ImagenTerciariaExteriorGaleria.getData() != "">
290 <img src="${GaleriaExterior.ImagenTerciariaExteriorGaleria.getData()}" onclick="showModal('galeria-exterior-3')"
291 alt="${GaleriaExterior.ImagenTerciariaExteriorGaleria.getAttribute("alt")}"/>
292 </#if>
293 </#if>
294 </div>
295 </div>
296 </div>
297 </#if>
298 <#if getterUtil.getBoolean(GaleriaInterior.getData())>
299 <div aria-labelledby="nav-interior-tab" class="tab-pane fade interior-desktop" id="nav-interior" role="tabpanel">
300 <div class="container pr-0 pl-0 galeria-desktop">
301 <div class="row">
302 <div class="gallery-content interior-desktop">
303 <div class="col-sm-12 col-md-8 first-new pl-0 pr-0">
304 <#if (GaleriaInterior.ImagenPrincipalInteriorGaleria.getData())?? && GaleriaInterior.ImagenPrincipalInteriorGaleria.getData() != "">
305 <img src="${GaleriaInterior.ImagenPrincipalInteriorGaleria.getData()}" onclick="showModal('galeria-interior-1')"
306 alt="${GaleriaInterior.ImagenPrincipalInteriorGaleria.getAttribute("alt")}"/>
307 </#if>
308 </div>
309 <div class="col-sm-12 col-md-4 pr-0">
310 <div class="col-sm-12 col-md-12 mb-2 pl-0 pr-0">
311 <#if (GaleriaInterior.ImagenSecundariaInteriorGaleria.getData())?? && GaleriaInterior.ImagenSecundariaInteriorGaleria.getData() != "">
312 <img src="${GaleriaInterior.ImagenSecundariaInteriorGaleria.getData()}" onclick="showModal('galeria-interior-2')"
313 alt="${GaleriaInterior.ImagenSecundariaInteriorGaleria.getAttribute("alt")}"/>
314 </#if>
315 </div>
316 <div class="col-sm-12 col-md-10 pl-0 pr-0">
317 <#if (GaleriaInterior.ImagenTerciariaInteriorGaleria.getData())?? && GaleriaInterior.ImagenTerciariaInteriorGaleria.getData() != "">
318 <img src="${GaleriaInterior.ImagenTerciariaInteriorGaleria.getData()}" onclick="showModal('galeria-interior-3')"
319 alt="${GaleriaInterior.ImagenTerciariaInteriorGaleria.getAttribute("alt")}"/>
320 </#if>
321 </div>
322 </div>
323 </div>
324 </div>
325 </div>
326 <div class="container pr-0 pl-0 galeria-mobile interior">
327 <div>
328 <#if (GaleriaInterior.ImagenPrincipalInteriorGaleria.ImagenPrincipalInteriorMobile.getData())?? && GaleriaInterior.ImagenPrincipalInteriorGaleria.ImagenPrincipalInteriorMobile.getData() != "">
329 <img src="${GaleriaInterior.ImagenPrincipalInteriorGaleria.ImagenPrincipalInteriorMobile.getData()}" onclick="showModal('galeria-interior-1')" style="max-width: 100%;"
330 alt="${GaleriaInterior.ImagenPrincipalInteriorGaleria.getAttribute("alt")}"/>
331 <#else>
332
333 <#if (GaleriaInterior.ImagenPrincipalInteriorGaleria.getData())?? && GaleriaInterior.ImagenPrincipalInteriorGaleria.getData() != "">
334 <img src="${GaleriaInterior.ImagenPrincipalInteriorGaleria.getData()}" onclick="showModal('galeria-interior-1')"
335 alt="${GaleriaInterior.ImagenPrincipalInteriorGaleria.getAttribute("alt")}"/>
336 </#if>
337 </#if>
338 </div>
339 <div>
340 <#if (GaleriaInterior.ImagenSecundariaInteriorGaleria.ImagenSecundariaInteriorMobile.getData())?? && GaleriaInterior.ImagenSecundariaInteriorGaleria.ImagenSecundariaInteriorMobile.getData() != "">
341 <img src="${GaleriaInterior.ImagenSecundariaInteriorGaleria.ImagenSecundariaInteriorMobile.getData()}" onclick="showModal('galeria-interior-2')" style="max-width: 100%;"
342 alt="${GaleriaInterior.ImagenSecundariaInteriorGaleria.getAttribute("alt")}"/>
343 <#else>
344
345 <#if (GaleriaInterior.ImagenSecundariaInteriorGaleria.getData())?? && GaleriaInterior.ImagenSecundariaInteriorGaleria.getData() != "">
346 <img src="${GaleriaInterior.ImagenSecundariaInteriorGaleria.getData()}" onclick="showModal('galeria-interior-2')"
347 alt="${GaleriaInterior.ImagenSecundariaInteriorGaleria.getAttribute("alt")}"/>
348 </#if>
349 </#if>
350 </div>
351 <div>
352 <#if (GaleriaInterior.ImagenTerciariaInteriorGaleria.ImagenTerciariaInteriorMobile.getData())?? && GaleriaInterior.ImagenTerciariaInteriorGaleria.ImagenTerciariaInteriorMobile.getData() != "">
353 <img src="${GaleriaInterior.ImagenTerciariaInteriorGaleria.ImagenTerciariaInteriorMobile.getData()}" onclick="showModal('galeria-interior-3')" style="max-width: 100%;"
354 alt="${GaleriaInterior.ImagenTerciariaInteriorGaleria.getAttribute("alt")}"/>
355 <#else>
356
357 <#if (GaleriaInterior.ImagenTerciariaInteriorGaleria.getData())?? && GaleriaInterior.ImagenTerciariaInteriorGaleria.getData() != "">
358 <img src="${GaleriaInterior.ImagenTerciariaInteriorGaleria.getData()}" onclick="showModal('galeria-interior-3')"
359 alt="${GaleriaInterior.ImagenTerciariaInteriorGaleria.getAttribute("alt")}"/>
360 </#if>
361 </#if>
362 </div>
363 </div>
364 </div>
365 </#if>
366 </div>
367 </div>
368 <div class="row-versiones" id="versiones">
369 <#if getterUtil.getBoolean(VersionesModelo.getData()) || ((CatalogoModelo.getData())?? && CatalogoModelo.getData() != "") >
370 <h4 class="w-100 titulo-separador titulo titulo-seccion">Versiones</h4>
371 <div class="content-container">
372 <div class="col-lg-8 col-xs-12">
373 <h3 class="titulo">Conoce las diferentes versiones que tenemos para ti</h3>
374 </div>
375 <div class="col-lg-4 col-xs-12">
376 <#if (VersionesModelo.TextoVersionesModelo.LinkTextoBotonVersiones.getData())?? && VersionesModelo.TextoVersionesModelo.LinkTextoBotonVersiones.getData() != "">
377 <a class="parrafo content-button" data-senna-off="true" onclick="layerModeloDetalleClick('${VersionesModelo.TextoVersionesModelo.getData()}', '${BannerPaginaModelo.TituloBannerModelo.getData()}'); goToLink('${VersionesModelo.TextoVersionesModelo.LinkTextoBotonVersiones.getData()}')" href="${VersionesModelo.TextoVersionesModelo.LinkTextoBotonVersiones.getData()}">${VersionesModelo.TextoVersionesModelo.getData()}</a>
378 </#if>
379 <#if (CatalogoModelo.getData())?? && CatalogoModelo.getData() != "">
380 <a class="parrafo content-button catalogo" onclick="layerModeloDetalleClick('descargar catalogo', '${BannerPaginaModelo.TituloBannerModelo.getData()}')" target="_blank" href="${CatalogoModelo.getData()}">Descargar Catálogo</a>
381 </#if>
382 </div>
383 </div>
384 </#if>
385 </div>
386
387 <#assign journalArticleLocalService =serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService") />
388 <#assign assetLinkLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetLinkLocalService") />
389 <#assign assetEntryLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetEntryLocalService") />
390
391 <#assign currentArticle = journalArticleLocalService.getArticle(groupId, .vars['reserved-article-id'].data) />
392 <#assign currentArticleResourcePrimKey = currentArticle.getResourcePrimKey() />
393 <#assign currentArticleAssetEntry = assetEntryLocalService.getEntry("com.liferay.journal.model.JournalArticle", currentArticleResourcePrimKey) />
394 <#assign currentArticleAssetEntryId = currentArticleAssetEntry.getEntryId() />
395 <#assign currentArticleRelatedLinks = assetLinkLocalService.getDirectLinks(currentArticleAssetEntryId) />
396
397 <#if currentArticleRelatedLinks?has_content>
398 <#if (currentArticleRelatedLinks?size>1)>
399 <script src="/documents/44327/46594481/slick.js/10a8c99c-884e-322e-9c0b-368a051a6cd4?t=1711146880614" type="text/javascript"></script>
400 </#if>
401
402 <div class="row-slider-cars">
403 <div id="slider-cars" class="related-content-slider">
404 <#list currentArticleRelatedLinks as related_entry>
405 <#assign relatedAssetEntryId = related_entry.getEntryId2() />
406 <#assign relatedAssetEntry = assetEntryLocalService.getEntry(relatedAssetEntryId) />
407 <#assign relatedAssetEntryPrimKey = relatedAssetEntry.getClassPK() />
408 <#assign relatedArticle = journalArticleLocalService.getLatestArticle(relatedAssetEntryPrimKey) />
409
410 <div class="slick-card-container">
411 <@liferay_journal["journal-article"] articleId=relatedArticle.getArticleId() ddmTemplateKey="P_MODELO_RELATED_CARD" groupId=relatedArticle.getGroupId() />
412 </div>
413 </#list>
414 </div>
415 </div>
416
417 <style>
418 .related-content-slider {
419 margin-top: 2rem;
420 padding-bottom: 3rem;
421 }
422 .slick-slider {
423 position: relative;
424 }
425 .slick-initialized .slick-slide {
426 display: block;
427 float:left;
428 }
429 ul.slick-dots {
430 display: block !important;
431 width: 100%;
432 padding: 5px 0 0;
433 margin: 0;
434 list-style: none;
435 text-align: center;
436 position: absolute;
437 bottom: 10px;
438 }
439 ul.slick-dots li {
440 position: relative;
441 display: inline-block;
442 width: 20px;
443 height: 20px;
444 margin: 0 5px;
445 padding: 0;
446 cursor: pointer;
447 }
448 .slick-dots li button {
449 font-size: 0;
450 line-height: 0;
451 display: block;
452 width: 20px;
453 height: 20px;
454 padding: 5px;
455 cursor: pointer;
456 color: transparent;
457 border: 0;
458 outline: none;
459 background: transparent;
460 }
461 .slick-dots li button:before {
462 font-size: 3rem;
463 line-height: 20px;
464 position: absolute;
465 top: 0;
466 left: 0;
467 width: 20px;
468 height: 20px;
469 content: '•';
470 text-align: center;
471 opacity: .25;
472 color: var(--wb-white);
473 -webkit-font-smoothing: antialiased;
474 -moz-osx-font-smoothing: grayscale;
475 transition: all .3s ease;
476 }
477 .slick-dots li.slick-active button:before {
478 opacity: .75;
479 color: var(--wb-blue-45);
480 }
481 .slick-dots li button:hover:before, .slick-dots li button:focus:before {
482 opacity: 1;
483 }
484
485 .related-content-slider .slick-track {
486 display: flex;
487 justify-content: space-between;
488 }
489 .slick-card-container {
490 flex: 1;
491 }
492 .slick-card-container > div {
493 height: 100%;
494 }
495 .slick-card {
496 align-items: center;
497 column-gap: 1.5rem;
498 display: flex;
499 height: 100%;
500 }
501 .slick-imagen {
502 flex: 0 0 30%;
503 height: 100%;
504 max-width: 30%;
505 }
506 .slick-imagen img {
507 height: 100%;
508 min-height: 301.5px;
509 object-fit: cover;
510 }
511 .slick-texto p {
512 color: var(--wb-white);
513 font-family: var(--wb-font-text);
514 font-size: 18px;
515 }
516 .slick-btn {
517 align-items: center;
518 display: inline-flex;
519 justify-content: center;
520 max-width: fit-content;
521 }
522 .boton-slick {
523 background-color: var(--wb-blue-45);
524 border: 1px solid var(--wb-blue-45);
525 color: var(--wb-white);
526 font-family: var(--wb-font-text);
527 font-size: 1rem;
528 padding: 1rem 2rem;
529 transition: all .3s ease;
530 }
531 .boton-slick:hover {
532 background-color: var(--wb-blue-25);
533 color: var(--wb-white);
534 }
535 .related-content-slider > ul.slick-dots {
536 bottom: 1rem;
537 }
538
539 @media(max-width: 990px) {
540 .slick-card {
541 flex-direction: column;
542 row-gap: 1.5rem;
543 }
544 .slick-imagen {
545 max-width: 100%;
546 }
547 .slick-parrafo {
548 width: 100%;
549 }
550 .slick-texto p {
551 margin-bottom: .5rem;
552 }
553 .slick-btn {
554 margin-top: .5rem !important;
555 max-width: 100%;
556 width: 100%;
557 }
558 .boton-slick {
559 text-align: center;
560 width: 100%;
561 }
562 }
563 </style>
564
565 <#if (currentArticleRelatedLinks?size>1)>
566 <script>
567 $('#slider-cars').slick({
568 dots: true,
569 accessibility: true,
570 autoplay: true,
571 autoplaySpeed: 4000,
572 arrows: false,
573 mobileFirst: true,
574 pauseOnHover:true,
575 infinite: true
576 });
577 </script>
578 </#if>
579 </#if>
580</div>
581
582<!-- Modal Gallery -->
583<!-- Imagen 1 Exterior -->
584<div id="galeria-exterior-1" class="modal fade" style="display:none;">
585 <div class="modal-dialog modal-lg modal-dialog-centered">
586 <div class="modal-content">
587 <div class="modal-header">
588 <button type="button" class="close" data-dismiss="modal")">×</button>
589 </div>
590 <div class="modal-body">
591 <!-- Cuadro gris -->
592 <#if (GaleriaExterior.ImagenPrincipalExteriorGaleria.getData())?? && GaleriaExterior.ImagenPrincipalExteriorGaleria.getData() != "">
593 <img src="${GaleriaExterior.ImagenPrincipalExteriorGaleria.getData()}" alt="${GaleriaExterior.ImagenPrincipalExteriorGaleria.getAttribute("alt")}">
594 </#if>
595 </div>
596 </div>
597 </div>
598</div>
599<!-- Imagen 2 Exterior -->
600<div id="galeria-exterior-2" class="modal fade" style="display:none;">
601 <div class="modal-dialog modal-lg modal-dialog-centered">
602 <div class="modal-content">
603 <div class="modal-header">
604 <button type="button" class="close" data-dismiss="modal")">×</button>
605 </div>
606 <div class="modal-body">
607 <!-- Cuadro gris -->
608 <#if (GaleriaExterior.ImagenSecundariaExteriorGaleria.getData())?? && GaleriaExterior.ImagenSecundariaExteriorGaleria.getData() != "">
609 <img src="${GaleriaExterior.ImagenSecundariaExteriorGaleria.getData()}" alt="${GaleriaExterior.ImagenSecundariaExteriorGaleria.getAttribute("alt")}">
610 </#if>
611 </div>
612 </div>
613 </div>
614</div>
615<!-- Imagen 3 Exterior -->
616<div id="galeria-exterior-3" class="modal fade" style="display:none;">
617 <div class="modal-dialog modal-lg modal-dialog-centered">
618 <div class="modal-content">
619 <div class="modal-header">
620 <button type="button" class="close" data-dismiss="modal">×</button>
621 </div>
622 <div class="modal-body">
623 <!-- Cuadro gris -->
624 <#if (GaleriaExterior.ImagenTerciariaExteriorGaleria.getData())?? && GaleriaExterior.ImagenTerciariaExteriorGaleria.getData() != "">
625 <img src="${GaleriaExterior.ImagenTerciariaExteriorGaleria.getData()}" alt="${GaleriaExterior.ImagenTerciariaExteriorGaleria.getAttribute("alt")}">
626 </#if>
627 </div>
628 </div>
629 </div>
630</div>
631<!-- Imagen 1 Interior -->
632<div id="galeria-interior-1" class="modal fade" style="display:none;">
633 <div class="modal-dialog modal-lg modal-dialog-centered">
634 <div class="modal-content">
635 <div class="modal-header">
636 <button type="button" class="close" data-dismiss="modal">×</button>
637 </div>
638 <div class="modal-body">
639 <!-- Cuadro gris -->
640 <#if (GaleriaInterior.ImagenPrincipalInteriorGaleria.getData())?? && GaleriaInterior.ImagenPrincipalInteriorGaleria.getData() != "">
641 <img src="${GaleriaInterior.ImagenPrincipalInteriorGaleria.getData()}" alt="${GaleriaInterior.ImagenPrincipalInteriorGaleria.getAttribute("alt")}">
642 </#if>
643 </div>
644 </div>
645 </div>
646</div>
647<!-- Imagen 2 Interior -->
648<div id="galeria-interior-2" class="modal fade" style="display:none;">
649 <div class="modal-dialog modal-lg modal-dialog-centered">
650 <div class="modal-content">
651 <div class="modal-header">
652 <button type="button" class="close" data-dismiss="modal">×</button>
653 </div>
654 <div class="modal-body">
655 <!-- Cuadro gris -->
656 <#if (GaleriaInterior.ImagenSecundariaInteriorGaleria.getData())?? && GaleriaInterior.ImagenSecundariaInteriorGaleria.getData() != "">
657 <img src="${GaleriaInterior.ImagenSecundariaInteriorGaleria.getData()}" alt="${GaleriaInterior.ImagenSecundariaInteriorGaleria.getAttribute("alt")}">
658 </#if>
659 </div>
660 </div>
661 </div>
662</div>
663<!-- Imagen 3 Interior -->
664<div id="galeria-interior-3" class="modal fade" style="display:none;">
665 <div class="modal-dialog modal-lg modal-dialog-centered">
666 <div class="modal-content">
667 <div class="modal-header">
668 <button type="button" class="close" data-dismiss="modal">×</button>
669 </div>
670 <div class="modal-body">
671 <!-- Cuadro gris -->
672 <#if (GaleriaInterior.ImagenTerciariaInteriorGaleria.getData())?? && GaleriaInterior.ImagenTerciariaInteriorGaleria.getData() != "">
673 <img src="${GaleriaInterior.ImagenTerciariaInteriorGaleria.getData()}" alt="${GaleriaInterior.ImagenTerciariaInteriorGaleria.getAttribute("alt")}">
674 </#if>
675 </div>
676 </div>
677 </div>
678</div>
679
680<input type="hidden" value="${NombreModelo.ClaseModelo.getData()}" id="claseModelo">
681<input type="hidden" value="${NombreModelo.getData()}" id="nombreModelo">
682<input type="hidden" value="${NombreModelo.TipoModelo.getData()}" id="tipoModelo">
683
684<script type="text/javascript">
685
686$( document ).ready(function() {
687 const type = $('#claseModelo').val();
688 const selected = $('#nombreModelo').val();
689 layerExponeaModelo(type, selected);
690 setTimeout(function(){onYouTubeIframeAPIReady_()},1500);
691});
692
693 <#if (VideoPaginaModelo.getData())?? && VideoPaginaModelo.getData() != "">
694 var player_${VideoPaginaModelo.getData()?replace("-","_")}_principal;
695 </#if>
696<#if TituloContenidoPaginaModelo.getSiblings()?has_content>
697 <#list TituloContenidoPaginaModelo.getSiblings() as cur_TituloContenidoPaginaModelo>
698 <#if cur_TituloContenidoPaginaModelo.TipoContenidoPaginaModelo.getData() == "2">
699 <#if (cur_TituloContenidoPaginaModelo.VideoContenidoPaginaModelo.getData())?? && cur_TituloContenidoPaginaModelo.VideoContenidoPaginaModelo.getData() != "">
700 var player_${cur_TituloContenidoPaginaModelo.VideoContenidoPaginaModelo.getData()?replace("-","_")};
701 </#if>
702 </#if>
703 </#list>
704 </#if>
705
706 function onYouTubeIframeAPIReady_() {
707 //console.log("onYouTubeIframeAPIReady");
708 <#if (VideoPaginaModelo.getData())?? && VideoPaginaModelo.getData() != "">
709 player_${VideoPaginaModelo.getData()?replace("-","_")}_principal = new YT.Player('yt_${VideoPaginaModelo.getData()?replace("-","_")}_principal', {
710 width:'100%',
711 videoId: '${VideoPaginaModelo.getData()}',
712 events: {
713 'onStateChange': function(event) {
714 if (event.data == YT.PlayerState.PLAYING) {
715 //console.log("PLAY ${VideoPaginaModelo.getData()}")
716 mutear_${VideoPaginaModelo.getData()?replace("-","_")}();
717 }
718 }
719 }
720 });
721 function mutear_${VideoPaginaModelo.getData()?replace("-","_")}(){
722 player_${VideoPaginaModelo.getData()?replace("-","_")}_principal.mute();
723 //console.log("MUTEAR ${VideoPaginaModelo.getData()}");
724 var title = "sin titulo";
725 <#if (VideoPaginaModelo.NombreVideo_PaginaModelo.getData())?? && VideoPaginaModelo.NombreVideo_PaginaModelo.getData() != "">
726 title = normalizaTexto("${VideoPaginaModelo.NombreVideo_PaginaModelo.getData()}");
727 </#if>
728 let layer = {
729 "event": "atm.event",
730 "eventCategory": "saber mas",
731 "eventAction": "view",
732 "eventLabel": title,
733 "dimension15": "${BannerPaginaModelo.TituloBannerModelo.getData()}"
734 };
735 //console.log(layer);
736 callDataLayer(layer);
737
738 }
739 </#if>
740 <#if TituloContenidoPaginaModelo.getSiblings()?has_content>
741 <#list TituloContenidoPaginaModelo.getSiblings() as cur_TituloContenidoPaginaModelo>
742 <#if cur_TituloContenidoPaginaModelo.TipoContenidoPaginaModelo.getData() == "2">
743 <#if (cur_TituloContenidoPaginaModelo.VideoContenidoPaginaModelo.getData())?? && cur_TituloContenidoPaginaModelo.VideoContenidoPaginaModelo.getData() != "">
744
745 player_${cur_TituloContenidoPaginaModelo.VideoContenidoPaginaModelo.getData()?replace("-","_")} = new YT.Player('yt_${cur_TituloContenidoPaginaModelo.VideoContenidoPaginaModelo.getData()?replace("-","_")}', {
746 width:'100%',
747 videoId: '${cur_TituloContenidoPaginaModelo.VideoContenidoPaginaModelo.getData()}',
748 events: {
749 'onStateChange': function(event) {
750 if (event.data == YT.PlayerState.PLAYING) {
751 //console.log("PLAY ${cur_TituloContenidoPaginaModelo.VideoContenidoPaginaModelo.getData()}")
752 mutear_${cur_TituloContenidoPaginaModelo.VideoContenidoPaginaModelo.getData()?replace("-","_")}();
753 }
754 }
755 }
756 });
757
758 function mutear_${cur_TituloContenidoPaginaModelo.VideoContenidoPaginaModelo.getData()?replace("-","_")}(){
759 player_${cur_TituloContenidoPaginaModelo.VideoContenidoPaginaModelo.getData()?replace("-","_")}.mute();
760 //console.log("MUTEAR ${cur_TituloContenidoPaginaModelo.VideoContenidoPaginaModelo.getData()}")
761
762 var title = "sin titulo";
763 <#if (TituloContenidoPaginaModelo.NombreVideo_ContenidoPaginaModelo.getData())?? && TituloContenidoPaginaModelo.NombreVideo_ContenidoPaginaModelo.getData() != "">
764 title = normalizaTexto("${TituloContenidoPaginaModelo.NombreVideo_ContenidoPaginaModelo.getData()}");
765 </#if>
766
767 let layer = {
768 "event": "atm.event",
769 "eventCategory": "saber mas",
770 "eventAction": "view",
771 "eventLabel": title,
772 "dimension15": "${BannerPaginaModelo.TituloBannerModelo.getData()}"
773 };
774 //console.log(layer);
775 callDataLayer(layer);
776
777
778 }
779 </#if>
780 </#if>
781 </#list>
782 </#if>
783
784
785 }
786
787$(".exterior").slick({
788 dots: true,
789 infinite: true,
790 speed: 500,
791 fade: true,
792 cssEase: 'linear',
793 prevArrow: false,
794 nextArrow: false,
795});
796
797$(".interior").slick({
798 dots: true,
799 infinite: true,
800 speed: 500,
801 fade: true,
802 cssEase: 'linear',
803 prevArrow: false,
804 nextArrow: false,
805});
806function clickVideo(){
807 //console.log("clickVideo");
808}
809function showModal(id){
810 $('#'+id).modal('toggle');
811 document.querySelector('body').style.paddingRight = '0';
812 document.querySelector('.modal-open').style.overflow = 'auto';
813}
814
815$('.close').click(function (){
816 let modal = $(this).closest('.modal');
817 modal.removeClass('show');
818 setTimeout(function() {
819 modal.hide();
820 }, 300);
821});
822
823function layerModeloDetalleCotizarClick(dato_btn_bann){
824 //console.log(dato_btn_bann);
825 let opcion = reemplazon(dato_btn_bann);
826 //console.log("==>"+opcion);
827 let layer = {
828 "event": "atm.event",
829 "eventCategory": "cotizador",
830 "eventAction": "click",
831 "eventLabel": opcion
832 };
833 //console.log(layer);
834 callDataLayer(layer);
835}
836
837function layerModeloDetalleClick(seleccionado, dat){
838 //console.log(seleccionado);
839 let opcion = reemplazon(seleccionado);
840 //console.log("==>"+opcion);
841 let layer = {
842 "event": "atm.event",
843 "eventCategory": "saber mas",
844 "eventAction": "click",
845 "eventLabel": opcion,
846 "dimension15": dat
847 };
848 //console.log(layer);
849 callDataLayer(layer);
850}
851function layerModeloDetalleClickGaleriaInt(seleccionado, dat){
852 //console.log(seleccionado);
853 let opcion = reemplazon(seleccionado);
854 //console.log("==>"+opcion);
855 let layer = {
856 "event": "atm.event",
857 "eventCategory": "saber mas",
858 "eventAction": "click",
859 "eventLabel": dat,
860 "dimension15": opcion
861 };
862 //console.log(layer);
863 callDataLayer(layer);
864}
865function layerModeloDetalleClickGaleriaExt(seleccionado, dat){
866 //console.log(seleccionado);
867 let opcion = reemplazon(seleccionado);
868 //console.log("==>"+opcion);
869 let layer = {
870 "event": "atm.event",
871 "eventCategory": "saber mas",
872 "eventAction": "click",
873 "eventLabel": dat,
874 "dimension15": opcion
875 };
876 //console.log(layer);
877 callDataLayer(layer);
878}
879
880
881const mess = document.getElementById("mess");
882window.focus
883window.addEventListener("blur", () =>{
884 setTimeout(() => {
885 if(document.activeElement.tagName === "IFRAME"){
886 mess.textContent = "clicked" + Date.now();
887 let layer = {
888 "event": "atm.event",
889 "eventCategory": "saber mas",
890 "eventAction": "click",
891 "eventLabel": '${VideoPaginaModelo.getData()}',
892 "dimension15": '${BannerPaginaModelo.TituloBannerModelo.getData()}'
893 };
894 callDataLayer(layer);
895 //console.log(layer);
896 }
897 });
898}, {once: true});
899
900function layerExponeaModelo(type, selected) {
901 if (type==="coupe") {
902 type = "Coupé";
903 }else if (type==="deportivos") {
904 type = "Deportivos";
905 }else if (type==="hatchback") {
906 type = "Hatchback";
907 }else if (type==="sedan") {
908 type = "Sedán";
909 }else if (type==="suv") {
910 type = "SUV";
911 }else if (type==="vans") {
912 type = "Vans";
913 }
914 const category = $('#tipoModelo').val();
915 //console.log(category);
916 if(category=="eq") {
917 type = "EQ " + type;
918 }else if(category=="amg") {
919 type = "AMG " + type;
920 }else if(category=="may") {
921 type = "Maybach " + type;
922 }
923 //console.log(type);
924 let layer = {
925 "cat_level_1": "Automóviles",
926 "cat_level_2": "Mercedes-Benz",
927 "cat_level_3": type,
928 "cat_level_4": selected,
929 "cat_level_5": "",
930 "cat_level_6": "",
931 'item_id': "",
932 'item_price': "",
933 'item_name': "",
934 'item_brand': "",
935 'item_color': "",
936 'item_modelo': "",
937 'item_version': "",
938 'item_vin': "",
939 'item_patente': "",
940 'item_sap_internalcode': "",
941 'item_sku_familia': "",
942 'item_sku_preciolista': "",
943 'item_sku_stock': "",
944 "origen": ""
945 }
946 //console.log(layer);
947 //debugger;
948 callExponeaDataLayer("view_item", layer);
949}
950</script>
951
952<style>
953div.default-asset-publisher > div:first-child {
954 height: 0px !important;
955 margin: 0 !important;
956}
957span.header-back-to {
958 display: none;
959}
960section.bg-dark {
961 background: var(--wb-maybach-brand) !important;
962}
963.bg-black {
964 background: var(--wb-maybach-brand);
965}
966.banner, .banner > img {
967 width: 100%
968}
969.row-banner {
970 display: flex;
971 flex-wrap: wrap;
972 padding-bottom: 45px;
973 position: relative;
974}
975.banner-desktop {
976 display: none;
977}
978.banner-contenido-container {
979 margin: 0 35px;
980 width: 100%
981}
982.banner-contenido {
983 padding-top: 15px;
984 width: 100%;
985}
986.texto-contenido {
987 display: flex;
988 flex-flow: wrap;
989 margin-top: 0;
990 position: relative;
991 text-align: center;
992}
993.texto-container {
994 width: -webkit-fill-available;
995}
996.texto-titulo {
997 -webkit-font-smoothing: antialiased;
998 color: var(--wb-white);
999 font-family: var(--wb-font-title);
1000 font-size: 48px;
1001 font-style: normal;
1002 font-weight: 500;
1003 line-height: 1;
1004}
1005.texto-subtitulo {
1006 -webkit-font-smoothing: antialiased;
1007 color: var(--wb-white);
1008 font-family: var(--wb-font-text),serif;
1009 font-style: normal;
1010 font-weight: 400;
1011 line-height: 1;
1012}
1013.slider-botones-contenido {
1014 padding: 2rem 0;
1015}
1016.boton-primario {
1017 color: var(--wb-white);
1018 background-color: var(--wb-blue-45);
1019 border: 1px solid var(--wb-blue-45);
1020 min-width: 144px;
1021 outline: none;
1022 padding: 10px 25px;
1023 white-space: nowrap;
1024 -webkit-font-smoothing: antialiased;
1025 border-radius: 2px;
1026 font-family: var(--wb-font-text),sans-serif;
1027 font-style: normal;
1028 font-weight: 700;
1029 letter-spacing: .025em;
1030 line-height: 1;
1031 -webkit-tap-highlight-color: transparent;
1032 align-items: center;
1033 appearance: none;
1034 cursor: pointer;
1035 display: inline-flex;
1036 justify-content: center;
1037 outline-offset: 0;
1038 overflow: visible;
1039 text-transform: none;
1040 transition: background-color .3s ease-in-out;
1041 width: 100%;
1042 margin-top: 0.5rem;
1043}
1044.boton-primario:hover {
1045 background-color: var(--wb-blue-25);
1046 color: var(--wb-white);
1047}
1048.boton-primario-whatsapp {
1049 color: var(--wb-white);
1050 background-color: var(--wb-blue-45);
1051 min-width: 144px;
1052 outline: none;
1053 padding: 10px 25px;
1054 white-space: nowrap;
1055 -webkit-font-smoothing: antialiased;
1056 border-radius: 2px;
1057 font-family: var(--wb-font-text),sans-serif;
1058 font-style: normal;
1059 font-weight: 400;
1060 letter-spacing: .025em;
1061 line-height: 1;
1062 -webkit-tap-highlight-color: transparent;
1063 align-items: center;
1064 appearance: none;
1065 cursor: pointer;
1066 display: inline-flex;
1067 justify-content: center;
1068 outline-offset: 0;
1069 overflow: visible;
1070 text-transform: none;
1071 transition: background-color .3s ease-in-out;
1072 width: 100%;
1073 margin-top: 0.5rem;
1074}
1075.boton-primario-whatsapp:hover {
1076 background-color: var(--wb-blue-25);
1077 color: var(--wb-white);
1078}
1079.row-slider-cars {
1080 margin: 0 35px;
1081}
1082.row-filtro {
1083 display: flex;
1084 flex-wrap: wrap;
1085 margin: 0 35px;
1086}
1087.row-filtro .filtro-container {
1088 display: flex;
1089 margin: 0 auto;
1090}
1091.row-filtro .filtro-container ul {
1092 display: flex;
1093 flex-wrap: wrap;
1094 padding: 0;
1095 list-style: none !important;
1096}
1097.row-filtro .filtro-container ul li {
1098 width: 50%;
1099 white-space: pre;
1100}
1101.row-filtro .filtro-container ul li .filtro-item {
1102 background: transparent;
1103 border: solid 1px var(--wb-grey-65);
1104 color: var(--wb-white);
1105 margin: 0;
1106 font-family: var(--wb-font-text);
1107 transition: all .3s ease;
1108 outline: none;
1109 padding: 5px 20px;
1110 width: 101%;
1111 display: block;
1112 text-align: center;
1113}
1114.row-filtro .filtro-container ul li:hover .filtro-item {
1115 background: var(--wb-maybach-brand);
1116 color: var(--wb-white);
1117}
1118.row-video {
1119 display: flex;
1120 flex-wrap: wrap;
1121 margin: 0 35px;
1122}
1123.row-video .iframe_landing {
1124 width: 100%;
1125 height: 280px;
1126 margin: 25px 0;
1127}
1128.row-contenido {
1129 display: flex;
1130 flex-wrap: wrap;
1131 margin: 0 35px;
1132}
1133.titulo-seccion {
1134 font-family: var(--wb-font-title);
1135 color: var(--wb-white);
1136}
1137.titulo-separador:after {
1138 content: "";
1139 display: block;
1140 width: 30px;
1141 height: 2px;
1142 background: var(--wb-white);
1143}
1144.landing_info {
1145 display: flex;
1146 flex-wrap: wrap;
1147 align-items: center;
1148 justify-content: space-between;
1149 width: 100%;
1150 margin-bottom: 25px;
1151}
1152.landing_info > div {
1153 margin-bottom: 15px;
1154}
1155.landing_info img {
1156 height: auto;
1157 width: 100%;
1158}
1159.information-title {
1160 color: var(--wb-white);
1161 font-family: var(--wb-font-title);
1162}
1163.information-subtitle {
1164 color: var(--wb-white);
1165 font-family: var(--wb-font-text), serif;
1166}
1167.destacar {
1168 color: var(--wb-blue-45) !important;
1169}
1170.landing_info div > p {
1171 color: var(--wb-white);
1172 font-family: var(--wb-font-text),sans-serif;
1173 font-size: 18px;
1174 font-weight: normal;
1175 line-height: 25px;
1176}
1177.landing_info div > small {
1178 color: var(--wb-white);
1179 font-family: var(--wb-font-text),sans-serif;
1180 font-weight: normal;
1181}
1182.landing_info div > small p {
1183 font-size: 14px;
1184}
1185.row-navegacion-galeria {
1186 display: flex;
1187 flex-wrap: wrap;
1188 margin: 0 35px;
1189}
1190.row-navegacion-galeria .nav-tabs {
1191 border: none;
1192}
1193.row-navegacion-galeria .nav-item {
1194 background: transparent;
1195 color: var(--wb-white);
1196 border-bottom: 2px solid transparent;
1197 border: none;
1198 font-family: var(--wb-font-title);
1199 padding-left: 0;
1200 padding-right: 0;
1201 margin-right: 0.5em;
1202}
1203.row-navegacion-galeria .nav-item.active {
1204 background: transparent;
1205 color: var(--wb-blue-45);
1206 border: none;
1207}
1208.row-galeria {
1209 display: flex;
1210 flex-wrap: wrap;
1211 margin: 0 35px;
1212}
1213.row-galeria .galeria-desktop {
1214 display: none;
1215}
1216.tab-pane:not(.active) {
1217 display: none;
1218}
1219.slick-slide {
1220 left: 0 !important;
1221}
1222.row-galeria .galeria-mobile div {
1223 width: 100% !important;
1224}
1225.row-galeria ul.slick-dots {
1226 display: block;
1227 width: 100%;
1228 padding: 5px 0 0;
1229 margin: 0;
1230 list-style: none;
1231 text-align: center;
1232}
1233.row-galeria ul.slick-dots li {
1234 position: relative;
1235 display: inline-block;
1236 width: 20px;
1237 height: 20px;
1238 margin: 0 5px;
1239 padding: 0;
1240 cursor: pointer;
1241}
1242.slick-dots li button {
1243 font-size: 0;
1244 line-height: 0;
1245 display: block;
1246 width: 20px;
1247 height: 20px;
1248 padding: 5px;
1249 cursor: pointer;
1250 color: transparent;
1251 border: 0;
1252 outline: none;
1253 background: transparent;
1254}
1255.slick-dots li button:before {
1256 font-size: 3rem;
1257 line-height: 20px;
1258 position: absolute;
1259 top: 0;
1260 left: 0;
1261 width: 20px;
1262 height: 20px;
1263 content: '•';
1264 text-align: center;
1265 opacity: .25;
1266 color: var(--wb-white);
1267 -webkit-font-smoothing: antialiased;
1268 -moz-osx-font-smoothing: grayscale;
1269 transition: all .3s ease;
1270}
1271.slick-dots li.slick-active button:before {
1272 opacity: .75;
1273 color: var(--wb-blue-45);
1274}
1275.slick-dots li button:hover:before, .slick-dots li button:focus:before {
1276 opacity: 1;
1277}
1278.row-versiones {
1279 display: flex;
1280 flex-wrap: wrap;
1281 margin: 0 35px;
1282 padding-top: 50px;
1283}
1284.row-versiones .content-container {
1285 align-items: center;
1286 display: flex;
1287 flex-wrap: wrap;
1288 width: 100%;
1289}
1290.row-versiones .content-container h3 {
1291 color: var(--wb-white);
1292 font-family: var(--wb-font-title);
1293}
1294.row-versiones .content-container > div {
1295 padding: 0 15px !important;
1296}
1297.row-versiones .content-container > div:first-child {
1298 margin: 15px 0;
1299}
1300.row-versiones .content-container > div:last-child {
1301 display: flex;
1302 flex-direction: column;
1303 align-items: center;
1304 justify-content: flex-end;
1305}
1306.row-versiones .content-button {
1307 background: var(--wb-blue-45);
1308 color: var(--wb-white);
1309 transition: all .3s ease;
1310 margin-bottom: 15px;
1311 border: 1px solid var(--wb-blue-45);
1312 border-radius: 2px;
1313 min-width: 275px;
1314 padding: 10px 25px;
1315 text-align: center;
1316 font-family: var(--wb-font-text);
1317 font-weight: 700;
1318}
1319.row-versiones .content-button.catalogo {
1320 background: var(--wb-grey-30);
1321 border-color: var(--wb-grey-30);
1322}
1323.row-versiones .content-button:hover {
1324 background: var(--wb-blue-25);
1325}
1326.row-versiones .content-button.catalogo:hover {
1327 background: var(--wb-grey-30);
1328}
1329.iframe_landing_card {
1330 width: 100%;
1331 height: 280px;
1332}
1333.modal {
1334 background: radial-gradient(var(--wb-black), transparent);
1335}
1336.modal-content {
1337 background: var(--wb-maybach-brand);
1338}
1339.modal-header {
1340 justify-content: flex-end;
1341}
1342.close {
1343 color: var(--wb-white);
1344 font-size: 24px;
1345 opacity: 1;
1346}
1347.close:hover {
1348 color: var(--wb-white);
1349}
1350@media (min-width: 990px) {
1351 .row-banner {
1352 justify-content: center;
1353 margin-left: auto !important;
1354 margin-right: auto !important;
1355 padding-bottom: 0px;
1356 }
1357 .banner {
1358 margin-left: auto;
1359 margin-right: auto;
1360 max-width: 1615px;
1361 }
1362 .banner-desktop {
1363 display: block;
1364 }
1365 .banner-mobile {
1366 display: none;
1367 }
1368 .banner img {
1369 max-width: 100%;
1370 height: auto;
1371 }
1372 .banner-contenido-container {
1373 background: transparent;
1374 position: absolute;
1375 width: 100%;
1376 max-width: 1615px;
1377 display: flex;
1378 -webkit-box-orient: vertical;
1379 -webkit-box-direction: normal;
1380 flex-direction: column;
1381 -webkit-box-pack: center;
1382 justify-content: center;
1383 top: 0;
1384 margin: 0;
1385 height: 100%;
1386 padding-top: 1.5rem;
1387 }
1388 .banner-contenido {
1389 margin: 0 auto;
1390 padding-top: 0px;
1391 width: 95%;
1392 }
1393 .texto-contenido {
1394 text-align: left;
1395 }
1396 .texto-titulo {
1397 font-size: 64px;
1398 font-weight: 400;
1399 }
1400 .texto-subtitulo {
1401 margin-top: 2rem;
1402 }
1403 .boton-primario {
1404 margin-top: 0;
1405 margin-right: 0.5rem;
1406 -webkit-box-flex: 1;
1407 flex: 0 0 auto!important;
1408 width: auto!important;
1409 }
1410.boton-primario-whatsapp {
1411 margin-top: 0;
1412 margin-right: 0.5rem;
1413 -webkit-box-flex: 1;
1414 flex: 0 0 auto!important;
1415 width: auto!important;
1416 }
1417 .row-slider-cars {
1418 margin: 0 125px;
1419 }
1420 .row-filtro {
1421 margin: 0 125px;
1422 }
1423 .row-filtro .filtro-container ul li {
1424 width: 150px;
1425 }
1426 .row-video {
1427 margin: 0 125px;
1428 }
1429 .row-video .iframe_landing {
1430 width: 100%;
1431 height: 630px;
1432 margin: 50px 0;
1433 }
1434 .row-contenido {
1435 margin: 0 125px;
1436 }
1437 .banner-img-desktop {
1438 padding-bottom: 60px;
1439 }
1440 .landing_info {
1441 margin-left: auto;
1442 margin-right: auto;
1443 margin-bottom: 55px;
1444 }
1445 .landing_info > div:first-child.derecha{
1446 padding: 0 15px !important;
1447 }
1448 .landing_info > div:last-child.izquierda {
1449 padding: 0 15px !important;
1450 }
1451 .landing_info > div:last-child picture {
1452 display: flex;
1453 justify-content: flex-end;
1454 width: 100%
1455 }
1456 .landing_info img {
1457 width: 100%;
1458 }
1459 .row-navegacion-galeria {
1460 margin: 0 125px;
1461 }
1462 .row-galeria {
1463 margin: 0 125px;
1464 }
1465 .row-galeria .galeria-desktop {
1466 display: block;
1467 }
1468 .row-galeria .galeria-mobile {
1469 display: none;
1470 }
1471 .row-galeria .galeria-desktop .gallery-content {
1472 display: flex;
1473 flex-wrap: wrap;
1474 margin-bottom: 2em;
1475 }
1476 .row-galeria .galeria-desktop .gallery-content .first-new {
1477 /* height: 550px;
1478 overflow: hidden; */
1479 }
1480 .row-galeria .galeria-desktop .gallery-content > div:last-child {
1481 padding-left: 15px !important;
1482 }
1483 .row-galeria .galeria-desktop .gallery-content img {
1484 width: 100%;
1485 height: 100%;
1486 object-fit: cover;
1487 object-position: center;
1488 max-width: 100%;
1489 }
1490 .row-catalogo {
1491 margin: 0 125px;
1492 }
1493 .row-catalogo .content-button {
1494 font-size: 18px;
1495 }
1496 .row-versiones {
1497 margin: 0 125px;
1498 }
1499 .row-versiones .content-container > div:first-child {
1500 margin: 0;
1501 }
1502 .iframe_landing_card {
1503 width: 100%;
1504 height: 450px;
1505 }
1506 .galeria-desktop img {
1507 cursor: pointer;
1508 }
1509}
1510.texto-sub-leyend{
1511 color: var(--wb-white);
1512 }
1513</style>
