Skip to main content

Übersicht

Wenn bei dir das Problem auftritt, dass die Karussellpfeile im Upsell-Modul von Upcart fehlen, liegt das in der Regel an einem Kompatibilitätsproblem mit dem Theme deines Shops. Um dies zu beheben, kannst du die Pfeile manuell hinzufügen, indem du eine Anpassung über benutzerdefiniertes HTML in den Editor-Einstellungen von Upcart anwendest. So greifst du auf die Felder für benutzerdefinierten Code in Upcart zu: Cart Editor > Settings, dann die Tabs Custom HTML und Custom CSS. Settings ist eine Reihe von Tabs — alles, was nicht hineinpasst, befindet sich hinter More settings.

HTML

Öffne für diese Lösung das HTML-Dropdown-Menü und wähle „Scripts (before load)“, füge dann den folgenden Code in diesen Bereich ein:
Verwende hier keinen bloßen document.querySelector. Upcart wird in den meisten Shops innerhalb eines Shadow Root gerendert (das ist der Standard für neuere Installationen), und document.querySelector kann nicht hineinsehen — das Skript würde nichts finden und ohne die if-Absicherungen bei null einen Fehler werfen. Die Zeile host?.shadowRoot ?? document oben funktioniert in beiden Fällen.
Legacy-Hinweis: window.upcartOnCartOpened-Callbacks funktionieren noch, sind aber veraltet und erzeugen Konsolenwarnungen. Verwende upcartSubscribeCartOpened für alle neuen Skripte.
So sollten deine Einstellungen für benutzerdefiniertes HTML in Upcart aussehen: Upcart-Einstellungen für Custom HTML mit dem Karussellpfeil-Skript in Scripts Before Load

CSS

Wenn du weiterhin Probleme mit der Position der Karussellpfeile hast, versuche die folgende CSS-Korrektur:

Erklärung

Wir verwenden häufig CSS-Pseudo-Elemente (::before), die in den Schaltflächen enthalten sind, um die Karussellpfeile anzuzeigen. Einige Shop-Themes blockieren jedoch das Rendern von Pseudo-Elementen, wodurch die Karussellpfeile aus dem Cart Drawer verschwinden. Das führt zu dem Problem, dass die Karussellpfeile des Upsell-Moduls in der Editor-Vorschau korrekt erscheinen, aber nicht im tatsächlichen Live-Storefront.