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

blocks + presets

استخدم blocks لتكرار عناصر فرعية داخل widget (مثل: بطاقات المميزات، الأسئلة الشائعة، CTAs)، وأضف presets لتقديم أمثلة جاهزة للمحرر.

المخطط (Schema)​

{
  "name": "****",
  "description": "****",
  "blocks": {
    "blockType1": {
      "name": "****",
      "settings": {
        "keynameA": { "type": "string", "label": "****", "default": "****" },
        "keynameB": { "type": "string", "label": "****", "default": "****" },
        "keynameC": { "type": "media", "label": "****", "default": "" },
        "keynameD": { "type": "string", "label": "****", "default": "****" }
        // هنا، يمكن أن تكون المفاتيح بأي اسم تريده مثل keyname1 أو غيرها
      }
    }
  },
  "presets": [
    {
      "category": "homepage", // هذه الخاصية تجعل هذا الـ preset يُضاف افتراضياً لمجموعة الصفحة الرئيسية، كما هو موضح في الصورة أدناه
      "name": "****",
      "blocks": [
        { "block": "blockType1", "name": "****", "settings": { "keynameA": "****", "keynameB": "****", "keynameC": "", "keynameD": "****" } },
        { "block": "blockType1", "name": "****", "settings": { "keynameA": "****", "keynameB": "****", "keynameC": "", "keynameD": "****" } },
        { "block": "blockType1", "name": "****", "settings": { "keynameA": "****", "keynameB": "****", "keynameC": "", "keynameD": "****" } },
        { "block": "blockType1", "name": "****", "settings": { "keynameA": "****", "keynameB": "****", "keynameC": "", "keynameD": "****" } }
      ]
    }
  ]
}

مثال Nunjucks​

<section>
  {# مثال متوافق مع JSON المخرجات أدناه. غيّر المفاتيح حسب تخطيطك الفعلي! #}
  <div class="grid">
    {% for block in widget.blocks %}
      <article>
        {% if block.settings.keynameC %}
          <img src="{{ block.settings.keynameC | assets }}" alt="">
        {% endif %}
        <h3>{{ block.settings.keynameA }}</h3>
        <p>{{ block.settings.keynameB }}</p>
        {% if block.settings.keynameD %}
          <span>{{ block.settings.keynameD }}</span>
        {% endif %}
      </article>
    {% endfor %}
  </div>
</section>

إذا عيّنت "category": "homepage" داخل presets، سيظهر الـ widget افتراضياً في مجموعة الصفحة الرئيسية في المنشئ.

مثال المخرجات (كـ JSON)​

{
  "blocks": [
    {
      "type": "blockType1",
      "settings": {
        "keynameA": "سريع",
        "keynameB": "شحن سريع",
        "keynameC": "",
        "keynameD": ""
      }
    },
    {
      "type": "blockType1",
      "settings": {
        "keynameA": "دعم",
        "keynameB": "نحن هنا",
        "keynameC": "",
        "keynameD": ""
      }
    },
    {
      "type": "blockType1",
      "settings": {
        "keynameA": "جودة",
        "keynameB": "تقييم عالي",
        "keynameC": "",
        "keynameD": ""
      }
    }
  ]
}

blocks preset in builder

هذا كيف تظهر الـ presets في المنشئ.