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

# بلوك المكافآت

> بلوك Rewards في Aftersell Cart: شحن مجاني وخصومات وهدايا مجانية بمستويات متدرجة، بما في ذلك مستويات مختلفة حسب السوق أو البلد أو العملة.

> يعرض بلوك **Rewards** شريط تقدم نحو مستويات مكافآت (شحن مجاني أو خصم على الطلب أو هدية مجانية) يفتحها المتسوقون بإضافة المزيد إلى سلتهم، مما يحفّز سلالًا أكبر عبر إظهار مدى قرب المتسوقين من المكافأة التالية ومنح المكافآت المؤهَّلة تلقائيًا. يمكن أن تختلف المستويات حسب السوق والبلد والعملة.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-rewards-block-progress-bar-toward-tiered.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=14074a434c0024287bd1dd36051af69b" alt="بلوك المكافآت يعرض شريط تقدم نحو مكافآت متدرجة مثل الشحن المجاني وهدية مجانية" width="1412" height="312" data-path="images/aftersell/cart-rewards-block-progress-bar-toward-tiered.png" />
</Frame>

<div id="tier-threshold-validation">
  ## التحقق من حدود المستويات
</div>

تحتوي قائمة مستويات كل شرط على ما يصل إلى **4** مستويات — بلوك Rewards الذي يحتوي على عدة شروط سوق أو بلد أو عملة يخزّن حتى 4 مستويات لكل شرط، ولأن أول شرط مطابق هو الذي يُعرض، يرى أي متسوق منفرد 4 مستويات على الأكثر. يجب أن يكون حد كل مستوى أكبر تمامًا من المستوى الذي يسبقه — يجب أن تكون الحدود بترتيب تصاعدي. إذا كان حد مستوى ما مساويًا لحد المستوى السابق أو أقل منه، يظهر خطأ مضمّن على حقل حد ذلك المستوى ويُحظر زر **Save** حتى تُحل المشكلة. يتوسّع المستوى المتأثر تلقائيًا حتى يكون الخطأ مرئيًا.

على سبيل المثال، إذا ضُبط المستوى 1 على \$100، فيجب ضبط المستوى 2 على \$101 أو أكثر.

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

* **يستبعد** التقدمُ بنودَ هدايا المكافآت وبنود إضافات المنتج وبنود حماية الشحن وبطاقات الهدايا من الإجمالي، حتى لا تضخّم تلك العناصر تقدم المتسوق نحو المكافأة.
* تعرض الرسالة المبلغ أو العدد المتبقي للوصول إلى المستوى التالي، أو رسالة الاكتمال بعد بلوغ جميع المستويات.
* **تُمنح الهدايا المجانية تلقائيًا.** عندما يبلغ المتسوق مستوى هدية، تُضاف الهدية إلى السلة؛ وإذا انخفض دونه، تُزال الهدية. مع إيقاف تجميع المكافآت، تُمنح هدية أعلى مستوى محقَّق فقط.
* يتحكم **Add back removed free gifts** فيما يحدث عندما يزيل المتسوق يدويًا هدية مُنحت تلقائيًا. عند التفعيل (الافتراضي)، تُعاد إضافة الهدية تلقائيًا عند تحديث السلة التالي. عند التعطيل، تُحترم الإزالة وتبقى الهدية خارج السلة لبقية تلك الجلسة، حتى لا يضطر المتسوقون إلى صراع مع السلة لرفض هدية.

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

