ابنِ متجرك الإلكتروني كاملاً على Lovable

• ✅ كتالوج منتجات كامل مع صور وأسعار وتنويعات (مقاس/لون)
• ✅ سلة شراء ذكية وصفحة إتمام دفع (Checkout) عربية
• ✅ قبول مدفوعات Visa وMastercard وMada وApple Pay
• ✅ لوحة تحكم للمشرف لإدارة الطلبات والمخزون
• ✅ حسابات عملاء + تتبّع الطلبات + إشعارات بريدية
• ✅ SEO كامل للمنتجات + Schema Product لظهور غني في Google

انسخ كل برومبت والصقه في Lovable بالترتيب. لا تدمج خطوتين في برومبت واحد — الجودة تنخفض. عدّل النص بين الأقواس المربّعة ليناسب مشروعك.

⌨️ تنقّل بين الخطوات بالأسهم (↑ ↓ → ←)، واضغط Enter أو Space لنسخ البرومبت.

1. 1

   الخطوة 1: التهيئة والهوية

   برومبت الخطوة 1 — التهيئة والهوية. اضغط Enter أو Space للنسخ، أو استخدم الأسهم للتنقّل.

   أنشئ متجراً إلكترونياً باسم [اسم المتجر] يبيع [نوع المنتجات]. اجعل الواجهة عربية (RTL) بالكامل، بخط IBM Plex Sans Arabic، وهوية لونية [صف الألوان]. أنشئ صفحات: الرئيسية، المنتجات، صفحة المنتج، السلة، إتمام الطلب، حسابي، من نحن، تواصل معنا.

   نسخ
2. 2

   الخطوة 2: قاعدة البيانات والمنتجات

   برومبت الخطوة 2 — قاعدة البيانات والمنتجات. اضغط Enter أو Space للنسخ، أو استخدم الأسهم للتنقّل.

   فعّل Lovable Cloud وأنشئ جداول: products (id, title, description, price, currency, images, stock, category, slug)، categories، product_variants (size, color, price_delta, stock). أضف بيانات تجريبية لعشرة منتجات موزعة على ثلاث فئات. اربط صفحة المنتجات بالجدول مع فلترة حسب الفئة وبحث فوري.

   نسخ
3. 3

   الخطوة 3: صفحة المنتج والسلة

   برومبت الخطوة 3 — صفحة المنتج والسلة. اضغط Enter أو Space للنسخ، أو استخدم الأسهم للتنقّل.

   أنشئ صفحة منتج /products/[slug] تعرض معرض الصور، الوصف، التنويعات، والسعر. زر «أضف للسلة» يحفظ العنصر في سلة عبر Context + localStorage. أنشئ صفحة /cart تعرض العناصر مع تعديل الكمية والحذف وحساب الإجمالي مع الشحن.

   نسخ
4. 4

   الخطوة 4: المصادقة وحسابات العملاء

   برومبت الخطوة 4 — المصادقة وحسابات العملاء. اضغط Enter أو Space للنسخ، أو استخدم الأسهم للتنقّل.

   فعّل Supabase Auth بتسجيل عبر البريد وGoogle. أنشئ صفحة /account تعرض بيانات العميل وطلباته السابقة. أضف جدول orders وربطه بـ user_id مع RLS بحيث يرى العميل طلباته فقط.

   نسخ
5. 5

   الخطوة 5: الدفع عبر Stripe

   برومبت الخطوة 5 — الدفع عبر Stripe. اضغط Enter أو Space للنسخ، أو استخدم الأسهم للتنقّل.

   أضف تكامل Stripe Checkout عبر Edge Function. عند الضغط على «إتمام الطلب» أنشئ جلسة Checkout Session بمنتجات السلة والعملة SAR/AED/KWD حسب الدولة. بعد النجاح أنشئ سجل orders بحالة paid وأرسل بريد تأكيد عبر Resend.

   نسخ
6. 6

   الخطوة 6: لوحة تحكم المشرف

   برومبت الخطوة 6 — لوحة تحكم المشرف. اضغط Enter أو Space للنسخ، أو استخدم الأسهم للتنقّل.

   أنشئ صفحة /admin محميّة بدور admin (استخدم جدول user_roles منفصل). تحوي: إدارة المنتجات (إضافة/تعديل/حذف + رفع صور)، إدارة الطلبات (تحديث الحالة إلى مُشحن/مُسلَّم)، إحصاءات أساسية (المبيعات اليوم/الشهر).

   نسخ
7. 7

   الخطوة 7: SEO ومشاركة اجتماعية

   برومبت الخطوة 7 — SEO ومشاركة اجتماعية. اضغط Enter أو Space للنسخ، أو استخدم الأسهم للتنقّل.

   لكل صفحة منتج ولّد title وdescription وog:image من بيانات المنتج، وأضف JSON-LD من نوع Product يشمل السعر والتوفر والصورة. أنشئ /sitemap.xml يشمل جميع المنتجات والفئات.

   نسخ
8. 8

   الخطوة 8: اللمسات الأخيرة

   برومبت الخطوة 8 — اللمسات الأخيرة. اضغط Enter أو Space للنسخ، أو استخدم الأسهم للتنقّل.

   أضف شريط توصيل مجاني عند تجاوز مبلغ معين، Wishlist، مراجعات المنتجات، كوبونات خصم، وصفحة سياسة الاستبدال والإرجاع. اجعل الموقع سريعاً على 3G عبر lazy load للصور.

   نسخ
   💡 اطلب هذه المزايا واحدة تلو الأخرى لضمان جودة كل ميزة.

1. ١. راجع المعاينة (Preview)

   افتح المعاينة داخل Lovable وتأكد أن جميع الصفحات تعمل بلا أخطاء وأن الروابط الداخلية سليمة، خاصة على شاشة الجوّال.

2. ٢. فعّل Lovable Cloud إذا كان مشروعك يحتاج قاعدة بيانات أو تسجيل دخول

   من الإعدادات فعّل Cloud (يعمل على Supabase تحت الغطاء) قبل النشر لضمان أن العمليات الخلفية مربوطة بمشروع إنتاجي.

3. ٣. أضف مفاتيح البيئة (Secrets)

   من Project Settings أضف مفاتيح خدمات الدفع والبريد وأي API خارجي. لا تضع المفاتيح داخل الكود مباشرة.

4. ٤. اضغط Publish

   سينشر Lovable مشروعك على نطاق فرعي *.lovable.app خلال دقيقة تقريباً. شارك الرابط للتجربة الأولى.

5. ٥. اربط نطاقك الخاص (Custom Domain)

   من Project Settings → Domains أضف نطاقك واتبع تعليمات DNS. النطاق الخاص شرط أساسي لثقة المستخدم ولمحركات البحث.

6. ٦. أرسل خريطة الموقع لـ Google Search Console

   بعد ربط النطاق، أضف الموقع في Search Console وأرسل ‎/sitemap.xml وابدأ بمراقبة الفهرسة.