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

# البدء مع تخصيصات Upcart

> تعلّم كيفية استخدام HTML وCSS وJavaScript لبناء ميزات وتنسيقات مخصصة في درج سلتك.

⚠️ **إشعار مهم**

مثال التخصيص في هذا المستند يعمل فقط مع الإصدار V1.0 من وحدات سلة Upcart. إذا قمت مؤخرًا بترقية سلتك إلى الإصدار 2، فلن يعمل كود هذه التخصيصات. ستحتاج إلى استخدام المحددات الجديدة المتوفرة للإصدار 2 في [دليل الترحيل.](/ar/upcart/upcart_v20_migration_guide)

يرجى مراجعة وثائق التخصيص الأخرى للاطلاع على حلول V2.0.

<div id="overview">
  # نظرة عامة
</div>

يمنحك Upcart تحكمًا كاملًا لتعديل مظهر السلة وسلوكها باستخدام **HTML المخصص** و**CSS المخصص** و**JavaScript**. تتيح لك هذه الأدوات إضافة ميزات جديدة، أو تنسيق سلتك لتتوافق مع علامتك التجارية، أو إدخال منطق لتحسين طريقة عمل سلتك.

يغطي هذا الدليل أساسيات كل منها ويوضح كيفية البدء. يتضمن كل قسم مثالًا مرئيًا سريعًا لمساعدتك على فهم كيف تبدو التغييرات عمليًا.

***

قبل أن تبدأ، تأكد من مراجعة [سياسة التخصيص في Upcart](/ar/upcart/upcart_customization_policy) حتى تعرف ما يدعمه فريقنا وما لا يدعمه.

<div id="add-content-with-html">
  ## إضافة محتوى باستخدام HTML
</div>

يُستخدم HTML لإضافة محتوى ثابت مثل النصوص أو البانرات أو الأزرار إلى سلتك. يمكنك الاختيار من بين مواقع HTML متعددة في محرر **Custom HTML** (مثل فوق زر الدفع، أو أسفل السلة، أو بين العناصر).

حالات الاستخدام الشائعة:

* إضافة رسائل مخصصة
* إدراج إخلاءات مسؤولية قانونية أو روابط سياسات
* إبراز مواعيد الشحن النهائية أو معلومات التسليم

**مثال:**

```
<div style="text-align: center; font-weight: bold;">  
  Thanks for shopping with us!  
</div
```

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-html-thank-you-message.gif?s=a22b53d145994e29c3e327b272e1ce33" alt="محرر Custom HTML في Upcart يضيف رسالة شكر فوق زر الدفع" width="2060" height="1080" data-path="images/upcart/customizations-custom-html-thank-you-message.gif" />

***

<div id="add-logic-with-javascript">
  ## إضافة منطق باستخدام JavaScript
</div>

يتحكم JavaScript في سلوك السلة ومنطقها. يمكنك استخدامه لإظهار العناصر أو إخفائها، أو تطبيق التنسيق بشكل مشروط، أو الاستجابة لتغييرات السلة في الوقت الفعلي.

ستغلّف كودك بوسم `<script>` وتضعه في **Custom HTML > Scripts (Before Load)** أو **Above Announcements**، حسب وقت تنفيذه المطلوب.

**مثال: [تحديد السلة بعرض إضافي واحد في كل مرة](/ar/upcart/limit_the_cart_to_one_upsell_at_a_time):**

```
<script>  
  // Show upsells again when upsells are removed  
  window.upcartSubscribeItemRemoved((event) => {  
    if (event.item?.properties?.__upcartUpsell) {  
      const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
      if (upsells) upsells.style.display = "block";  
    }  
  });  
  
  // Hide upsells once one is added  
  window.upcartSubscribeUpsellsAddedToCart(() => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    if (upsells) upsells.style.display = "none";  
  });  
  
  // Check for upsell in cart when it loads  
  window.upcartSubscribeCartLoaded((event) => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    const items = event.cart.items || [];  
    const hasUpsell = items.some(item => item?.properties?.__upcartUpsell);  
    if (upsells && hasUpsell) {  
      upsells.style.display = "none";  
    }  
  });  
</script>
```

