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

# كتلة حماية الشحن

> كتلة Shipping protection في سلة Aftersell: إضافة حماية اختيارية تسجّل الاختيار على الطلب.

> تقدّم كتلة **Shipping protection** إضافة حماية شحن اختيارية يمكن للمتسوقين تفعيلها في السلة، ما يتيح لهم إضافة حماية ضد التلف أو الفقدان أو السرقة أثناء الشحن، وتسجيل ذلك الاختيار على الطلب لأدوات التنفيذ أو المطالبات لديك.

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

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

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

| الإعداد          | ما الذي يتحكم فيه                                                                                               | الافتراضي                                                         |
| ---------------- | --------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
| **Title**        | عنوان بنص منسق. يدعم `{{product_title}}` و `{{price}}`.                                                         | `<strong>{{product_title}}</strong>`                              |
| **Price label**  | سطر السعر، يُعرض أسفل العنوان. يدعم `{{product_title}}` و `{{price}}`. امسح هذا الحقل لإخفاء سطر السعر بالكامل. | `{{price}}`                                                       |
| **Description**  | نص داعم.                                                                                                        | `Protect your order from damage, loss, or theft during shipping.` |
| **Price**        | سعر الحماية (رقمي، يحدد المبلغ المحصَّل).                                                                       | `2.5`                                                             |
| **Product**      | منتج الحماية (يوفره التطبيق).                                                                                   | —                                                                 |
| **Display type** | كيفية ظهور عنصر التحكم: **Toggle** أو **Checkbox**.                                                             | Toggle                                                            |

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

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

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

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

| الخاصية           | النوع                                | ما هي لأجله                                                                            |
| ----------------- | ------------------------------------ | -------------------------------------------------------------------------------------- |
| `isEnabled`       | `boolean`                            | ما إذا كانت حماية الشحن موجودة حاليًا في السلة.                                        |
| `isPending`       | `boolean`                            | `true` أثناء تنفيذ الإضافة أو الإزالة. عطّل عنصر تحكمك بناءً عليها.                    |
| `title`           | `string`                             | العنوان كنص عادي. البديل عند عدم وجود عنوان بنص منسق.                                  |
| `titleHtml`       | `string`                             | HTML عنوان النص المنسق المعقَّم. فارغ عند عدم وجوده.                                   |
| `descriptionHtml` | `string`                             | HTML وصف النص المنسق المعقَّم. فارغ عند عدم وجوده.                                     |
| `priceHtml`       | `string \| null`                     | HTML سعر النص المنسق المعقَّم من حقل السعر المخصص. `null` عندما يكون ذلك الحقل فارغًا. |
| `priceLabel`      | `string`                             | تسمية السعر المنسّقة. فارغة عندما لا يُعرض السعر.                                      |
| `imageUrl`        | `string`                             | صورة الحماية. فارغة عند عدم وجودها.                                                    |
| `ctaText`         | `string`                             | تسمية الزر، لتنسيق `button`.                                                           |
| `format`          | `'button' \| 'checkbox' \| 'toggle'` | كيفية اشتراك المشتري. فرّع ترميزك بناءً عليها.                                         |
| `handleAdd`       | `() => void`                         | تضيف الحماية إلى السلة. لتنسيق `button`.                                               |
| `handleToggle`    | `() => void`                         | تبدّل الحماية داخل السلة وخارجها. لتنسيقي `checkbox` و `toggle`.                       |
| `isLoading`       | `boolean`                            | `true` بينما لا تزال السلة تُجري جلبها الأول.                                          |

<Warning>
  تحدد `format` أي معالج ينطبق: `handleAdd` لـ `button`، و `handleToggle` لـ `checkbox` و `toggle`. توصيل المعالج الخاطئ يترك عنصر التحكم خاملًا لدى التجار الذين اختاروا التنسيق الآخر.
</Warning>

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

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

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

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

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

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

**Price** — سطر السعر. يُضبط الخط العريض ولون النص من محرر النص المنسّق أعلاه.

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

**Description** — النص الداعم. يُضبط الخط العريض ولون النص من محرر النص المنسّق أعلاه.

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

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

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