> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# بلوك الترويسة

> بلوك Header في Aftersell Cart: العنوان وعدد العناصر والشعار وزر الإغلاق المثبَّت أعلى الدرج.

> بلوك **Header** هو المنطقة العلوية المثبَّتة من درج السلة، ويمنح الدرج عنوانًا واضحًا وطريقة بديهية لإغلاقه. تتحكم في تخطيطه بإسناد **Title** و**Logo** و**Close button** إلى القسمين الأيسر والأيمن. ولأن الترويسة مثبَّتة في الأعلى، تظل مرئية بينما تتمرّر بقية السلة.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-header-block-title-item-count.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=e60cc6dbfe8728eb818d20cf5aa8ae5c" alt="بلوك الترويسة مع عنوان السلة وعدد العناصر وزر الإغلاق أعلى الدرج" width="689" height="91" data-path="images/aftersell/cart-header-block-title-item-count.png" />
</Frame>

<div id="behavior">
  ## السلوك
</div>

* الترويسة مثبَّتة أعلى الدرج ولا تتمرّر مع جسم السلة.
* زر الإغلاق متاح دائمًا ويغلق الدرج.

<div id="settings">
  ## الإعدادات
</div>

| الإعداد   | ما الذي يتحكم فيه                                                                                                                                                                 | الافتراضي                    |
| --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
| **Left**  | العناصر التي تُعرض في القسم الأيسر (`Title` و`Logo` و`Close button`) وبأي ترتيب.                                                                                                  | `Title`                      |
| **Right** | العناصر التي تُعرض في القسم الأيمن (`Title` و`Logo` و`Close button`) وبأي ترتيب.                                                                                                  | `Close button`               |
| **Title** | عنوان منسّق للسلة. يدعم الرمزين `{{cart_item_count}}` و`{{total_price}}`.                                                                                                         | `Cart • {{cart_item_count}}` |
| **Image** | صورة تُمرَّر إلى القالب المخصص باسم `props.logoUrl`. يظهر هذا الحقل فقط عندما يكون قالب مخصص نشطًا، والترويسة المدمجة لا تعرضها أبدًا. الصيغ المدعومة: WebP وJPEG وPNG وGIF وSVG. | لا شيء                       |

العنوان قابل للترجمة. إذا كان عنوانك يؤول إلى قيمة فارغة (مثلًا ترجمة غير مضبوطة)، تعود السلة إلى عرض **Cart** بحيث لا تكون الترويسة فارغة أبدًا.

تظهر العناصر بالترتيب الذي تحددها به، من اليسار إلى اليمين، ويمكن إسناد كل عنصر إلى قسم واحد فقط في كل مرة.

<div id="placement-and-limits">
  ## الموضع والحدود
</div>

* **المنطقة:** الأعلى فقط.
* **الحد الأقصى:** 1 لكل حالة سلة.
* **الحالة:** السلة الممتلئة والفارغة (لكل حالة نسختها الخاصة من الترويسة).
* يُضاف إلى السلال الجديدة افتراضيًا في كلتا الحالتين. غير مقفل، لذا يمكنك إزالته أو إخفاؤه بمفتاح العين.

<div id="custom-template">
  ## القالب المخصص
</div>

يدعم [قالبًا مخصصًا](/ar/aftersell/cart/custom-templates) من تبويب Code الخاص به، والذي يستبدل الترميز المدمج لهذا البلوك بكود JSX الخاص بك. هذه هي الخصائص (props) التي يستقبلها.

<Note>
  `logoUrl` هي الخاصية الوحيدة التي لا يوجد لها مكافئ مدمج: صورة الترويسة المرفوعة **لا تُعرض أبدًا إلا عبر قالب مخصص**. إذا قام تاجر بتعيين شعار ولم يظهر، فهذا هو السبب.
</Note>

| الخاصية        | النوع                                     | الغرض منها                                                                                             |
| -------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| `title`        | `string`                                  | عنوان الترويسة كـ HTML مُعقَّم، مع حل الرمزين `{{cart_item_count}}` و`{{total_price}}` مسبقًا.         |
| `logoUrl`      | `string \| null`                          | صورة الترويسة المرفوعة. تكون `null` عندما لا يعيّن التاجر صورة.                                        |
| `leftSection`  | `('title' \| 'logo' \| 'close_button')[]` | العناصر المحددة للقسم الأيسر، بترتيب العرض.                                                            |
| `rightSection` | `('title' \| 'logo' \| 'close_button')[]` | العناصر المحددة للقسم الأيمن، بترتيب العرض.                                                            |
| `itemCount`    | `number`                                  | عدد العناصر في السلة، كما يراها المتسوق.                                                               |
| `onClose`      | `() => void`                              | يغلق الدرج. اربطه بزر الإغلاق لديك.                                                                    |
| `isLoading`    | `boolean`                                 | تكون دائمًا `false` هنا: يعرض البلوك هيكله المدمج أثناء التحميل ولا يستدعي قالبك إلا بعد جاهزية السلة. |

<Warning>
  إذا لم تربط `onClose` بأي عنصر، فسيظل بإمكان المتسوقين إغلاق الدرج بالنقر على الطبقة الخلفية أو الضغط على Escape، لكن ترويستك لن تحتوي على زر إغلاق. أضِف واحدًا دائمًا.
</Warning>

<div id="design">
  ## التصميم
</div>

نسّق هذا البلوك من قسم **Design** الخاص به في لوحة الإعدادات. هذه تجاوزات على مستوى البلوك تُطبَّق فوق تصميمك العام وتعود إليه عند تركها فارغة.

<div id="text">
  ### Text
</div>

يتيح لك قسم **Text** في Design التحكم في طباعة عنوان السلة. يُضبط الخط العريض ولون النص من محرر النص المنسّق أعلاه (في علامة تبويب Settings)، وليس هنا.

| الإعداد            | ما الذي يتحكم فيه   | القيمة الافتراضية |
| ------------------ | ------------------- | ----------------- |
| **Font**           | عائلة خط العنوان.   | يرث من القالب     |
| **Size**           | حجم الخط.           | `18px`            |
| **Line height**    | مضاعف ارتفاع السطر. | `1.3`             |
| **Letter spacing** | التباعد بين الأحرف. | Normal            |

ما هي إعدادات التصميم؟ اعرف المزيد هنا: [إعدادات التصميم](/ar/aftersell/cart/design-settings).