| الإعداد                                    | ما الذي يتحكم فيه                                                                                          | الافتراضي               |
| ------------------------------------------ | ---------------------------------------------------------------------------------------------------------- | ----------------------- |
| **Rewards calculation**                    | ما إذا كان التقدم يُقاس بـ **Cart total (\$)** أو **Cart quantity (#)**.                                   | Cart total (\$)         |
| **Stack rewards across tiers**             | مفعّل: تُطبَّق كل مكافأة يفتحها المشتري، حتى أعلى مستوى بلغه. معطَّل: تُطبَّق مكافأة أعلى مستوى مفتوح فقط. | مفعّل                   |
| **Add back removed free gifts**            | إعادة إضافة هدية مجانية مكتسبة بعد أن يزيلها المشتري.                                                      | مفعّل                   |
| **Show tier icons**                        | ما إذا كانت أيقونات المستويات تظهر على الشريط.                                                             | مفعّل                   |
| **Show tier labels**                       | ما إذا كان نص التسمية يظهر على كل علامة مستوى على الشريط.                                                  | معطَّل                  |
| **Text after completing full rewards bar** | نص منسّق يظهر بعد بلوغ جميع المستويات.                                                                     | `All rewards unlocked!` |
| **Tiers**                                  | مستويات المكافآت (أدناه). حتى **4** لكل شرط؛ تعرض اللوحة عدادًا `n/4` وتعطّل **Add tier** عند بلوغ الحد.   | لا شيء                  |

يتوسّع كل **مستوى** إلى:

| إعداد المستوى                              | ما الذي يتحكم فيه                                                                                                                                  | الافتراضي                                    |
| ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
| **Reward type**                            | **Free shipping** أو **Order discount** أو **Free gift**. تغييره يعيد ضبط عنوان ذلك المستوى وتسمية شريط تقدمه إلى الصياغة الافتراضية للنوع الجديد. | Free shipping                                |
| **Threshold (\$)** / **Threshold (items)** | إجمالي السلة أو عدد العناصر الذي يفتح المستوى. تتبع التسمية إعداد **Rewards calculation**. الحد الأدنى `1`.                                        | `50`                                         |
| **Discount value type**                    | لخصومات الطلب فقط: **Percentage (%)** أو **Fixed amount (\$)**.                                                                                    | Percentage (%)                               |
| **Percentage off** / **Amount off**        | لخصومات الطلب فقط: قيمة الخصم. النسب المئوية محدودة بـ 100.                                                                                        | `10`                                         |
| **Title before achieving tier**            | رسالة منسّقة تُعرض بينما لا يزال المتسوق دون المستوى. تدعم الرمز `{{amount}}`.                                                                     | `You're {{amount}} away from free shipping!` |
| **Progress bar label**                     | التسمية المعروضة على علامة المستوى.                                                                                                                | `Free shipping`                              |
| **Gift products**                          | للهدايا المجانية فقط: المنتج/المنتجات أو المتغير/المتغيرات الممنوحة، حتى **3** لكل مستوى.                                                          | لا شيء                                       |

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

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

<div id="per-market-rewards">
  ## مكافآت حسب السوق
</div>

Rewards هو البلوك الذي يمتلك واجهة **Conditions** الكاملة حاليًا: عرّف عدة مجموعات من المستويات، تستهدف كل منها **سوق Shopify** أو **بلد العميل** أو **عملة العميل** (**In** أو **Not in**). يُعرض أول شرط مطابق للمتسوق. إذا لم يطابق أي شرط، لا يعرض البلوك شيئًا له.

كل شرط هو بطاقة في لوحة الإعدادات (**When** + الشرط). أسفلها، يحتوي قسم **Display** على مستويات ذلك الشرط. أبقِ القواعد الأكثر تحديدًا فوق شرط **All buyers** الشامل. الترتيب هو أولوية، وليس مزيجًا من كل التطابقات.

لا يمكنك حذف الشرط الأخير (يلزم دائمًا شرط واحد على الأقل). لا تقيّم معاينة المحرر المشتري الفعلي؛ حدد شرطًا في اللوحة لمعاينة ذلك المتغير.

لمعرفة كيفية ارتباط الشروط بمفتاح العين والبلوكات الأخرى، راجع [الإظهار أو الإخفاء حسب السوق أو البلد أو العملة](/ar/aftersell/cart/blocks-overview#show-or-hide-by-market-country-or-currency).

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

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

| الخاصية              | النوع         | الغرض منها                                                                                             |
| -------------------- | ------------- | ------------------------------------------------------------------------------------------------------ |
| `milestones`         | `Milestone[]` | مستويات المكافآت، بالترتيب. انظر أدناه.                                                                |
| `rewardsMessageHtml` | `string`      | رسالة التقدم أو الاكتمال كـ HTML مُعقَّم.                                                              |
| `showIcons`          | `boolean`     | ما إذا كان التاجر قد فعّل أيقونات المستويات.                                                           |
| `showTierLabels`     | `boolean`     | ما إذا كان التاجر قد فعّل تسميات شريط المستويات.                                                       |
| `isLoading`          | `boolean`     | تكون دائمًا `false` هنا: يعرض البلوك هيكله المدمج أثناء التحميل ولا يستدعي قالبك إلا بعد جاهزية السلة. |

كل `Milestone`:

| الحقل             | النوع                  | الغرض منه                                                                                              |
| ----------------- | ---------------------- | ------------------------------------------------------------------------------------------------------ |
| `id`              | `string`               | مفتاح ثابت للمستوى. استخدمه كـ `key` في React.                                                         |
| `label`           | `string`               | تسمية المستوى، كنص عادي.                                                                               |
| `icon`            | `ReactElement \| null` | عنصر أيقونة مُعالج مسبقًا. يكون `null` عندما لا يمتلك المستوى أيقونة. اعرضه مباشرةً: `{m.icon}`.       |
| `isCompleted`     | `boolean`              | ما إذا كانت السلة قد بلغت هذا المستوى.                                                                 |
| `positionPercent` | `number`               | مدى امتلاء **الجزء الخاص بهذا المستوى** من الشريط، من `0` إلى `100` — وليس موضعًا على شريط واحد مشترك. |

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function Rewards(props) {
  return (
    <div>
      <div dangerouslySetInnerHTML={{ __html: props.rewardsMessageHtml }} />

      {props.milestones.map((milestone) => (
        // Each tier gets its own track; positionPercent (0-100) fills that track.
        <div key={milestone.id}>
          <div style={{ background: '#E9E9E9', height: 5 }}>
            <div style={{ width: `${milestone.positionPercent}%`, background: '#000', height: 5 }} />
          </div>
          {props.showIcons && milestone.icon ? milestone.icon : null}
          {props.showTierLabels && milestone.label !== '' ? milestone.label : null}
        </div>
      ))}
    </div>
  );
}
```

`m.icon` هو **عنصر مُعالج مسبقًا**، وليس رابط URL أو اسم أيقونة، لذا اعرضه مباشرةً بدلًا من محاولة بناء عنصر صورة منه.

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

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

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

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

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

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

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

**Tier label** — التسمية المعروضة على كل علامة مستوى. متاحة فقط عند تفعيل **Show tier labels**.

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

<Tip>
  النقر على عنصر نصي مباشرة في معاينة السلة يُبرزه ويفتح عناصر تحكمه في اللوحة تلقائيًا.
</Tip>

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