:root {
--df-text-color: #333;
--df-text-light-color: #555;
--df-border-color: #e9e9e9;
--df-bg-color: #ffffff;
--df-bg-alt-color: #f9f9f9;
--df-primary-color: #4F80FF;
--df-sale-badge-bg: #00D9F8;
--df-sale-badge-text: #ffffff;
--df-font-family: "Red Hat Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--df-border-radius: 8px;
--df-spacing-unit: 8px;
--df-card-shadow: 0 3px 8px rgba(0, 0, 0, 0.07);
--df-card-hover-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
#dynamic-product-filter-container,
#dynamic-product-filter-container * {
box-sizing: border-box;
}
#dynamic-product-filter-container {
font-family: var(--df-font-family);
color: var(--df-text-color);
margin-bottom: calc(var(--df-spacing-unit) * 4);
display: flex;
gap: calc(var(--df-spacing-unit) * 3);
}
#sidebar-wrapper {
flex: 0 0 280px;
max-width: 33%;
background-color: var(--df-bg-alt-color);
padding: calc(var(--df-spacing-unit) * 2);
border-radius: var(--df-border-radius);
align-self: flex-start;
}
/* #lista-productos-filtrables ahora está dentro de #lista-productos-wrapper */
#lista-productos-wrapper {
flex: 1 1 auto;
min-width: 0;
}
.sidebar-section {
margin-bottom: calc(var(--df-spacing-unit) * 2.5);
padding-bottom: calc(var(--df-spacing-unit) * 2.5);
border-bottom: 1px solid var(--df-border-color);
}
.sidebar-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.sidebar-section-title {
font-size: 0.95em; font-weight: 600; color: var(--df-text-color);
margin-top: 0; margin-bottom: calc(var(--df-spacing-unit) * 1.5);
}
input[type="text"], input[type="number"], select {
width: 100%; padding: calc(var(--df-spacing-unit) * 1.15) var(--df-spacing-unit);
border: 1px solid var(--df-border-color); border-radius: var(--df-border-radius);
font-size: 0.85em; background-color: var(--df-bg-color); color: var(--df-text-color);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
font-family: var(--df-font-family);
}
input[type="text"]:focus, input[type="number"]:focus, select:focus {
outline: none; border-color: var(--df-primary-color);
box-shadow: 0 0 0 2px rgba(var(--df-primary-color), 0.15);
}
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none; margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }
label {
display: block; font-size: 0.85em; font-weight: 500;
color: var(--df-text-light-color); margin-bottom: var(--df-spacing-unit);
}
.price-range-inputs { display: flex; gap: var(--df-spacing-unit); align-items: center; }
.price-range-inputs span { font-size: 0.9em; color: var(--df-text-light-color); }
#price-range-values { font-size: 0.8em; color: #777; margin-top: var(--df-spacing-unit); text-align: right; }
.filter-buttons, .status-filter-buttons { display: flex; flex-wrap: wrap; gap: var(--df-spacing-unit); }
.filter-buttons button, .status-filter-buttons button {
padding: calc(var(--df-spacing-unit) * 0.7) calc(var(--df-spacing-unit) * 1.4);
border: 1px solid var(--df-border-color); background-color: transparent;
color: var(--df-text-light-color); cursor: pointer; border-radius: var(--df-border-radius);
font-size: 0.8em; font-weight: 500;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
line-height: 1.4;
font-family: var(--df-font-family);
}
.filter-buttons button:hover, .status-filter-buttons button:hover {
border-color: var(--df-primary-color); color: var(--df-primary-color);
background-color: rgba(var(--df-primary-color), 0.05);
}
.filter-buttons button.active-filter, .status-filter-buttons button.active-filter {
background-color: var(--df-primary-color); color: #fff; border-color: var(--df-primary-color);
}
.status-filter-buttons hr { width: 100%; border: none; height: 1px; background-color: var(--df-border-color); margin: var(--df-spacing-unit) 0; }
.category-filter-list { max-height: 200px; overflow-y: auto; padding-right: var(--df-spacing-unit); }
.category-filter-list ul { list-style: none; padding-left: 0; margin: 0; }
.category-filter-list li { margin-bottom: calc(var(--df-spacing-unit) * 0.75); }
.category-filter-list label {
display: flex; justify-content: space-between; align-items: center; width: 100%;
font-size: 0.85em; font-weight: normal; color: var(--df-text-color);
cursor: pointer; margin-bottom: 0;
}
.category-filter-list label.disabled-category { color: #aaa; cursor: default; }
.category-filter-list .category-name { flex-grow: 1; margin-right: var(--df-spacing-unit); }
.category-filter-list .category-count {
font-size: 0.8em; color: var(--df-text-light-color); background-color: #eee;
padding: 2px 6px; border-radius: 10px; min-width: 20px; text-align: center;
}
.category-filter-list input[type="checkbox"] {
margin-right: var(--df-spacing-unit); width: auto; height: auto;
accent-color: var(--df-primary-color); flex-shrink: 0;
}
/* PRODUCT LIST STYLING (GRID AND CARDS) */
#lista-productos-filtrables ul.products {
display: flex !important;
flex-wrap: wrap !important;
list-style: none !important;
padding: 0 !important;
margin: 0 calc(var(--df-spacing-unit) * -1.25) !important;
}
#lista-productos-filtrables ul.products li.product {
background-color: var(--df-bg-color);
border-radius: var(--df-border-radius);
box-shadow: var(--df-card-shadow);
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
overflow: hidden;
display: flex;
flex-direction: column;
margin: 0 calc(var(--df-spacing-unit) * 1.25) calc(var(--df-spacing-unit) * 3) calc(var(--df-spacing-unit) * 1.25) !important;
padding: 0 !important;
width: auto !important;
float: none !important; clear: none !important;
flex-grow: 0 !important; flex-shrink: 0 !important;
position: relative;
}
#lista-productos-filtrables ul.products li.product:hover {
transform: translateY(-3px) scale(1.01);
box-shadow: var(--df-card-hover-shadow);
}
#lista-productos-filtrables ul.products li.product a.woocommerce-LoopProduct-link {
display: block; text-decoration: none; color: inherit;
}
#lista-productos-filtrables ul.products li.product img {
display: block; width: 100%; height: auto; max-height: 250px;
object-fit: cover;
border-top-left-radius: var(--df-border-radius);
border-top-right-radius: var(--df-border-radius);
}
#lista-productos-filtrables ul.products li.product .onsale {
position: absolute; top: -5px; left: -5px; width: 100px; height: 100px;
overflow: hidden; z-index: 1; background-color: transparent !important;
color: var(--df-sale-badge-text) !important; padding: 0 !important; margin: 0 !important;
text-align: center !important; border-radius: 0 !important;
line-height: normal !important; font-size: 1em !important;
}
#lista-productos-filtrables ul.products li.product .onsale::before {
content: "Sale"; position: absolute; top: 10px; left: -25px; width: 100px;
background-color: var(--df-sale-badge-bg); color: var(--df-sale-badge-text);
font-size: 0.8em; font-weight: bold; text-align: center; padding: 5px 0;
transform: rotate(-45deg); box-shadow: 0 2px 4px rgba(0,0,0,0.2); display: block;
}
.product-card-content {
padding: calc(var(--df-spacing-unit) * 1.5) calc(var(--df-spacing-unit) * 2);
display: flex; flex-direction: column; flex-grow: 1; text-align: center;
}
#lista-productos-filtrables ul.products li.product h2.woocommerce-loop-product__title {
font-size: 1.1em; color: var(--df-text-color);
margin: 0 0 calc(var(--df-spacing-unit) * 0.75) 0;
font-weight: 600; line-height: 1.3;
}
#lista-productos-filtrables ul.products li.product .star-rating {
margin: 0 auto calc(var(--df-spacing-unit) * 1) auto; font-size: 0.9em;
}
#lista-productos-filtrables ul.products li.product .price {
color: var(--df-text-color); font-size: 1.2em; font-weight: 600;
margin: 0 0 calc(var(--df-spacing-unit) * 1) 0; display: block;
}
#lista-productos-filtrables ul.products li.product .price del {
color: var(--df-text-light-color); font-size: 0.8em;
margin-left: var(--df-spacing-unit); font-weight: normal;
}
#lista-productos-filtrables ul.products li.product .price ins {
text-decoration: none; color: var(--df-primary-color);
}
#lista-productos-filtrables ul.products li.product .button {
background-color: var(--df-primary-color); color: white; text-decoration: none;
padding: calc(var(--df-spacing-unit) * 1.25) calc(var(--df-spacing-unit) * 2);
border-radius: var(--df-border-radius); font-weight: 500; font-size: 0.9em;
text-align: center; display: inline-block; width: auto; max-width: 100%;
margin-top: auto; border: 1px solid var(--df-primary-color);
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
font-family: var(--df-font-family);
}
#lista-productos-filtrables ul.products li.product .button:hover {
background-color: var(--df-bg-color); color: var(--df-primary-color);
border-color: var(--df-primary-color);
}
/* Estilos para el botón "Load More" */
.df-button-load-more {
background-color: var(--df-primary-color);
color: white;
border: 1px solid var(--df-primary-color);
padding: calc(var(--df-spacing-unit) * 1.25) calc(var(--df-spacing-unit) * 3);
border-radius: var(--df-border-radius);
font-family: var(--df-font-family);
font-size: 0.95em;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.df-button-load-more:hover {
background-color: var(--df-bg-color);
color: var(--df-primary-color);
}
#lista-productos-filtrables ul.products.columns-1 li.product { flex-basis: calc(100% - calc(var(--df-spacing-unit) * 2.5)) !important; }
#lista-productos-filtrables ul.products.columns-2 li.product { flex-basis: calc(50% - calc(var(--df-spacing-unit) * 2.5)) !important; }
#lista-productos-filtrables ul.products.columns-3 li.product { flex-basis: calc(33.3333% - calc(var(--df-spacing-unit) * 2.5)) !important; }
#lista-productos-filtrables ul.products.columns-4 li.product { flex-basis: calc(25% - calc(var(--df-spacing-unit) * 2.5)) !important; }
#lista-productos-filtrables ul.products.columns-5 li.product { flex-basis: calc(20% - calc(var(--df-spacing-unit) * 2.5)) !important; }
#lista-productos-filtrables ul.products.columns-6 li.product { flex-basis: calc(16.6666% - calc(var(--df-spacing-unit) * 2.5)) !important; }
#lista-productos-filtrables ul.products li.product.filtered-out { display: none !important; }
.no-products-found-message {
width: calc(100% - calc(var(--df-spacing-unit) * 2.5)); margin: var(--df-spacing-unit) * 1.25; padding: var(--df-spacing-unit) * 2;
background-color: var(--df-bg-alt-color); border: 1px solid var(--df-border-color); text-align: center;
border-radius: var(--df-border-radius); color: var(--df-text-light-color);
}
@media (max-width: 767.98px) {
#dynamic-product-filter-container { flex-direction: column !important; gap: 0; }
#dynamic-product-filter-container #sidebar-wrapper {
flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important;
margin-bottom: var(--df-spacing-unit) * 2.5 !important; padding: var(--df-spacing-unit) * 1.5;
border-radius: var(--df-border-radius);
}
#lista-productos-filtrables ul.products.columns-1 li.product,
#lista-productos-filtrables ul.products.columns-2 li.product,
#lista-productos-filtrables ul.products.columns-3 li.product,
#lista-productos-filtrables ul.products.columns-4 li.product,
#lista-productos-filtrables ul.products.columns-5 li.product,
#lista-productos-filtrables ul.products.columns-6 li.product {
flex-basis: calc(100% - calc(var(--df-spacing-unit) * 2.5)) !important;
}
#lista-productos-filtrables ul.products li.product img { max-height: 200px; }
#lista-productos-filtrables ul.products li.product h2.woocommerce-loop-product__title { font-size: 1em; }
#lista-productos-filtrables ul.products li.product .price { font-size: 1.1em; }
}
document.addEventListener('DOMContentLoaded', () => {
const mainContainer = document.getElementById('dynamic-product-filter-container');
const sidebarWrapper = document.getElementById('sidebar-wrapper');
const productListContainerEl = document.getElementById('lista-productos-filtrables');
const loadMoreButton = document.getElementById('load-more-button'); // Botón Load More
if (!mainContainer || !sidebarWrapper || !productListContainerEl || !loadMoreButton) {
console.error("Error: Main containers or Load More button not found.");
return;
}
const createSidebarSection = (id, title, innerHTMLContent) => {
const section = document.createElement('div');
if (id) section.id = id;
section.className = 'sidebar-section';
let html = ``;
html += innerHTMLContent;
section.innerHTML = html;
sidebarWrapper.appendChild(section);
return section;
};
const configSection = createSidebarSection('filter-config-controls', 'Products per Row', `
${[1,2,3,4,5,6].map(n => `${n}`).join('')}
`);
const columnSelector = document.getElementById('column-selector');
const sortingSection = createSidebarSection(null, 'Sort by', `
Best Selling
Featured
Alphabetically, A-Z
Alphabetically, Z-A
Price, Low to High
Price, High to Low
`);
const sortSelect = document.getElementById('product-sort-select');
const searchFilterSection = createSidebarSection(null, 'Search by Keyword', `
`);
const searchInput = document.getElementById('product-search-input');
const categoryFilterSection = createSidebarSection('category-filter-section', 'Categories', `
`);
const categoryCheckboxesContainer = document.getElementById('filtros-categorias-checkboxes').querySelector('ul');
const priceFilterSection = createSidebarSection(null, 'Filter by Price', `
`);
const minPriceInput = document.getElementById('min-price');
const maxPriceInput = document.getElementById('max-price');
const priceRangeValuesEl = document.getElementById('price-range-values');
const statusFilterSection = createSidebarSection(null, 'Show Also', `
`);
const statusButtonsContainer = document.getElementById('status-filter-buttons');
const tagFilterSection = createSidebarSection('tag-filter-section', 'Tags', `
`);
const tagButtonsContainer = document.getElementById('filtros-tags-botones');
const productListUL = productListContainerEl.querySelector('ul.products');
if (!productListUL) {
if(productListContainerEl) productListContainerEl.innerHTML = '
Could not load product list.
';
sidebarWrapper.style.display = 'none';
loadMoreButton.style.display = 'none';
return;
}
Array.from(productListUL.querySelectorAll('li.product')).forEach(productEl => {
const link = productEl.querySelector('a.woocommerce-LoopProduct-link');
if (link) {
const contentWrapper = document.createElement('div');
contentWrapper.className = 'product-card-content';
const title = productEl.querySelector('.woocommerce-loop-product__title');
const price = productEl.querySelector('.price');
const rating = productEl.querySelector('.star-rating');
const button = productEl.querySelector('.button');
if (title) contentWrapper.appendChild(title);
if (rating) contentWrapper.appendChild(rating);
if (price) contentWrapper.appendChild(price);
if (button) contentWrapper.appendChild(button);
productEl.appendChild(contentWrapper);
}
});
let allProductsData = [];
const processProductData = (productEl, index) => {
const titleEl = productEl.querySelector('.woocommerce-loop-product__title');
const priceRegularEl = productEl.querySelector('.price > .woocommerce-Price-amount.amount > bdi');
const priceSaleEl = productEl.querySelector('.price > ins > .woocommerce-Price-amount.amount > bdi');
const priceSimpleEl = productEl.querySelector('.price > .amount > bdi');
let priceTextContent = null;
if (priceSaleEl) { priceTextContent = priceSaleEl.textContent; }
else if (priceRegularEl) { priceTextContent = priceRegularEl.textContent; }
else if (priceSimpleEl) { priceTextContent = priceSimpleEl.textContent; }
let priceMeta = productEl.querySelector('meta[itemprop="price"]');
let priceValue = NaN;
if (priceMeta && priceMeta.content) { priceValue = parseFloat(priceMeta.content); }
else if (priceTextContent) {
let rawPrice = priceTextContent.replace(/[^0-9.,]/g, '');
if (rawPrice.includes(',') && rawPrice.includes('.')) { rawPrice = rawPrice.replace(/\./g, '').replace(',', '.');}
else { rawPrice = rawPrice.replace(/,/g, '.'); }
priceValue = parseFloat(rawPrice);
}
return {
element: productEl,
id: productEl.classList.contains('postid') ? (productEl.className.match(/post-(\d+)/) ? productEl.className.match(/post-(\d+)/)[1] : Math.random().toString()) : Math.random().toString(),
title: titleEl ? titleEl.textContent.trim().toLowerCase() : '',
price: isNaN(priceValue) ? Infinity : priceValue,
categories: Array.from(productEl.classList).filter(c => c.startsWith('product_cat-')).map(c => c.substring('product_cat-'.length)),
tags: Array.from(productEl.classList).filter(c => c.startsWith('product_tag-')).map(c => c.substring('product_tag-'.length)),
isOnSale: productEl.querySelector('.onsale') !== null,
isInStock: !productEl.classList.contains('outofstock'),
isFeatured: productEl.classList.contains('featured'),
originalIndex: index
};
};
allProductsData = Array.from(productListUL.querySelectorAll('li.product')).map(processProductData);
if (allProductsData.length === 0) {
sidebarWrapper.style.display = 'none';
productListContainerEl.innerHTML = '
No products available to display.
';
loadMoreButton.style.display = 'none';
return;
}
let currentFilters = {
categories: [], tag: 'all', searchTerm: '', minPrice: null, maxPrice: null,
sale: 'any', stock: 'any', sortBy: 'popularity'
};
let noProductsMessageEl = null;
// --- Load More Logic ---
const PRODUCTS_PER_PAGE = 9; // Show 9 products initially (3x3)
let numProductsToShow = PRODUCTS_PER_PAGE;
let currentlyDisplayedProducts = []; // Array de los productos actualmente en el DOM
loadMoreButton.addEventListener('click', () => {
numProductsToShow += PRODUCTS_PER_PAGE;
renderProductList(currentlyDisplayedProducts); // Re-render con más productos
});
// --- End Load More Logic ---
const allPrices = allProductsData.map(p => p.price).filter(p => p !== Infinity && p > 0);
const globalMinPrice = allPrices.length > 0 ? Math.floor(Math.min(...allPrices)) : 0;
const globalMaxPrice = allPrices.length > 0 ? Math.ceil(Math.max(...allPrices)) : 1000;
minPriceInput.placeholder = `Min (${globalMinPrice})`;
maxPriceInput.placeholder = `Max (${globalMaxPrice})`;
priceRangeValuesEl.textContent = `Range: ${globalMinPrice} - ${globalMaxPrice}`;
const DEFAULT_COLUMNS = '3';
const applyColumnSetting = (numCols) => {
productListUL.className = productListUL.className.replace(/\bcolumns-\d+\b/g, '').trim();
productListUL.classList.add(`columns-${numCols}`);
if (!productListUL.classList.contains('woocommerce')) productListUL.classList.add('woocommerce');
localStorage.setItem('productFilterColumns', numCols);
if (columnSelector.value !== numCols) columnSelector.value = numCols;
};
columnSelector.value = localStorage.getItem('productFilterColumns') || DEFAULT_COLUMNS;
applyColumnSetting(columnSelector.value);
columnSelector.addEventListener('change', (e) => {
applyColumnSetting(e.target.value);
// Cuando cambian las columnas, el número de items por "página" podría ser relevante.
// Por ahora, mantenemos el PRODUCTS_PER_PAGE fijo.
// Si el número de columnas cambia, puede que queramos resetear numProductsToShow al cambiar filtros.
});
const getUniqueTerms = (productDataList, termTypeKey) => {
const terms = new Map();
productDataList.forEach(product => {
product[termTypeKey].forEach(slug => {
if (!terms.has(slug)) {
const name = slug.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
terms.set(slug, name);
}
});
});
return Array.from(terms, ([slug, name]) => ({ slug, name })).sort((a, b) => a.name.localeCompare(b.name));
};
const updateCategoryCountsAndRender = () => {
const productsForCount = allProductsData.filter(p => {
const tagMatch = currentFilters.tag === 'all' || p.tags.includes(currentFilters.tag);
const searchMatch = currentFilters.searchTerm === '' || p.title.includes(currentFilters.searchTerm);
const minPriceMatch = currentFilters.minPrice === null || p.price >= currentFilters.minPrice;
const maxPriceMatch = currentFilters.maxPrice === null || p.price {
p.categories.forEach(catSlug => {
categoryCounts[catSlug] = (categoryCounts[catSlug] || 0) + 1;
});
});
const categoriesData = getUniqueTerms(allProductsData, 'categories');
createCategoryCheckboxes(categoryCheckboxesContainer, categoriesData, categoryCounts);
};
const createCategoryCheckboxes = (container, categoriesData, counts = {}) => {
if (!container) return;
container.innerHTML = '';
categoriesData.forEach(cat => {
const count = counts[cat.slug] || 0;
const listItem = document.createElement('li');
const isChecked = currentFilters.categories.includes(cat.slug);
const isDisabled = count === 0 && !isChecked;
listItem.innerHTML = `
`;
container.appendChild(listItem);
});
};
categoryCheckboxesContainer.addEventListener('change', (event) => {
if (event.target.type === 'checkbox' && event.target.name === 'product_cat') {
currentFilters.categories = Array.from(categoryCheckboxesContainer.querySelectorAll('input[name="product_cat"]:checked'))
.map(cb => cb.value);
numProductsToShow = PRODUCTS_PER_PAGE; // Resetear paginación al cambiar filtro de categoría
applyFiltersAndSort();
}
});
const createTagButtons = (container, termsData, filterKey, allText) => {
if (!container) return;
container.innerHTML = '';
const btnAll = document.createElement('button');
btnAll.textContent = allText; btnAll.dataset.filter = 'all'; btnAll.classList.add('active-filter');
container.appendChild(btnAll);
termsData.forEach(term => {
const btn = document.createElement('button');
btn.textContent = term.name; btn.dataset.filter = term.slug;
container.appendChild(btn);
});
container.addEventListener('click', (event) => {
if (event.target.tagName === 'BUTTON') {
const filterValue = event.target.dataset.filter;
currentFilters[filterKey] = filterValue;
Array.from(container.querySelectorAll('button')).forEach(b => b.classList.remove('active-filter'));
event.target.classList.add('active-filter');
numProductsToShow = PRODUCTS_PER_PAGE; // Resetear paginación
applyFiltersAndSort();
}
});
};
let searchTimeout;
searchInput.addEventListener('input', () => {
clearTimeout(searchTimeout);
searchTimeout = setTimeout(() => {
currentFilters.searchTerm = searchInput.value.trim().toLowerCase();
numProductsToShow = PRODUCTS_PER_PAGE; // Resetear paginación
applyFiltersAndSort();
}, 300);
});
[minPriceInput, maxPriceInput].forEach(input => {
input.addEventListener('change', () => {
let minVal = minPriceInput.value ? parseFloat(minPriceInput.value) : null;
let maxVal = maxPriceInput.value ? parseFloat(maxPriceInput.value) : null;
if (minVal !== null && maxVal !== null && minVal > maxVal) {
if (input === minPriceInput) maxVal = minVal; else minVal = maxVal;
minPriceInput.value = minVal; maxPriceInput.value = maxVal;
}
currentFilters.minPrice = minVal; currentFilters.maxPrice = maxVal;
priceRangeValuesEl.textContent = `Range: ${minVal !== null ? minVal : globalMinPrice} - ${maxVal !== null ? maxVal : globalMaxPrice}`;
numProductsToShow = PRODUCTS_PER_PAGE; // Resetear paginación
applyFiltersAndSort();
});
});
statusButtonsContainer.addEventListener('click', (event) => {
if (event.target.tagName === 'BUTTON') {
const button = event.target;
const filterType = button.dataset.filterType; const filterValue = button.dataset.filterValue;
currentFilters[filterType] = filterValue;
statusButtonsContainer.querySelectorAll(`button[data-filter-type="${filterType}"]`).forEach(btn => btn.classList.remove('active-filter'));
button.classList.add('active-filter');
numProductsToShow = PRODUCTS_PER_PAGE; // Resetear paginación
applyFiltersAndSort();
}
});
sortSelect.addEventListener('change', () => {
currentFilters.sortBy = sortSelect.value;
numProductsToShow = PRODUCTS_PER_PAGE; // Resetear paginación
applyFiltersAndSort();
});
const renderProductList = (productsToDisplay) => {
productListUL.innerHTML = '';
if (noProductsMessageEl) { noProductsMessageEl.remove(); noProductsMessageEl = null; }
const productsToRender = productsToDisplay.slice(0, numProductsToShow);
if (productsToRender.length > 0) {
productsToRender.forEach(p => productListUL.appendChild(p.element));
} else if (allProductsData.length > 0 && productsToDisplay.length === 0 ) { // Solo mostrar "no products" si la lista filtrada está vacía
noProductsMessageEl = document.createElement('div');
noProductsMessageEl.className = 'no-products-found-message woocommerce-info';
noProductsMessageEl.textContent = 'No products found matching your selection.';
productListUL.parentNode.insertBefore(noProductsMessageEl, productListUL);
}
// Mostrar u ocultar botón "Load More"
if (productsToDisplay.length > numProductsToShow) {
loadMoreButton.style.display = 'inline-block';
} else {
loadMoreButton.style.display = 'none';
}
};
const applyFiltersAndSort = () => {
updateCategoryCountsAndRender();
let filtered = allProductsData.filter(p => { // Cambiado nombre de variable
const categoryMatch = currentFilters.categories.length === 0 ||
currentFilters.categories.some(selectedCat => p.categories.includes(selectedCat));
const tagMatch = currentFilters.tag === 'all' || p.tags.includes(currentFilters.tag);
const searchMatch = currentFilters.searchTerm === '' || p.title.includes(currentFilters.searchTerm);
const minPriceMatch = currentFilters.minPrice === null || p.price >= currentFilters.minPrice;
const maxPriceMatch = currentFilters.maxPrice === null || p.price a.originalIndex - b.originalIndex); break;
case 'featured': filtered.sort((a, b) => (b.isFeatured - a.isFeatured) || (a.originalIndex - b.originalIndex)); break;
case 'price_asc': filtered.sort((a, b) => a.price - b.price); break;
case 'price_desc': filtered.sort((a, b) => b.price - a.price); break;
case 'title_asc': filtered.sort((a, b) => a.title.localeCompare(b.title)); break;
case 'title_desc': filtered.sort((a, b) => b.title.localeCompare(a.title)); break;
default: filtered.sort((a, b) => a.originalIndex - b.originalIndex); break;
}
currentlyDisplayedProducts = filtered; // Guardar la lista completa filtrada y ordenada
renderProductList(currentlyDisplayedProducts); // Renderizar la porción visible
};
const initialCategories = getUniqueTerms(allProductsData, 'categories');
if (initialCategories.length > 0) {
createCategoryCheckboxes(categoryCheckboxesContainer, initialCategories);
} else {
if (categoryFilterSection) categoryFilterSection.style.display = 'none';
}
const tags = getUniqueTerms(allProductsData, 'tags');
if (tags.length > 0) {
createTagButtons(tagButtonsContainer, tags, 'tag', 'All');
} else {
if(tagFilterSection) tagFilterSection.style.display = 'none';
}
applyFiltersAndSort();
});
