Oversigt

Hvis du oplever et problem, hvor karruselpilene mangler i Upcarts upsell-modul, skyldes det normalt et kompatibilitetsproblem med din butiks tema. For at løse det kan du manuelt tilføje pilene ved at anvende en tilpasning med brugerdefineret HTML i Upcarts editorindstillinger. Sådan får du adgang til felterne til brugerdefineret kode i Upcart: Cart Editor > Settings, derefter fanerne Custom HTML og Custom CSS. Settings er en række faner — alt, der ikke passer ind, ligger bag More settings.

HTML

Til denne løsning skal du åbne HTML-dropdown-menuen, vælge “Scripts (before load)” og derefter indsætte følgende kode i den sektion:

<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>

Brug ikke en bar document.querySelector her. Upcart renderer inde i en shadow root på de fleste butikker (det er standarden for nyere installationer), og document.querySelector kan ikke se ind i en — scriptet ville ikke finde noget og, uden if-tjekkene, fejle på null. Linjen host?.shadowRoot ?? document ovenfor virker i begge tilfælde.

Bemærkning om ældre kode: Callbacks som window.upcartOnCartOpened virker stadig, men er udfasede og logger advarsler i konsollen. Brug upcartSubscribeCartOpened til alle nye scripts.

Sådan bør dine indstillinger for brugerdefineret HTML se ud i Upcart:

Upcarts Custom HTML-indstillinger med karruselpil-scriptet i Scripts Before Load

CSS

Hvis du stadig har problemer med karruselpilenes placering, kan du prøve at anvende følgende CSS-løsning:

.carousel.carousel-slider .control-next {  
  right: -34px !important;  
}

Forklaring

Vi bruger ofte CSS-pseudo-elementer (::before), der ligger inde i knapperne, til at vise karruselpilene. Nogle butikstemaer vælger dog at blokere rendering af pseudo-elementer, hvilket får karruselpilene til at forsvinde fra din cart drawer. Det skaber et problem, hvor upsell-karrusellens pile vises korrekt i editorens forhåndsvisning, men ikke i den faktiske live webshop.

⌘I

Kom godt i gang

Kurvmoduler

Kurvindstillinger

Fastgjort kurvknap

Multicart

Tilpasninger

Analyser

Integrationer og kompatibilitet

Fakturering og konto

Fejlfinding

Løsning af manglende karruselpile i Upcarts upsell-modul V1.0

Oversigt

HTML

CSS

Forklaring

​Oversigt

​HTML

​CSS

​Forklaring

Oversigt

HTML

CSS

Forklaring