مشروع عملي: بناء متجر إلكتروني بسيط باستخدام JavaScript (صفحة منتجات + عربة شراء)

في

 


حديثنا اليوم راح يكون عن بناء متجر إلكتروني بسيط باستخدام JavaScript (صفحة منتجات + عربة شراء)


المقدمة

التجارة الإلكترونية أصبحت جزءًا لا يتجزأ من حياتنا اليومية. اليوم، ملايين الأشخاص حول العالم يتسوقون عبر الإنترنت لشراء كل ما يحتاجونه من منتجات: الملابس، الأجهزة، الكتب، وحتى الطعام.
من هنا، يصبح تعلم كيفية بناء متجر إلكتروني واحدًا من أهم المشاريع العملية التي يمكن لأي مبرمج مبتدئ أو متوسط أن يبدأ بها.

في هذا المقال سنتعلم معًا خطوة بخطوة كيفية بناء متجر إلكتروني بسيط يحتوي على:

  • صفحة لعرض المنتجات.

  • عربة شراء (Shopping Cart) لإضافة المنتجات ومراجعتها.

  • تصميم بسيط وجذاب باستخدام HTML و CSS.

  • وظائف ديناميكية باستخدام JavaScript.

لن تحتاج إلى أي أدوات متقدمة أو قواعد بيانات معقدة، بل سنكتفي بواجهة أمامية (Frontend) فقط، مع إمكانية تطوير المشروع لاحقًا.

لماذا نبني متجر إلكتروني كمشروع؟

بناء متجر إلكتروني ليس مجرد تجربة برمجية عادية، بل هو تطبيق عملي يلامس الواقع، ويساعدك على فهم مجموعة من المهارات:

  1. عرض البيانات بطريقة منظمة (المنتجات).

  2. إدارة الأحداث Events عند إضافة أو حذف منتج من السلة.

  3. التخزين المحلي LocalStorage لحفظ المنتجات المضافة.

  4. تصميم واجهة تفاعلية تجعل المستخدم مرتاحًا أثناء التصفح.

  5. تعلم كيفية توسيع المشروع ليصبح متجرًا حقيقيًا.

المتطلبات

لبناء المشروع نحتاج:

  • محرر أكواد مثل VS Code.

  • متصفح حديث لتجربة التطبيق.

  • معرفة أساسية بـ HTML، CSS، JavaScript.

الخطوة 1: هيكل صفحة المتجر (HTML)

أول خطوة هي إنشاء ملف HTML يحتوي على:

  • رأس الصفحة (Header).

  • قسم لعرض المنتجات.

  • قسم لعربة التسوق (Cart).

الكود:

مثال على كود HTML يحتوي على رأس الصفحة وقسم المنتجات وعربة الشراء



























الكود جاهز للنسخ : 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>متجري البسيط</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>متجر إلكتروني بسيط</h1>
    <div class="cart">
      <span>🛒</span>
      <span id="cart-count">0</span>
    </div>
  </header>

  <main>
    <section id="products"></section>
    <aside id="cart-items"></aside>
  </main>

  <script src="script.js"></script>
</body>
</html>

الخطوة 2: تصميم الواجهة (CSS)

الآن نضيف بعض التنسيقات لتبدو الصفحة جميلة.

كود CSS يوضح تنسيق المنتجات وعربة الشراء في متجر إلكتروني










كود CSS يوضح تنسيق المنتجات وعربة الشراء في متجر إلكتروني















الكود جاهز للنسخ : 

body {

  font-family: Tahoma, sans-serif;

  margin: 0;

  padding: 0;

  background: #f9f9f9;

}


header {

  background: #007bff;

  color: #fff;

  padding: 15px;

  display: flex;

  justify-content: space-between;

  align-items: center;

}


#products {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

  margin: 20px;

}


.product {

  background: #fff;

  border: 1px solid #ddd;

  padding: 15px;

  border-radius: 10px;

  text-align: center;

  box-shadow: 0px 2px 6px rgba(0,0,0,0.1);

}


button {

  background: #28a745;

  color: white;

  padding: 10px;

  border: none;

  margin-top: 10px;

  border-radius: 6px;

  cursor: pointer;

}


