Detalle Productos Cat
Se ha producido un error al procesar la plantilla.
The following has evaluated to null or missing:
==> allBrothersObjectsValues [in template "14306307#14306335#null" at line 658, column 36]
----
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: #list allBrothersObjectsValues as obj... [in template "14306307#14306335#null" at line 658, column 29]
----
1<#include "${templatesPath}/10241186">
2<#assign finanzautoPhone = 901130013 />
3<#assign maxRelationships = 20 />
4<#assign objectDefinitionId = 14695654>
5<#assign cpAttachmentFileEntryService = serviceLocator.findService("com.liferay.commerce.product.service.CPAttachmentFileEntryService")>
6<#assign objectDefinitionService = serviceLocator.findService("com.liferay.object.service.ObjectDefinitionService")>
7<#assign objectEntryLocalService = serviceLocator.findService("com.liferay.object.service.ObjectEntryLocalService")>
8<#assign objectRelationshipService = serviceLocator.findService("com.liferay.object.service.ObjectRelationshipService")>
9<#assign classNameLocalService = serviceLocator.findService("com.liferay.portal.kernel.service.ClassNameLocalService")>
10<#assign dlFileEntryLocalService = serviceLocator.findService("com.liferay.document.library.kernel.service.DLFileEntryLocalService")>
11<#assign assetCategoryLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetCategoryLocalService")>
12<#assign assetCategoryPropertyService = serviceLocator.findService("com.liferay.asset.category.property.service.AssetCategoryPropertyService")>
13<#assign friendlyURLEntryLocalService = serviceLocator.findService("com.liferay.friendly.url.service.FriendlyURLEntryLocalService")>
14<#assign assetEntryLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetEntryLocalService")>
15<#assign layoutLocalService = serviceLocator.findService("com.liferay.portal.kernel.service.LayoutLocalService") />
16
17<#assign groupId = themeDisplay.getScopeGroupId()>
18<#assign companyId = themeDisplay.getCompanyId()>
19<#assign portalURL = themeDisplay.getPortalURL()>
20
21<#assign assetCategoryClassName = "com.liferay.asset.kernel.model.AssetCategory" />
22<#assign assetCategoryClassNameId = classNameLocalService.getClassNameId(assetCategoryClassName) />
23<#-- -------------------------------------------------------------------- BUSQUEDA OBJETO -------------------------------------------------------------------- -->
24
25<#if request.getAttribute("productId")??>
26 <#assign objectEntryId = request.getAttribute("productId")>
27 <#assign values = objectEntryLocalService.getValues(objectEntryId)>
28 <#attempt>
29
30 ${request.setAttribute('productDetail', true)}
31 <#assign hostname = layout.getGroup().getDisplayURL(themeDisplay,false)?replace('/es','')?replace('/en','') />
32 <link rel="alternate" href="${hostname}/productos/${values.productUrlEs}" hreflang="x-default"/>
33 <link rel="alternate" href="${hostname}/productos/${values.productUrlEs}" hreflang="es-ES"/>
34 ${request.setAttribute('productES', '${hostname}/productos/${values.productUrlEs}')}
35 <#if locale == "es_ES">
36 <link rel="canonical" href="${hostname}/productos/${values.productUrlEs}"/>
37 </#if>
38
39 <#if values.productUrlEn??>
40 <link rel="alternate" href="${hostname}/en/products/${values.productUrlEn}" hreflang="en-GB"/>
41 ${request.setAttribute('productEN', '${hostname}/en/products/${values.productUrlEn}')}
42 <#if locale == "en_GB">
43 <link rel="canonical" href="${hostname}/en/products/${values.productUrlEn}"/>
44 </#if>
45
46 <#else>
47 <link rel="alternate" href="${hostname}/en/products/${values.productUrlEs}" hreflang="en-GB"/>
48 ${request.setAttribute('productEN', '${hostname}/en/products/${values.productUrlEs}')}
49 <#if locale == "en_GB">
50 <link rel="canonical" href="${hostname}/en/products/${values.productUrlEs}"/>
51 </#if>
52 </#if>
53
54
55
56
57
58 <#recover>
59
60 </#attempt>
61
62
63<#-- -------------------------------------------------------------------- FIN BUSQUEDA OBJETO -------------------------------------------------------------------- -->
64<#-- -------------------------------------------------------------------- BUSQUEDA CATEGORIA -------------------------------------------------------------------- -->
65 <#assign className = objectDefinitionService.getObjectDefinition(objectDefinitionId).getClassName() />
66 <#assign classNameId = classNameLocalService.getClassNameId(className) />
67 <#assign categories = assetCategoryLocalService.getCategories(classNameId, objectEntryId)/>
68 <#assign urlcyclica=""/>
69 <#assign categoryName = ""/>
70 <#assign urlCyclicaEnglish=""/>
71 <#assign useParentLink = false/>
72 <#assign implement = false/>
73 <#assign showSisterCategories = true/>
74 <#assign buy = true/>
75 <#assign principalCategoryName = "" />
76 <#if ((categories??) && (categories?size>0)) >
77 <#assign category = categories[0]/>
78 <#assign parentCategoryId = category.getParentCategoryId()/>
79 <#assign categoryProperties = assetCategoryPropertyService.getCategoryProperties(category.getCategoryId())/>
80 <p style="display:none;" id="categoryId">
81 ${category.getCategoryId()}
82 </p>
83 <#assign principalCategoryName = category.getTitle(locale) />
84 <p style="display:none;" id="principalCategoryName">
85 ${principalCategoryName}
86 </p>
87 <#list categoryProperties as categoryProperty>
88 <#assign key=categoryProperty["key"]/>
89 <#if (key == "URL_CYCLICA") >
90 <#assign urlcyclica=categoryProperty["value"]/>
91 </#if>
92 <#if (key == "URL_CYCLICA_ENGLISH")>
93 <#assign urlCyclicaEnglish = categoryProperty["value"]/>
94 </#if>
95 <#if (key == "DONT_SHOW_CHILDS")>
96 <#assign useParentLink = true/>
97 </#if>
98 <#if (key == "DONT_BUY")>
99 <#assign buy = false/>
100 </#if>
101 <#if (key == "IMPLEMENT")>
102 <#assign implement = true/>
103 </#if>
104 <#if (key == "DONT_SHOW_SISTERS")>
105 <#assign showSisterCategories = false/>
106 </#if>
107 </#list>
108 </#if>
109 <@liferay_util["html-top"]>
110 <title>${principalCategoryName} ${values.brand} ${getLanguage(values.names)}</title>
111 </@>
112<#-- -------------------------------------------------------------------- FIN BUSQUEDA CATEGORIA -------------------------------------------------------------------- -->
113<#-- -------------------------------------------------------------------- MIGAS DE PAN -------------------------------------------------------------------- -->
114 <#macro renderBreadcrumb(layout)>
115 <#if layout??>
116 <#attempt>
117 <#-- Llamada recursiva para el layout padre-->
118 <#if layout.getParentLayoutId() != 0>
119 <#assign parentLayout = layoutLocalService.getLayout(groupId, false, layout.getParentLayoutId())>
120 <@renderBreadcrumb parentLayout />
121 </#if>
122
123 <#-- Renderizar el breadcrumb para el layout actual -->
124 <li class="dfc pb-10">
125 <#assign url_bc = "">
126 <#if locale == "en_GB">
127 <#assign url_bc = "/en" >
128 </#if>
129 <a class="dfc" href="${portalURL}${url_bc}${layout.getFriendlyURL(locale)}">
130 <span class="bold font-14 underline">${layout.getName(locale)}</span>
131 </a>
132 <i class="bi bi-slash-lg ml-5 mr-5" style="transform: rotate(-25deg);"></i>
133 </li>
134 <#recover>
135 </#attempt>
136 </#if>
137 </#macro>
138 <#assign lastUrl="" />
139 <#assign name = getLanguage(values.longnames)/>
140 <#attempt>
141
142
143 <#if useParentLink>
144 <#assign categoryHreflist = friendlyURLEntryLocalService.getFriendlyURLEntries(groupId,assetCategoryClassNameId, category.parentCategoryId)/>
145 <#else>
146 <#assign categoryHreflist = friendlyURLEntryLocalService.getFriendlyURLEntries(groupId,assetCategoryClassNameId, category.categoryId)/>
147 </#if>
148 <#assign categoryHrefLocale = friendlyURLEntryLocalService.getFriendlyURLEntryLocalization(categoryHreflist[categoryHreflist?size - 1].getFriendlyURLEntryId(), locale)/>
149 <#assign targetLayout = layoutLocalService.fetchLayoutByFriendlyURL(groupId, false, "/"+categoryHrefLocale.urlTitle) />
150 <#assign lastUrl=portalURL+targetLayout.getFriendlyURL(locale) />
151
152 <div class=" portlet-breadcrumb cc pt-10">
153 <ul class="dfc m-difc ">
154 <li class="dfc pb-10">
155 <a id="lastUrl"><i
156 class="bi bi-arrow-left-short font-24 mr-20"></i></a>
157 </li>
158 <@renderBreadcrumb targetLayout />
159 <#if (values.longnames)?? && (name!="")>
160 <li class="dfc pb-10">
161 <span class="active font-14">${name}</span>
162
163 </li>
164 </#if>
165 </ul>
166 </div>
167 <#-- Función recursiva para construir las migas de pan -->
168
169
170 <#recover>
171 </#attempt>
172<#-- -------------------------------------------------------------------- FIN MIGAS DE PAN -------------------------------------------------------------------- -->
173
174
175 <#assign productImage="" />
176 <section class="produc-detail">
177 <div class="cc pb-40">
178 <div class="col">
179
180 <p style="display:none;" id="productId">
181 ${objectEntryId}
182 </p>
183 <#-- -------------------------------------------------------------------- MOSTRAR NOMBRE -------------------------------------------------------------------- -->
184
185 <div class="pt-header mb-40 pb-40 bb-gray2">
186 <div class="pr-title">
187 <#if (values.longnames)?? && (name!="")>
188 <h1 class="font-36 bold mb-20 m-font-24">${name}</h1>
189
190 </#if>
191 </div>
192 <#-- -------------------------------------------------------------------- FIN MOSTRAR NOMBRE -------------------------------------------------------------------- -->
193 <#assign description = getLanguage(values.description)/>
194 <div class="pr-desc">
195
196 <div class="img-marca mb-20 pb-20 bb-gray2 df aic sb">
197 <#if (values.brand)?? && (values.brand?length > 0)>
198
199 <p style="display:none;" id="productBrand">
200 ${values.brand}
201 </p>
202 <p style="display:none;" id="productUrl">
203 ${hostname}/productos/${values.productUrlEs}
204 </p>
205 <#-- <h3 class="pt-2">Marca: </h3> -->
206 <img src="/o/finanzauto-theme/images/marca/${values.brand?lower_case}.svg"/>
207 </#if>
208
209 <div class="toggle-sys mb-0 tar df aic jce p-20" id="metric-imperial-button">
210 <label class="font-12 bold mr-10"><@liferay.language key="finanzauto.products.unidades.medida" />
211 : </label>
212 <div class="dfc mt-0 mb-0">
213 <p onclick="toggleElements('metric')" id="metric"
214 class="cp mt-0 btn-master bg-primary h-40 "><@liferay.language key="finanzauto.products.metrico" /></p>
215 <p onclick="toggleElements('imperial')" id="imperial"
216 class="cp mt-0 btn-master ml-10 h-40"><@liferay.language key="finanzauto.products.imperial" /></p>
217 </div>
218 </div>
219 </div>
220
221 <#if (values.featuredSpecifications)?? && (values.featuredSpecifications?length > 0)>
222 <div id="featuredSpecifications">${getLanguageSection(values.featuredSpecifications)}</div>
223 </#if>
224 <#-- TO:DO -->
225 <#if buy>
226 <p class="mt-40 font-18 bold mb-20">
227 <@liferay.language key="finanzauto.products.disponibilidad" />
228 </p>
229 <div class="grid-3 gap-20 pb-20 mb-20 bb-gray2">
230 <a class="btn-master w-100 border-neutral300 normal" style="pointer-events: none"
231 href="javascript:void(0)"><@liferay.language key="finanzauto.products.compra" /></a>
232 <a class="btn-master w-100 border-neutral300 normal" style="pointer-events: none"
233 href="javascript:void(0)"><@liferay.language key="finanzauto.products.alquiler" /></a>
234
235 <#if locale=="es_ES" && urlcyclica!="#" && urlcyclica!="" >
236 <a class="btn-master w-100 border-neutral300 underline usada" target="_blank"
237 href="${urlcyclica}"><@liferay.language key="finanzauto.products.usada" /></a>
238 <#elseif locale=="en_GB" && urlCyclicaEnglish!="#" && urlCyclicaEnglish!="" >
239 <a class="btn-master w-100 border-neutral300 underline usada" target="_blank"
240 href="${urlCyclicaEnglish}"><@liferay.language key="finanzauto.products.usada" /></a>
241 <#else>
242 <a class="btn-master w-100 border-neutral300 normal" style="display: none"
243 href="javascript:void(0)"><@liferay.language key="finanzauto.products.usada" /></a>
244 </#if>
245
246 </div>
247 </#if>
248 <div class="grid-2 gap-20 mb-40">
249 <button id="btn-llamanos" class="cp btn-master bg-n c-white h-50 b-0"
250 onclick="callFinanzauto()"><i
251 class="bi bi-telephone mr-10 font-18"></i><@liferay.language key="finanzauto.products.llamanos" />
252 </button>
253 <button id="btn-interesa" onclick="showModalProductAndPushAnalytics()"
254 class="cp btn-master bg-primary h-50 c-white b-0"><@liferay.language key="finanzauto.products.me.interesa" />
255 <i class="ml-5 bi bi-arrow-right-short font-24"></i></button>
256 </div>
257 <div id="scroll-point-of-no-return" class="h-1 w-100"></div>
258 <#if (values.description)?? && (description!="")>
259 <p class="font-16 c-neutral800">${description}</p>
260 </#if>
261
262
263 </div>
264 <#-- -------------------------------------------------------------------- AGRUPAR ARCHIVOS -------------------------------------------------------------------- -->
265 <#assign imageList = [] />
266 <#assign featuresImageList = [] />
267 <#assign pdfList = [] />
268 <#assign attachmentFiles = cpAttachmentFileEntryService.getCPAttachmentFileEntries(classNameId, objectEntryId, 0, 0, -1, -1) />
269 <#-- Fotos por defecto (API Caterpillar) -->
270 <div class="pr-images gap-10 pr h-530">
271 <#list attachmentFiles as attachmentFile>
272 <#attempt>
273 <#assign file = dlFileEntryLocalService.getFileEntry(attachmentFile.getFileEntryId())>
274
275 <#if file.extension=="jpg"|| file.extension=="jpeg"||file.extension=="png">
276 <#if file.fileName?contains("features")>
277 <#assign featuresImageList = featuresImageList + [file] />
278 <#elseif !file.fileName?contains("no2dimage2davailable") && !file.fileName?contains("no-image-available")>
279 <#assign imageList = imageList + [file] />
280 </#if>
281 <#elseif file.extension=="pdf">
282 <#assign pdfList = pdfList + [file]>
283 <#else>
284 </#if>
285 <#recover>
286 </#attempt>
287
288 </#list>
289 <#assign imageList = imageList?sort_by("fileName")>
290
291
292 <#-- -------------------------------------------------------------------- FIN AGRUPAR ARCHIVOS -------------------------------------------------------------------- -->
293
294 <#-- -------------------------------------------------------------------- FOTOS -------------------------------------------------------------------- -->
295 <#-- Fotos personalizadas -->
296 <#assign imagesRelationshipId = objectRelationshipService.getObjectRelationship(objectDefinitionId, "images").getObjectRelationshipId() >
297 <#assign images=objectEntryLocalService.getOneToManyObjectEntries(groupId, imagesRelationshipId, objectEntryId, true, -1, -1)>
298 <#list images as image>
299
300 <#attempt>
301 <#assign fileId = image.getValues()["image"]>
302 <#assign file = dlFileEntryLocalService.getFileEntry(fileId)>
303
304 <#if file.fileName?contains("features")>
305 <#assign featuresImageList = featuresImageList + [file] />
306 <#else>
307 <#assign imageList = imageList + [file] />
308 </#if>
309 <#recover>
310 </#attempt>
311 </#list>
312
313 <#if (imageList?size > 0)>
314 <#-- <h3 class="pt-2">Imágenes</h3> -->
315
316 <#-- mobile -->
317 <div class="image-selector-mobile" style="display:none;">
318 <#assign activeImage="active" />
319 <ul class="mobile-carousel">
320
321 <#assign counter=0 />
322 <#assign visibleElem ="" />
323 <#list imageList as image>
324
325 <li data-id="mobiole-${counter}" class="pr cp ${activeImage}">
326 <img class="pa w-100 h-100 ofc bg-white" loading="lazy"
327 src="${portalURL}/o/adaptive-media/image/${image.getFileEntryId()}/Preview-1000x0/${image.fileName}"/>
328 </li>
329 <#assign activeImage="" />
330 <#assign counter=counter + 1 />
331
332
333 </#list>
334
335 <#if (values.videosUrls)??>
336 <#assign videos = values.videosUrls?split("\n")>
337 <#list videos as video>
338 <#if video != "" >
339 <li data-id="${counter}"
340 class="pr cp ${activeImage} video-yt" ${visibleElem}>
341 <div class="overlay c-video"></div>
342 <div class="btn-play c-video"><i class="bi bi-play-circle-fill"></i>
343 </div>
344 <img data-url="${video}" class="pa w-100 h-100 ofc bg-white"
345 loading="lazy"
346 src="${video?replace('https://www.youtube.com/embed/','https://i.ytimg.com/vi_webp/')}/default.webp"/>
347
348 <#assign counter=counter + 1 />
349
350 </li>
351 </#if>
352 </#list>
353 </#if>
354
355 </ul>
356 </div> <#-- fin mobile -->
357
358
359 <#-- Mostramos todas las fotos -->
360 <div class="image-selector">
361 <#assign activeImage="active" />
362 <ul class="principal-carousel">
363
364 <#assign counter=0 />
365 <#assign visibleElem ="" />
366 <#list imageList as image>
367 <#-- <div class="w-80 h-80 pr mb-10 cp ${activeImage}"><i class="bi bi-x" style="display:none;"></i>
368 <span><img class="pa w-100 h-100 ofc bg-white" src="${portalURL}/documents/${image.repositoryId}/${image.folderId}/${image.fileName}"/></span>
369 <#assign activeImage="" />
370 </div> -->
371
372 <li data-id="${counter}" class="w-80 h-90 pr cp ${activeImage}">
373 <img class="pa w-100 h-80 ofc bg-white" loading="lazy"
374 src="${portalURL}/o/adaptive-media/image/${image.getFileEntryId()}/Preview-1000x0/${image.fileName}"/>
375 </li>
376 <#assign activeImage="" />
377 <#assign counter=counter + 1 />
378
379
380 </#list>
381
382 <#if (values.videosUrls)??>
383 <#assign videos = values.videosUrls?split("\n")>
384 <#list videos as video>
385 <#if video != "" >
386 <li data-id="${counter}"
387 class="w-80 h-90 pr cp ${activeImage} video-yt" ${visibleElem}>
388 <div class="overlay c-video"></div>
389 <div class="btn-play c-video"><i class="bi bi-play-circle-fill"></i>
390 </div>
391 <img data-url="${video}" class="pa w-100 h-80 ofc bg-white"
392 loading="lazy"
393 src="${video?replace('https://www.youtube.com/embed/','https://i.ytimg.com/vi_webp/')}/default.webp"/>
394 <#-- <iframe style="display:none;" width="100" height="80" src="${video}" frameborder="0" allowfullscreen></iframe> -->
395 <#assign counter=counter + 1 />
396
397 </li>
398 </#if>
399 </#list>
400 </#if>
401
402 </ul>
403 </div>
404 <div class="image-principal pr h-530 bg-white" data-size="${imageList?size - 1}">
405 <#list imageList as image>
406 <span><span class="arrow-prev disabled" style="display: none;"><i
407 class="bi bi-chevron-left"></i></span><span class="arrow-next"
408 style="display: none;"><i
409 class="bi bi-chevron-right"></i></span><i class="bi bi-x"
410 style="display:none;"></i>
411 <img class="pa w-100 h-100 ofc bg-white" loading="lazy"
412 src="${portalURL}/o/adaptive-media/image/${image.getFileEntryId()}/Preview-1000x0/${image.fileName}"/></span>
413 <span class="w-28 h-28 db bg-n br-50 pa b-20 r-20 c-white cp zoom-it z-2"><i
414 class="bi bi-zoom-in"></i></span>
415 <#assign productImage>
416 ${portalURL}/o/adaptive-media/image/${image.getFileEntryId()}/Preview-1000x0/${image.fileName}
417 </#assign>
418
419
420 <#break>
421 </#list>
422 </div>
423 <#else>
424 <div>
425
426 </div>
427 <div class="image-principal pr h-530 bg-white" data-size="${1}">
428 <img class="pa w-100 h-100 ofc bg-white" loading="lazy"
429 src="/o/finanzauto-theme/images/no-photo.jpg"/></span>
430 </div>
431 </#if>
432
433
434 </div>
435 </div>
436 <#-- -------------------------------------------------------------------- FIN FOTOS-------------------------------------------------------------------- -->
437 <#-- -------------------------------------------------------------------- PDFS -------------------------------------------------------------------- -->
438
439 <#-- <#if (pdfList?size > 0)>
440 <div class="mb-40 pb-40 bb-gray2 w-100">
441 <h2 class="pb-40 font-32 c-neutral950"><@liferay.language key="documents" /></h2>
442 <div class="pdf-container grid-4 gap-20">
443 <#list pdfList as pdf>
444 <a class="bg-white p-20 br-5 font-14 df" href="${portalURL}/documents/${pdf.repositoryId}/${pdf.folderId}/${pdf.fileName}" download>
445 <i class="bi bi-file-earmark-pdf"></i>
446 ${pdf.fileName}
447 </a>
448 </#list>
449 </div>
450 </div>
451 </#if>
452 -->
453 <#-- -------------------------------------------------------------------- FIN PDFS -------------------------------------------------------------------- -->
454 <#-- -------------------------------------------------------------------- VENTAJAS -------------------------------------------------------------------- -->
455
456 <#assign activeElements=0/>
457
458
459 <#assign getType=""/>
460 <#assign advantages = getLanguageSection(values.advantages)/>
461 <#if (values.advantages)?? && (advantages!="")>
462 <#assign activeElements=1/>
463 <#assign getType>${getType} <a href="javascript:void(0)"
464 class="active btn-master bg-g font-15 mr-5 br-30 bold bg-primary h-50"
465 data-rel="ventajas">
466 <p class="pl-10 pr-10"><@liferay.language key="finanzauto.products.ventajas" /></p>
467 </a></#assign>
468 </#if>
469
470 <#if (values.features)?? && (values.features?length > 0)>
471 <#if activeElements==0>
472 <#assign activeElements=2/>
473 <#assign getType>${getType} <a href="javascript:void(0)"
474 class="active btn-master bg-primary bold font-15 mr-5 br-30 pl-30 pr-30 h-50"
475 data-rel="caracteristicas">
476 <p class="pl-10 pr-10"><@liferay.language key="finanzauto.products.caracteristicas" /></p>
477 </a></#assign>
478 <#else>
479 <#assign getType>${getType} <a href="javascript:void(0)"
480 class="btn-master bg-g normal font-15 mr-5 br-30 pl-30 pr-30 h-50"
481 data-rel="caracteristicas">
482 <p class="pl-10 pr-10"><@liferay.language key="finanzauto.products.caracteristicas" /></p>
483 </a></#assign>
484 </#if>
485 </#if>
486
487 <#if (values.specifications)?? && (values.specifications?length > 0)>
488 <#if activeElements==0>
489 <#assign activeElements=3/>
490 <#assign getType>${getType} <a href="javascript:void(0)"
491 class="active btn-master mr-5 bg-primary bold font-15 br-30 pl-30 pr-30 h-50"
492 data-rel="especificaciones">
493 <p class="pl-10 pr-10"><@liferay.language key="finanzauto.products.especificaciones" /></p>
494 </a></#assign>
495 <#else>
496 <#assign getType>${getType} <a href="javascript:void(0)"
497 class="btn-master mr-5 bg-g normal font-15 br-30 pl-30 pr-30 h-50"
498 data-rel="especificaciones">
499 <p class="pl-10 pr-10"><@liferay.language key="finanzauto.products.especificaciones" /></p>
500 </a></#assign>
501 </#if>
502
503 </#if>
504
505 <#-- Pdfs personalizadas -->
506 <#assign documentsRelationshipId = objectRelationshipService.getObjectRelationship(objectDefinitionId, "documents").getObjectRelationshipId() >
507 <#assign documents=objectEntryLocalService.getOneToManyObjectEntries(groupId, documentsRelationshipId, objectEntryId, true, -1, -1)>
508 <#list documents as document>
509 <#assign fileId = document.getValues()["document"]>
510
511 <#attempt>
512 <#assign file = dlFileEntryLocalService.getFileEntry(fileId)>
513 <#assign pdfList = pdfList + [file]>
514 <#recover>
515 </#attempt>
516 </#list>
517 <#if (pdfList?size > 0)>
518
519 <#if activeElements==0>
520 <#assign activeElements=4/>
521 <#assign getType>${getType} <a href="javascript:void(0)"
522 class="active btn-master bg-primary bold font-15 br-30 pl-30 pr-30 h-50"
523 data-rel="documentos">
524 <p class="pl-10 pr-10"><@liferay.language key="finanzauto.products.documentos" /></p>
525 </a></#assign>
526 <#else>
527 <#assign getType>${getType} <a href="javascript:void(0)"
528 class="btn-master bg-g normal font-15 br-30 pl-30 pr-30 h-50"
529 data-rel="documentos">
530 <p class="pl-10 pr-10"><@liferay.language key="finanzauto.products.documentos" /></p>
531 </a></#assign>
532 </#if>
533
534 </#if>
535
536 <div class="tag-navigation mb-20">
537 ${getType}
538 </div>
539
540
541 <#if (values.advantages)?? && (advantages!="")>
542
543 <#assign style>
544 style="display:none;"
545 </#assign>
546 <#if activeElements == 1>
547 <#assign style="" />
548 </#if>
549 <div class="tag-content" id="ventajas" ${style}>${advantages}</div>
550 </#if>
551
552 <#-- -------------------------------------------------------------------- FIN VENTAJAS -------------------------------------------------------------------- -->
553 <#-- -------------------------------------------------------------------- CARACTERÍSTICAS -------------------------------------------------------------------- -->
554
555
556 <#if (values.features)?? && (values.features?length > 0)>
557
558 <#-- <h3 class="pt-4">Características</h3> -->
559 <#assign counter = 0>
560 <#assign features = getLanguageSection(values.features)>
561 <#assign featuresImageList = featuresImageList?sort_by("fileName")>
562
563
564
565 <#if (featuresImageList?size > 0)>
566 <#list 0..(featuresImageList?size-1) as i>
567 <#if features?contains("FEATURE_IMAGE")>
568 <#assign image = featuresImageList[counter]>
569 <#assign imageText = "<img loading='lazy' style='height:400px;width:auto'src='${portalURL}/o/adaptive-media/image/${image.getFileEntryId()}/Preview-1000x0/${image.fileName}'"/>
570 <#assign features = features?replace("<p>FEATURE_IMAGE</p>", imageText,"f")>
571 <#assign counter = counter + 1>
572 </#if>
573 </#list>
574 </#if>
575 <#assign features = features?replace("<p>FEATURE_IMAGE</p>", ' <img class="height:400px;width:auto" loading="lazy"
576 src="/o/finanzauto-theme/images/no-photo.jpg"/>',"a")>
577
578
579 <#assign style>
580 style="display:none;"
581 </#assign>
582 <#if activeElements == 2>
583 <#assign style="" />
584 </#if>
585 <div class="tag-content" id="caracteristicas" ${style}>${features}</div>
586 </#if>
587
588 <#if (pdfList?size > 0)>
589 <#assign style>
590 style="display:none;"
591 </#assign>
592 <#if activeElements == 3>
593 <#assign style="" />
594 </#if>
595 <div class="tag-content" id="documentos" ${style}>
596 <div class="pdf-container grid-4 gap-20">
597 <#list pdfList as pdf>
598 <a class="bg-white p-20 br-5 font-14 df"
599 href="${portalURL}/documents/${pdf.repositoryId}/${pdf.folderId}/${pdf.fileName}"
600 download>
601 <i class="bi bi-file-earmark-pdf"></i>
602 ${pdf.fileName}
603 </a>
604 </#list>
605 </div>
606 </div>
607
608 </#if>
609 <#-- -------------------------------------------------------------------- FIN CARACTERÍSTICAS-------------------------------------------------------------------- -->
610 <#-- -------------------------------------------------------------------- ESPECIFICACIONES -------------------------------------------------------------------- -->
611 <#if (values.specifications)?? && (values.specifications?length > 0)>
612 <#assign getType>${getType} Especificaciones</#assign>
613 <#-- <h3 class="pt-4">Especificaciones</h3> -->
614 <#assign style>
615 style="display:none;"
616 </#assign>
617 <#if activeElements == 3>
618 <#assign style="" />
619 </#if>
620 <div class="tag-content"
621 id="especificaciones" ${style}>${getLanguageSection(values.specifications)}</div>
622 </#if>
623
624
625 </div>
626 </div>
627 <div class="bg-neutral100 pt-40">
628
629 <div class="cc">
630 <#-- -------------------------------------------------------------------- FIN ESPECIFICACIONES-------------------------------------------------------------------- -->
631 <#-- -------------------------------------------------------------------- RELACIONADOS -------------------------------------------------------------------- -->
632
633
634 <#if (category??) >
635 <#assign allObjectsValues =[] />
636 <#assign allBrothersObjectsValues =[] />
637 <#--Productos hermanos -->
638 <#assign hits = assetEntryLocalService.search(companyId,[groupId],0,className,"","","",category.getCategoryId()+"","",0,true,0,99).getDocs()>
639 <#list hits as hit>
640 <#assign objectId = hit.entryClassPK?number />
641 <#if (objectId!= objectEntryId) >
642 <#-- ------------- Valores del producto ------------- -->
643 <#assign valuesR = objectEntryLocalService.getValues(objectId) />
644 <#assign valuesR = valuesR + {"objectEntryId": objectId}>
645 <#assign allBrothersObjectsValues = allBrothersObjectsValues + [valuesR] />
646 </#if>
647 </#list>
648 </#if>
649 <#--Productos relacionados -->
650 <#if (values.relationships)?? && (values.relationships?length > 0)>
651 <#list values.relationships?split("\n") as relationship>
652 <#assign objectSearchBaseModels = objectEntryLocalService.searchObjectEntries(groupId,objectDefinitionId,relationship, 1, 1)>
653 <#if (objectSearchBaseModels.baseModels?size>0) >
654 <#assign addToAllObjects = true />
655 <#assign objectSearch = objectSearchBaseModels.baseModels[0]>
656 <#assign objectId = objectSearch.objectEntryId>
657 <#-- Verificar si objectId ya está en allObjectsValues -->
658 <#list allBrothersObjectsValues as objectValues>
659 <#if objectValues.objectEntryId == objectId >
660 <#assign addToAllObjects = false />
661 </#if>
662 </#list>
663 <#if addToAllObjects >
664 <#assign valuesR = objectEntryLocalService.getValues(objectId)>
665 <#assign valuesR = valuesR + {"objectEntryId": objectId}>
666 <#assign allObjectsValues = allObjectsValues + [valuesR] />
667 </#if>
668 </#if>
669 </#list>
670 </#if>
671 <#-- ------------- Tambien te puede interesar: ------------- -->
672 <#if (allBrothersObjectsValues)?? &&(allBrothersObjectsValues?size > 0) >
673 <h2 class="font-20 c-neutral900 mb-20 dfc"><@liferay.language key="finanzauto.products.products.related"/></h2>
674
675
676 <div class="mb-40 p-relacionados">
677 <ul class="pb-20 product-carousel">
678 <#assign hideLoadCarousel = "" />
679
680 <#assign allBrothersObjectsValues = allBrothersObjectsValues?sort_by("names")>
681 <#assign count=0 >
682 <#list allBrothersObjectsValues as valuesR>
683 <#assign count=count+1 >
684 <#assign imageList = [] />
685
686 <#-- ------------- Imagen del producto ------------- -->
687 <#assign attachmentFiles = cpAttachmentFileEntryService.getCPAttachmentFileEntries(classNameId, valuesR.objectEntryId, 0, 0, -1, -1) />
688 <#list attachmentFiles as attachmentFile>
689
690 <#attempt>
691 <#assign image = dlFileEntryLocalService.getFileEntry(attachmentFile.getFileEntryId())/>
692 <#if (image.extension=="jpg"|| image.extension=="jpeg"||image.extension=="png") && !image.fileName?contains("features") && !image.fileName?contains("no2dimage2davailable")>
693 <#assign imageList = imageList + [image] />
694 </#if>
695 <#recover>
696 </#attempt>
697 </#list>
698 <#assign image = -1>
699 <#assign imageList = imageList?sort_by("fileName")>
700 <#if (imageList?size>0)>
701 <#assign image = imageList[0]>
702 <#else><#-- Fotos personalizadas -->
703 <#assign imagesRelationshipId = objectRelationshipService.getObjectRelationship(objectDefinitionId, "images").getObjectRelationshipId() >
704 <#assign images=objectEntryLocalService.getOneToManyObjectEntries(groupId, imagesRelationshipId, valuesR.objectEntryId, true, -1, -1)>
705 <#list images as image>
706 <#assign fileId = image.getValues()["image"]>
707 <#attempt>
708 <#assign file = dlFileEntryLocalService.getFileEntry(fileId)>
709 <#assign imageList = imageList + [file]>
710 <#recover>
711 </#attempt>
712 </#list>
713
714 <#assign imageList = imageList?sort_by("fileName")>
715 <#if (imageList?size>0)>
716 <#assign image = imageList[0]>
717 </#if>
718 </#if>
719 <li ${hideLoadCarousel}>
720 <#if locale=="es_ES" >
721 <a href="/productos/${valuesR.productUrlEs}" class="w-card product w-100 br-10 oh">
722 <#else>
723 <a href="/en/products/${valuesR.productUrlEn}"
724 class="w-card product w-100 br-10 oh">
725 </#if>
726 <span class="image">
727 <#if (image?? && (!image?is_number)) >
728
729 <img class="ofc" loading="lazy"
730 src="${portalURL}/o/adaptive-media/image/${image.getFileEntryId()}/Thumbnail-300x300/${image.fileName}"/>
731 <#else>
732 <img class="ofc" src="/o/finanzauto-theme/images/no-photo.jpg"/>
733 </#if>
734 </span>
735 <span class="container">
736 <span class="c-title bb-gray pt-10 pb-10 mb-10 dfc sb">
737 <h3 class="underline bold font-15">
738 ${getLanguage(valuesR.names)}
739 </h3>
740 <span class="card-chevron dfcc w-28 h-28 border-white br-50 circle-white"><i
741 class="bi bi-chevron-right bold"></i></span>
742 </span>
743 <span class="c-info font-14 c-neutral900">
744 ${getLanguageSection(valuesR.featuredSpecifications)}
745 </span>
746 <p style="display:none;"
747 class="product-brand">${valuesR.brand}</p>
748 <p style="display:none;"
749 class="product-id">${valuesR.objectEntryId}</p>
750 </span>
751
752 </a>
753
754 </li>
755 <#if count == 4 >
756 <#assign hideLoadCarousel>style="display:none"</#assign>
757 </#if>
758 <#if count == maxRelationships >
759 <#break>
760 </#if>
761 </#list>
762 </ul>
763 </div>
764 </#if>
765 <#-- ------------- Implementos compatibles: ------------- -->
766 <#if (allObjectsValues??)&&(allObjectsValues?size > 0) >
767
768 <#if implement>
769 <h2 class="font-20 c-neutral900 mb-20 dfc"><@liferay.language key="finanzauto.products.products.maquinas"/></h2>
770 <#else>
771 <h2 class="font-20 c-neutral900 mb-20 dfc"><@liferay.language key="finanzauto.products.products.implementos"/></h2>
772 </#if>
773
774
775 <div class="mb-40 p-relacionados">
776 <ul class="pb-20 product-implements-carousel">
777 <#assign hideLoadCarousel = "" />
778
779 <#assign allObjectsValues = allObjectsValues?sort_by("names")>
780 <#assign count=0 >
781 <#list allObjectsValues as valuesR>
782 <#assign count=count+1 >
783 <#assign imageList = [] />
784
785 <#-- ------------- Imagen del producto ------------- -->
786 <#assign attachmentFiles = cpAttachmentFileEntryService.getCPAttachmentFileEntries(classNameId, valuesR.objectEntryId, 0, 0, -1, -1) />
787 <#list attachmentFiles as attachmentFile>
788 <#attempt>
789 <#assign image = dlFileEntryLocalService.getFileEntry(attachmentFile.getFileEntryId())/>
790 <#if (image.extension=="jpg"|| image.extension=="jpeg"||image.extension=="png") && !image.fileName?contains("features") && !image.fileName?contains("no2dimage2davailable")>
791 <#assign imageList = imageList + [image] />
792 </#if>
793 <#recover>
794 </#attempt>
795 </#list>
796 <#assign image = -1>
797 <#assign imageList = imageList?sort_by("fileName")>
798 <#if (imageList?size>0)>
799 <#assign image = imageList[0]>
800 <#else><#-- Fotos personalizadas -->
801 <#assign imagesRelationshipId = objectRelationshipService.getObjectRelationship(objectDefinitionId, "images").getObjectRelationshipId() >
802 <#assign images=objectEntryLocalService.getOneToManyObjectEntries(groupId, imagesRelationshipId, valuesR.objectEntryId, true, -1, -1)>
803 <#list images as image>
804 <#attempt>
805 <#assign fileId = image.getValues()["image"]>
806 <#assign file = dlFileEntryLocalService.getFileEntry(fileId)>
807 <#assign imageList = imageList + [file]>
808
809 <#recover>
810 </#attempt>
811 </#list>
812
813 <#assign imageList = imageList?sort_by("fileName")>
814 <#if (imageList?size>0)>
815 <#assign image = imageList[0]>
816 </#if>
817 </#if>
818 <li ${hideLoadCarousel}>
819 <#if locale=="es_ES" >
820 <a href="/productos/${valuesR.productUrlEs}" class="w-card product w-100 br-10 oh">
821 <#else>
822 <a href="/en/products/${valuesR.productUrlEn}"
823 class="w-card product w-100 br-10 oh">
824 </#if>
825 <span class="image">
826 <#if (image?? && (!image?is_number)) >
827 <img class="ofc" loading="lazy"
828 src="${portalURL}/o/adaptive-media/image/${image.getFileEntryId()}/Thumbnail-300x300/${image.fileName}"/>
829 <#else>
830 <img class="ofc" src="/o/finanzauto-theme/images/no-photo.jpg"/>
831 </#if>
832 </span>
833 <#assign sectionLength = 1 />
834 <#attempt>
835 <#if getLanguageSection(valuesR.featuredSpecifications)?length == 0>
836 <#assign sectionLength = 0 />
837 </#if>
838 <#recover>
839
840 </#attempt>
841 <span class="container container-${sectionLength}">
842 <span class="c-title bb-gray pt-10 pb-10 mb-10 dfc sb">
843 <h3 class="underline bold font-15">
844 ${getLanguage(valuesR.names)}
845 </h3>
846 <span class="card-chevron dfcc w-28 h-28 border-white br-50 circle-white"><i
847 class="bi bi-chevron-right bold"></i></span>
848 </span>
849 <span class="c-info font-14 c-neutral900">
850 ${getLanguageSection(valuesR.featuredSpecifications)}
851
852 </span>
853 <p style="display:none;"
854 class="product-brand">${valuesR.brand}</p>
855 <p style="display:none;"
856 class="product-id">${valuesR.objectEntryId}</p>
857 </span>
858
859 </a>
860
861 </li>
862 <#if count == 4 >
863 <#assign hideLoadCarousel>style="display:none"</#assign>
864 </#if>
865 <#if count == maxRelationships >
866 <#break>
867 </#if>
868 </#list>
869 </ul>
870 </div>
871 </#if>
872
873
874 <#-- -------------------------------------------------------------------- FIN RELACIONADOS -------------------------------------------------------------------- -->
875
876 <#-- -------------------------------------------------------------------- CATEGORIAS RELACIONADAS -------------------------------------------------------------------- -->
877
878 <#assign count=0 >
879 <#if ((categories??) && (categories?size>0)) >
880 <#assign sisterCategories = assetCategoryLocalService.getSubcategoryIds(parentCategoryId)/>
881 <#assign parentCategory = category.getParentCategory()/>
882 <#assign parentCategoryName = parentCategory.getName() />
883
884 <#assign hideLoadCarousel = "" />
885
886 <#assign categories = [] />
887 <#list sisterCategories as categoryId>
888 <#assign showCategory = true/>
889 <#if categoryId!= parentCategoryId && categoryId!=category.getCategoryId()>
890 <#assign sisterCategory = assetCategoryLocalService.getAssetCategory(categoryId)/>
891 <#assign categoryProperties = assetCategoryPropertyService.getCategoryProperties(categoryId)/>
892 ${sisterCategory.setName("99")}
893 <#list categoryProperties as categoryProperty>
894 <#assign key=categoryProperty["key"]/>
895 <#if (key == "SORT") >
896 ${sisterCategory.setName(categoryProperty["value"])}
897 </#if>
898 <#if (key == "DONT_SHOW_CHILDS") >
899 <#assign showCategory = false/>
900 </#if>
901 </#list>
902
903 <#if showCategory >
904 <#assign categories = categories+[sisterCategory] />
905 </#if>
906 </#if>
907 </#list>
908 <#if ((categories??) && (categories?size>0)) && showSisterCategories >
909 <h2 class="font-20 c-neutral900 mb-20 dfc"><@liferay.language key="finanzauto.products.other.categories"/>
910 ${parentCategoryName}:</h2>
911 <div class="mb-40 p-relacionados">
912 <ul class="pb-20 categories-carousel">
913 <#assign categories = categories?sort_by("name")>
914
915 <#list categories as category>
916 <#attempt>
917 <#assign count=count+1 >
918 <#assign categoryId = category.getCategoryId() />
919
920 <#assign attachmentFile = cpAttachmentFileEntryService.getCPAttachmentFileEntries(assetCategoryClassNameId, categoryId, 0, 0, -1, -1) />
921 <#assign image=-1>
922 <#if ((attachmentFile??) && (attachmentFile?size>0))>
923 <#assign image = dlFileEntryLocalService.getFileEntry(attachmentFile[0].getFileEntryId())>
924 </#if>
925 <#assign categoryName = category.getTitle(locale) />
926 <#assign categoryHreflist = friendlyURLEntryLocalService.getFriendlyURLEntries(groupId,assetCategoryClassNameId, categoryId)/>
927
928 <#list categoryHreflist as categoryHref>
929 <#assign categoryHrefLocale = friendlyURLEntryLocalService.getFriendlyURLEntryLocalization(categoryHref.getFriendlyURLEntryId(),locale)/>
930 </#list>
931 <li ${hideLoadCarousel}>
932 <#assign url_bc = "">
933 <#if locale == "en_GB">
934 <#assign url_bc = "/en" >
935 </#if>
936
937 <a href="${url_bc}/${categoryHrefLocale.getUrlTitle()?replace('/g/','/')}"
938 class="w-card w-100 product fleet">
939 <span class="image p-15">
940 <#if image?? && (!image?is_number) >
941 <img class="ofc" loading="lazy"
942 src="${portalURL}/o/adaptive-media/image/${image.getFileEntryId()}/Thumbnail-300x300/${image.fileName}"/>
943 <#else>
944 <img class="ofc" src="/o/finanzauto-theme/images/no-photo.jpg"/>
945 </#if>
946 </span>
947 <span class="container">
948 <span class="card-title">
949 <h3 class="underline m-font-14 font-16">
950 ${categoryName}
951 </h3>
952 <span class="card-chevron dfcc w-32 h-32 border-white br-50"><i
953 class="bi bi-chevron-right"></i></span>
954 </span>
955 </span>
956 </a>
957 </li>
958 <#if count == 4 >
959 <#assign hideLoadCarousel>style="display:none"</#assign>
960 </#if>
961 <#recover>
962 </#attempt>
963 </#list>
964 </ul>
965 </div>
966 </#if>
967 </#if>
968
969
970
971 <#-- -------------------------------------------------------------------- FIN CATEGORIAS RELACIONADAS-------------------------------------------------------------------- -->
972
973 </div>
974
975 <#if ((values.url360Inside)?? && (values.url360Inside?has_content)) || (values.url360Outside)?? &&(values.url360Outside?has_content) || ((values.urlVirtualShowroom)?? &&(values.urlVirtualShowroom?has_content)) >
976 <div class="bg-white pt-60 pb-60">
977 <div class="cc">
978 <#-- -------------------------------------------------------------------- 360 -------------------------------------------------------------------- -->
979
980 <#assign getIframe=""/>
981
982 <#assign selectedTab="selected" />
983 <#assign styleTab=""/>
984
985
986 <ul class="df jcc pb-5 mb-20 bb-gray">
987 <#if (values.url360Inside)?? && (values.url360Inside?has_content) >
988 <#assign secure360InsideUrl = values.url360Inside?replace("http:", "https:")>
989 <li class="pl-10 pr-10 pr"><h3 data-tab="1"
990 class="nav-tab ${selectedTab} font-16 cp"><@liferay.language key="finanzauto.products.360.interior" /></h3>
991 </li>
992 <#assign getIframe>${getIframe}
993 <div id="data-tab-1" ${styleTab} class="content-tab df jcc">
994 <iframe class="border-0" width="750" height="750" src="${secure360InsideUrl}"
995 scrolling="no"></iframe>
996 </div></#assign>
997 <#assign selectedTab="normal" />
998 <#assign styleTab>style="display:none;"</#assign>
999 </#if>
1000
1001 <#if (values.url360Outside)?? &&(values.url360Outside?has_content) >
1002 <#assign secure360OutsideUrl = values.url360Outside?replace("http:", "https:")>
1003 <li class="pl-10 pr-10 pr"><h3 data-tab="2"
1004 class="nav-tab ${selectedTab} font-16 cp"><@liferay.language key="finanzauto.products.360.exterior" /></h3>
1005 </li>
1006 <#assign getIframe>${getIframe}
1007 <div id="data-tab-2" ${styleTab} class="content-tab df jcc">
1008 <iframe class="border-0" width="750" height="750"
1009 src="${secure360OutsideUrl}" scrolling="no"></iframe>
1010 </div></#assign>
1011 <#assign selectedTab="normal" />
1012 <#assign styleTab>style="display:none;"</#assign>
1013 </#if>
1014 <#-- -------------------------------------------------------------------- FIN 360-------------------------------------------------------------------- -->
1015 <#-- -------------------------------------------------------------------- TOUR VIRTUAL -------------------------------------------------------------------- -->
1016 <#if (values.urlVirtualShowroom)?? &&(values.urlVirtualShowroom?has_content) >
1017 <#assign secureVirtualShowroomUrl = values.urlVirtualShowroom?replace("http:", "https:")>
1018 <li class="pl-10 pr-10 pr"><h3 data-tab="3"
1019 class="nav-tab ${selectedTab} font-16 cp"><@liferay.language key="finanzauto.products.tour.virtual" /></h3>
1020 </li>
1021 <#assign getIframe>${getIframe}
1022 <div id="data-tab-3" ${styleTab} class="content-tab df jcc">
1023 <iframe class="border-0" width="750" height="750"
1024 src="${secureVirtualShowroomUrl}" scrolling="no"></iframe></div></#assign>
1025 <#assign selectedTab="normal" />
1026 <#assign styleTab>style="display:none;"</#assign>
1027 </#if>
1028 </ul>
1029 <div class="tabs-container">
1030 ${getIframe}
1031 </div>
1032 <#-- -------------------------------------------------------------------- FIN TOUR VIRTUAL-------------------------------------------------------------------- -->
1033 </div>
1034 </div>
1035 </#if>
1036 </div>
1037 </div>
1038
1039 <div id="fixed-info" class="bb-gray2">
1040 <div class="cc dfc sb h-85 gap-20">
1041 <span class="dfc m-dn"><span class="db w-70 h-70 pr mr-20"><img class="pa w-100 h-100 l-0 t-0"
1042 loading="lazy"
1043 src="${productImage}"/></span><p
1044 class="mw-550 font-18 bold c-neutral900">${name}</p></span>
1045 <div class="grid-2 gap-20 w-100 mw-350 m-mw-i">
1046 <button
1047 class="btn-master bg-n c-white h-50 cp b-0" onclick="callFinanzauto()"><i
1048 class="bi bi-telephone mr-10 font-18 btn-llamanos"></i><@liferay.language key="finanzauto.products.llamanos" />
1049 </button>
1050 <button onclick="showModalProductAndPushAnalytics()"
1051 class="btn-interes btn-master bg-primary h-50 c-white b-0 cp"><@liferay.language key="finanzauto.products.me.interesa" />
1052 <i class="ml-5 bi bi-arrow-right-short font-24"></i></button>
1053 </div>
1054 </div>
1055 </div>
1056
1057
1058 </section>
1059 <div class="modal fade" id="modalPhone" tabindex="-1" role="dialog" aria-labelledby="modalNoResultsLabel"
1060 aria-hidden="true" style="display:none;">
1061 <div class="modal-dialog" role="document">
1062 <div class="modal-content">
1063 <div class="modal-header">
1064 <div class="panel-header tac pb-10 mb-30">
1065 <h2 class="h2 font-32 bold mt-40"><@liferay.language key="finanzauto.products.llamanos" /></h2>
1066 <button type="button" class="close-popup close" data-dismiss="modal" aria-label="Close">
1067 <span aria-hidden="true"><i class="bi bi-x"></i></span>
1068 </button>
1069 </div>
1070 </div>
1071 <div class="modal-body">
1072 <div class="panel cc pt-40 pb-40 maxw-900">
1073 <div class="panel-body">
1074 <div class="call-us">
1075 <a href="tel:+34${finanzautoPhone}"><span><i
1076 class="bi bi-telephone-outbound"></i></span></a>
1077 <p>
1078 <a href="tel:+34${finanzautoPhone}">+34 ${finanzautoPhone}</a>
1079 </p>
1080 </div>
1081 </div>
1082 </div>
1083 </div>
1084 </div>
1085 </div>
1086 </div>
1087 <style>
1088 .controls-visible.has-control-menu.scrolled-product div#fixed-info {
1089 margin-top: 0px !important;
1090 }
1091
1092 body.modal-open header#banner {
1093 z-index: 1;
1094 }
1095
1096 HTML body header#banner {
1097 transform: inherit !important;
1098 }
1099
1100 .w-card span.container.container-0 span.c-title {
1101 border: 0px;
1102 margin-bottom: 0px;
1103 padding-bottom: 0px;
1104 align-items: center;
1105 justify-content: center;
1106 }
1107
1108 @media (max-width: 990px) {
1109
1110 .active-video-ytb {
1111 position: fixed;
1112 top: 0px;
1113 left: 0px;
1114 z-index: 999;
1115 width: 100%;
1116 height: 100%;
1117 background-color: #fffffff5;
1118 display: flex;
1119 align-items: center;
1120 justify-content: center;
1121 padding-left: 20px;
1122 padding-right: 20px;
1123 }
1124
1125 .active-video-ytb iframe {
1126 width: 100%;
1127 max-height: calc(100% - 100px);
1128 height: 350px;
1129 border: 0px;
1130 max-width: 700px;
1131 }
1132
1133 .close-video-mobile {
1134 position: absolute;
1135 top: 10px;
1136 right: 15px;
1137 font-size: 29px;
1138 cursor: pointer;
1139 }
1140
1141 .youtube-mobile-video {
1142 overflow: hidden;
1143 }
1144
1145 .youtube-mobile-video #smartsupp-widget-container {
1146 visibility: hidden;
1147 }
1148 }
1149
1150
1151 @media (min-width: 770px) {
1152 body header#banner {
1153 position: relative !important;
1154 top: 0px;
1155 width: 100%;
1156 transform: translateY(0px) !important;
1157
1158 }
1159
1160 body.languagePopup header#banner {
1161 transform: inherit !important;
1162 }
1163 }
1164
1165 /*.portlet-breadcrumb ul li a, .portlet-breadcrumb ul li span {
1166 max-width: 350px;
1167 white-space: nowrap;
1168 overflow: hidden;
1169 text-overflow: ellipsis;
1170 }*/
1171
1172 .portlet-breadcrumb > ul > li {
1173 float: left;
1174 }
1175
1176 .portlet-breadcrumb > ul > li:first-child {
1177 position: absolute;
1178 left: 0px;
1179 }
1180
1181 .portlet-breadcrumb > ul {
1182 display: inline-block !important;
1183 width: 100%;
1184 padding-left: 44px;
1185 position: relative;
1186 box-sizing: border-box;
1187 }
1188
1189
1190 .b-0 {
1191 border: 0;
1192 }
1193
1194 .caterpillar #metric, .caterpillar #imperial {
1195 border: 1px solid #fc0;
1196 }
1197
1198 #metric, #imperial {
1199 margin-left: 0px;
1200 max-height: 30px;
1201 border: 1px solid #e4032e;
1202 }
1203
1204 #metric:not(.bg-primary) {
1205 font-weight: normal !important;
1206 }
1207
1208 #imperial:not(.bg-primary) {
1209 font-weight: normal !important;
1210 }
1211
1212 .image-selector {
1213 height: 530px;
1214 }
1215
1216 .principal-carousel:not(.tns-carousel) {
1217
1218 position: relative;
1219 max-height: 530px;
1220 overflow: hidden;
1221 }
1222
1223 .principal-carousel .btn-play i {
1224 color: #fff;
1225 font-size: 25px;
1226 }
1227
1228 .principal-carousel .btn-play {
1229 position: absolute;
1230 z-index: 3;
1231 width: 100%;
1232 height: 100%;
1233 display: flex;
1234 align-items: center;
1235 justify-content: center;
1236 }
1237
1238 body .principal-carousel .overlay {
1239 opacity: 0.6 !important;
1240 background-color: #242424 !important;
1241 z-index: 2 !important;
1242 height: 80px !important;
1243 width: 100%;
1244 position: absolute;
1245 top: 0px !important;
1246 }
1247
1248 .accordion-content {
1249 padding-top: 20px;
1250 }
1251
1252 div#especificaciones .tar {
1253 text-align: left;
1254 margin-top: 5px;
1255 margin-bottom: 5px;
1256 }
1257
1258 .pt-header {
1259 display: grid;
1260
1261 column-gap: 40px;
1262 grid: "a b""a c" 1fr;
1263 grid-template-columns: 60% 1fr;
1264 }
1265
1266 .pr-title {
1267 grid-area: b;
1268 }
1269
1270 .pr-desc {
1271 grid-area: c;
1272 }
1273
1274 .pr-images {
1275 grid-area: a;
1276 }
1277
1278 .pr-images {
1279 display: grid;
1280 grid-template-columns: 100px 1fr;
1281 width: 100%;
1282 }
1283
1284 .caterpillar .image-selector .active img {
1285 outline: 2px solid #FFCC00;
1286 outline-offset: -2px;
1287 }
1288
1289 .image-selector .active {
1290 outline: 2px solid #000;
1291 }
1292
1293 .image-selector > div:not(.active):hover {
1294 outline: 2px solid #9d9d9d;
1295 }
1296
1297 .product-carousel .tns-item {
1298 padding-right: 10px;
1299 }
1300
1301 .product-implements-carousel .tns-item {
1302 padding-right: 10px;
1303 }
1304
1305 .categories-carousel .tns-item {
1306 padding-right: 10px;
1307 }
1308
1309 .p-relacionados .tns-outer {
1310 display: grid;
1311 grid-template:
1312 "a a"
1313 "b c";
1314 }
1315
1316 .p-relacionados .tns-controls {
1317 grid-area: c;
1318 display: flex;
1319 justify-content: flex-end;
1320 padding-right: 10px;
1321 }
1322
1323 .p-relacionados .tns-nav {
1324 grid-area: b;
1325 }
1326
1327 .p-relacionados .tns-ovh {
1328 grid-area: a;
1329 }
1330
1331 .tns-controls button {
1332 width: 32px;
1333 height: 32px;
1334 border-radius: 50%;
1335 border: 0px;
1336 background-color: #030712;
1337 color: #fff;
1338 overflow: hidden;
1339 white-space: nowrap;
1340 text-indent: 100px;
1341 position: relative;
1342 }
1343
1344 .tns-controls button + button {
1345 margin-left: 10px;
1346 }
1347
1348 .tns-controls button + button::after {
1349 content: "\F285";
1350 font-size: 14px;
1351 color: #fff;
1352 text-indent: 0px;
1353 left: 10px;
1354 top: 9px;
1355 position: absolute;
1356 z-index: 1;
1357 font-family: 'bootstrap-icons';
1358 font-weight: bold;
1359 }
1360
1361 .tns-controls button:first-child::after {
1362 content: "\F284";
1363 font-size: 14px;
1364 color: #fff;
1365 text-indent: 0px;
1366 left: 9px;
1367 top: 9px;
1368 position: absolute;
1369 z-index: 1;
1370 font-family: 'bootstrap-icons';
1371 font-weight: bold;
1372 }
1373
1374 .tns-controls button[disabled] {
1375 background-color: #d4d6d8;
1376 color: #404953;
1377 }
1378
1379 .tns-controls button[disabled]::after {
1380 color: #404953;
1381 }
1382
1383 .tns-nav button {
1384 width: 50px;
1385 margin-right: 20px;
1386 border-radius: 6px;
1387 border: 0px;
1388 background-color: #bfc2c6;
1389 height: 4px;
1390 }
1391
1392 .tns-nav button.tns-nav-active {
1393 background-color: #030712;
1394 }
1395
1396 .tns-item {
1397 opacity: 0;
1398 transition: all 0.25s linear;
1399 }
1400
1401 .tns-item.tns-slide-active {
1402 opacity: 1;
1403 }
1404
1405 #especificaciones table tr {
1406 display: grid;
1407 width: 100%;
1408 grid-template-columns: 1fr 1fr;
1409 padding-top: 20px;
1410 padding-bottom: 20px;
1411 border-top: 1px solid #adb1b6;
1412 }
1413
1414 table tr:nth-child(even) {
1415 background-color: #d4d6d8;
1416 }
1417
1418 div#especificaciones table tr td {
1419 padding-left: 20px;
1420 font-size: 16px;
1421 letter-spacing: 0.5px;
1422 color: #1A2431;
1423 }
1424
1425 #especificaciones table {
1426
1427 width: 100%;
1428 }
1429
1430 #especificaciones h4, #ventajas h4, #caracteristicas h4 {
1431 font-size: 18px;
1432 margin-top: 20px;
1433 width: 100%;
1434 display: inline-block;
1435 margin-bottom: 10px;
1436 }
1437
1438 #caracteristicas ul {
1439 list-style: disc;
1440 margin-top: 10px;
1441 margin-bottom: 10px;
1442 padding-left: 20px;
1443 }
1444
1445 #caracteristicas ul li {
1446 margin-bottom: 10px;
1447 }
1448
1449 .produc-detail, .portlet-boundary_com_liferay_site_navigation_breadcrumb_web_portlet_SiteNavigationBreadcrumbPortlet_ {
1450 background-color: #f7f8f8;
1451 }
1452
1453 i.bi.bi-file-earmark-pdf {
1454 margin-right: 10px;
1455 font-size: 20px;
1456 height: 100%;
1457 }
1458
1459 div#fixed-info {
1460 position: fixed;
1461 top: 0px;
1462 left: 0px;
1463 width: 100%;
1464 z-index: -1;
1465 background-color: #fff;
1466 opacity: 0;
1467 transition: opacity 0.2s linear;
1468 }
1469
1470 .scrolled-product div#fixed-info {
1471 z-index: 1;
1472 opacity: 1;
1473 }
1474
1475 .controls-visible.has-control-menu.scrolled-product div#fixed-info {
1476 margin-top: 56px;
1477 }
1478
1479 i.bi.bi-zoom-in {
1480 left: 7px;
1481 font-size: 14px;
1482 position: relative;
1483 top: 4px;
1484 }
1485
1486 .zoom-image {
1487 overflow: hidden;
1488 }
1489
1490 body.zoom-image .image-principal {
1491 position: fixed;
1492 background-color: #030712;
1493 width: 100%;
1494 height: 100%;
1495 top: 0px;
1496 left: 0;
1497 z-index: 2;
1498 display: flex;
1499 align-items: center;
1500 justify-content: center;
1501 }
1502
1503 body.zoom-image .zoom-it {
1504 display: none;
1505 }
1506
1507 body.zoom-image .image-principal > span:first-child {
1508 position: absolute;
1509 top: 0px;
1510 left: 0px;
1511 width: 100%;
1512 height: 100%;
1513 display: block;
1514 padding: 50px;
1515 }
1516
1517 body.zoom-image .image-principal > span:first-child img {
1518 width: 100%;
1519 height: 100%;
1520 position: relative;
1521 object-fit: contain;
1522 background-color: transparent;
1523 }
1524
1525 body.zoom-image header#banner {
1526 z-index: 0;
1527 }
1528
1529 body.zoom-image .image-selector .active > span {
1530 display: block;
1531 width: 80%;
1532 height: 80%;
1533 position: relative;
1534 }
1535
1536 body.zoom-image i.bi.bi-x {
1537 display: block !important;
1538 color: #fff;
1539 font-size: 32px;
1540 position: absolute;
1541 top: 20px;
1542 right: 20px;
1543 cursor: pointer;
1544 }
1545
1546 body.zoom-image .image-selector .active {
1547 cursor: default !important;
1548 }
1549
1550 body.zoom-image .cadmin.control-menu-container {
1551 display: none;
1552 }
1553
1554 h3.nav-tab.selected::after {
1555 content: "";
1556 width: 100%;
1557 height: 1px;
1558 background-color: black;
1559 position: absolute;
1560 bottom: -6px;
1561 left: 0px;
1562 }
1563
1564 h3.nav-tab:hover:not(.selected)::after {
1565 content: "";
1566 width: 100%;
1567 height: 1px;
1568 background-color: rgb(204, 204, 204);
1569 position: absolute;
1570 bottom: -6px;
1571 left: 0px;
1572 }
1573
1574 #especificaciones table tr:first-child {
1575 border-top: 0px;
1576 }
1577
1578 .accordion i {
1579 transform: rotate(0deg);
1580 transition: all 0.25s linear;
1581 position: relative;
1582 top: 0px;
1583 }
1584
1585 .accordion.show-ac i {
1586 transform: rotate(180deg);
1587 top: 9px;
1588 }
1589
1590 .accordion table, .accordion table tbody {
1591 display: block;
1592 width: 100%;
1593 }
1594
1595 .accordion table {
1596 margin-bottom: 40px;
1597 }
1598
1599 .feature-nav {
1600 display: flex;
1601 font-size: 14px;
1602 border-bottom: 1px solid #b5b5b5;
1603 gap: 10px;
1604 margin-bottom: 40px;
1605 }
1606
1607 .feature-nav > div {
1608 position: relative;
1609 display: flex;
1610 align-items: center;
1611 }
1612
1613 .feature-nav > div.selected::after {
1614 content: "";
1615 width: 100%;
1616 height: 3px;
1617 background-color: black;
1618 position: absolute;
1619 bottom: -2px;
1620 left: 0px;
1621 }
1622
1623 #caracteristicas .feature-nav h4 {
1624 font-size: 12px !important;
1625 font-weight: normal;
1626 cursor: pointer;
1627 }
1628
1629 #caracteristicas .feature-nav > .selected h4 {
1630 text-shadow: 0px 0px 1px;
1631 }
1632
1633 .features-container {
1634 display: grid;
1635 grid-template-columns: 40% 1fr;
1636 gap: 20px;
1637 }
1638
1639 .features-container > div img {
1640 max-width: 100%;
1641 object-fit: cover;
1642 }
1643
1644 .features-container .img-content {
1645 display: flex;
1646 background-color: #fff;
1647 justify-content: center;
1648 }
1649
1650 ul.product-carousel:not(.tns-carousel) {
1651 display: grid;
1652 grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
1653 gap: 10px;
1654 }
1655
1656 .product-carousel.tns-carousel > li {
1657 display: inline-block !important;
1658 }
1659
1660 ul.product-implements-carousel:not(.tns-carousel) {
1661 display: grid;
1662 grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
1663 gap: 10px;
1664 }
1665
1666 .product-implements-carousel.tns-carousel > li {
1667 display: inline-block !important;
1668 }
1669
1670 ul.categories-carousel:not(.tns-carousel) {
1671 display: grid;
1672 grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
1673 gap: 10px;
1674 }
1675
1676 .categories-carousel.tns-carousel > li {
1677 display: inline-block !important;
1678 }
1679
1680 .image-selector .tns-nav button {
1681 width: 10px;
1682 height: 10px;
1683 padding: 0px;
1684 margin: 0px;
1685 }
1686
1687 .image-selector .tns-nav {
1688 display: flex;
1689 align-items: center;
1690 justify-content: center;
1691 gap: 10px;
1692 position: absolute;
1693 z-index: 1;
1694 width: 100%;
1695 padding-left: 110px;
1696 bottom: -30px;
1697 }
1698
1699 .image-selector .tns-controls {
1700 display: none;
1701 }
1702
1703 .h-90 {
1704 height: 90px;
1705 }
1706
1707 .image-selector > div:not(.active):hover, .image-selector .active {
1708 outline: 0;
1709 }
1710
1711 .principal-carousel.tns-carousel .tns-item {
1712 opacity: 1;
1713 }
1714
1715 span.arrow-prev {
1716 background-color: #2c2c2c;
1717 width: 32px;
1718 height: 32px;
1719 border-radius: 50%;
1720 top: 50%;
1721 position: absolute;
1722 left: 25px;
1723 align-items: center;
1724 justify-content: center;
1725 color: #fff;
1726 cursor: pointer;
1727 }
1728
1729 span.arrow-next {
1730 background-color: #2c2c2c;
1731 width: 32px;
1732 height: 32px;
1733 border-radius: 50%;
1734 top: 50%;
1735 position: absolute;
1736 right: 25px;
1737 align-items: center;
1738 justify-content: center;
1739 color: #fff;
1740 cursor: pointer;
1741 }
1742
1743 .zoom-image .image-principal:not(.no-c) span.arrow-next, .zoom-image .image-principal:not(.no-c) span.arrow-prev {
1744 display: flex !important;
1745 }
1746
1747 span.arrow-next.disabled, span.arrow-prev.disabled {
1748 opacity: 0.5;
1749 }
1750
1751 .p-relacionados .tns-nav {
1752 display: none;
1753 }
1754
1755 #featuredSpecifications span span p, #featuredSpecifications div div p {
1756 text-align: left !important;
1757 margin-right: 1rem;
1758
1759 }
1760
1761 #featuredSpecifications span span.grid-2, #featuredSpecifications div div.grid-2 {
1762 grid-template-columns: 1fr !important;
1763
1764 }
1765
1766 #featuredSpecifications span.c-info, #featuredSpecifications div.c-info {
1767 display: flex !important;
1768
1769 }
1770
1771 div.featuredspecifications {
1772 margin-bottom: 20px;
1773 gap: 20px;
1774 display: grid;
1775 grid-template-columns: 1fr 1fr 1fr;
1776 }
1777
1778 div.featuredspecifications div p.name {
1779 color: #333D48;
1780 font-size: 0.88rem;
1781 line-height: 1.13rem;
1782 }
1783
1784 div.featuredspecifications div p.value {
1785 font-weight: bold;
1786 margin-top: 0px;
1787 font-size: 1rem;
1788 line-height: 1.5rem;
1789 letter-spacing: 0.5px
1790 }
1791
1792
1793 .zoom-image .image-principal iframe {
1794 width: calc(100% - 200px);
1795 margin-left: 100px;
1796 height: calc(100% - 100px);
1797 margin-top: 50px;
1798 }
1799
1800
1801 /*
1802 div.pr-desc span.grid-2{
1803 display: flex;
1804 flex-direction: column;
1805 text-align:left;
1806 }
1807 #featuredSpecifications span{
1808 display:flex;
1809 justify-content: start;
1810 align-items: start;
1811 }*/
1812
1813 .product-carousel.tns-slider {
1814 display: flex;
1815 }
1816
1817 .product-carousel > .tns-item {
1818 display: flex !important;
1819 height: auto;
1820 }
1821
1822 .product-carousel a.product {
1823 height: 100%;
1824 }
1825
1826 .product-carousel a.product span.image {
1827 overflow: hidden;
1828 height: 175px;
1829 }
1830
1831 .product-carousel a.product span.image img {
1832 position: absolute;
1833 top: 0px;
1834 left: 0px;
1835 }
1836
1837 .p-relacionados .product-carousel:not(.tns-carousel) li + li + li + li + li ~ li {
1838 position: absolute;
1839 z-index: -1;
1840 opacity: 0;
1841 }
1842
1843 .product-implements-carousel.tns-slider {
1844 display: flex;
1845 }
1846
1847 .product-implements-carousel > .tns-item {
1848 display: flex !important;
1849 height: auto;
1850 }
1851
1852
1853 .product-implements-carousel a.product {
1854 height: 100%;
1855 }
1856
1857 .product-implements-carousel a.product span.image {
1858 overflow: hidden;
1859 height: 175px;
1860 }
1861
1862 .product-implements-carousel a.product span.image img {
1863 position: absolute;
1864 top: 0px;
1865 left: 0px;
1866 }
1867
1868 .p-relacionados .product-implements-carousel:not(.tns-carousel) li + li + li + li + li ~ li {
1869 position: absolute;
1870 z-index: -1;
1871 opacity: 0;
1872 }
1873
1874 .p-relacionados .categories-carousel:not(.tns-carousel) li + li + li + li + li ~ li {
1875 position: absolute;
1876 z-index: -1;
1877 opacity: 0;
1878 }
1879
1880 .w-card.product span.image {
1881 overflow: hidden;
1882 }
1883
1884 body.modal-open {
1885 overflow: hidden;
1886 }
1887
1888 div#modalProduct {
1889 border: 0px;
1890 width: 100%;
1891 height: 100%;
1892 padding: 0px;
1893 top: 0px;
1894 left: 0px;
1895 background-color: transparent;
1896 animation: none !important;
1897 }
1898
1899 div#modalProduct.modal.show {
1900 display: flex !important;
1901 flex-direction: column;
1902 justify-content: center;
1903 align-items: center;
1904 }
1905
1906 div#modalProduct.modal.show::after {
1907 content: "";
1908 width: 100%;
1909 left: 0px;
1910 top: 0px;
1911 height: 100%;
1912 background-color: #000;
1913 position: absolute;
1914 opacity: 0.5;
1915 z-index: 1;
1916 }
1917
1918 div#modalProduct .modal-dialog {
1919 position: relative;
1920 z-index: 2;
1921 background-color: #fff;
1922 width: 100%;
1923 height: 100%;
1924 max-width: 800px;
1925 max-height: 70dvh;
1926 border-radius: 10px;
1927 display: flex !important;
1928 flex-direction: column;
1929 justify-content: center;
1930 align-items: center;
1931 overflow: hidden;
1932 }
1933
1934 div#modalPhone .modal-dialog {
1935 position: relative;
1936 z-index: 2;
1937 background-color: #fff;
1938 width: 100%;
1939 height: 100%;
1940 max-width: 300px;
1941 max-height: 40dvh;
1942 border-radius: 10px;
1943 display: flex !important;
1944 flex-direction: column;
1945 justify-content: center;
1946 align-items: center;
1947 overflow: hidden;
1948 }
1949
1950 .modal-dialog .modal-content {
1951 width: 100%;
1952 height: 100%;
1953 overflow-y: auto;
1954 padding: 40px;
1955 }
1956
1957 div#modalProduct .modal-header .panel-header {
1958
1959 }
1960
1961 div#modalProduct .modal-header .panel-header .close {
1962 top: -20px;
1963 right: 0px;
1964 }
1965
1966
1967 div#modalProduct .btn-primary:hover {
1968 color: #fff;
1969 }
1970
1971
1972 div#modalProduct .modal-dialog {
1973 animation: none !important;
1974 }
1975
1976 div#modalProduct .panel.cc.pt-40.pb-40.maxw-900 {
1977 padding-top: 0px;
1978 }
1979
1980 div#modalPhone .modal-header .panel-header {
1981
1982 }
1983
1984 div#modalPhone .modal-header .panel-header .close {
1985 top: 15px;
1986 right: 15px;
1987 }
1988
1989 div#modalPhone .modal-header .panel-header .close {
1990 font-size: 30px;
1991 }
1992
1993
1994 div#modalPhone .btn-primary:hover {
1995 color: #fff;
1996 }
1997
1998
1999 div#modalPhone .modal-dialog {
2000 animation: none !important;
2001 }
2002
2003 div#modalPhone .panel.cc.pt-40.pb-40.maxw-900 {
2004 padding-top: 0px;
2005 }
2006
2007 #modalPhone {
2008 position: fixed;
2009 }
2010
2011 .modal-open.show-phone-popup #modalPhone {
2012 background-color: #000000eb;
2013 width: 100%;
2014 height: 100%;
2015 top: 0px;
2016 left: 0px;
2017 z-index: 99;
2018 justify-content: center;
2019 align-items: center;
2020 display: flex !important;
2021 }
2022
2023
2024 .modal-open.show-phone-popup #modalPhone .modal-dialog {
2025 max-width: 400px;
2026 max-height: 350px;
2027 border-radius: 10px !important;
2028 }
2029
2030 .modal-open.show-phone-popup #modalPhone .modal-dialog .modal-content {
2031 width: 100%;
2032 height: 100%;
2033 overflow-y: auto;
2034 padding: 20px;
2035 }
2036
2037 #modalPhone .call-us {
2038 display: flex;
2039 flex-direction: column;
2040 align-items: center;
2041 justify-content: center;
2042 }
2043
2044 .call-us a > span {
2045 width: 100px;
2046 height: 100px;
2047 background-color: #f2f2f2;
2048 display: inline-flex;
2049 justify-content: center;
2050 align-items: center;
2051 border-radius: 50%;
2052 font-size: 33px;
2053 margin-bottom: 20px;
2054 }
2055
2056 .call-us a {
2057 letter-spacing: 3px;
2058 }
2059
2060 .product-implements-carousel span.c-title > p {
2061 padding-right: 10px;
2062 }
2063
2064 @media (max-width: 900px) {
2065
2066 div#modalProduct.modal.show {
2067 justify-content: flex-end;
2068 }
2069
2070 #modalProduct .modal-dialog {
2071 position: relative;
2072 z-index: 2;
2073 background-color: #fff;
2074 width: 96%;
2075 max-width: 100%;
2076 max-height: 100%;
2077 border-radius: 10px;
2078 overflow-x: hidden;
2079 height: 80dvh;
2080 border-radius: 10px 10px 0px 0px !important;
2081 }
2082
2083
2084 #modalPhone .modal-dialog {
2085 position: relative;
2086 z-index: 2;
2087 background-color: #fff;
2088 width: 96%;
2089 max-width: 100%;
2090 max-height: 100%;
2091 border-radius: 10px;
2092 overflow-x: hidden;
2093 height: 80dvh;
2094 border-radius: 10px 10px 0px 0px !important;
2095 }
2096 }
2097
2098 /**/
2099
2100 @media (max-width: 975px) {
2101
2102 .img-marca {
2103 margin-top: 40px;
2104 }
2105
2106 .pt-header {
2107 grid:
2108 "b"
2109 "a"
2110 "c";
2111
2112 }
2113
2114 .feature-nav {
2115 width: 100%;
2116 white-space: nowrap;
2117 overflow-y: hidden;
2118 overflow-x: scroll;
2119 padding-bottom: 10px;
2120 border-bottom: 0px;
2121 gap: 0;
2122 }
2123
2124 .feature-nav > div {
2125 padding-left: 10px;
2126 padding-right: 10px;
2127 border-bottom: 1px solid #b5b5b5;
2128 }
2129
2130 .features-container {
2131 grid-template-columns: 1fr;
2132 gap: 20px;
2133 }
2134
2135 .tag-navigation {
2136 white-space: nowrap;
2137 overflow-y: auto;
2138 padding-bottom: 10px;
2139 }
2140
2141 }
2142
2143 @media (max-width: 769px) {
2144 div#modalProduct form textarea {
2145 min-height: 100px;
2146 max-height: 100px;
2147 }
2148
2149 div#modalProduct .modal-header .panel-header .close {
2150 top: 12px;
2151 right: 8px;
2152 }
2153
2154 .modal-open header#banner {
2155 z-index: 1;
2156 }
2157
2158 body div#modalProduct .modal-dialog {
2159 max-height: 98dvh;
2160 }
2161
2162 .image-selector-mobile .video-yt iframe {
2163 width: 100%;
2164 height: 100%;
2165 border: 0px;
2166 position: absolute;
2167 z-index: 99;
2168 max-width: 700px;
2169 }
2170
2171 .image-selector-mobile .btn-play.c-video {
2172 color: #fff;
2173 z-index: 99;
2174 position: absolute;
2175 font-size: 40px;
2176 top: 50%;
2177 left: 50%;
2178 margin-left: -20px;
2179 margin-top: -25px;
2180 }
2181
2182 body section#content .image-selector-mobile .overlay.c-video {
2183 opacity: 0.5;
2184 width: 100%;
2185 height: 100%;
2186 position: absolute;
2187 top: 0px;
2188 left: 0px;
2189 background-color: #565656;
2190 z-index: 99;
2191 }
2192
2193 .produc-detail .image-selector-mobile .tns-nav button.tns-nav-active {
2194 background-color: #030712;
2195 }
2196
2197 body .produc-detail .pr-images.h-530 {
2198 min-height: 400px;
2199 }
2200
2201 .image-selector-mobile .tns-ovh {
2202 order: 1;
2203 }
2204
2205 .image-selector-mobile .tns-nav {
2206 order: 2;
2207 text-align: center;
2208 margin-top: 20px;
2209 }
2210
2211 .image-selector-mobile .tns-outer {
2212 display: flex;
2213 flex-direction: column;
2214 }
2215
2216 .image-selector-mobile .tns-nav button {
2217 width: 10px;
2218 margin-right: 8px;
2219 border-radius: 50%;
2220 border: 0px;
2221 background-color: #bfc2c6;
2222 height: 10px;
2223 padding: 0px;
2224 }
2225
2226 .image-selector-mobile .tns-controls {
2227 display: none;
2228 }
2229
2230 .image-selector-mobile .tns-item {
2231 opacity: 1;
2232 }
2233
2234 .image-selector-mobile .tns-outer, .image-selector-mobile .tns-outer, .image-selector-mobile .tns-ovh, .image-selector-mobile .tns-inner,
2235 .image-selector-mobile ul.mobile-carousel, .image-selector-mobile .mobile-carousel > li {
2236 height: 100%;
2237 }
2238
2239 .image-selector-mobile {
2240 display: block !important;
2241 width: 100%;
2242 }
2243
2244 .image-selector-mobile ~ div {
2245 display: none;
2246 }
2247
2248
2249 #widgetMessengerFrame {
2250 position: fixed !important;
2251 top: 0px !important;
2252 left: 0px !important;
2253 width: 100% !important;
2254 height: 100% !important;
2255 }
2256
2257 .scrolled-product #smartsupp-widget-container > div {
2258 bottom: 100px !important;
2259 }
2260
2261 body #footer {
2262 padding-bottom: 100px;
2263 }
2264
2265 body div#fixed-info {
2266 top: inherit;
2267 bottom: 0px;
2268 }
2269
2270 .subcategory.mb-20 h2 + a {
2271 margin-top: 20px;
2272 text-align: right;
2273 }
2274
2275 .subcategory.mb-20 {
2276 flex-direction: column;
2277 }
2278
2279 .subcategory.mb-20 h2 {
2280 width: 100%;
2281 }
2282
2283 .subcategory.mb-20 h2 a {
2284 width: 100%;
2285 }
2286
2287 html body .m-difc {
2288 flex-wrap: wrap !important;
2289 }
2290
2291 .features-container .img-content img {
2292 width: 100% !important;
2293 height: auto !important;
2294 }
2295
2296 .pr-images {
2297 grid-template-columns: 1fr;
2298 width: 100%;
2299 }
2300
2301 .image-principal {
2302 max-height: 400px;
2303 width: 100%;
2304 }
2305
2306 .image-principal img {
2307 position: relative;
2308 width: 100%;
2309 height: 100%;
2310 }
2311
2312 .image-selector .tns-ovh {
2313 height: auto !important;
2314 }
2315
2316 ul.principal-carousel li {
2317 width: 10px;
2318 height: 10px;
2319 overflow: hidden;
2320 border-radius: 50%;
2321 transition: none;
2322 }
2323
2324 .image-selector {
2325 position: absolute;
2326 z-index: 1;
2327 width: 100%;
2328 bottom: 10%;
2329 }
2330
2331 ul.principal-carousel {
2332 display: flex;
2333 align-items: center;
2334 justify-content: center;
2335 gap: 10px;
2336 }
2337
2338 .principal-carousel.tns-carousel .tns-item {
2339 opacity: 0.5;
2340 filter: brightness(0) invert(1);
2341 }
2342
2343 .principal-carousel.tns-carousel .tns-item.active {
2344 opacity: 1;
2345 }
2346
2347 .img-marca {
2348 padding-top: 20px;
2349 }
2350
2351 body.zoom-image .image-principal {
2352 height: 100dvh;
2353 max-height: 100dvh;
2354 }
2355
2356 }
2357
2358 </style>
2359
2360
2361 <script>
2362 var productItem;
2363 var pushed = false;
2364 let startX;
2365 $("document").ready(function () {
2366 $('a[href*="/es/"]').attr('href', function(i, href) {
2367 return href.replace('/es/', '/');
2368 });
2369 $(".image-selector-mobile .btn-play.c-video .bi.bi-play-circle-fill").click(function () {
2370
2371 let url = $(this).parent().next().data("url");
2372 $("#wrapper").append('<div class="active-video-ytb"><div class="close-video-mobile"><i class="bi bi-x"></i></div><iframe src="' + url + '?autoplay=1&mute=1" ></iframe></div>');
2373 $("body").addClass("youtube-mobile-video")
2374
2375 })
2376
2377 $("html").on("click", ".close-video-mobile", function () {
2378
2379 $("#wrapper .active-video-ytb").remove();
2380 $("body").removeClass("youtube-mobile-video")
2381
2382 })
2383
2384 $("#lastUrl").attr("href", '${lastUrl}')
2385 loadAnalyticsItem();
2386 pushAnalytics();
2387 let lastScrollY = 0;
2388 let ticking = false;
2389
2390 function onScroll() {
2391 lastScrollY = window.scrollY;
2392
2393 if (!ticking) {
2394 window.requestAnimationFrame(() => {
2395 checkScrollPosition(lastScrollY);
2396 ticking = false;
2397 });
2398
2399 ticking = true;
2400 }
2401 }
2402
2403 function checkScrollPosition(scrollY) {
2404 const targetPosition = $("#scroll-point-of-no-return").offset().top; // Cambia este valor a la posición deseada
2405
2406 if (scrollY >= targetPosition) {
2407 // Aquí va el código que deseas ejecutar
2408 $("body").addClass("scrolled-product");
2409 } else {
2410 $("body").removeClass("scrolled-product");
2411 }
2412 }
2413
2414 window.addEventListener('scroll', onScroll);
2415
2416
2417 $(".tag-navigation a").click(function () {
2418
2419 let el = $(this);
2420 let id = el.data("rel");
2421
2422 $(".tag-navigation a.active").removeClass("bg-primary bold");
2423 $(".tag-navigation a.active").addClass("bg-g normal");
2424 $(".tag-navigation a.active").removeClass("active");
2425
2426 el.addClass("active bg-primary bold");
2427 el.removeClass("bg-g normal");
2428
2429 $(".tag-content").hide();
2430 $("#" + id).show();
2431
2432 });
2433
2434
2435 $(".image-selector .principal-carousel .c-video").click(function () {
2436 let el = $(this).parent().find("img");
2437 $(".image-principal iframe").remove();
2438 $(this).parent().find("img").trigger("click");
2439 let url = el.data("url");
2440
2441 $(".image-principal img").parent().append('<iframe class="pa z-2 t-0 l-0" width="100%" height="100%" src="' + url + '" frameborder="0" allowfullscreen></iframe>');
2442
2443 });
2444
2445 $(".image-selector .principal-carousel img").click(function () {
2446
2447 let imgUrl = $(this).attr("src");
2448 $(".image-principal iframe").remove();
2449 $(".image-selector .principal-carousel .active").removeClass("active");
2450
2451 $(this).parent().addClass("active");
2452 $(".image-principal img").attr("src", imgUrl);
2453
2454 });
2455
2456 $(".nav-tab").click(function () {
2457
2458 let dataTab = $(this).data("tab");
2459 $(".nav-tab.selected").addClass("normal");
2460 $(".nav-tab.selected").removeClass("selected");
2461
2462 $(".tabs-container .content-tab").hide();
2463 $(this).addClass("selected");
2464 $(this).removeClass("normal");
2465 $("#data-tab-" + dataTab).show();
2466
2467 });
2468
2469
2470 $(".tag-content .accordion .accordion-title").click(function () {
2471
2472 let elem = $(this);
2473 let parentElem = elem.closest(".accordion");
2474 if (parentElem.hasClass("show-ac")) {
2475 parentElem.addClass("hide-ac");
2476 parentElem.removeClass("show-ac");
2477 elem.next().slideUp("fast", function () {
2478 // Animation complete.
2479 });
2480
2481 } else {
2482 parentElem.addClass("show-ac");
2483 parentElem.removeClass("hide-ac");
2484 elem.next().slideDown("fast", function () {
2485 // Animation complete.
2486 });
2487
2488 }
2489
2490 });
2491 try {
2492 // Verificar si el contenedor .principal-carousel existe
2493 if ($('.principal-carousel').length) {
2494 var slider2 = tns({
2495 container: '.principal-carousel',
2496 items: 6,
2497 axis: "vertical",
2498 slideBy: 'page',
2499 autoplay: false,
2500 loop: false,
2501 mouseDrag: true
2502 });
2503 }
2504
2505 if ($('.mobile-carousel').length) {
2506 var slider3 = tns({
2507 container: '.mobile-carousel',
2508 items: 1,
2509 slideBy: 'page',
2510 autoplay: false,
2511 loop: false,
2512 mouseDrag: true
2513 });
2514 }
2515
2516 } catch
2517 (error) {
2518 }
2519
2520 try {
2521 // Verificar si el contenedor .product-carousel existe
2522 if ($('.product-carousel').length) {
2523 var slider = tns({
2524 container: '.product-carousel',
2525 items: 5,
2526 slideBy: 'page',
2527 autoplay: false,
2528 loop: false,
2529 responsive: {
2530 950: {
2531 items: 5
2532 },
2533 769: {
2534 items: 4
2535 },
2536 550: {
2537 items: 3
2538 },
2539 450: {
2540 items: 2
2541 },
2542 0: {
2543 items: 1
2544 }
2545 }
2546 });
2547 }
2548
2549 } catch
2550 (error) {
2551 }
2552
2553 try {
2554 // Verificar si el contenedor .product-implements-carousel existe
2555 if ($('.product-implements-carousel').length) {
2556 var slider = tns({
2557 container: '.product-implements-carousel',
2558 items: 5,
2559 slideBy: 'page',
2560 autoplay: false,
2561 loop: false,
2562 responsive: {
2563 950: {
2564 items: 5
2565 },
2566 769: {
2567 items: 4
2568 },
2569 550: {
2570 items: 3
2571 },
2572 450: {
2573 items: 2
2574 },
2575 0: {
2576 items: 1
2577 }
2578 }
2579 });
2580 }
2581
2582 } catch
2583 (error) {
2584 }
2585 try {
2586 // Verificar si el contenedor .categories-carousel existe
2587 if ($('.categories-carousel').length) {
2588 var slider = tns({
2589 container: '.categories-carousel',
2590 items: 5,
2591 slideBy: 'page',
2592 autoplay: false,
2593 loop: false,
2594 responsive: {
2595 950: {
2596 items: 5
2597 },
2598 769: {
2599 items: 4
2600 },
2601 550: {
2602 items: 3
2603 },
2604 450: {
2605 items: 2
2606 },
2607 0: {
2608 items: 1
2609 }
2610 }
2611 });
2612 }
2613
2614 } catch
2615 (error) {
2616 }
2617 $(".feature-nav > div").click(function () {
2618 let elem = $(this);
2619 let id = elem.attr("id"); // Obtener el ID del elemento clicado
2620 let content = id.replace("data-feature-", ""); // Eliminar "data-feature-" del ID
2621 $(".feature-nav > .selected").removeClass("selected");
2622 elem.addClass("selected");
2623 $(".feature-content .feature").hide();
2624 $(".feature-content #feature-" + content).show();
2625
2626 });
2627
2628
2629 $(".image-principal .zoom-it").click(function () {
2630
2631 $("body").addClass("zoom-image");
2632 let elem = $(".image-principal").data("size");
2633 if (elem < 2) {
2634 $(".image-principal").addClass("no-c");
2635 } else {
2636 let elem = $(".principal-carousel .active");
2637 if (elem.next(".tns-item").length == 0) {
2638 $(".arrow-next").addClass("disabled");
2639 }
2640 if (elem.prev(".tns-item").length == 0) {
2641 $(".arrow-prev").addClass("disabled");
2642 }
2643 }
2644
2645 });
2646
2647 $("i.bi.bi-x").click(function () {
2648
2649 $("body").removeClass("zoom-image");
2650
2651 });
2652
2653
2654 $(".arrow-next").click(function () {
2655
2656 let elem = $(".principal-carousel .active");
2657 let totalElements = parseInt($(".principal-carousel li").length) - 1;
2658
2659 console.log((parseInt(elem.data("id")) + 1));
2660
2661 disableArrows();
2662
2663 if ((parseInt(elem.data("id")) + 1) <= totalElements) {
2664
2665 elem.next().find("img").trigger("click");
2666 console.log("selected next:" + parseInt(elem.data("id") + 1));
2667
2668 if ($("#tns1-item" + parseInt(elem.data("id") + 1)).find("img").data("url") !== undefined) {
2669 let url = $("#tns1-item" + parseInt(elem.data("id") + 1)).find("img").data("url");
2670 $(".image-principal > span:first-child").append('<iframe class="pa t-0 l-0 w-100 h-100 z-2" frameBorder="0" src="' + url + '"></iframe>');
2671 }
2672 }
2673
2674
2675 })
2676
2677 $(".arrow-prev").click(function () {
2678
2679 let elem = $(".principal-carousel .active");
2680 let totalElements = parseInt($(".principal-carousel li").length) - 1;
2681
2682 console.log("total" + totalElements + "-" + (parseInt(elem.data("id")) - 1));
2683
2684 disableArrows();
2685
2686 if ((parseInt(elem.data("id")) - 1) >= 0) {
2687
2688 console.log("selected prev:" + parseInt(elem.data("id") - 1))
2689 elem.prev().find("img").trigger("click");
2690
2691 if ($("#tns1-item" + parseInt(elem.data("id") - 1)).find("img").data("url") !== undefined) {
2692 let url = $("#tns1-item" + parseInt(elem.data("id") - 1)).find("img").data("url");
2693 $(".image-principal > span:first-child").append('<iframe class="pa t-0 l-0 w-100 h-100 z-2" frameBorder="0" src="' + url + '"></iframe>');
2694 }
2695 }
2696
2697
2698 })
2699
2700 function disableArrows() {
2701 setTimeout(function () {
2702
2703 let actualItem = $(".principal-carousel .active").data("id");
2704 let totalItems = parseInt($(".principal-carousel li").length) - 1;
2705
2706
2707 if (actualItem <= 0) {
2708 $(".arrow-prev").addClass("disabled");
2709 } else {
2710 $(".arrow-prev").removeClass("disabled");
2711 }
2712
2713 if (actualItem >= totalItems) {
2714 $(".arrow-next").addClass("disabled");
2715 } else {
2716 $(".arrow-next").removeClass("disabled");
2717 }
2718
2719 }, 150);
2720
2721 }
2722
2723
2724 $('a[title="idioma español"]').attr('href', '/productos/${values.productUrlEs}');
2725 $('a[title="idioma english"]').attr('href', '/en/products/${values.productUrlEn}');
2726
2727 $("#cifdiv").remove();
2728 /*
2729 $(".image-selector").on("touchstart", function(event) {
2730 startX = event.originalEvent.touches[0].clientX;
2731 });
2732
2733 $(".image-selector").on("touchend", function(event) {
2734 let endX = event.originalEvent.changedTouches[0].clientX;
2735 let diffX = startX - endX;
2736
2737
2738 let swipeThreshold = 30;
2739
2740 if (diffX > swipeThreshold) {
2741
2742 $(".arrow-next").trigger("click");
2743 } else if (diffX < -swipeThreshold) {
2744
2745 $(".arrow-prev").trigger("click");
2746 }
2747 });*/
2748
2749
2750 });
2751
2752 function loadAnalyticsItem() {
2753 var productbrand = '${values.brand}';
2754 if (productbrand === "Cat") {
2755 productbrand = "Caterpillar";
2756 }
2757 var variant = 'compra,alquiler'
2758 if ($('.usada').length > 0) {
2759 variant += ",usada";
2760 }
2761 productItem = {
2762 item_id: '${objectEntryId}',
2763 item_name: '${getLanguage(values.names)}',
2764 currency: 'EUR',
2765 coupon: '',
2766 item_brand: productbrand,
2767 item_category: '${principalCategoryName}',
2768 item_category2: '',//TODO
2769 item_category3: '',//TODO
2770 item_category4: '',//TODO
2771 item_category5: '',//TODO
2772 item_list_id: localStorage.getItem("itemListId"),
2773 item_list_name: localStorage.getItem("itemListName"),
2774 item_variant: variant,
2775 location_id: localStorage.getItem("location_id"),
2776 price: 1,
2777 quantity: 1
2778 }
2779 localStorage.setItem("location_id", "");
2780 localStorage.setItem("itemListName", "");
2781 localStorage.setItem("itemListId", "");
2782 }
2783
2784 function pushAnalytics() {
2785 if (!pushed) {
2786 pushed = true
2787 var dataLayerObj = {
2788 event: 'view_item',
2789 ecommerce: {
2790 items: [
2791 productItem
2792 ]
2793 }
2794 }
2795
2796
2797 console.debug(dataLayerObj);
2798 dataLayer.push(dataLayerObj);
2799 }
2800 }
2801
2802 $(".close-popup.close").click(function () {
2803 $("body").removeClass("show-phone-popup");
2804 })
2805
2806 $("#modalPhone").click(function () {
2807 setTimeout(function () {
2808
2809 if (!$("body").hasClass("modal-open")) {
2810 $("body").removeClass("show-phone-popup");
2811 }
2812
2813 }, 150);
2814 })
2815
2816
2817 function callFinanzauto() {
2818 var dataLayerObj = {
2819 event: 'add_to_cart',
2820 ecommerce: {
2821 items: [
2822 productItem
2823 ]
2824 }
2825 }
2826 console.debug(dataLayerObj);
2827 dataLayer.push(dataLayerObj);
2828
2829 if (isMobile()) {
2830 // Si es un dispositivo móvil, redirige para hacer una llamada
2831 window.location.href = 'tel:+34${finanzautoPhone}';
2832 } else {
2833 $('#modalPhone').modal('show');
2834 $('body').addClass('show-phone-popup');
2835 }
2836 }
2837
2838 function isMobile() {
2839 // Verifica si el dispositivo es móvil
2840 return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
2841 }
2842
2843 function showModalProductAndPushAnalytics() {
2844
2845 var dataLayerObj = {
2846 event: 'begin_checkout',
2847 ecommerce: {
2848 items: [
2849 productItem
2850 ]
2851 }
2852 }
2853 console.debug(dataLayerObj);
2854 dataLayer.push(dataLayerObj);
2855 showModalProduct();
2856 }
2857
2858 function pushFullAnalytic() {
2859
2860 var dataLayerObj = {
2861 event: "purchase",
2862 ecommerce: {
2863 transaction_id: $("#transactionId").val(),
2864 value: "1",
2865 tax: "0",
2866 shipping: "0",
2867 currency: 'EUR',
2868 coupon: '',
2869 payment_type: 'detalle_producto',
2870 items: [
2871 productItem
2872 ]
2873 }
2874 }
2875 console.debug(dataLayerObj);
2876 dataLayer.push(dataLayerObj);
2877
2878 }
2879 </script>
2880<#else>
2881 <div class="pag-404 df fdc jcc aic">
2882
2883 <img src="/documents/14306333/0/pag-404.jpg/c00959e2-e88d-4b06-1cba-d282b57f006a?t=1737040420259" />
2884
2885
2886 <p class="title-404"><@liferay.language key="product.not.found.title" /></p>
2887 <p class="content-404"><@liferay.language key="product.not.found.text" /></p>
2888
2889 <a class="btn btn-secondary" href="/"><@liferay.language key="product.not.found.button" /></a>
2890
2891
2892
2893</div>
2894
2895<style>
2896.pag-404 {
2897 min-height: 600px;
2898}
2899body #wrapper {
2900 background-color: #fff;
2901}
2902p.title-404 {
2903 font-size: 20px;
2904 font-weight: bold;
2905 margin-top: 20px;
2906 max-width: 500px;
2907 text-align: center;
2908}
2909p.content-404 {
2910 margin-bottom: 20px;
2911 color: #787878; max-width: 600px;
2912 text-align: center;
2913}
2914
2915</style>
2916</#if>
