Our Products
Kabinet TV Minimalis RAR 126
Rp 334.000
Rak Serbaguna RSG 10
Rp 503.000
Modern Cabinet
Rp 1,500,000
×
![Product Image]()
// Modal produk & fitur search
document.addEventListener('DOMContentLoaded', function() {
const modal = document.getElementById('productModal');
const modalImg = document.getElementById('modal-img');
const modalTitle = document.getElementById('modal-title');
const modalPrice = document.getElementById('modal-price');
const modalDescription = document.getElementById('modal-description');
const closeModal = document.querySelector('.modal-close');
// Modal dari klik kartu atau tombol detail
document.querySelectorAll('.product-card, .detail-btn').forEach(el => {
el.addEventListener('click', function(e) {
let card = this.classList.contains('product-card') ? this : this.closest('.product-card');
if (!card) return;
const imgSrc = card.querySelector('img').src;
const title = card.querySelector('h3').innerText;
const price = card.querySelector('.product-price').innerText;
const description = card.dataset.description;
modalImg.src = imgSrc;
modalTitle.innerText = title;
modalPrice.innerText = price;
modalDescription.innerText = description;
modal.style.display = 'flex';
e.stopPropagation();
});
});
const close = () => { modal.style.display = 'none'; };
closeModal.addEventListener('click', close);
window.addEventListener('click', function(event) {
if (event.target == modal) { close(); }
});
// Filter produk
window.filterProducts = function(category) {
document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active'));
document.querySelectorAll('.filter-btn').forEach(btn => {
if (btn.textContent.toLowerCase().includes(category) || (category === 'all' && btn.textContent.toLowerCase().includes('semua'))) {
btn.classList.add('active');
}
});
let cards = document.querySelectorAll('.product-card');
let count = 0;
let searchValue = document.getElementById('searchInput').value.toLowerCase();
cards.forEach(card => {
let matchCategory = (category === 'all' || card.dataset.category === category);
let matchSearch = card.querySelector('h3').innerText.toLowerCase().includes(searchValue);
if (matchCategory && matchSearch) {
card.style.display = '';
count++;
} else {
card.style.display = 'none';
}
});
document.getElementById('productCount').innerText = count + ' produk ditemukan';
};
// Search produk
document.getElementById('searchInput').addEventListener('input', function() {
let activeBtn = document.querySelector('.filter-btn.active');
let category = activeBtn ? activeBtn.textContent.toLowerCase() : 'all';
if (category.includes('semua')) category = 'all';
filterProducts(category);
});
// Hitung produk awal
document.getElementById('productCount').innerText = document.querySelectorAll('.product-card').length + ' produk ditemukan';
});