عقد الثيمات

الأشياء الأربعة التي يعلنها الثيم#

export const layali: ThemeDefinition = {
  tokens: {light: LAYALI_TOKENS, dark: LAYALI_TOKENS_DEEP},
  slots: {
    header: LayaliHeader,
    footer: LayaliFooter,
    homeDefault: LayaliHome,
    plpLayout: LayaliPlp,
    pdpLayout: LayaliPdp,
    productCard: LayaliProductCard,
    // announcementBar and productGrid are omitted on purpose —
    // they fall through to the default design.
  },
  pageVariants: {
    cart: 'compact',
    checkout: 'focused',
    account: 'pills',
    orderView: 'receipt',
  },
  defaultSettings: {
    headerStyle: 'overlay',
    heroOverlay: 'medium',
    footerVariant: 'full',
    cardAspect: 'portrait',
    showSaleBadges: true,
  },
};

• tokens — فرق في متغيرات CSS، للوضعين الفاتح والداكن. ليست ورقة أنماط كاملة: ما يختلف عن الافتراضي فقط.
• slots — خريطة جزئية من اسم الفتحة إلى مكوّن خادم: الرأس والتذييل والصفحة الرئيسية وترتيب صفحات الأقسام والمنتجات وبطاقة المنتج.
• blocks — خريطة جزئية من نوع قسم في منشئ الصفحات إلى مكوّن، لتُعرض أقسام التاجر بأسلوب الثيم.
• pageVariants — أنماط مسماة لصفحات السلة والدفع والحساب والطلب المشتركة.

يعيش الثيم في نصفين. النصف الفهرسي يحمل المعرّف والاسم والوصف بالعربية والإنجليزية، وهل هو مدفوع، وصورة المعاينة، ومخطط الإعدادات؛ وهو خالٍ من الاعتماديات ليستورده الخادم ولوحة التاجر معاً. والنصف الآخر يحمل الرموز والمكوّنات. وتتدهور واجهة المتجر بأمان: معرّف لا تعرفه يُعرض بالتصميم الافتراضي بدل أن تفشل الصفحة.

كيف تضيف ثيماً#

1. 1

   سجّله في الفهرس

   أضف تعريفه بمعرّفه وأسمائه بالعربية والإنجليزية وعلامة كونه مدفوعاً وحقول إعداداته.

2. 2

   أنشئ وحدة الثيم

   مجلد يصدّر ThemeDefinition، ويُسجَّل في سجل ثيمات واجهة المتجر.

3. 3

   أضف صورة معاينة

   ملف SVG واحد في مجلد الثيمات العام، باسم المعرّف.

4. 4

   اضبط القيم الافتراضية

   كل حقل إعدادات يحتاج قيمة افتراضية في defaultSettings، وإلا رأى التاجر عنصر تحكم فارغاً.

5. 5

   ترجم

   كل نص جديد في واجهة المتجر يدخل في كلا ملفي الرسائل. وابنِ العرض العربي أولاً.

القواعد التي تفشل بصمت#

كل فتحة مكوّن خادم#

نشرٌ واحد يخدم كل المتاجر، فالثيم قيمة تُحدَّد وقت التشغيل ولا يمكن إسقاط شيء منه لكل متجر. ومكوّنات الخادم لا ترسل شيئاً إلى المتصفح، فتكلفة N ثيماً هي N × 0 بايت عند المشتري. أما الفتحة التي تصبح مكوّن عميل فتضع شيفرة كل ثيم في حزمة كل مشترٍ. والتفاعل يأتي من مكوّنات العميل المحايدة الموجودة؛ والثيم الذي يحتاج فعلاً شيفرة عميل خاصة يحمّلها ديناميكياً.

المعرّف هو ما يمرّ عبر التخزين المؤقت، لا المكوّن#

المكوّنات ليست وسائط قابلة للتسلسل، فالنطاق المخزَّن مؤقتاً لا يستقبل مكوّن فتحة أبداً. بل يستقبل معرّف الثيم كنص ويبحث عن المكوّن داخل النطاق. عندها يدخل المعرّف في مفتاح التخزين، وهذا ما يجعل تبديل الثيم ينتج تحديثاً نظيفاً بدل متجر نصف مطلي.

لا تقرأ بيانات الطلب داخل فتحة#

قراءة الترويسات أو الكوكيز أو معاملات البحث داخل فتحة تُخرج تخطيط المتجر كله من قالبه المُهيَّأ مسبقاً، ولكل مشترٍ. وكل ما تحتاجه الفتحة يصلها كخاصية — واللغة من ضمنه، لهذا السبب بالضبط.

الرموز فرقٌ، والتاجر هو من يفوز#

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

تبديل الثيم لا يعيد كتابة الصفحة الرئيسية#

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

العربية أولاً، والخصائص المنطقية حصراً#

اللغة الافتراضية هي العربية. ابنِ العرض من اليمين لليسار وتحقق منه قبل العكس، واستخدم الخصائص المنطقية في كل مكان — البداية والنهاية، لا اليمين واليسار. وكل نص يراه المستخدم موجود في كلا الملفين.

الإعدادات، ونوعاها#

تُتحقَّق إعدادات الثيم على الخادم مقابل حقول الثيم المعلنة عند الكتابة، ولكل ثيم موجود في البيانات لا للثيم النشط وحده — فالتاجر يحتفظ بإعدادات ثيمات لا يستخدمها حالياً. ثم تحلّلها واجهة المتجر بحذر على أي حال: بيانات عُدِّلت يدوياً يجب ألا تكسر العرض أبداً.

{
  "v": 1,
  "store":  { "productsPerPage": 12, "gridColsDesktop": 4 },
  "themes": { "layali": { "headerStyle": "overlay", "footerVariant": "compact" } }
}