بناء ثيم

تشريح الثيم

الثيم مجلد مستقل تحت themes/{your-slug}/. التاجر يثبّته، يختار ألوان وأقسام، وهو يرندر متجره. زي البلاجن، الثيم أبدًا ما بيلمس النواة.

themes/digital/
├── theme.json                  # المانيفست: الهوية، الأقسام، الألوان، عناصر التحكم
├── preview.png                 # صورة معاينة السوق
├── resources/
│   ├── assets/                 # css/js مُجمّع (لا CDN، لا Tailwind CDN inline)
│   └── views/                  # partials الأقسام + الـlayout
└── ...

المانيفست — theme.json

كل حقل تحت حقيقي، ماخوذ من ثيم digital المشحون:

{
    "slug": "digital",
    "name":        { "en": "Digital", "ar": "ديجيتال" },
    "description": { "en": "A modern storefront theme…", "ar": "ثيم متجر عصري…" },
    "version": "1.0.0",
    "author": "اسمك",
    "type": "Themes",
    "preview": "preview.png",
    "pricing_type": "free",
    "price": 0,
    "market_category": "Themes",
    "settings": {
        "layout": {
            "label": "Digital",
            "font": "Cairo",
            "heading_font": "Cairo",
            "sections": ["hero", "categories", "flash_products", "featured_products",
                         "top_products", "features", "testimonials", "faq", "cta"],
            "colors": {
                "primary": "#6366f1", "primary-hover": "#4f46e5",
                "accent": "#06b6d4", "secondary": "#0f172a",
                "bg": "#f8fafc", "surface": "#ffffff",
                "text": "#0f172a", "text-muted": "#64748b",
                "border": "#e2e8f0", "success": "#10b981",
                "warning": "#f59e0b", "error": "#ef4444",
                "cta-bg": "#6366f1", "cta-text": "#ffffff", "whatsapp": "#25d366"
            }
        },
        "color_controls": [
            { "key": "primary", "label": "Primary" },
            { "key": "accent",  "label": "Accent" }
        ]
    }
}

• sections — القائمة المرتّبة لبلوكات الصفحة الرئيسية اللي ثيمك يرندرها. كل اسم يتطابق مع partial بـBlade.
• colors — لوحة الألوان الافتراضية الكاملة. كل لون يقدر التاجر يغيّره لازم يكون له افتراضي هنا.
• color_controls — أي ألوان يشوفها التاجر في المخصّص، مع label قابل للترجمة.
• pricing_type / price — free، أو سعر تحدّده إنت (هنا تنطبق مشاركة الأرباح للثيمات المدفوعة).

جسر الألوان --sf-*

ألوان المتجر تُعرَض كخصائص CSS مخصصة (--sf-primary, --sf-accent, --sf-bg, --sf-text, …) بيربطها جافاسكربت الثيم من لوحة ألوان التاجر المحفوظة. صمّم كل حاجة على المتغيرات دي، مش hex ثابت:

.btn-primary { background: var(--sf-primary); color: var(--sf-cta-text); }
.btn-primary:hover { background: var(--sf-primary-hover); }

ده اللي بيخلّي التاجر يعيد تلوين ثيمك مباشرةً، وبيخلّي ودجت البلاجن تتماشى مع ثيمك تلقائيًا. أي لون تحطه ثابت هيبان مكسور بمجرد ما التاجر يغيّر لوحته.

لا استعلامات في Blade

الثيمات تتبع نفس قواعد البلاجن:

• لا استعلامات قاعدة بيانات في Blade ولا بلوكات @php. كل البيانات تُجهَّز فوق (من سيرفس المتجر / الكنترولر) وتُمرَّر لأقسام $content.
• اشحن أصول مُجمّعة — لا Tailwind CDN، لا ستايل شيت أو خطوط خارجية. ما تعملش inline لأي حاجة من CDN.
• RTL أولًا. استخدم خصائص CSS المنطقية (margin-inline-start, padding-inline-end) عشان المتاجر العربية ترندر صح.

زرع المحتوى (Seeding)

الثيم لازم يبان كامل بمجرد تفعيله — مش هيكل فاضي. عند الإكمال يزرع الثيم محتواه الافتراضي (complete() ← seedDefaults). كل نص افتراضي في theme.json / أقسام الإعداد لازم يكون مفتاح ترجمة موجود في en.json وar.json معًا. التاجر اللي يثبّت ثيمك بالعربي لازم يشوف محتوى عربي مؤقت، مش مفاتيح إنجليزية.

قواعد Envato-clean

عشان تعدّي المراجعة، الثيم لازم يكون نظيف من المشاكل اللي بيرصدها تدقيق بأسلوب Envato:

• لا ألوان ثابتة حيث يوجد متغير --sf-*.
• لا استعلامات أو @php في القوالب.
• لا مخرجات غير مهرَّبة ({!! !!}) إلا عبر ds_safe_html() على محتوى موثوق.
• محتوى افتراضي كامل ومزروع في اللغتين.
• زرع افتراضيات المكرّرات/الأقسام عشان الصفحة الرئيسية ما ترندرش فاضية.
• أصول مستقلة — مفيش حاجة تتحمّل من طرف ثالث.