انتقل إلى المحتوى الرئيسي

القوالب (Templates)

القوالب تجمع الـ widgets في مناطق قابلة لإعادة الاستخدام تظهر في كل صفحة (الرأس، التذييل، العناصر العامة).

ملفات القوالب​

templates/
├── header.json    # منطقة الرأس (شريط الإعلانات + التنقل)
├── footer.json    # منطقة التذييل (widget التذييل)
└── global.json    # widgets عامة (زر WhatsApp، التنقل المحمول)

هيكل القالب​

كل ملف قالب يحتوي على:

{
  "title": "الرأس",
  "allowAdd": true,
  "allowRemove": true,
  "allowReorder": true,
  "widgets": [
    {
      "name": "announcement-bar",
      "widget": "announcement-bar",
      "settings": { ... },
      "blocks": [ ... ]
    },
    {
      "name": "header",
      "widget": "header",
      "settings": { ... }
    }
  ]
}

الخصائص​

الخاصيةالنوعالوصف
titlestringاسم العرض في منشئ القوالب
allowAddbooleanالسماح بإضافة widgets جديدة
allowRemovebooleanالسماح بإزالة الـ widgets
allowReorderbooleanالسماح بإعادة ترتيب الـ widgets
widgetsarrayقائمة نسخ الـ widgets

القوالب الشائعة​

header.json​

تجمع widgets لرأس الموقع:

{
  "title": "الرأس",
  "allowAdd": true,
  "allowRemove": true,
  "allowReorder": true,
  "widgets": [
    {
      "name": "announcement-bar",
      "widget": "announcement-bar",
      "settings": {
        "backgroundColor": "#003033",
        "textColor": "#ffffff"
      },
      "blocks": [
        {
          "block": "announcement",
          "name": "إعلان 1",
          "settings": {
            "text": "شحن مجاني للطلبات فوق 50$",
            "link": "/collections"
          }
        }
      ]
    },
    {
      "name": "header",
      "widget": "header",
      "settings": {
        "showSearch": true,
        "showCart": true,
        "showAccount": true,
        "showWishlist": true
      }
    }
  ]
}

footer.json​

تجمع widgets لتذييل الموقع:

{
  "title": "التذييل",
  "allowAdd": true,
  "allowRemove": true,
  "allowReorder": true,
  "widgets": [
    {
      "name": "footer",
      "widget": "footer",
      "settings": {
        "showNewsletter": true,
        "showPaymentMethods": true,
        "copyrightText": "© 2024 اسم المتجر. جميع الحقوق محفوظة."
      }
    }
  ]
}

global.json​

تجمع widgets التي تظهر عالمياً (العناصر العائمة، التنقل المحمول):

{
  "title": "عام",
  "allowAdd": true,
  "allowRemove": true,
  "allowReorder": true,
  "widgets": [
    {
      "name": "whatsapp-button",
      "widget": "whatsapp-button",
      "settings": {
        "phoneNumber": "+1234567890",
        "defaultMessage": "مرحباً! لدي سؤال."
      }
    },
    {
      "name": "mobile-nav",
      "widget": "mobile-nav",
      "settings": {}
    }
  ]
}

ترتيب عرض القوالب​

حدد الترتيب في settings/templates-settings.json:

{
  "templates_order": ["header", "global", "main", "footer"]
}

إدخال main يمثل محتوى الصفحة ({% content %}).

استخدام القوالب في التخطيط​

ضمّن القوالب في layout.njk الخاص بك:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
  <head>
    {% seo %}
    {% qumra_head %}
    <link rel="stylesheet" href="{{ 'style.css' | assets }}">
  </head>
  <body>
    {% template "header" %}

    <main>
      {% content " " %}
    </main>

    {% template "footer" %}
    {% template "global" %}

    {% qumra_scripts %}
    <script src="{{ 'main.js' | assets }}"></script>
  </body>
</html>

نصائح​

أفضل الممارسات
  • جمّع الـ widgets المرتبطة منطقياً (جميع widgets الرأس في header.json)
  • استخدم global.json للعناصر العائمة مثل أزرار WhatsApp
  • اضبط allowAdd: false للقوالب التي يجب أن تحتوي على widgets ثابتة
  • رتّب القوالب في templates-settings.json للتحكم في تسلسل العرض