button:hover {

  background: #218838;

}


#cart-items {

  background: #fff;

  padding: 15px;

  border-left: 2px solid #ddd;

}

الخطوة 3: إضافة المنتجات عبر JavaScript

سنقوم بإنشاء مصفوفة (Array) تحتوي على منتجات المتجر، مع خصائص مثل الاسم، السعر، الصورة.

مثال على كود JavaScript يضيف المنتجات المختارة إلى عربة الشراء








مثال على كود JavaScript يضيف المنتجات المختارة إلى عربة الشراء









مثال على كود JavaScript يضيف المنتجات المختارة إلى عربة الشراء










الكود جاهز للنسخ : 
const products = [
  { id: 1, name: "هاتف ذكي", price: 1200, img: "phone.jpg" },
  { id: 2, name: "سماعات بلوتوث", price: 250, img: "headphones.jpg" },
  { id: 3, name: "حاسوب محمول", price: 3000, img: "laptop.jpg" }
];

const productsContainer = document.getElementById("products");
const cartItemsContainer = document.getElementById("cart-items");
const cartCount = document.getElementById("cart-count");

let cart = [];

// عرض المنتجات
function displayProducts() {
  productsContainer.innerHTML = "";
  products.forEach(product => {
    let div = document.createElement("div");
    div.classList.add("product");
    div.innerHTML = `
      <img src="${product.img}" width="150">
      <h3>${product.name}</h3>
      <p>${product.price} ريال</p>
      <button onclick="addToCart(${product.id})">إضافة إلى السلة</button>
    `;
    productsContainer.appendChild(div);
  });
}

// إضافة إلى السلة
function addToCart(id) {
  let product = products.find(p => p.id === id);
  cart.push(product);
  cartCount.textContent = cart.length;
  displayCart();
}

// عرض السلة
function displayCart() {
  cartItemsContainer.innerHTML = "<h2>عربة التسوق</h2>";
  cart.forEach((item, index) => {
    cartItemsContainer.innerHTML += `
      <div>
        ${item.name} - ${item.price} ريال
        <button onclick="removeFromCart(${index})">❌</button>
      </div>
    `;
  });
}

// حذف من السلة
function removeFromCart(index) {
  cart.splice(index, 1);
  cartCount.textContent = cart.length;
  displayCart();
}

displayProducts();

كيف يعمل المشروع؟

  1. صفحة المنتجات تعرض جميع العناصر المتاحة للبيع.

  2. عند الضغط على زر "إضافة إلى السلة"، يتم إضافة المنتج إلى القائمة الجانبية.

  3. يتم تحديث عدد العناصر في السلة تلقائيًا.

  4. يمكن للمستخدم حذف المنتجات من السلة.

تطوير المشروع

بعد أن نجحنا في بناء النسخة البسيطة، يمكنك تطوير المتجر:

  • إضافة خاصية البحث عن المنتجات.

  • عرض المجموع الكلي للسلة.

  • حفظ البيانات في LocalStorage.

  • دعم تسجيل الدخول والمزامنة عبر قاعدة بيانات (مثل Firebase).

  • جعل التصميم متجاوبًا مع الهواتف.

الفائدة التعليمية

من خلال هذا المشروع ستتعلم:

  • كيفية عرض بيانات ديناميكية عبر JavaScript.

  • ربط الواجهة (UI) مع المنطق البرمجي.

  • بناء عربة تسوق بسيطة تشبه ما يوجد في المواقع الحقيقية.

  • طرق تطوير المشروع وتحويله من فكرة بسيطة إلى متجر متكامل.

الخاتمة

بناء متجر إلكتروني بسيط هو مشروع تعليمي رائع لكل من يريد الدخول في عالم تطوير الويب.
مع القليل من HTML و CSS و JavaScript، يمكنك إنشاء متجر يعرض منتجات ويتيح إضافة وحذف العناصر من السلة.

الأهم أن تبدأ بالمشاريع الصغيرة وتطورها تدريجيًا، حتى تصل في النهاية إلى بناء تطبيقات احترافية جاهزة للاستخدام التجاري.

تعليقات

إرسال تعليق