الأقسام والعناصر والإعدادات

مخططات الأقسام

{
  "primitive": "banner",
  "name": { "ar": "واجهة", "en": "Hero" },
  "templates": ["home", "page", "collection"],
  "blocks": ["heading", "button"],
  "maxBlocks": 4,
  "settings": [
    { "id": "image", "type": "image", "label": { "ar": "الصورة", "en": "Image" } },
    { "id": "overlay", "type": "range", "label": { "ar": "التعتيم", "en": "Overlay" }, "default": 30, "min": 0, "max": 90, "step": 5, "unit": "%" }
  ]
}

يحدد blocks أنواع العناصر التي يقبلها القسم (@theme يقبل أي عنصر من الثيم). تُطبَّق minBlocks وmaxBlocks وlimit (عدد مرات ظهور القسم في القالب) عند تعديل التاجر.

مخططات العناصر

للعناصر الشكل نفسه. العناصر الحاوية (group وaccordion وaccordion-item) تحدد allowedChildren ويمكن أن تتداخل حتى أربعة مستويات. اضبط repeatable: false للعنصر الذي لا يظهر إلا مرة واحدة بين إخوته.

أدوات العرض

كل قسم وعنصر يسمّي أداة عرض. يتحقق فحص الثيم من وجود الأداة، ومن وجود الإعدادات التي تقرؤها بالأنواع الصحيحة، ومن صحة موضعها.

أدوات التجارة تعرض نموذج المنتج والتصنيف والسلة الخاصة بالمنصة، فيعمل الشراء بالطريقة نفسها في كل الثيمات.

أنواع الإعدادات

text وtextarea وrichtext وnumber وrange وselect وtoggle وcolor وimage وurl وproduct وcollection وfont.

• اضبط localized: true على الإعدادات النصية لحفظ قيمة عربية وأخرى إنجليزية.
• يقبل font الخطوط التي تقدمها الواجهة ضمن سياسة الأمان فقط.
• يقبل url المسارات داخل المتجر و# للروابط الداخلية وروابط https وmailto: وtel:، ويقبل image ملفات الحزمة (asset://assets/…) ووسائط المتجر.
• تُتحقق القيم عند حفظ التاجر، ومرة أخرى قبل وصولها إلى CSS.

مصادر البيانات الديناميكية

الإعدادات المعلَّمة بـdynamic: true يمكن ربطها ببيانات المتجر بدل قيمة ثابتة، مثل { "$source": "product.title" }. يتحقق فحص الثيم من وجود المصدر وتوافق نوعه وتوفره في القالب.

القوالب والعُقد التي يضعها الثيم

القالب شجرة أقسام بداخلها عناصر متداخلة. أعطِ كل عقدة معرّف id ثابتاً. علّم العقدة بـstatic: true لمنع التاجر من حذفها أو نقلها، أو بـlocked: true لتبقى إعداداتها للقراءة فقط وتبقى ظاهرة. يفرض Store Studio ونقطة الحفظ ومحرك العرض هذه العلامات، ولا يستطيع التاجر إضافتها إلى عُقده.

نقاط التنسيق

توفر الواجهة المعروضة نقاط تنسيق ثابتة لـCSS:

• الأصناف saas-section--<primitive> وsaas-s-<section-type> وsaas-block--<primitive>؛
• سمات data-s-<setting> لقيم الاختيار والتبديل؛
• الخصائص المخصصة --t-<setting> للقيم المفردة بعد التحقق منها.

عناصر التطبيقات

يمكن للتطبيقات من نوع امتداد ثيم إضافة عناصر إلى الثيمات. في مخطط القسم أو العنصر الحاوي، أضف @app (أي عنصر من تطبيق مثبّت) أو نوعاً محدداً app:<app-slug>/<type> إلى blocks أو allowedChildren ليتمكن التاجر من وضعها هناك.

يعرّف مطوّر التطبيق العناصر على إصدار مسودة من تطبيقه في بوابة المطورين (عناصر واجهة المتجر). لكل عنصر type بأحرف صغيرة وشرطات، وname بالعربية والإنجليزية، وأداة عرض واحدة من heading وtext وbutton وimage وspacer وdivider وannouncement وnewsletter-form وsocial-links وpayment-icons وtestimonial، ومخطط settings. تُراجع العناصر مع إصدار التطبيق ولا تتغير بعد إرساله، ولا يُشغَّل أي كود من التطبيق في واجهة المتجر.

إذا أزال التاجر التطبيق يبقى العنصر في قالبه لكن لا يراه العملاء، ويعود إذا أُعيد تثبيت التطبيق.