Skip to main content

Overzicht

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.

HTML

Open voor deze oplossing het HTML-dropdownmenu en selecteer “Scripts (before load)”, en plak vervolgens de volgende code in dat gedeelte:
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: Upcart Custom HTML-instellingen met het script voor carrouselpijlen in Scripts Before Load

CSS

Als je nog steeds problemen hebt met de positie van de carrouselpijlen, probeer dan de volgende CSS-oplossing:

Uitleg

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.