Skip to main content

​
ما يفعله Shadow DOM

عند تشغيل إعداد Render Cart in Shadow DOM، ينشئ Upcart مساحة مستقلة تُبقي تنسيقاته وسكربتاته منفصلة عن بقية متجرك. هذا يعني:
  • لا يمكن لتنسيقات CSS العامة في قالبك تجاوز تصميم Upcart.
  • لن تتداخل تنسيقات Upcart أيضًا مع قالبك.
  • تبقى السلة متسقة عبر مختلف الأجهزة والقوالب.
يمكنك التفكير في Shadow DOM على أنه “فقاعة حماية” حول سلتك تساعدها على الظهور والعمل بالطريقة المقصودة.

​
كيف يحدث هذا

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

​
اعتبارات تقنية

إذا كنت أنت أو مطوّر بحاجة إلى تعديل عناصر داخل Upcart باستخدام JavaScript، فمن المهم استخدام مراجع المستند الصحيحة:
  • استخدم upcartDocumentOrShadowRoot عند استهداف عناصر داخل Upcart.
  • استخدم document عند استهداف عناصر خارج Upcart (على سبيل المثال، رأس أو تذييل قالب Shopify الخاص بك).
على الرغم من أن Shadow DOM معزول، لا يزال Upcart يوفر طرقًا للتفاعل مع قالبك والتطبيقات الأخرى عبر واجهة برمجة التطبيقات العامة (Public API) والدوال المساعدة.

​
استكشاف الأخطاء وإصلاحها والقيود

في معظم الحالات، سيؤدي تمكين Shadow DOM إلى إصلاح تعارضات CSS والتخطيط تلقائيًا.
ومع ذلك، قد توجد دائمًا بعض السيناريوهات التي قد تواجه فيها مشكلات:
  • تطبيقات التسعير: إذا احتاج تطبيق آخر إلى تعديل الأسعار أو سلوك checkout مباشرةً داخل السلة، فقد يجعل Shadow DOM ذلك صعبًا لأنه يخفي البنية الداخلية لـ Upcart عن السكربتات الخارجية.
  • JavaScript على مستوى القالب: قد لا تعثر السكربتات المخصصة التي تستخدم document.querySelector() على عناصر السلة أثناء تمكين Shadow DOM.
إذا كنت بحاجة إلى اختبار سلوك متجرك مع هذه التكاملات، يمكنك تعطيله مؤقتًا: افتح محرر السلة، وانتقل إلى Settings → Cart settings، ووسّع Advanced Settings، وألغِ تحديد Render cart in shadow DOM.