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

# بلوك السلة الفارغة

> بلوك Empty cart — المحتوى الذي يظهر عندما لا يمتلك المتسوق أي عناصر.

> بلوك **Empty cart** هو المحتوى الذي يظهر عندما لا تحتوي السلة على أي عناصر، وعادةً ما يكون رسالة وزر لمواصلة التسوق، بحيث يظل الدرج الفارغ مفيدًا ومتوافقًا مع علامتك التجارية. يظهر فقط في **الحالة الفارغة** للسلة؛ ويمكن أن تظهر بلوكات أخرى (مثل Header) إلى جانبه في تلك الحالة نفسها.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/empty-cart-block-state-message-continue-shopping.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=1a05453c64539aef2bda4229467e63ea" alt="بلوك السلة الفارغة يعرض رسالة الحالة الفارغة وزر دعوة لمواصلة التسوق" width="836" height="394" data-path="images/aftersell/empty-cart-block-state-message-continue-shopping.png" />
</Frame>

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

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

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

| الإعداد              | ما الذي يتحكم فيه                                                                                                                             | الافتراضي             |
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| **Empty cart text**  | رسالة الحالة الفارغة. نص منسّق.                                                                                                               | `Your cart is empty.` |
| **Button text**      | نص الزر. يدعم تنسيق HTML مضمّنًا.                                                                                                             | `Continue shopping`   |
| **Button link**      | الوجهة التي يشير إليها الزر.                                                                                                                  | `/collections/all`    |
| **Background color** | لون خلفية البلوك. تركه فارغًا يجعله شفافًا، بحيث تظهر خلفية السلة نفسها.                                                                      | `transparent`         |
| **Alignment**        | كيفية محاذاة نص البلوك وزره — **Left** أو **Center**.                                                                                         | Center                |
| **Fit to height**    | ما إذا كان البلوك يملأ الارتفاع المتبقي من جسم السلة ويتوسّط عموديًا، أو يبقى بارتفاع المحتوى — **Fill remaining height** أو **Fit content**. | Fill remaining height |

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

* **المنطقة:** الجسم (body).
* **الحد الأقصى:** 1 لكل حالة سلة.
* **الحالة:** السلة الفارغة فقط. لا يظهر هذا البلوك في الحالة الممتلئة. تتضمن السلال الجديدة أيضًا بلوك Header في الحالة الفارغة افتراضيًا؛ راجع [كيف تعمل السلال؟](/ar/aftersell/cart/how-carts-work).
* يُضاف إلى السلال الجديدة افتراضيًا. غير مقفل — يمكنك إزالته أو إخفاؤه.

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

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

| الخاصية   | النوع    | الغرض منها                                                                 |
| --------- | -------- | -------------------------------------------------------------------------- |
| `text`    | `string` | رسالة السلة الفارغة كـ HTML مُعقَّم.                                       |
| `cta`     | `string` | نص زر الدعوة إلى الإجراء، كنص عادي.                                        |
| `ctaHtml` | `string` | نص زر الدعوة إلى الإجراء كـ HTML مُعقَّم — وهو ما تعرضه الترميز الافتراضي. |
| `href`    | `string` | الوجهة التي تشير إليها الدعوة إلى الإجراء.                                 |

<Note>
  يُعرض هذا البلوك فقط عندما تكون السلة فارغة، لذا لا يوجد كائن سلة في الخصائص. اعرض `href` كعنصر `<a>` حقيقي بدلًا من التنقّل عبر السكربتات، واعرض `text` باستخدام `dangerouslySetInnerHTML`، لأنه HTML مُعقَّم بالفعل.
</Note>

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

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

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

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

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

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

**Button label** — النص على زر مواصلة التسوق. يُضبط لون النص من قسم Button في Design.

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

<div id="button">
  ### الزر
</div>

يتيح لك قسم **Button** تنسيق زر الدعوة إلى الإجراء بشكل مستقل عن تصميم الأزرار العام. استخدم مفتاح التبديل **Default / Hover** للتنقل بين الحالتين.

| الإعداد              | الحالة  | ما الذي يتحكم فيه                                                        |
| -------------------- | ------- | ------------------------------------------------------------------------ |
| **Background color** | Default | تعبئة الزر في حالته الافتراضية. يعود إلى لون خلفية الزر العام.           |
| **Text color**       | Default | لون نص الزر في حالته الافتراضية. يعود إلى لون نص الزر العام.             |
| **Background color** | Hover   | تعبئة الزر عند تمرير العميل المؤشر فوقه. يعود إلى لون الخلفية الافتراضي. |
| **Text color**       | Hover   | لون نص الزر عند التمرير فوقه. يعود إلى لون النص الافتراضي.               |
| **Border color**     | —       | لون حدود الزر (في الحالتين). يعود إلى لون حدود الزر العام.               |
| **Border radius**    | —       | استدارة زوايا الزر. تعود إلى نصف قطر حدود الزر العام.                    |

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