پروژه فروشگاه اینترنتی با جاوااسکریپت - طراحی رابط کاربری

🎯 اهداف یادگیری

آشنایی با ساختار پایه پروژه فروشگاه اینترنتی
طراحی رابط کاربری با HTML و CSS
ایجاد بخش‌های اصلی صفحه محصولات
پیاده‌سازی اولیه سبد خرید

📌 ساختار پروژه

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

html

            <!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>فروشگاه اینترنتی</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>فروشگاه اینترنتی ما</h1>
        <nav>
            <a href="#">خانه</a>
            <a href="#">محصولات</a>
            <a href="#">سبد خرید</a>
        </nav>
    </header>
    <main>
        <section class="products">
            <h2>محصولات</h2>
            <div class="product-list">
                <!-- محصولات اینجا نمایش داده می‌شوند -->
            </div>
        </section>
    </main>
    <footer>
        <p>تمامی حقوق برای فروشگاه اینترنتی ما محفوظ است</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

            

انواع کامنت‌ها:

تک‌خطی: با # شروع می‌شود (برای توضیحات کوتاه)
چندخطی: با سه کوتیشن """ یا ''' (برای توضیحات طولانی)

📌 استایل‌دهی با CSS

برای زیباسازی فروشگاه از CSS استفاده می‌کنیم:

css

            body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}
header {
    background-color: #2c3e50;
    color: white;
    padding: 1rem;
    text-align: center;
}
nav {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}
nav a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    background-color: #3498db;
}

            

قوانین طراحی رابط کاربری:

راست‌چین بودن: با dir="rtl" در HTML و text-align: right در CSS
رنگ‌بندی مناسب: استفاده از رنگ‌های هماهنگ و حرفه‌ای
واکنش‌گرایی: طراحی مناسب برای دستگاه‌های مختلف

📌 طراحی کارت محصول

برای نمایش محصولات از کارت‌های محصول استفاده می‌کنیم:

html

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

            

css

            .product-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 1rem;
    text-align: center;
    width: 250px;
}
.product-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 4px;
}
.add-to-cart {
    background-color: #27ae60;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
}

            

ویژگی‌های کارت محصول:

تصویر محصول: با نسبت مناسب و سایز ثابت
اطلاعات محصول: نام، قیمت و دکمه افزودن به سبد خرید
سایه و گردی گوشه‌ها: برای زیبایی بیشتر

📌 طراحی سبد خرید

سبد خرید را در سمت چپ صفحه قرار می‌دهیم:

html

            <aside class="cart">
    <h3>سبد خرید</h3>
    <div class="cart-items">
        <!-- آیتم‌های سبد خرید اینجا نمایش داده می‌شوند -->
    </div>
    <div class="cart-total">
        <p>جمع کل: <span id="total-price">0</span> تومان</p>
        <button class="checkout-btn">تسویه حساب</button>
    </div>
</aside>

            

css

            .cart {
    position: fixed;
    left: 1rem;
    top: 100px;
    width: 300px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 1rem;
}
.cart-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.checkout-btn {
    background-color: #e74c3c;
    color: white;
    width: 100%;
    padding: 0.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

            

ویژگی‌های سبد خرید:

موقعیت ثابت: همیشه در دسترس کاربر
نمایش آیتم‌ها: لیست محصولات اضافه شده
محاسبه جمع کل: نمایش مبلغ نهایی
دکمه تسویه حساب: برای ادامه فرآیند خرید

📌 تمرین عملی

صفحه محصولات را با ویژگی‌های زیر تکمیل کنید:

اضافه کردن فیلتر محصولات بر اساس دسته‌بندی
ایجاد سیستم امتیازدهی به محصولات (ستاره‌ها)
اضافه کردن دکمه "مشاهده جزئیات" برای هر محصول

📌 قدم بعدی

در بخش بعدی با پیاده‌سازی منطق سبد خرید با جاوااسکریپت آشنا خواهیم شد!

❮ خانه بعدی ❯