<Note>
  **ملاحظة حول الإصدارات القديمة:** لا تزال دوال الاستدعاء `window.upcartOnItemRemoved` و`window.upcartOnAddUpsell` و`window.upcartOnCartLoaded` تعمل ولكنها مهملة وتسجل تحذيرات في وحدة التحكم. استخدم `upcartSubscribeItemRemoved` و`upcartSubscribeUpsellsAddedToCart` و`upcartSubscribeCartLoaded` لجميع السكربتات الجديدة.
</Note>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-html-hide-upsells.gif?s=eec41b0784bb4db819ee4ae1cd8a25e5" alt="محرر Scripts Before Load في Custom HTML بـ Upcart مع JavaScript يخفي وحدة العروض الإضافية" width="2060" height="1080" data-path="images/upcart/customizations-custom-html-hide-upsells.gif" />

***

🔧 **ملاحظة للمطورين:**\
يوفر Upcart [وثائق كاملة لواجهة برمجة التطبيقات العامة](https://rokt.notion.site/upcart-public-api) تسرد جميع الدوال والمتغيرات وأنماط أفضل الممارسات المتاحة للتخصيصات المتقدمة. نوصي بمراجعتها عند بناء سكربتات أو تكاملات أكثر تعقيدًا.

***

<div id="style-your-cart-with-css">
  ## تنسيق سلتك باستخدام CSS
</div>

يتحكم CSS في شكل ومظهر العناصر في سلتك. استخدمه لضبط المسافات أو الألوان أو أحجام الخطوط أو إخفاء العناصر غير المرغوب فيها. **Custom CSS** هي إحدى علامات التبويب ضمن **Settings** (خلف **More settings** إذا تجاوز صف علامات التبويب حدود العرض).

حالات الاستخدام الشائعة:

* تغيير ألوان عناوين المنتجات أو الأزرار
* ضبط حجم الخط أو المحاذاة
* إضافة مسافات بين الأقسام

**مثال: تغيير لون عنوان العرض الإضافي في V1.0:**

```
.upcart-upsells-title {  
  color: #C20075 !important;  
  font-size: 25px;  
  font-style: italic;  
  text-align: center;  
}
```

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-css-editor-styling.gif?s=f676b9eef6e30c6c122028c0e7a38b6e" alt="محرر Custom CSS في Upcart ينسق لون عنوان العرض الإضافي مع تأكيد حفظ التغييرات" width="2060" height="1080" data-path="images/upcart/customizations-custom-css-editor-styling.gif" />

***

<div id="additional-resources">
  ## موارد إضافية
</div>

هل تسعى إلى تحسين مهاراتك في HTML أو CSS أو JavaScript؟ اطلع على هذه الأدوات المجانية:

* [W3Schools](https://www.w3schools.com/)
* [Codecademy](https://www.codecademy.com/?g_network=g\&g_productchannel=\&g_adid=528849219280\&g_locinterest=\&g_keyword=codecademy\&g_acctid=243-039-7011\&g_adtype=\&g_keywordid=kwd-41065460761\&g_ifcreative=\&g_campaign=account\&g_locphysical=9001394\&g_adgroupid=70492864474\&g_productid=\&g_source=%7Bsourceid%7D\&g_merchantid=\&g_placement=\&g_partition=\&g_campaignid=1726903838\&g_ifproduct=\&utm_id=t_kwd-41065460761:ag_70492864474:cp_1726903838:n_g:d_c\&utm_source=google\&utm_medium=paid-search\&utm_term=codecademy\&utm_campaign=INTL_Brand_Exact\&utm_content=528849219280\&g_adtype=search\&g_acctid=243-039-7011\&gad_source=1\&gad_campaignid=1726903838\&gbraid=0AAAAAon8KZFBIKQJ4KKGpsSVHO3yi2Njl\&gclid=CjwKCAjwx-zHBhBhEiwA7Kjq61-cNVEH2PzXZCcjcqIZS-0mCe8EEyPBJYyj4QRn5bma8OMqd3IJrBoCwjoQAvD_BwE)
* [شبكة مطوري Mozilla ‏(MDN)](https://developer.mozilla.org/en-US/)

<div id="support-for-customizations">
  ## دعم التخصيصات
</div>

لا يستطيع فريق دعم Upcart المساعدة في تنفيذ الكود المخصص. لإجراء تغييرات أكثر تقدمًا، نوصي بالاستعانة بـ [خبير Shopify](https://www.shopify.com/ca/partners/directory).