إدارة متجر إلكتروني بدون API

عادة ما يكون لدينا مشروع حقيقي عادى نحن نبحث من قاعدة البيانات باستخدام التعابير النمطية لكن في الحال هذه يمكنك عمل بحث مبسط باستخدام دوال جاهزة مثل .include وغيرها من الدوال:

مثال:

function searchProducts(query) {
  return products.filter(product =>
    product.name.toLowerCase().includes(query.toLowerCase())
  );
}

const result = searchProducts("apple");
console.log(result);

ويكون البحث عن طريق استخدام العنصر الخاص بال input اللذي هو onChange لو كان مكتوبا برياكت لانه نريد ان نبحث بعد كل كلمة بعد كل حرف فيجب ان يعرف التغيير بعد كتابة كل حرف.

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

كالتالي:

HTML

<input id="searchBox" placeholder="ابحث عن منتج..." />
<ul id="results"></ul>

جافاسكريبت:

const products = [
  { id: 1, name: "حذاء رياضي", price: 40 },
  { id: 2, name: "تي-شيرت قطني", price: 15 },
  { id: 3, name: "ساعة ذكية",  price: 120 }
];

function searchProducts(query) {
  const q = query.trim().toLowerCase();
  return products.filter(p => p.name.toLowerCase().includes(q));
}

const box     = document.getElementById("searchBox");
const results = document.getElementById("results");

box.addEventListener("input", () => {
  const matches = searchProducts(box.value);
  results.innerHTML = matches
    .map(p => `<li>${p.name} – $${p.price}</li>`)
    .join("") || "<li>لا توجد نتائج</li>";
});

وبإمكانك استبدال الـArray بملف ‎products.json‎ وتحميله بــ fetch() إن أردت إبقاء البيانات مفصولة عن الكود.

وذلك مناسب في حال عدد المنتجات محدود أي بضع مئات ولا حاجة إلى ميزات بحث متقدمة، لكن في الواقع العملي وجود API وقاعدة بيانات أمر ضروري لأي متجر إلكتروني لمعالجة طلبات الشراء والأمور المتعلقة بها من إدارة المخزون، تسجيل دخول المستخدمين، والمدفوعات، وكذلك التعديل على المنتجات وخلافه، فمن غير العملي التعديل على المنتج من خلال تعديل الكود.

أيضًا عربة الشراء، حيث يجب ربط العربة بالمستخدم أو بالجلسة وأحيانًا مزامنتها بين الأجهزة، وبالطبع تستطيع الاحتفاظ بالعربة في localStorage لكن ذلك للتجارب البسيطة، ولن تعمل لو انتقل المستخدم إلى جهاز آخر أو مسح بيانات المتصفح أو فتح الموقع من متصفح آخر.

قم بتجربة استخدام منصة Supabase  أو firebase لإنشاء واجهة خلفية للمتجر بشكل سهل.