> ## 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.

# بلوك الملاحظات

> بلوك Notes في Aftersell Cart: حقل ملاحظات طلب قابل للطي يحفظ تعليمات المتسوق في السلة والطلب.

> بلوك **Notes** هو حقل قابل للطي يمكن للمتسوقين من خلاله إضافة ملاحظات على الطلب أو تعليمات خاصة (رسائل الهدايا وتعليمات التوصيل وما إلى ذلك) دون مغادرة السلة. تُحفظ الملاحظة في السلة وتنتقل إلى الطلب.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-notes-block-collapsible-order-notes-field.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=a54c41fc0b8417e00e8232762ef6a6c2" alt="بلوك الملاحظات يعرض حقل ملاحظات طلب قابلًا للطي حيث يمكن للمتسوقين إضافة تعليمات خاصة" width="854" height="262" data-path="images/aftersell/cart-notes-block-collapsible-order-notes-field.png" />
</Frame>

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

* الحقل عبارة عن **عنصر إفصاح قابل للطي**، مطويّ افتراضيًا. الطيّ بصري فقط — الملاحظة المحفوظة تظل سارية. عند الطيّ مع وجود ملاحظة محفوظة، تظهر علامة صح ليعرف المتسوق أن ملاحظته مخزَّنة.
* تُحفظ الملاحظة **عندما ينقر المتسوق خارج الحقل** (عند blur)، مع تغذية راجعة لحالة الحفظ: جارٍ الحفظ / تم الحفظ / خطأ.
* إذا تغيّرت ملاحظة السلة في مكان آخر — صفحة `/cart` أو تبويب آخر — يتزامن الحقل معها، إلا إذا كان المتسوق قد بدأ الكتابة بالفعل، بحيث لا تُستبدل ملاحظته قيد الكتابة أبدًا.

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

| الإعداد         | ما الذي يتحكم فيه                         | الافتراضي                             |
| --------------- | ----------------------------------------- | ------------------------------------- |
| **Title**       | عنوان الحقل. نص منسّق، قابل للترجمة.      | `Order notes`                         |
| **Placeholder** | النص النائب في حقل الإدخال. قابل للترجمة. | `Special instructions for your order` |

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

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

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

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

| الخاصية         | النوع                                      | الغرض منها                                                                                         |
| --------------- | ------------------------------------------ | -------------------------------------------------------------------------------------------------- |
| `titleHtml`     | `string`                                   | عنوان منسّق كـ HTML مُعقَّم. يكون فارغًا عندما يترك التاجر العنوان فارغًا.                         |
| `titleText`     | `string`                                   | العنوان كنص عادي. استخدمه في `aria-label` لحقل textarea، وكعنوان عندما لا يوجد نص منسّق.           |
| `hasTitle`      | `boolean`                                  | ما إذا كان أي من شكلي العنوان موجودًا. يتحكم في العنوان وفي `aria-label` الخاص بزر التبديل.        |
| `placeholder`   | `string`                                   | النص النائب المعروض في حقل الملاحظة الفارغ.                                                        |
| `noteInput`     | `string`                                   | نص الملاحظة الحالي.                                                                                |
| `status`        | `'idle' \| 'saving' \| 'saved' \| 'error'` | دورة حياة الحفظ. تُغذّي المنطقة الحية المنطوقة للحالة.                                             |
| `statusLabel`   | `string`                                   | إعلان المنطقة الحية المُحلّل الخاص بـ `status`. يكون فارغًا في حالة الخمول.                        |
| `displayStatus` | `'idle' \| 'saving' \| 'saved' \| 'error'` | الحالة الخاصة بالأيقونة. مثل `status`، إلا أن الملاحظة المطوية التي تحتوي على نص تُقرأ كـ `saved`. |
| `isExpanded`    | `boolean`                                  | ما إذا كان حقل الملاحظة موسَّعًا. الطيّ بصري فقط؛ الملاحظة تُحفظ دائمًا.                           |
| `onNoteChange`  | `(value: string) => void`                  | يحدّث نص الملاحظة. استدعِه بالقيمة الجديدة، على سبيل المثال من `onInput` الخاص بـ textarea.        |
| `onNoteBlur`    | `(event: unknown) => void`                 | يحفظ الملاحظة. اربطه مباشرةً بـ `onBlur` الخاص بـ textarea؛ فهو يقرأ القيمة من الحدث.              |
| `onToggle`      | `() => void`                               | يبدّل حالة التوسيع والطي.                                                                          |

<Warning>
  **تُحفظ الملاحظة عند `onNoteBlur`، وليس مع كل ضغطة مفتاح.** اربط كلًا من `onNoteChange` و`onNoteBlur`، وإلا فلن تُحفظ الملاحظات أبدًا دون أي تنبيه. أبقِ نص الحالة داخل منطقة حية حتى تعلن قارئات الشاشة عن حالتي الحفظ والاكتمال.
</Warning>

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

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

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

يتيح لك قسم **Text** في Design التحكم في طباعة عنصرين. استخدم منتقي **Text element** للتبديل بينهما.

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

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

**Note field** — النص داخل مربع النص الذي يكتب فيه المتسوقون ملاحظتهم.

| الإعداد            | ما الذي يتحكم فيه                                          | القيمة الافتراضية   |
| ------------------ | ---------------------------------------------------------- | ------------------- |
| **Text color**     | لون نص الملاحظة.                                           | يرث من لون نص السلة |
| **Size**           | حجم الخط.                                                  | `14px`              |
| **Weight**         | وزن الخط — Light أو Regular أو Medium أو Semibold أو Bold. | Regular (400)       |
| **Line height**    | مضاعف ارتفاع السطر.                                        | `1.5`               |
| **Letter spacing** | التباعد بين الأحرف.                                        | Normal              |

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