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:
2026-06-18 12:11:39 -06:00
parent ad04572305
commit 6b80add102
2 changed files with 74 additions and 13 deletions

View File

@@ -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' : '') + '>&lsaquo; 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 &rsaquo;</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');