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

# إصلاح أسهم الشريط الدوار المفقودة في وحدة العروض الإضافية V1.0 في Upcart

> توضح هذه المقالة كيفية إصلاح أسهم الشريط الدوار المفقودة في واجهة المتجر المباشرة عندما تظهر في معاينة المحرر.

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

إذا كنت تواجه مشكلة فقدان أسهم الشريط الدوار في وحدة العروض الإضافية (upsell) في Upcart، فعادةً ما يعود ذلك إلى مشكلة توافق مع قالب متجرك.

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

**للوصول إلى حقول الكود المخصص في Upcart:**

**Cart Editor** > **Settings**، ثم علامتا التبويب **Custom HTML** و**Custom CSS**. قسم Settings عبارة عن صف من علامات التبويب — وكل ما لا يتسع يقع خلف **More settings**.

***

<div id="html">
  ## HTML
</div>

لهذا الإصلاح، افتح القائمة المنسدلة لـ HTML واختر **"Scripts (before load)"**، ثم الصق الكود التالي في ذلك القسم:

```
<script>
  window.upcartSubscribeCartOpened(() => {
    setTimeout(() => {
      // The cart may render inside a shadow root, where document.querySelector
      // cannot reach it. Search the shadow root when there is one.
      const host = document.getElementById('upCart');
      const scope = host?.shadowRoot ?? document;

      const buttonLeft = scope.querySelector('.control-arrow.control-prev');
      if (buttonLeft) buttonLeft.innerText = "<";

      const buttonRight = scope.querySelector('.control-arrow.control-next');
      if (buttonRight) buttonRight.innerText = ">";
    }, 300);
  });
</script>
```

<Warning>
  **لا تستخدم `document.querySelector` مجردًا هنا.** يُعرض Upcart داخل shadow root في معظم المتاجر (وهو الوضع الافتراضي للتثبيتات الأحدث)، ولا يستطيع `document.querySelector` الرؤية داخله — لن يجد السكربت شيئًا، وبدون حراسات `if` سيرمي خطأً عند `null`. يعمل السطر `host?.shadowRoot ?? document` أعلاه في كلتا الحالتين.
</Warning>

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

هكذا يجب أن تبدو إعدادات HTML المخصص في Upcart:

<img src="https://mintcdn.com/aftersell/uVGuDiyXpd6WOLO4/images/upcart/upsell-carousel-arrows-custom-html-script.gif?s=56a99321312a0b59c77d3ce059a72dbb" alt="إعدادات Custom HTML في Upcart مع سكربت أسهم الشريط الدوار في Scripts Before Load" width="2052" height="1080" data-path="images/upcart/upsell-carousel-arrows-custom-html-script.gif" />

<div id="css">
  ## CSS
</div>

إذا كنت لا تزال تواجه مشاكل في موضع أسهم الشريط الدوار، فجرّب تطبيق إصلاح CSS التالي:

```
.carousel.carousel-slider .control-next {  
  right: -34px !important;  
}
```

***

<div id="explanation">
  ## الشرح
</div>

غالبًا ما نستخدم عناصر CSS الزائفة (`::before`) الموجودة داخل الأزرار لعرض أسهم الشريط الدوار. ومع ذلك، تختار بعض قوالب المتاجر حظر عرض العناصر الزائفة، ما يتسبب في اختفاء أسهم الشريط الدوار من درج السلة.

يؤدي ذلك إلى مشكلة تظهر فيها أسهم شريط العروض الإضافية الدوار بشكل صحيح في معاينة المحرر ولكن ليس في واجهة المتجر المباشرة الفعلية.