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

نظرة عامة على هيكل القالب (Theme Structure)

قالب Qumra هو مجموعة من الملفات التي تحدد شكل ووظائف واجهة المتجر. يقدم هذا الدليل نظرة عامة على هيكل القالب.

هيكل المجلدات​

my-theme/
├── .qumra/
│   └── qumra.config.json        # البيانات الوصفية للقالب (id, version, name)
├── assets/
│   ├── style.css                # الأنماط العامة
│   ├── main.js                  # JavaScript الرئيسي
│   ├── alpine.config.js         # تكوين Alpine.js
│   └── alpine.ecommerce.js      # مكونات Alpine للتجارة الإلكترونية
├── layouts/
│   └── layout.njk               # الهيكل الرئيسي لـ HTML
├── locales/
│   ├── ar.json                  # الترجمة العربية
│   ├── en.json                  # الترجمة الإنجليزية
│   └── fr.json                  # الترجمة الفرنسية
├── pages/
│   ├── index.json               # الصفحة الرئيسية
│   ├── product.json             # صفحة المنتج
│   ├── collection.json          # صفحة المجموعة
│   ├── cart.json                # صفحة السلة
│   └── ...                      # صفحات أخرى
├── settings/
│   ├── settings-schema.json     # تعريف الإعدادات (groups + fields)
│   ├── settings-data.json       # قيم الإعدادات
│   └── templates-settings.json  # ترتيب عرض القوالب
├── templates/
│   ├── header.json              # widgets الرأس
│   ├── footer.json              # widgets التذييل
│   └── global.json              # widgets عامة (WhatsApp، التنقل المحمول)
├── ui/
│   ├── button.njk               # مكون الزر
│   ├── product-card.njk         # مكون بطاقة المنتج
│   └── ...                      # مكونات UI أخرى
└── widgets/
    ├── hero-slider/
    │   ├── schema.json          # إعدادات الـ widget + blocks
    │   └── widget.njk           # قالب الـ widget
    ├── product-details/
    ├── testimonials/
    └── ...                      # widgets أخرى

أدلة تفصيلية​

المجلدالوصف
assetsملفات الواجهة الأمامية (CSS, JS, الوسائط)
layoutsتخطيطات Nunjucks الأساسية
localesالترجمات ووسم {% translate %}
pagesتعريفات الصفحات وترتيب الـ widgets
settingsمخطط إعدادات القالب والقيم
templatesمجموعات widgets الرأس والتذييل والعامة
uiمكونات UI قابلة لإعادة الاستخدام
widgetsأقسام الصفحة (schema + template)

أمثلة سريعة​

تضمين الـ Assets​

<link rel="stylesheet" href="{{ 'style.css' | assets }}">
<script src="{{ 'main.js' | assets }}" defer></script>

استخدام مكونات UI​

{% ui "button.njk", { text: "اشترِ الآن", variant: "primary" } %}
{% ui "product-card.njk", product=product %}

تضمين القوالب (Templates)​

{% template "header" %}
{% content " " %}
{% template "footer" %}
{% template "global" %}

JSON صفحة مع Widgets​

{
  "layout": "layout",
  "title": "الصفحة الرئيسية",
  "widgets": [
    {
      "name": "hero-slider",
      "widget": "hero-slider",
      "settings": {
        "autoplay": true,
        "speed": 5
      },
      "blocks": [
        {
          "block": "slide",
          "name": "شريحة الترحيب",
          "settings": {
            "title": "مرحباً بكم في متجرنا",
            "buttonText": "تسوق الآن"
          }
        }
      ]
    }
  ]
}

مخطط Widget وأنواع الحقول​

كل widget لديه schema.json يحدد إعداداته والـ blocks:

{
  "name": "Hero Slider",
  "settings": {
    "autoplay": { "type": "boolean", "label": "تشغيل تلقائي", "default": true },
    "speed": { "type": "number", "label": "السرعة", "default": 5 }
  },
  "blocks": {
    "slide": {
      "name": "شريحة",
      "settings": {
        "title": { "type": "string", "label": "العنوان" },
        "image": { "type": "media", "label": "الصورة" }
      }
    }
  }
}

عرض جميع أنواع الحقول ←