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

# إعداد عرض السلة في Shadow DOM

> يشرح هذا المقال ما يفعله إعداد Render Cart in Shadow DOM وكيفية استكشاف المشكلات المتعلقة بالتنسيقات أو تعارضات التكامل بين قالب Shopify الخاص بك وUpcart وإصلاحها.

<div id="what-shadow-dom-does">
  ## ما يفعله Shadow DOM
</div>

عند تشغيل إعداد **Render Cart in Shadow DOM**، ينشئ Upcart مساحة مستقلة تُبقي تنسيقاته وسكربتاته منفصلة عن بقية متجرك.

هذا يعني:

* لا يمكن لتنسيقات CSS العامة في قالبك تجاوز تصميم Upcart.
* لن تتداخل تنسيقات Upcart أيضًا مع قالبك.
* تبقى السلة متسقة عبر مختلف الأجهزة والقوالب.

يمكنك التفكير في Shadow DOM على أنه "فقاعة حماية" حول سلتك تساعدها على الظهور والعمل بالطريقة المقصودة.

***

<div id="how-this-happens">
  ## كيف يحدث هذا
</div>

غالبًا ما تأتي قوالب Shopify والقوالب الخارجية مع CSS وJavaScript عامة قد تؤثر دون قصد على مظهر Upcart أو سلوكه.

يساعد إعداد **Render Cart in Shadow DOM** على منع هذه التعارضات عبر عزل درج سلة Upcart داخل بيئته المحمية الخاصة. عند تمكينه، يحافظ Shadow DOM على اتساق تصميم سلتك وتخطيطها، بغض النظر عن تحديثات القالب أو تغييرات الكود المخصص.

ومع ذلك، إذا احتاج قالبك أو تطبيق خارجي إلى وصول مباشر لعناصر السلة، فقد يخلق هذا العزل أحيانًا تحديات في التكامل.

***

<div id="technical-considerations">
  ## اعتبارات تقنية
</div>

إذا كنت أنت أو مطوّر بحاجة إلى تعديل عناصر داخل Upcart باستخدام JavaScript، فمن المهم استخدام مراجع المستند الصحيحة:

* استخدم `upcartDocumentOrShadowRoot` عند استهداف عناصر **داخل** Upcart.
* استخدم `document` عند استهداف عناصر **خارج** Upcart (على سبيل المثال، رأس أو تذييل قالب Shopify الخاص بك).

على الرغم من أن Shadow DOM معزول، لا يزال Upcart يوفر طرقًا للتفاعل مع قالبك والتطبيقات الأخرى عبر **واجهة برمجة التطبيقات العامة (Public API)** والدوال المساعدة.

***

<div id="troubleshooting-and-limitations">
  ## استكشاف الأخطاء وإصلاحها والقيود
</div>

في معظم الحالات، سيؤدي تمكين Shadow DOM إلى إصلاح تعارضات CSS والتخطيط تلقائيًا.\
ومع ذلك، قد توجد دائمًا بعض السيناريوهات التي قد تواجه فيها مشكلات:

* **تطبيقات التسعير:** إذا احتاج تطبيق آخر إلى تعديل الأسعار أو سلوك checkout مباشرةً داخل السلة، فقد يجعل Shadow DOM ذلك صعبًا لأنه يخفي البنية الداخلية لـ Upcart عن السكربتات الخارجية.
* **JavaScript على مستوى القالب:** قد لا تعثر السكربتات المخصصة التي تستخدم `document.querySelector()` على عناصر السلة أثناء تمكين Shadow DOM.

إذا كنت بحاجة إلى اختبار سلوك متجرك مع هذه التكاملات، يمكنك تعطيله مؤقتًا: افتح محرر السلة، وانتقل إلى **Settings → Cart settings**، ووسّع **Advanced Settings**، وألغِ تحديد **Render cart in shadow DOM**.