Mejora, ahora los intercambios estan paginados para que no sea una lista larga, muestran de 15 en 15 los intermcambios
This commit is contained in:
@@ -1272,10 +1272,8 @@
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
// Compatibilities — deduplicate by (make, model, year, engine)
|
||||
// Compatibilities — deduplicate by (make, model, year, engine)
|
||||
if (p.compatibilities && p.compatibilities.length) {
|
||||
html += '<div class="detail-section">';
|
||||
html += '<div class="detail-section__title">Vehiculos compatibles</div>';
|
||||
var seenCompat = {};
|
||||
var uniqCompat = [];
|
||||
p.compatibilities.forEach(function(c) {
|
||||
@@ -1284,22 +1282,69 @@
|
||||
seenCompat[key] = true;
|
||||
uniqCompat.push(c);
|
||||
});
|
||||
var currentMake = '';
|
||||
uniqCompat.forEach(function(c) {
|
||||
if (c.make !== currentMake) {
|
||||
currentMake = c.make;
|
||||
html += '<div style="font-weight:600;margin-top:8px;">' + esc(c.make) + '</div>';
|
||||
}
|
||||
html += '<div style="padding-left:12px;color:var(--color-text-muted);font-size:var(--text-body-sm);">' +
|
||||
esc(c.model) + ' ' + c.year + ' ' + esc(c.engine || '') + '</div>';
|
||||
});
|
||||
html += '<div class="detail-section">';
|
||||
html += '<div class="detail-section__title">Vehiculos compatibles</div>';
|
||||
html += '<div id="compat-list"></div>';
|
||||
html += '<div id="compat-pager" class="compat-pager"></div>';
|
||||
html += '</div>';
|
||||
compatFullList = uniqCompat;
|
||||
} else {
|
||||
compatFullList = [];
|
||||
}
|
||||
|
||||
detailBody.innerHTML = html;
|
||||
|
||||
if (compatFullList.length) {
|
||||
renderCompatPage(1);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// --- Pagination for "Vehiculos compatibles" ---
|
||||
var compatFullList = [];
|
||||
var compatPageSize = 15;
|
||||
var compatCurrentPage = 1;
|
||||
|
||||
function renderCompatPage(page) {
|
||||
var listEl = document.getElementById('compat-list');
|
||||
var pagerEl = document.getElementById('compat-pager');
|
||||
if (!listEl || !pagerEl) return;
|
||||
|
||||
var totalItems = compatFullList.length;
|
||||
var totalPages = Math.max(1, Math.ceil(totalItems / compatPageSize));
|
||||
page = Math.min(Math.max(1, page), totalPages);
|
||||
compatCurrentPage = page;
|
||||
|
||||
var start = (page - 1) * compatPageSize;
|
||||
var pageItems = compatFullList.slice(start, start + compatPageSize);
|
||||
|
||||
var listHtml = '';
|
||||
var currentMake = '';
|
||||
pageItems.forEach(function(c) {
|
||||
if (c.make !== currentMake) {
|
||||
currentMake = c.make;
|
||||
listHtml += '<div style="font-weight:600;margin-top:8px;">' + esc(c.make) + '</div>';
|
||||
}
|
||||
listHtml += '<div style="padding-left:12px;color:var(--color-text-muted);font-size:var(--text-body-sm);">' +
|
||||
esc(c.model) + ' ' + c.year + ' ' + esc(c.engine || '') + '</div>';
|
||||
});
|
||||
listEl.innerHTML = listHtml;
|
||||
|
||||
if (totalPages > 1) {
|
||||
pagerEl.innerHTML =
|
||||
'<button type="button" id="compat-prev" class="compat-pager__btn"' + (page <= 1 ? ' disabled' : '') + '>‹ Anterior</button>' +
|
||||
'<span class="compat-pager__info">Pagina ' + page + ' de ' + totalPages + ' (' + totalItems + ' vehiculos)</span>' +
|
||||
'<button type="button" id="compat-next" class="compat-pager__btn"' + (page >= totalPages ? ' disabled' : '') + '>Siguiente ›</button>';
|
||||
|
||||
var prevBtn = document.getElementById('compat-prev');
|
||||
var nextBtn = document.getElementById('compat-next');
|
||||
if (prevBtn) prevBtn.addEventListener('click', function () { renderCompatPage(compatCurrentPage - 1); });
|
||||
if (nextBtn) nextBtn.addEventListener('click', function () { renderCompatPage(compatCurrentPage + 1); });
|
||||
} else {
|
||||
pagerEl.innerHTML = '';
|
||||
}
|
||||
}
|
||||
|
||||
function closeDetail() {
|
||||
detailPanel.classList.remove('is-open');
|
||||
detailOverlay.classList.remove('is-visible');
|
||||
|
||||
Reference in New Issue
Block a user