Als je een probleem ervaart waarbij de carrouselpijlen ontbreken in de upsell-module van Upcart, komt dit meestal door een compatibiliteitsprobleem met het thema van je winkel.Om dit op te lossen kun je de pijlen handmatig toevoegen door een aanpassing toe te passen met custom HTML in de editorinstellingen van Upcart.Zo open je de velden voor custom code in Upcart:Cart Editor > Settings, daarna de tabbladen Custom HTML en Custom CSS. Settings is een rij tabbladen — alles wat er niet in past, staat achter More settings.
Open voor deze oplossing het HTML-dropdownmenu en selecteer “Scripts (before load)”, en plak vervolgens de volgende code in dat gedeelte:
<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>
Gebruik hier geen kale document.querySelector. Upcart rendert in de meeste winkels binnen een shadow root (dit is de standaard voor nieuwere installaties), en document.querySelector kan daar niet in kijken — het script zou niets vinden en zonder de if-controles een fout geven op null. De regel host?.shadowRoot ?? document hierboven werkt in beide gevallen.
Legacy-opmerking:window.upcartOnCartOpened-callbacks werken nog steeds, maar zijn deprecated en loggen waarschuwingen in de console. Gebruik upcartSubscribeCartOpened voor alle nieuwe scripts.
Zo zouden je Custom HTML-instellingen er in Upcart uit moeten zien:
We gebruiken vaak CSS-pseudo-elementen (::before) binnen de knoppen om de carrouselpijlen weer te geven. Sommige winkelthema’s blokkeren echter het renderen van pseudo-elementen, waardoor de carrouselpijlen uit de cart drawer verdwijnen.Dit veroorzaakt een situatie waarbij de pijlen van de upsell-carrousel correct verschijnen in de editorpreview, maar niet op de daadwerkelijke live storefront.
Was deze pagina nuttig?
⌘I
Assistant
Responses are generated using AI and may contain mistakes.