Skip to main content

​
Co robi Shadow DOM

Gdy ustawienie Render Cart in Shadow DOM jest włączone, Upcart tworzy samodzielną przestrzeń, która oddziela jego style i skrypty od reszty Twojego sklepu. Oznacza to, że:
  • Globalny CSS Twojego motywu nie może nadpisać wyglądu Upcart.
  • Style Upcart również nie będą zakłócać działania Twojego motywu.
  • Koszyk pozostaje spójny na różnych urządzeniach i motywach.
Możesz myśleć o Shadow DOM jak o „ochronnej bańce” wokół koszyka, która pomaga mu wyglądać i działać tak, jak powinien.

​
Skąd się to bierze

Motywy Shopify i motywy firm trzecich często zawierają globalny CSS i JavaScript, które mogą nieumyślnie wpływać na wygląd lub działanie Upcart. Ustawienie Render Cart in Shadow DOM pomaga zapobiegać tym konfliktom, izolując koszyk wysuwany Upcart we własnym chronionym środowisku. Po włączeniu Shadow DOM utrzymuje spójny wygląd i układ koszyka niezależnie od aktualizacji motywu czy zmian w niestandardowym kodzie. Jeśli jednak Twój motyw lub aplikacja firmy trzeciej potrzebuje bezpośredniego dostępu do elementów koszyka, ta izolacja może czasem powodować trudności z integracją.

​
Kwestie techniczne

Jeśli Ty lub deweloper musicie modyfikować elementy wewnątrz Upcart za pomocą JavaScript, ważne jest, aby używać właściwych odwołań do dokumentu:
  • Użyj upcartDocumentOrShadowRoot, gdy odwołujesz się do elementów wewnątrz Upcart.
  • Użyj document, gdy odwołujesz się do elementów poza Upcart (na przykład nagłówka lub stopki motywu Shopify).
Chociaż Shadow DOM jest izolowany, Upcart nadal udostępnia sposoby interakcji z Twoim motywem i innymi aplikacjami poprzez swoje Public API i funkcje pomocnicze.

​
Rozwiązywanie problemów i ograniczenia

W większości przypadków włączenie Shadow DOM automatycznie naprawi konflikty CSS i układu.
Zawsze jednak mogą wystąpić sytuacje, w których nadal napotkasz problemy:
  • Aplikacje cenowe: Jeśli inna aplikacja musi bezpośrednio modyfikować ceny lub zachowanie checkoutu wewnątrz koszyka, Shadow DOM może to utrudniać, ponieważ ukrywa wewnętrzną strukturę Upcart przed zewnętrznymi skryptami.
  • JavaScript na poziomie motywu: Niestandardowe skrypty korzystające z document.querySelector() mogą nie znajdować elementów koszyka, gdy Shadow DOM jest włączony.
Jeśli musisz przetestować zachowanie sklepu pod kątem takich integracji, możesz tymczasowo wyłączyć to ustawienie: otwórz edytor koszyka, przejdź do Settings → Cart settings, rozwiń Advanced Settings i odznacz Render cart in shadow DOM.