document.addEventListener(‘DOMContentLoaded’, () => { const searchContainer = document.querySelector(‘.search-container’); const searchInput = document.getElementById(‘search-filter’); const openBtn = document.querySelector(‘.search-icon .toggle-buttton’); const closeBtn = document.querySelector(‘.close-icon .toggle-buttton’); const openSearch = () => { if (searchContainer.classList.contains(‘open’)) return; // ya abierto searchContainer.classList.add(‘open’); requestAnimationFrame(() => searchInput.focus()); // foco tras repaint }; const closeSearch = () => { searchContainer.classList.remove(‘open’); searchInput.blur(); }; openBtn.addEventListener(‘click’, () => { searchContainer.classList.contains(‘open’) ? closeSearch() : openSearch(); }); closeBtn.addEventListener(‘click’, closeSearch); document.addEventListener(‘keydown’, (e) => { if (e.key === ‘Escape’) closeSearch(); }); }); document.addEventListener(‘DOMContentLoaded’, () => { const ajaxURL = ‘/wp-admin/admin-ajax.php’; const typePost = document.querySelector(‘.filter-config’).dataset.postType; const PAGE_ID = (document.body.className.match(/page-id-(\d+)/) || [])[1] || 0; const NONCE = »; const loops = {}; function togglePager(loopObj, show) { if (!loopObj.hasPager) return; loopObj.btn?.remove(); if (show) { loopObj.cfg.appendChild(loopObj.btn); } } document.querySelectorAll(‘.loop-config’).forEach(cfg => { const loopId = cfg.dataset.loopId; const wrapper = document.getElementById(loopId); if (!wrapper) return; const cardNode = wrapper.querySelector(‘[data-post-card-id]’); if (!cardNode) return; loops[loopId] = { wrapper, cfg, postCardId : cardNode.dataset.postCardId, page : 1, perPage : parseInt(cfg.dataset.itemsPerPage) || 9, tags : (cfg.dataset.tags || »).split(‘,’).map(t => t.trim()).filter(Boolean), tagsExclude : (cfg.dataset.tagsExclude || »).split(‘,’).map(t => t.trim()).filter(Boolean), hasPager : cfg.dataset.pagination === ‘true’, cat : ‘all’, term : » }; if (loops[loopId].hasPager) { const btn = document.createElement(‘button’); btn.type = ‘button’; btn.className = ‘load-more-btn’; btn.textContent = ‘Cargar más publicaciones’; cfg.appendChild(btn); loops[loopId].btn = btn; btn.addEventListener(‘click’, () => { loops[loopId].page++; fetchGrid(loopId, true); }); } }); const catButtons = document.querySelectorAll(‘.category-item’); const searchBtn = document.querySelector(‘.search-submit’); const searchInput = document.getElementById(‘search-filter’); const nav = document.querySelector(‘.filters-wrapper nav’); nav.addEventListener(‘click’, e => { const btn = e.target.closest(‘.category-item’); if (!btn) return; // no era un botón /* 1.a estado visual: solo uno activo */ nav.querySelectorAll(‘.category-item’).forEach(b => b.classList.remove(‘active’)); btn.classList.add(‘active’); /* 1.b dispara filtros globales */ const term = document.getElementById(‘search-filter’)?.value.trim() || »; window.applyFilters(btn.dataset.category, term); }); /* 2 ▸ expón applyFilters → accesible desde los clones posteriores */ window.applyFilters = function(cat, term){ Object.values(loops).forEach(l => { l.cat = cat; l.term = term; l.page = 1; togglePager(l, true); fetchGrid(l.wrapper.id); }); }; searchBtn?.addEventListener(‘click’, () => { const activeCat = document.querySelector(‘.category-item.active’)?.dataset.category || ‘all’; applyFilters(activeCat, searchInput.value.trim()); }); function applyFilters(cat, term) { Object.values(loops).forEach(l => { l.cat = cat; l.term = term; l.page = 1; fetchGrid(l.wrapper.id); }); } function fetchGrid(loopId, append = false) { const l = loops[loopId]; if (!l) return; const data = new FormData(); data.append(‘post_type’, typePost); data.append(‘action’, ‘bc_filter_post_cards’); if (NONCE) data.append(‘nonce’, NONCE); data.append(‘page_id’, PAGE_ID); data.append(‘postcard_id’, l.postCardId); data.append(‘cat’, l.cat); data.append(‘s’, l.term); data.append(‘tags’, l.tags.join(‘,’)); data.append(‘exclude_tags’, l.tagsExclude.join(‘,’)); data.append(‘posts_per_page’, l.perPage); data.append(‘paged’, l.page); fetch(ajaxURL, { method:’POST’, credentials:’same-origin’, body:data }) .then(r => r.json()) .then(json => { if (json.success) { const { html, has_more } = json.data; const tmp = document.createElement(‘div’); tmp.innerHTML = html; const ulNew = tmp.querySelector(‘.fusion-grid’); const liHTML = ulNew ? ulNew.innerHTML : tmp.innerHTML; const grid = l.wrapper.querySelector(‘.fusion-grid’); if (!grid) return; if (append) { grid.insertAdjacentHTML(‘beforeend’, liHTML); } else { grid.innerHTML = liHTML; } grid.querySelectorAll(‘li’).forEach(li => { li.dataset.postCardId = l.postCardId; }); if (!has_more) { togglePager(l, false); } else { togglePager(l, true); } if (window.FusionApp) { window.FusionApp.responsiveImages?.(grid); window.FusionApp.wowInit?.(grid); window.FusionApp.preloadImages?.(grid); } if (window.FusionEqualHeights?. _equalize) { window.FusionEqualHeights._equalize(l.wrapper); } } }) .catch(console.error); } Object.keys(loops).forEach(id => fetchGrid(id)); const cfg = document.querySelector(‘.filter-config’); if (!cfg) return; const postType = cfg.dataset.postType || ‘post’; const tagSlug = cfg.dataset.categoryFilterTag || »; const ajaxURLCat = ‘/wp-admin/admin-ajax.php’; const data = new FormData(); data.append(‘action’, ‘bc_get_filter_categories’); data.append(‘post_type’, postType); data.append(‘tag’, tagSlug); fetch(ajaxURLCat, { method:’POST’, credentials:’same-origin’, body:data }) .then(r => r.json()) .then(json => { if (!json.success) return; const nav = document.querySelector(‘.filters-wrapper nav’); const tplButton = nav.querySelector(‘.category-item’); json.data.forEach(({ slug, name }) => { if (nav.querySelector(`[data-category=»${slug}»]`)) return; const btn = tplButton.cloneNode(true); btn.classList.remove(‘active’); btn.dataset.category = slug; btn.dataset.filterActive = ‘false’; btn.querySelector(‘.text-button’).textContent = name; nav.appendChild(btn); }); window.catButtons = document.querySelectorAll(‘.category-item’); }) .catch(console.error); });