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

# بلوك زر إتمام الشراء

> بلوك Checkout button في Aftersell Cart: زر الدعوة لاتخاذ إجراء الإلزامي في التذييل الذي يرسل المتسوقين إلى إتمام الشراء.

> بلوك **Checkout button** هو الدعوة الأساسية لاتخاذ إجراء في تذييل السلة التي تأخذ المتسوقين إلى إتمام الشراء، وتمنحهم مسارًا واضحًا وبارزًا من السلة إلى إتمام الشراء. وهو بلوك إلزامي.

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

* يحدد الزر **رابط إتمام شراء مترجمًا وصحيحًا حسب السوق**، لينتقل المتسوقون إلى صفحة إتمام الشراء للسوق الصحيح. إذا تعذّر تحديده، يعود إلى رابط `/checkout` القياسي.
* عند تفعيل **Go to cart page instead of checkout**، يرتبط الزر بـ `/cart` بدلًا من ذلك.
* ينتقل النقر عبر JavaScript حتى لا تتمكن معالجة السلة الخاصة بالقالب من اعتراضه، مع احترام نوايا فتح علامة تبويب جديدة (النقر مع Cmd/Ctrl، النقر بالزر الأوسط).
* يُصدر النقر حدث [`checkout`](/ar/aftersell/cart/sdk-events) في SDK، والذي يمكنك الاشتراك فيه.

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

| الإعداد                                 | ما الذي يتحكم فيه                                                          | القيمة الافتراضية            |
| --------------------------------------- | -------------------------------------------------------------------------- | ---------------------------- |
| **Button label**                        | تسمية نصية عادية تُدخل في حقل نصي. تدعم `{{total_price}}`.                 | `Checkout • {{total_price}}` |
| **Go to cart page instead of checkout** | يرسل المتسوقين إلى صفحة `/cart` بدلًا من الانتقال مباشرة إلى إتمام الشراء. | معطّل                        |

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

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

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

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

| الخاصية     | النوع                 | الغرض منها                                                                                                    |
| ----------- | --------------------- | ------------------------------------------------------------------------------------------------------------- |
| `label`     | `string`              | تسمية الزر بصيغة HTML منقّاة، مع استبدال `{{total_price}}`.                                                   |
| `href`      | `string \| undefined` | رابط إتمام الشراء. `undefined` في معاينة المحرر، حيث لا يوجد ما يُنتقل إليه.                                  |
| `isLoading` | `boolean`             | دائمًا `false` هنا: يعرض البلوك الهيكل المدمج (skeleton) أثناء التحميل ولا يستدعي قالبك إلا بعد جاهزية السلة. |

<Warning>
  **زر إتمام الشراء المخصص يفقد تتبع إتمام الشراء.** يرفق الزر المدمج معالج نقر يُصدر حدث [`checkout`](/ar/aftersell/cart/sdk-events#checkout) في SDK ويسجّل التحويل لـ[تحليلات السلة](/ar/aftersell/cart/analytics). لا يُمرَّر هذا المعالج إلى القوالب المخصصة، لذا فإن الانتقال عبر `href` وحده يتخطى الاثنين.

  إذا كنت بحاجة إلى الحدث، أصدره بنفسك من `onClick` قبل الانتقال. لا يمكن استعادة تقارير الإسناد بهذه الطريقة على أي حال، لذا يُفضَّل إعادة تنسيق الزر المدمج عبر [إعدادات التصميم](/ar/aftersell/cart/design-settings) أو [CSS المخصص](/ar/aftersell/cart/custom-css) ما لم تكن بحاجة فعلية إلى ترميز مختلف.
</Warning>

اعرض `href` كما هو دون تعيين قيمة افتراضية له. عنصر `<a>` بلا `href` خامل، وهو السلوك الصحيح في المحرر.

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

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

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