المرحلة 02 · البيانات والواجهةدرس 10 من 2110 دقيقة قراءةآخر تحديث: 14 سبتمبر 2026

Lesson 10 / 21

Frontendبالتفصيل.

Q: ليه تعديلات CSS أو JS مش بتظهر في Magento 2؟

لأن الملف القديم لسه منشور في pub/static. الحل إنك تمسح pub/static/frontend وvar/view_preprocessed، وفي production تشغّل bin/magento setup:static-content:deploy تاني، لأن الـ static content هناك مش بيتولّد تلقائيًا.

Q: إزاي أضيف JavaScript لصفحة معيّنة في Magento 2؟

عرّف الـ script في requirejs-config.js وإديله alias عن طريق map، زي customWidget اللي بيشاور على Vendor_Module/js/custom-widget. بعدها ناديه من الـ template بـ text/x-magento-init أو data-mage-init وابعتله الـ config اللي محتاجه.

Q: إزاي أعمل custom theme في Magento 2؟

بتعمل مجلد الـ theme في app/design/frontend/Vendor/theme فيه theme.xml وregistration.php، وتحدد الـ parent زي Magento/blank عشان تورّث كل ملفاته وتعدّل اللي عايزه بس. الـ CSS والـ JS والصور بتتحط في web/، وتعديلات كل module بتتحط في مجلد باسمه زي Magento_Catalog/.

الجزء اللي بيشوفه العميل — وأكتر جزء بيلخبط المطوّرين لأنه نظام طبقات متكامل. هنفهم كل حاجة: الـ themes، الـ layout XML، الـ blocks، الـ templates، الـ static content، والـ JS. وبعدها أسئلة إنترفيو بإجابات مفصّلة.

● شامل Layout · Blocks RequireJS · Knockout + أسئلة

الـ Frontend في Magento 2 نظام طبقات: الـ theme بيحدّد الشكل، والـ Layout XML بيحدّد مكان كل block في الصفحة حسب الـ handle، والـ Block (PHP) بيجهّز البيانات، والـ phtml template بيعرضها. الملفات الثابتة بتتنشر بـ static-content:deploy، والـ JavaScript بيتدار بـ RequireJS، والـ checkout والـ minicart معتمدين على Knockout.

// الفكرة الكبيرة قبل ما تبدأ الـ frontend في Magento مش HTML وبس. هو نظام طبقات: الـ theme بيحدّد الشكل العام، الـ layout (XML) بيحدّد بنية الصفحة، الـ block (PHP) بيجهّز البيانات، والـ template (phtml) بيعرضها. لما تفهم الطبقات دي وإزاي بتتكلم مع بعض، الباقي بيبقى سهل.

الصورة الكاملة

إزاي بتتكوّن الصفحة من الطبقات المختلفة.

Layout XML

→

Block (PHP)

→

Template (phtml)

→

HTML

إزاي بتتكوّن الصفحة

Layout XML — بيحدّد "الصفحة فيها إيه" — أنهي blocks تظهر وفين.
Block (PHP) — بيجهّز البيانات ("منطق العرض") للـ template.
Template (phtml) — بيعرض البيانات كـ HTML فعلي.
Theme — بيغلّف كل ده ويحدّد الشكل العام (CSS، الخطوط، الألوان).

تشبيه فكّر في بناء بيت: الـ Layout هو المخطط الهندسي (فين كل غرفة). الـ Block هو المقاول اللي بيجهّز المواد. الـ Template هو التشطيب اللي بتشوفه. الـ Theme هو الستايل العام (كلاسيك، مودرن).

الفصل ده مقصود: الـ block (المنطق) منفصل عن الـ template (العرض). ده تطبيق لمبدأ فصل المسؤوليات — تقدر تغيّر الشكل من غير ما تلمس المنطق.

• • •

الـ Themes

الطبقة اللي بتحدّد شكل المتجر بالكامل.

إيه هو

الـ Theme هو مجموعة الملفات اللي بتحدّد شكل المتجر: الـ templates، الـ styles، الـ layouts، والصور. Magento بيجي بـ theme اسمه Luma (للعرض) وBlank (أساس للبناء عليه).

