پروژه فروشگاه اینترنتی با جاوااسکریپت - بخش اول: نمایش محصولات

<div class="products-container">
    <div class="product-card">
        <img src="laptop.jpg" alt="لپ تاپ ایسوس">
        <h3>لپ تاپ ایسوس ROG</h3>
        <p class="price">35,000,000 تومان</p>
        <button class="add-to-cart">افزودن به سبد خرید</button>
    </div>
    <!-- محصولات دیگر -->
</div>

.products-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    padding: 1rem;
}
.product-card {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.3s ease;
}
.product-card:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

// تابع نمایش محصولات
function displayProducts(products) {
    const container = document.querySelector('.products-container');
    container.innerHTML = '';
    products.forEach(product => {
        const productElement = document.createElement('div');
        productElement.className = 'product-card';
        productElement.innerHTML = `
            <img src="${product.image}" alt="${product.name}">
            <h3>${product.name}</h3>
            <p class="price">${product.price.toLocaleString()} تومان</p>
            <button class="add-to-cart" data-id="${product.id}">
                افزودن به سبد خرید
            </button>
        `;
        container.appendChild(productElement);
    });
}

// مدیریت کلیک روی دکمه افزودن به سبد خرید
function setupAddToCartButtons() {
    const buttons = document.querySelectorAll('.add-to-cart');
    buttons.forEach(button => {
        button.addEventListener('click', () => {
            const productId = parseInt(button.getAttribute('data-id'));
            addToCart(productId);
            showToast('محصول به سبد خرید اضافه شد');
        });
    });
}

// 1. افزودن قابلیت نمایش ستاره‌های امتیاز محصول
// 2. پیاده‌سازی سیستم فیلتر بر اساس دسته‌بندی
// 3. افزودن دکمه مشاهده جزئیات محصول