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

# بلوك البانر

> بلوك Banner في Aftersell Cart: شريط رسائل يُعرض داخل الدرج، مع مؤقّت عد تنازلي اختياري.

> بلوك **Banner** هو شريط رسائل يُعرض داخل السلة، ومفيد للعروض الترويجية أو رسائل الشحن أو رسائل الاستعجال مثل إشعار الشحن المجاني أو إعلان تخفيضات أو رسالة "تم حجز سلتك". ويمكن أن يتضمن مؤقّت عد تنازلي مباشرًا.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-banner-block-reservation-countdown.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=8aff1b333a8ebe9005d2d70bc7f9a2cd" alt="بلوك البانر في درج سلة Aftersell يعرض رسالة عد تنازلي لحجز السلة" width="1366" height="106" data-path="images/aftersell/cart-banner-block-reservation-countdown.png" />
</Frame>

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

* **لا يعمل العد التنازلي إلا عند استيفاء الشروط الثلاثة جميعها:** المؤقّت مفعّل، والنص يحتوي على الرمز `{{timer}}`، والمدة أكبر من صفر. وإلا يُعرض البانر كنص ثابت.
* يعدّ المؤقّت تنازليًا بصيغة `MM:SS` ويُحفظ لعلامة تبويب المتسوق (يستمر أثناء التنقل داخل متجرك خلال الجلسة)، لذا لا يُعاد تشغيله في كل صفحة.
* **عندما يصل المؤقّت إلى `00:00`، يختفي البانر بأكمله**، فلا يرى المتسوقون أبدًا ساعة عند الصفر.
* في معاينة المحرر يعمل المؤقّت في حلقة ولا يختفي البانر أبدًا، لتتمكن من الاستمرار في تنسيقه.

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

| الإعداد                   | ما الذي يتحكم فيه                                                                                                     | القيمة الافتراضية                              |
| ------------------------- | --------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
| **Text**                  | رسالة النص المنسّق. أدرج الرمز `{{timer}}` لعرض عد تنازلي.                                                            | `Your cart is reserved for {{timer}} minutes!` |
| **Countdown timer**       | تشغيل العد التنازلي أو إيقافه.                                                                                        | مفعّل                                          |
| **Minutes** / **Seconds** | مدة تشغيل العد التنازلي. حقلا أرقام يظهران عند تفعيل **Countdown timer** ويُعرضان بصيغة `MM:SS` حيث يظهر `{{timer}}`. | 10 دقائق                                       |

النص قابل للترجمة.

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

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

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

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

| الخاصية                       | النوع     | الغرض منها                                                                                                    |
| ----------------------------- | --------- | ------------------------------------------------------------------------------------------------------------- |
| `text`                        | `string`  | رسالة البانر بصيغة HTML منقّاة، مع استبدال الرمز `{{timer}}` **مسبقًا** بالعد التنازلي المباشر.               |
| `shouldUseTimer`              | `boolean` | تكون `true` عندما يكون العد التنازلي قيد التشغيل لهذا البانر.                                                 |
| `isTimerExpiredAndShouldHide` | `boolean` | تكون `true` بمجرد وصول العد التنازلي إلى الصفر.                                                               |
| `isLoading`                   | `boolean` | دائمًا `false` هنا: يعرض البلوك الهيكل المدمج (skeleton) أثناء التحميل ولا يستدعي قالبك إلا بعد جاهزية السلة. |

لا توجد خاصية `timer` منفصلة. يُدرَج العد التنازلي داخل `text` تلقائيًا، لذا يكفي عرض `text`.

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function CustomTemplate(props) {
  // The built-in banner removes itself at 00:00; a custom template must do the same.
  if (props.shouldUseTimer && props.isTimerExpiredAndShouldHide) return null;

  return (
    <div className="cart-external-banner" style={{ padding: '10px', textAlign: 'center' }}>
      <span dangerouslySetInnerHTML={{ __html: props.text }} />
    </div>
  );
}
```

<Warning>
  عبارة الإرجاع المبكر تلك مهمة. بدونها يستمر البانر في العرض بعد انتهاء المؤقّت، وبما أن الرمز قد استُبدل مسبقًا، سيرى المتسوقون `00:00` مجمّدة.
</Warning>

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

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

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

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

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

<div id="style">
  ### Style
</div>

| الإعداد              | ما الذي يتحكم فيه                                        | القيمة الافتراضية |
| -------------------- | -------------------------------------------------------- | ----------------- |
| **Background color** | تعبئة خلفية البانر.                                      | `#000000`         |
| **Text color**       | لون النص الاحتياطي (يتجاوزه محرر النص المنسّق).          | `#ffffff`         |
| **Border**           | ما إذا كان للبانر حد — **None** (0px) أو **Show** (1px). | None              |
| **Border color**     | لون الحد عند اختيار **Show**.                            | شفاف              |

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