الـ Theme Inheritance

مفهوم مهم: الـ theme بتاعك بيورّث من theme تاني (غالبًا Blank). يعني بتاخد كل ملفاته، وتعدّل اللي عايزه بس. مش بتبني من الصفر.

app/design/frontend/Vendor/theme/theme.xmlxml

<theme>
  <title>My Custom Theme</title>
  <!-- inherit from Blank -->
  <parent>Magento/blank</parent>
</theme>

بنية الـ theme

theme structuretree

theme.xml              # تعريف الـ theme
registration.php       # التسجيل
web/                   # css, js, images, fonts
etc/                   # view.xml (إعدادات)
Magento_Theme/         # تعديلات على module معيّن
├─ layout/
└─ templates/

لاحظ: داخل الـ theme، بتنظّم الملفات حسب اسم الـ module (زي Magento_Catalog). يعني لو عايز تعدّل template من الكتالوج، بتحطه في theme/Magento_Catalog/templates/.

• • •

الـ Layout XML

قلب الـ frontend — بيحدّد بنية كل صفحة.

إيه هو

الـ Layout XML ملفات بتحدّد بنية الصفحة: أنهي blocks تظهر، فين، وبأي ترتيب. ده اللي بيربط كل حاجة ببعض.

المفاهيم الأساسية

Container — حاوية بتجمّع blocks (زي header, footer, main).
Block — عنصر بيعرض محتوى (مربوط بـ class و template).
Handle — اسم بيحدّد أنهي layout ينطبق على أنهي صفحة.
Reference — بيعدّل block أو container موجود.

view/frontend/layout/catalog_product_view.xmlxml

<page>
  <body>
    <!-- add a block into a container -->
    <referenceContainer name="content">
      <block class="Vendor\Module\Block\Custom"
        name="custom.block"
        template="Vendor_Module::custom.phtml"/>
    </referenceContainer>
  </body>
</page>

الـ Handles

اسم الملف = الـ handle. مثلًا catalog_product_view.xml بينطبق على صفحة المنتج بس. وdefault.xml بينطبق على كل الصفحات. ده بيحدّد نطاق التعديل.

تشبيه الـ Layout XML زي مخطط ترتيب الأثاث في الغرفة. مش بيصنع الأثاث (ده الـ block/template) — بيقول "الكنبة هنا، الترابيزة هناك". والـ handle بيقول المخطط ده لأنهي غرفة.

خطأ شائع: تعديل layout الـ core مباشرة. الصح: تعمل ملف بنفس الاسم في الـ theme أو الموديول بتاعك، وMagento بيدمج تعديلاتك فوق الأصل. ده الـ layout merging.

• • •

الـ Blocks

منطق العرض — بيجهّز البيانات للـ template.

إيه هو

الـ Block هو class PHP بيمثّل منطق العرض. بيجهّز البيانات اللي الـ template محتاجها ويقدّمها له عن طريق methods.

ليه منفصل عن الـ template

عشان تفصل المنطق عن العرض. الـ block بيعمل الحسابات وجلب البيانات (PHP)، والـ template بيعرض بس (HTML). ده بيخلّي الـ template نظيف وسهل التعديل.

Block/Custom.phpphp

namespace Vendor\Module\Block;

use Magento\Framework\View\Element\Template;

class Custom extends Template
{
    // prepares data for the template
    public function getGreeting(): string
    {
        return 'Welcome to our store!';
    }
}

أنواع الـ blocks

Template Block — بيورّث من Template، مربوط بـ phtml (الأشهر).
Structural Block — بيرتّب blocks تانية (زي الـ containers).

الـ block بيورّث من Template، فبياخد methods جاهزة زي getData() وescapeHtml(). وبيحقن dependencies في الـ constructor زي أي class (الـ DI).

• • •

الـ Templates (phtml)

الطبقة اللي بتعرض الـ HTML فعليًا.

إيه هو

