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

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

آشنایی با معماری کلی پروژه فروشگاه اینترنتی
یادگیری مراحل پیاده‌سازی بخش‌های اصلی
مدیریت حالت (State) در پروژه
پیاده‌سازی سبد خرید و سیستم پرداخت

📌 معماری پروژه

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

text

            📁 پروژه فروشگاه اینترنتی
├── 📄 index.html
├── 📁 css
├── 📁 js
│   ├── 📄 main.js
│   ├── 📄 products.js
│   ├── 📄 cart.js
│   └── 📄 utils.js
└── 📁 images

            

توضیح ساختار پروژه:

index.html: صفحه اصلی و ساختار کلی پروژه
main.js: فایل اصلی مدیریت رویدادها و هماهنگی بین ماژول‌ها
products.js: مدیریت محصولات و نمایش آنها
cart.js: مدیریت سبد خرید و عملیات مربوطه

📌 مرحله ۱: راه‌اندازی اولیه

ابتدا ساختار اولیه HTML و اتصال فایل‌های جاوااسکریپت را آماده می‌کنیم:

html

            <!DOCTYPE html>
<html lang="fa">
<head>
  <title>فروشگاه اینترنتی</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div id="app">
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
  <script src="js/products.js"></script>
  <script src="js/cart.js"></script>
  <script src="js/main.js"></script>
</body>
</html>

            

نکات مهم راه‌اندازی:

ساختار واکنش‌گرا: طراحی ریسپانسیو برای نمایش در دستگاه‌های مختلف
مدولار بودن کدها: جداسازی منطق برنامه در فایل‌های مختلف
توجه به SEO: استفاده از تگ‌های معنایی HTML5

📌 مرحله ۲: مدیریت محصولات

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

javascript

            // products.js - مدیریت محصولات
const products = [
  {
    id: 1,
    name: 'لپ‌تپ ایسوس',
    price: 25000000,
    category: 'لپ‌تپ',
    image: 'laptop.jpg'
  },
  // سایر محصولات...
];
function renderProducts(productsToRender) {
  const productsContainer = document.getElementById('products');
  productsContainer.innerHTML = '';
  productsToRender.forEach(product => {
    const productElement = document.createElement('div');
    productElement.className = 'product';
    productElement.innerHTML = `
      <img src="images/${product.image}" alt="${product.name}">
      <h3>${product.name}</h3>
      <p class="price">${product.price.toLocaleString()} تومان</p>
      <button onclick="addToCart(${product.id})">افزودن به سبد خرید</button>
    `;
    productsContainer.appendChild(productElement);
  });
}

            

ویژگی‌های بخش محصولات:

فیلتر محصولات: امکان فیلتر بر اساس دسته‌بندی و قیمت
جستجو: امکان جستجوی محصولات بر اساس نام
صفحه‌بندی: تقسیم محصولات به صفحات مختلف

📌 مرحله ۳: پیاده‌سازی سبد خرید

سیستم مدیریت سبد خرید با قابلیت ذخیره در localStorage:

javascript

            // cart.js - مدیریت سبد خرید
let cart = JSON.parse(localStorage.getItem('cart')) || [];
function addToCart(productId) {
  const product = products.find(p => p.id === productId);
  const existingItem = cart.find(item => item.id === productId);
  if (existingItem) {
    existingItem.quantity += 1;
  } else {
    cart.push({ ...product, quantity: 1 });
  }
  updateCart();
  showToast('محصول به سبد خرید اضافه شد');
}
function updateCart() {
  localStorage.setItem('cart', JSON.stringify(cart));
  renderCart();
}

            

قابلیت‌های سبد خرید:

افزودن/حذف محصول: مدیریت تعداد هر محصول در سبد
محاسبه جمع کل: نمایش مبلغ نهایی به همراه تخفیف‌ها
ذخیره وضعیت: نگهداری سبد خرید کاربر حتی پس از بستن مرورگر

📌 مرحله ۴: سیستم پرداخت و تسویه حساب

پیاده‌سازی بخش نهایی خرید و پرداخت:

javascript

            // پرداخت نهایی
function checkout() {
  if (cart.length === 0) {
    showToast('سبد خرید شما خالی است', 'error');
    return;
  }
  const total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
  const order = {
    id: Date.now(),
    items: [...cart],
    total,
    date: new Date().toLocaleString()
  };
  // در حالت واقعی این اطلاعات به سرور ارسال می‌شود
  console.log('سفارش ثبت شد:', order);
  cart = [];
  updateCart();
  showToast('سفارش شما با موفقیت ثبت شد', 'success');
}

            

مراحل پرداخت:

تأیید محتویات سبد خرید
محاسبه جمع کل و تخفیف‌ها
دریافت اطلاعات کاربر (در حالت واقعی)
ارسال درخواست پرداخت به درگاه بانکی
بررسی نتیجه پرداخت و ثبت سفارش

📌 قدم بعدی

در بخش بعدی با بهینه‌سازی و افزودن ویژگی‌های پیشرفته به پروژه آشنا خواهیم شد!

❮ خانه بعدی ❯