Product Page

'; fetch(ajaxUrl, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: 'action=cpg_load_products' + '&keyword=' + encodeURIComponent(keyword) + '&categories=' + encodeURIComponent(JSON.stringify(checked)) + '&paged=' + page + '&nonce=' + nonce }) .then(function(r) { return r.json(); }) .then(function(res) { grid.innerHTML = res.html; if (countEl) { countEl.innerHTML = keyword.length > 0 ? '' + res.total + ' produk ditemukan untuk "' + keyword + '"' : (res.total > 0 ? '' + res.total + ' produk' : ''); } }) .catch(function() { grid.innerHTML = '

Gagal memuat produk.

'; }); }; // ---- SEARCH ---- var searchInput = document.getElementById('cps-input'); var clearBtn = document.getElementById('cps-clear'); var debounceTimer; if (searchInput) { searchInput.addEventListener('input', function() { var val = this.value.trim(); if (clearBtn) clearBtn.style.display = val.length ? 'block' : 'none'; clearTimeout(debounceTimer); debounceTimer = setTimeout(function() { window.cpgLoadProducts(1, val); }, 400); }); } if (clearBtn) { clearBtn.addEventListener('click', function() { searchInput.value = ''; clearBtn.style.display = 'none'; window.cpgLoadProducts(1, ''); searchInput.focus(); }); } // ---- FILTER TOGGLE (dropdown) ---- document.querySelectorAll('.filter-toggle').forEach(function(toggle) { toggle.addEventListener('click', function() { var children = this.nextElementSibling; var icon = this.querySelector('.toggle-icon'); if (children && children.classList.contains('filter-children')) { var isOpen = children.style.display !== 'none'; children.style.display = isOpen ? 'none' : 'block'; icon.textContent = isOpen ? '+' : '−'; } }); }); // ---- CHECKBOX CHANGE ---- document.querySelectorAll('.filter-checkbox').forEach(function(cb) { cb.addEventListener('change', function() { window.cpgLoadProducts(1); }); }); // ---- RESET ---- var resetBtn = document.getElementById('filter-reset-btn'); if (resetBtn) { resetBtn.addEventListener('click', function(e) { e.preventDefault(); document.querySelectorAll('.filter-checkbox').forEach(function(cb) { cb.checked = false; }); window.cpgLoadProducts(1); }); } // ---- PAGINATION (delegated) ---- document.addEventListener('click', function(e) { var btn = e.target.closest('.cpg-page-btn'); if (btn && !btn.disabled && !btn.classList.contains('active')) { var pg = parseInt(btn.dataset.page); if (!isNaN(pg)) { window.cpgLoadProducts(pg); var grid = document.getElementById('custom-product-grid'); if (grid) grid.scrollIntoView({ behavior: 'smooth', block: 'start' }); } } }); // ---- MOBILE OFFCANVAS ---- var sidebar = document.getElementById('cpf-sidebar'); var overlay = document.getElementById('cpf-overlay'); var openBtn = document.getElementById('cpf-open-btn'); var closeBtn = document.getElementById('cpf-close-btn'); function openSidebar() { if (!sidebar) return; sidebar.classList.add('open'); if (overlay) { overlay.style.display = 'block'; } setTimeout(function() { if (overlay) overlay.classList.add('active'); }, 10); document.body.style.overflow = 'hidden'; } function closeSidebar() { if (!sidebar) return; sidebar.classList.remove('open'); if (overlay) overlay.classList.remove('active'); setTimeout(function() { if (overlay) overlay.style.display = 'none'; }, 300); document.body.style.overflow = ''; } if (openBtn) openBtn.addEventListener('click', openSidebar); if (closeBtn) closeBtn.addEventListener('click', closeSidebar); if (overlay) overlay.addEventListener('click', closeSidebar); })();