الـ Template ملف .phtml (PHP + HTML) بيعرض المحتوى. بياخد البيانات من الـ block (عن طريق $block) ويحطّها في HTML.

templates/custom.phtmlphp

<?php /** @var $block \Vendor\Module\Block\Custom */ ?>
<div class="custom-greeting">
    <?= $block->escapeHtml(
        $block->getGreeting()
    ) ?>
</div>

قواعد مهمة

الـ $block متاح تلقائيًا — بيمثّل الـ block المربوط.
دايمًا استخدم escapeHtml() للبيانات (أمان ضد XSS).
خلّي الـ PHP في الـ template أقل ما يمكن — المنطق مكانه في الـ block.

قاعدة ذهبية: الـ template يعرض مش يفكّر. لو لقيت نفسك بتكتب منطق معقّد في الـ phtml، انقله للـ block. ده اللي المُقابِل بيدوّر عليه.

• • •

Static Content & LESS

الـ CSS والصور والـ JS — وإزاي بتتجهّز.

إيه هو

الملفات الثابتة (CSS، JS، صور، خطوط) مبتتقدّمش مباشرة من مكانها في الكود. Magento بيعالجها وينشرها (deploy) في مجلّد pub/static/ عشان تتقدّم بكفاءة.

الـ LESS

Magento بيستخدم LESS (نسخة متطوّرة من CSS فيها متغيّرات ودوال). بتكتب LESS، وMagento بيحوّله لـ CSS عادي وقت الـ deployment.

deploy commandsbash

# نشر الملفات الثابتة
bin/magento setup:static-content:deploy

# للغة معيّنة
bin/magento setup:static-content:deploy en_US ar_SA

