1<!-- Adt Productos Flotas-->
2<div class="container mt-4 adt-container-productos">
3 <div class="row adt-models">
4 <h3 id="tituloIr" class="text_seccion_title"></h3>
5 <div class="grid-container">
6 <#if entries?has_content>
7 <#list entries as curEntry>
8 <#assign assetRenderer = curEntry.getAssetRenderer() />
9 <#assign journalArticle = assetRenderer.getAssetObject() />
10 <div class="card-models-pro">
11 <#assign viewURL = assetPublisherHelper.getAssetViewURL(renderRequest, renderResponse, entry) />
12 <#if assetLinkBehavior != "showFullContent">
13 <#assign viewURL = assetRenderer.getURLViewInContext(renderRequest, renderResponse, viewURL) />
14 </#if>
15
16
17 <#assign article = curEntry.getAssetRenderer().getArticle() />
18 <#assign document = saxReaderUtil.read(article.getContentByLocale(locale.toString())) />
19 <#assign urlTitle = journalArticle.urlTitle />
20
21 <#assign categoryArticle = curEntry.getCategories()/>
22 <#if categoryArticle?has_content>
23 <#assign selectedCategory = "">
24 <#list categoryArticle as category>
25 <#assign categoryTitle = category.getTitle(locale)?lower_case />
26 <#if categoryTitle != "flotas"?lower_case && selectedCategory == "">
27 <#assign selectedCategory = categoryTitle />
28 </#if>
29 </#list>
30 </#if>
31
32 <#assign title_cards = document.selectSingleNode("/root/dynamic-element[@field-reference='tituloModelo']/dynamic-content").getText() />
33 <#assign imagen_cards = document.selectSingleNode("/root/dynamic-element[@field-reference='vModelos']/dynamic-element[@field-reference='vImagenModelo']/dynamic-content").getStringValue()?eval />
34 <#assign precio_cards = document.selectSingleNode("/root/dynamic-element[@field-reference='bannerInformation']/dynamic-element[@field-reference='precioBanner']/dynamic-content").getText() />
35 <#assign precio_sin_desde = precio_cards?replace("Desde", "") />
36 <#assign modelo_cards = document.selectSingleNode("/root/dynamic-element[@field-reference='nombreModelo']/dynamic-content").getText()/>
37 <#assign marca_cards = document.selectSingleNode("/root/dynamic-element[@field-reference='nombreMarca']/dynamic-content").getText()/>
38 <#assign tipoVehiculo_cards = document.selectSingleNode("/root/dynamic-element[@field-reference='bannerInformation']/dynamic-element[@field-reference='typeVehiculo']/dynamic-content").getText() />
39
40 <!-- <#assign cotiza_cards = document.selectSingleNode("/root/dynamic-element[@field-reference='bannerInformation']/dynamic-element[@field-reference='cotizaUrl']/dynamic-content").getText() /> -->
41 <#assign cotiza_cards = "/cotizar-flota?mar="+ marca_cards+"&tip="+tipoVehiculo_cards+"&mod="+modelo_cards/>
42 <#assign marca_card = document.selectSingleNode("/root/dynamic-element[@field-reference='nombreMarca']/dynamic-content").getText()/>
43
44
45 <div class="card card-vehicle" data-category="${selectedCategory?lower_case}" data-marca="${marca_card?lower_case}" data-price="${precio_sin_desde}" onclick="window.location.href='/w/${urlTitle}'">
46 <div class="card-img-top-container">
47 <img class="card-img-top img-fluid" src="${imagen_cards.url}" alt="${imagen_cards.alt}">
48 </div>
49 <div class="card-body text-center">
50 <div class="conte_text_model">
51 <h4 class="card-title">${title_cards}</h4>
52 <p class="card-subtitle">${precio_cards}</p>
53 </div>
54 <div class="button-container button-view">
55 <a href="#" role="button" class="btn-view d-block d-md-none">Ver detalles</a>
56 <a href="${cotiza_cards}" role="button" class="btn-detail">Cotizar ahora</a>
57 </div>
58 </div>
59 </div>
60 </div>
61 </#list>
62 </#if>
63 </div>
64 </div>
65 <div class="d-flex justify-content-center align-items-center">
66 <a href="#" id="loadMore" class="d-none text-center loadMore" data-category="${selectedCategory?if_exists?lower_case}" >
67 Cargar más <#if selectedCategory??>${selectedCategory?lower_case}</#if>
68 </a>
69
70 <div class="d-none nav_pagination">
71 <nav aria-label="Page navigation example" >
72 <ul class="pagination"></ul>
73 </nav>
74 </div>
75 </div>
76
77 </div>
78
79 <style>
80 /* Estilo para el título */
81 .text_seccion_title {
82 text-align: start;
83 font-size: 24px;
84 font-weight: 400;
85 color: #002B5C;
86 margin-bottom: 20px;
87 padding-left: 20px;
88 font-family: Brown;
89 }
90
91 /* Grid de las tarjetas */
92 .grid-container {
93 display: grid;
94 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Distribución automática */
95 gap: 20px; /* Espaciado entre las tarjetas */
96 padding: 20px;
97 }
98
99 /* Estilo de las tarjetas */
100 .conte_text_model {
101 display: flex;
102 flex-direction: column;
103 margin: auto;
104 }
105
106 .card-vehicle {
107 background: white;
108 border: 1px solid #e5e5e5;
109 border-radius: 8px;
110 box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
111 transition: transform 0.3s ease, box-shadow 0.3s ease;
112 overflow: hidden;
113 cursor: pointer;
114 width: 296px;
115 height: 358px;
116 word-wrap: normal !important;
117 overflow-wrap: normal !important;
118 }
119 .button-container .btn-view {
120 background: #0090DF;
121 font-weight: 400;
122 font-size: 14px;
123 line-height: 12.95px;
124 text-align: center;
125 padding: 13px 24px 13px 24px;
126 border-radius: 30px;
127 color: #ffffff;
128 margin: auto;
129 }
130 .card-vehicle:hover {
131 transform: translateY(-5px);
132 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
133 }
134
135 .adt-models .card-img-top {
136 height: inherit;
137 object-fit: cover;
138 object-position: center bottom;
139 }
140
141
142 .card-img-top-container {
143 text-align: center;
144 padding: 16px;
145 height: 150px;
146 /*background-color: #f8f9fa;*/
147 display:flex;
148 }
149
150 /*
151 .card-body {
152 padding: 16px;
153 }
154 */
155 .btn-detail,
156 .btn-quote {
157 white-space: nowrap; /* Evita que el texto dentro del botón se divida en varias líneas */
158 padding: 8px 16px; /* Reduce el padding si es necesario */
159 font-size: 14px; /* Ajusta el tamaño de la fuente */
160 }
161 .card-body {
162 flex-grow: 1; /* Expande el contenido para llenar el espacio */
163 display: flex;
164 flex-direction: column;
165 justify-content: space-between; /* Espacia bien el contenido */
166 }
167
168 .card-title {
169 font-size: 24px;
170 font-weight: 400;
171 margin-bottom: 0;
172 color: #333;
173 }
174
175 .card-subtitle {
176 font-size: 14px;
177 color: #555;
178 margin-top: 2px;
179 margin-bottom: 20px;
180 font-family: Brown;
181 font-size: 14px;
182 font-weight: 400;
183 line-height: 18.2px;
184 letter-spacing: 0.004em;
185 text-align: center;
186 text-underline-position: from-font;
187 text-decoration-skip-ink: none;
188 }
189
190 .button-container {
191 display: flex;
192 justify-content: space-between;
193 align-items: center;
194 align-content: space-around;
195 flex-wrap: nowrap;
196 flex-direction: row;
197 padding-bottom: 15px;
198 }
199
200 .btn-detail {
201 padding: 11px 24px 13px 24px !important;
202 gap: 10px !important;
203 width: 126px;
204 height: 40px;
205 border-radius: 30px !important;
206 display: flex;
207 align-items: center;
208 justify-content: center;
209 padding: 10px 20px;
210 color: #0090DF;
211 /* background-color: #002B5C !important; */
212 border: none;
213 border-radius: 30px;
214 text-decoration: underline;
215 transition: background-color 0.3s ease;
216 font-family: Brown;
217 font-size: 14px;
218 font-weight: 400;
219 line-height: 12.95px;
220 letter-spacing: 0.0024em;
221 text-align: center;
222 text-underline-position: from-font;
223 text-decoration-skip-ink: none;
224 }
225
226 .btn-detail:hover {
227 background-color: #123a6d;
228 }
229
230 .btn-quote {
231 display: inline-block;
232 padding: 10px 20px;
233 font-size: 14px;
234 font-weight: 600;
235 color: #0090DF !important;
236 text-decoration: none;
237 transition: color 0.3s ease;
238 }
239
240 .btn-quote:hover {
241 color: #006bb2;
242 }
243
244 /* Responsividad */
245 @media (min-width: 768px) {
246 .grid-container {
247 grid-template-columns: repeat(3, 1fr); /* 3 columnas en pantallas medianas */
248 }
249 .btn-detail {
250 background: #0090DF;
251 color: #ffffff !important;
252 text-decoration: none;
253 height: 40px;
254 padding: 13px 24px;
255 margin: auto;
256 }
257 }
258
259 @media (min-width: 1200px) {
260 .grid-container {
261 grid-template-columns: repeat(4, 1fr); /* 4 columnas en pantallas grandes */
262 }
263 }
264 </style>