كيفية إنشاء مقطع مخصص في موقع أودو

محرر السحب والإفلات في موقع أودو مبني على مكوّنات قابلة لإعادة الاستخدام تُسمى المقاطع. كل مكوّن تراه في لوحة المحرر — من البانرات الرئيسية إلى عروض الشهادات — هو مقطع مسجّل عبر عرض XML يرث من قائمة المقاطع الرئيسية. إنشاء مقطعك الخاص يتبع النمط ذاته: كتابة قالب HTML وتسجيله في لوحة المحرر وإضافة خيارات CSS وJavaScript اختياريًا. يغطي هذا الدليل سير العمل الكامل لأودو 18 و19.

ما هو مقطع أودو؟

المقطع (يُسمى أيضًا مكوّن البناء) هو قسم HTML مستقل يمكن لمحرري الموقع سحبه من اللوحة ووضعه في أي صفحة. تتكوّن المقاطع من ثلاثة أجزاء: قالب HTML (المكوّن المرئي)، وعرض تسجيل المقطع (الذي يجعله يظهر في لوحة المحرر)، وخيارات المقطع الاختيارية (فئات JavaScript تضيف عناصر تحكم في المحرر مثل منتقيات الألوان أو تبديلات التخطيط).

هيكل الوحدة

يجب أن تكون المقاطع المخصصة داخل وحدة أودو. إذا كنت تضيف مقطعًا إلى وحدة موقع موجودة، تخطَّ خطوة الهيكل. بالنسبة لوحدة جديدة، التخطيط الأدنى للمجلد هو:

my_website_snippets/
├── __init__.py
├── __manifest__.py
├── static/
│   └── src/
│       ├── js/
│       │   └── options.js          # snippet options (optional)
│       └── scss/
│           └── s_my_snippet.scss   # snippet styles (optional)
└── views/
    └── snippets/
        ├── s_my_snippet.xml        # HTML template
        └── snippets.xml            # editor panel registration

الخطوة 1 — كتابة قالب HTML

<?xml version="1.0" encoding="utf-8"?>
<odoo>
  <template id="s_my_cta_banner" name="My CTA Banner">
    <section class="s_my_cta_banner" data-snippet="s_my_cta_banner"
             data-name="My CTA Banner">
      <div class="container text-center py-5">
        <h2 class="s_my_cta_banner_title">Your headline goes here</h2>
        <p class="lead s_my_cta_banner_subtitle">
          Supporting text for your call to action.
        </p>
        <a href="#" class="btn btn-primary btn-lg">Get Started</a>
      </div>
    </section>
  </template>
</odoo>

نقاط رئيسية: يجب أن يكون العنصر الجذري ``. يجب أن تتطابق سمة `data-snippet` مع معرّف القالب `id`. تحدد سمة `data-name` تلميح الأداة المعروض في المحرر عند تمرير المستخدم على المكوّن المُسقط.

الخطوة 2 — تسجيل المقطع في لوحة المحرر

تتحكم في لوحة المحرر العرض `website.snippets`. تمدّده باستخدام XPath لحقن صورة مصغّرة لمقطعك في إحدى فئات اللوحة: المحتوى أو الهيكل أو المحتوى الداخلي أو الميزات.

<?xml version="1.0" encoding="utf-8"?>
<odoo>
  <!-- Register snippet in the "Content" panel category -->
  <template id="snippets" inherit_id="website.snippets">
    <xpath expr="//div[@id='snippet_content']" position="before">
      <t t-snippet="my_website_snippets.s_my_cta_banner"
         t-thumbnail="/my_website_snippets/static/src/img/thumb_my_cta_banner.png"/>
    </xpath>
  </template>
</odoo>

الخطوة 3 — تعريف الملفات في __manifest__.py

{
    'name': 'My Website Snippets',
    'version': '1.0',
    'category': 'Website',
    'depends': ['website'],
    'data': [
        'views/snippets/s_my_snippet.xml',
        'views/snippets/snippets.xml',
    ],
    'assets': {
        'web.assets_frontend': [
            'my_website_snippets/static/src/scss/s_my_snippet.scss',
            'my_website_snippets/static/src/js/options.js',
        ],
    },
    'installable': True,
}

الخطوة 4 — إضافة خيارات المقطع (اختياري)

خيارات المقطع هي فئات JavaScript تمتد من `SnippetOptionWidget` (أو إحدى الفئات الفرعية). تضيف عناصر تحكم لوحة المحرر — منتقيات الألوان ومبدّلات التخطيط وحقول النص — التي تظهر عندما ينقر المستخدم على مقطعك في المحرر. ترتبط الخيارات بمحدد CSS الجذري للمقطع.

/** @odoo-module **/
import options from "@web_editor/js/editor/snippets.options";

options.registry.MyCTABanner = options.Class.extend({
    // Called when the user changes an option value
    setBannerStyle: function (previewMode, value) {
        this.$target.toggleClass("s_my_cta_banner_dark", value === "dark");
        this.$target.toggleClass("s_my_cta_banner_light", value === "light");
    },
});

يجب أن يتطابق مفتاح السجل (`MyCTABanner`) مع سمة `data-js` التي تضيفها إلى عنصر التسجيل ``، وإلا يستخدم أودو اسم فئة CSS للعنصر الجذري للمقطع كمفتاح احتياطي.

الخطوة 5 — تثبيت الوحدة والاختبار

1. أعد تشغيل خادم أودو لاستيعاب الوحدة الجديدة: `./odoo-bin -c odoo.conf -u my_website_snippets`.
2. افتح تطبيق الموقع وانقر على **تعديل** في أي صفحة.
3. في لوحة مكوّنات البناء، حدد مقطعك ضمن الفئة التي سجلته فيها (مثلًا المحتوى).
4. اسحب المقطع إلى الصفحة وتأكد من أنه يُعرض بشكل صحيح.
5. انقر على المكوّن المُسقط لفتح لوحة المحرر وتحقق من ظهور أي خيارات مخصصة.
6. احفظ الصفحة وأعد تحميلها في الوضع العادي (غير التعديل) للتأكد من عرض المقطع بدون نصوص المحرر.

استكشاف الأخطاء — المشكلات الشائعة

ملاحظات الإصدار

iWesabe Editorial Team

رؤى عملية حول Odoo ERP وامتثال ZATCA والعمليات الرقمية للشركات السعودية — بقلم فرق الاستشارات والمالية والهندسة في iWesabe.

عن iWesabe