# في developer mode، بيتولّد تلقائيًا
# لكن لازم تمسح pub/static عند التغيير:
rm -rf pub/static/frontend/*

مشكلة شائعة جدًا: تعدّل CSS/JS ومش بيظهر التغيير. السبب إن الملف القديم لسه في pub/static. الحل: امسحه واعمل deploy تاني (أو في developer mode، امسح pub/static وvar/view_preprocessed).

ربط بمكتبتك: ده نفس السبب اللي بيخلّي "الكود اشتغل local مش production" — في production الـ static content لازم يتعمله deploy، مش بيتولّد تلقائيًا.

• • •

JavaScript & RequireJS

إزاي Magento بيدير الـ JS بشكل منظّم.

إيه هو

الـ RequireJS مكتبة بتدير الـ JavaScript كـ modules بنظام تحميل حسب الحاجة (lazy loading). بدل ما تحمّل كل الـ JS مرة واحدة، بيحمّل اللي محتاجه بس.

ليه Magento بيستخدمه

عشان الأداء والتنظيم. الموقع فيه JS كتير — RequireJS بيحمّل كل جزء وقت الحاجة بس، وبيدير الاعتماديات بين الـ scripts.

requirejs-config.jsjavascript

var config = {
    // give your script a short name (alias)
    map: {
        '*': {
            'customWidget':
                'Vendor_Module/js/custom-widget'
        }
    }
};

using it in a templatehtml

<script type="text/x-magento-init">
{
    "*": {
        "customWidget": { "label": "Hello" }
    }
}
</script>

تشبيه الـ RequireJS زي خدمة توصيل عند الطلب. بدل ما تجيب كل حاجة من السوبرماركت مرة واحدة (بطيء وتقيل)، بتطلب اللي محتاجه وقت ما تحتاجه بس.

• • •

Knockout & UI Components

الجزء الديناميكي — خصوصًا في الـ checkout والـ cart.

إيه هو

الـ Knockout.js مكتبة JS بتربط البيانات بالـ UI تلقائيًا (data binding). لما البيانات تتغيّر، الـ UI بيتحدّث لوحده من غير reload. Magento بيستخدمه للأجزاء الديناميكية.

فين بيتستخدم

بشكل أساسي في الـ checkout والـ minicart — الأجزاء اللي بتتحدّث ديناميكيًا (السلة، الإجماليات، خطوات الدفع). ده اللي بيخلّي الـ checkout يشتغل زي SPA.

knockout binding (html template)html

<!-- UI updates automatically when data changes -->
<span data-bind="text: greeting"></span>

<button data-bind="click: updateGreeting">
    Click
</button>

الـ UI Components

طبقة أعلى من Knockout. مكوّنات جاهزة ومعقّدة (grids, forms) بتتعرّف في XML وبتشتغل بالـ JS. الـ checkout مبني عليها.

ربط بمكتبتك: ده بالظبط اللي شرحناه في artifact الـ checkout — Knockout + UI Components هما اللي بيخلّوا الـ checkout SPA. لو المُقابِل ربط الاتنين، اربطهم أنت كمان.

خلّي بالك من الفرق: معظم الصفحات (منتج، category) بتستخدم PHP templates عادية. الـ checkout/cart بس اللي بيستخدموا Knockout بكثافة. متخلطش بينهم.

• • •

أسئلة الإنترفيو

الأسئلة المتكررة عن الـ frontend بإجابات مفصّلة.

Q1إيه الفرق بين الـ Block والـ Template؟

الإجابة: الـ Block class PHP بيمثّل منطق العرض — بيجهّز البيانات. الـ Template ملف phtml بيعرض البيانات كـ HTML. الفصل بينهم بيطبّق مبدأ فصل المنطق عن العرض — تقدر تغيّر الشكل من غير ما تلمس المنطق.

Q2إزاي تعدّل template من الـ core بدون ما تلمسه؟

الإجابة: عن طريق theme override. بتعمل نسخة من الـ template في الـ theme بتاعك تحت نفس المسار (theme/Magento_Catalog/templates/...)، وMagento بيستخدم بتاعك بدل الأصلي. نفس المبدأ للـ layout عن طريق الـ merging.

Q3عدّلت CSS ومش ظاهر. ليه؟

الإجابة: الملف القديم لسه منشور في pub/static. الحل: امسح pub/static/frontend وvar/view_preprocessed، واعمل static-content:deploy تاني (في production)، أو امسح الـ cache في developer mode. ده من أشهر مشاكل الـ frontend.

Q4إيه هو الـ Layout Handle؟

الإجابة: الـ handle هو مُعرّف بيحدّد أنهي layout ينطبق على أنهي صفحة. اسم ملف الـ layout = الـ handle. مثلًا catalog_product_view بينطبق على صفحة المنتج، وdefault على كل الصفحات. ده بيحدّد نطاق التعديل.

Q5ليه الـ checkout مختلف عن باقي الصفحات؟

الإجابة: باقي الصفحات بتستخدم PHP templates عادية (server-side). الـ checkout مبني على Knockout.js + UI Components كـ SPA — بيتحدّث ديناميكيًا بدون reload، وبيتواصل مع الـ backend عن طريق REST APIs. عشان كده تخصيصه مختلف تمامًا.

Q6إيه فايدة الـ RequireJS؟

الإجابة: بيدير الـ JavaScript كـ modules بتحميل حسب الحاجة (lazy loading)، وبيدير الاعتماديات بين الـ scripts. ده بيحسّن الأداء (مش بيحمّل كل الـ JS مرة واحدة) وبينظّم الكود.

Q7إزاي تضيف JavaScript لصفحة معيّنة؟

الإجابة: تعرّف الـ script في requirejs-config.js (تديله alias)، وبعدين تناديه في الـ template عن طريق text/x-magento-init أو data-mage-init. ده بيربط الـ JS بالعنصر بطريقة Magento المنظّمة.

اربط بالطبقات: لما تشرح أي حاجة، وضّح مكانها في السلسلة (layout → block → template).
اذكر الأمان: escapeHtml في الـ templates — بيبيّن إنك واعي بالـ security.
فرّق checkout عن الباقي: اعرف إن الـ checkout استثناء (Knockout) مش القاعدة.
الـ override بدل التعديل المباشر: دايمًا اذكر إنك متلمسش الـ core.

الـ Frontend بالتفصيل ✓

دلوقتي فاهم الـ frontend كنظام طبقات متكامل: theme، layout، block، template، static content، والـ JS (RequireJS/Knockout). وعندك أسئلة الإنترفيو الأساسية بإجاباتها.

الخلاصة اللي تربط كله: Layout بيحدّد البنية، Block بيجهّز البيانات، Template بيعرضها، Theme بيغلّف الشكل. والـ checkout استثناء بيستخدم Knockout. بمجرد ما تستوعب الطبقات دي، أي تخصيص frontend بيبقى واضح.

// magento 2 · frontend deep dive · layout · blocks · js

خلّصت الدرس؟علّمه عشان تتابع تقدّمك في الكورس.

كاتب الدرس

Abdulrahman Masoud

عندك سؤال على الدرس أو محتاج مساعدة في مشروع Magento؟ كلّمني.

وظّفني

أسئلة شائعة

ما الفرق بين Block و Template في Magento 2؟

الـ Block هو class PHP بيمثّل منطق العرض، بيجهّز البيانات ويقدّمها عن طريق methods. الـ Template ملف .phtml بياخد البيانات من $block ويعرضها كـ HTML. الفصل ده بيخلّيك تغيّر الشكل من غير ما تلمس المنطق، والقاعدة إن الـ template يعرض مش يفكّر.

إزاي أعدّل template من الـ core في Magento 2 من غير ما ألمسه؟

عن طريق theme override: بتعمل نسخة من الـ template في الـ theme بتاعك تحت نفس المسار بتاع الـ module، زي theme/Magento_Catalog/templates/، وMagento بيستخدم نسختك بدل الأصلية. وللـ layout بتعمل ملف بنفس الاسم في الـ theme أو الموديول بتاعك، وMagento بيدمج تعديلاتك فوق الأصل (layout merging).

يعني إيه Layout Handle في Magento 2؟

الـ handle مُعرّف بيحدّد أنهي layout ينطبق على أنهي صفحة، واسم ملف الـ layout هو نفسه الـ handle. مثلًا catalog_product_view.xml بينطبق على صفحة المنتج بس، وdefault.xml بينطبق على كل الصفحات.

ليه تعديلات CSS أو JS مش بتظهر في Magento 2؟

لأن الملف القديم لسه منشور في pub/static. الحل إنك تمسح pub/static/frontend وvar/view_preprocessed، وفي production تشغّل bin/magento setup:static-content:deploy تاني، لأن الـ static content هناك مش بيتولّد تلقائيًا.

إزاي أضيف JavaScript لصفحة معيّنة في Magento 2؟

عرّف الـ script في requirejs-config.js وإديله alias عن طريق map، زي customWidget اللي بيشاور على Vendor_Module/js/custom-widget. بعدها ناديه من الـ template بـ text/x-magento-init أو data-mage-init وابعتله الـ config اللي محتاجه.

ليه الـ checkout في Magento 2 مختلف عن باقي الصفحات؟

معظم الصفحات زي المنتج والـ category بتستخدم PHP templates عادية بتترندر على السيرفر. الـ checkout مبني على Knockout.js وUI Components وبيشتغل زي SPA، بيتحدّث من غير reload وبيكلّم الـ backend عن طريق REST APIs، عشان كده تخصيصه مختلف تمامًا.

إزاي أعمل custom theme في Magento 2؟

بتعمل مجلد الـ theme في app/design/frontend/Vendor/theme فيه theme.xml وregistration.php، وتحدد الـ parent زي Magento/blank عشان تورّث كل ملفاته وتعدّل اللي عايزه بس. الـ CSS والـ JS والصور بتتحط في web/، وتعديلات كل module بتتحط في مجلد باسمه زي Magento_Catalog/.

الصورة الكاملة

الـ Themes

الـ Layout XML

الـ Blocks

الـ Templates (phtml)

Static Content & LESS

JavaScript & RequireJS

Knockout & UI Components

أسئلة الإنترفيو

الـ Frontend بالتفصيل ✓

أسئلة شائعة

دروس مرتبطة