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

# HTML مخصص

> أضف HTML أو JavaScript مخصصًا إلى سلتك باستخدام محرر HTML المدمج.

يتيح لك قسم **Custom HTML** في Upcart إدراج كود مخصص في أجزاء مختلفة من درج السلة.\
يمكنك أيضًا كتابة JavaScript باستخدام وسوم `<script>`، والتفاعل مع السلة باستخدام [واجهة برمجة التطبيقات العامة](https://rokt.notion.site/upcart-public-api) الخاصة بـ Upcart (مثل `upcartOnCartLoaded (deprecated — use upcartSubscribeCartLoaded for new scripts)`).

<div id="where-to-find-it">
  ## **أين تجده**
</div>

انتقل إلى: **Cart Editor > Settings > Custom HTML**

<div id="how-it-works">
  ## **كيف يعمل**
</div>

تتيح لك القائمة المنسدلة **HTML Location** اختيار المكان الذي سيظهر فيه الكود داخل تخطيط السلة. بناءً على اختيارك، سيتم إدراج الكود في منطقة السلة المقابلة.

يمكنك استخدام ذلك لإضافة:

* رسائل مخصصة
* نصوص لبناء الثقة
* تكاملات التطبيقات
* مقتطفات التحليلات
* نقاط ربط للتنسيق
* محتوى ترويجي، مثل بانرات تحتوي على عروض أو خصومات مخصصة
* ضمانات المنتج التي تعزز ثقة العملاء

<div id="dynamic-tokens">
  ## **الرموز الديناميكية**
</div>

يمكنك استخدام الرمز التالي داخل أي حقل Custom HTML لإدراج بيانات السلة الحية:

| الرمز                 | ما يعرضه                                        |
| --------------------- | ----------------------------------------------- |
| `{{UPCART_SUBTOTAL}}` | المجموع الفرعي الحالي للسلة، منسقًا بعملة متجرك |

**مثال:**

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<p>Your current total: <strong>{{UPCART_SUBTOTAL}}</strong></p>
```

يعمل هذا الرمز في جميع حقول مواقع HTML باستثناء **Scripts (Before Load)**، حيث يجب استخدام واجهة برمجة تطبيقات JavaScript بدلًا من ذلك. هذا هو الرمز الديناميكي الوحيد المتاح في حقول Custom HTML.

<div id="available-html-locations">
  ## **مواقع HTML المتاحة**
</div>

|                                        |                                                                                                         |
| -------------------------------------- | ------------------------------------------------------------------------------------------------------- |
| الموقع                                 | الوصف                                                                                                   |
| **Above announcements/rewards**        | أعلى السلة، أسفل رأس السلة.                                                                             |
| **Below header/announcements/rewards** | مباشرةً أسفل أي إعلانات أو أشرطة مكافآت.                                                                |
| **Between each line item**             | يُدرج أسفل كل منتج في السلة.                                                                            |
| **Below cart items**                   | مباشرةً أسفل عناصر السلة، وفوق الوحدات السفلية.                                                         |
| **Above footer/add-ons**               | أسفل عناصر السلة والعروض الإضافية (upsells)، وفوق الإضافات.                                             |
| **Above checkout button**              | داخل التذييل، مباشرةً فوق زر الدفع والمجموع الفرعي.                                                     |
| **Below checkout button**              | داخل التذييل، مباشرةً أسفل زر الدفع.                                                                    |
| **Bottom of cart**                     | في أسفل الدرج تمامًا (خارج التذييل).                                                                    |
| **On empty cart screen**               | يُعرض بجانب نص "سلتك فارغة".                                                                            |
| **Scripts (Before Load)**              | منطقة غير مرئية لتشغيل JavaScript **قبل** تحميل السلة. مثالية للتتبع أو المنطق الشرطي أو السلوك المخصص. |

<div id="custom-css-optional">
  ## **CSS مخصص (اختياري)**
</div>

يمكنك تنسيق HTML الخاص بك باستخدام محرر **Custom CSS** الموجود ضمن:\
**Upcart > Cart Editor > Settings > Custom CSS**

على سبيل المثال، لضبط محاذاة السلة الفارغة:

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
[class*="styles_CartPreview__empty__"] { flex-direction: column; } [class*="styles_CartPreview__empty__"] h3 { margin: unset; }
```