Panoramica

Se stai riscontrando un problema per cui le frecce del carosello mancano nel modulo upsell di Upcart, di solito è dovuto a un problema di compatibilità con il tema del tuo negozio. Per risolverlo, puoi aggiungere manualmente le frecce applicando una personalizzazione con HTML personalizzato nelle impostazioni dell’editor di Upcart. Per accedere ai campi di codice personalizzato in Upcart: Cart Editor > Settings, poi le schede Custom HTML e Custom CSS. Settings è una fila di schede — tutto ciò che non ci sta si trova dietro More settings.

HTML

Per questa correzione, apri il menu a tendina HTML e seleziona “Scripts (before load)”, poi incolla il seguente codice in quella sezione:

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

Non usare un semplice document.querySelector qui. Upcart viene renderizzato all’interno di uno shadow root sulla maggior parte dei negozi (è l’impostazione predefinita per le installazioni più recenti) e document.querySelector non può vedere al suo interno — lo script non troverebbe nulla e, senza le protezioni if, genererebbe un errore su null. La riga host?.shadowRoot ?? document qui sopra funziona in entrambi i casi.

Nota legacy: le callback window.upcartOnCartOpened funzionano ancora, ma sono deprecate e registrano avvisi in console. Usa upcartSubscribeCartOpened per tutti i nuovi script.

Ecco come dovrebbero apparire le tue impostazioni Custom HTML in Upcart:

Impostazioni Custom HTML di Upcart con lo script delle frecce del carosello in Scripts Before Load

CSS

Se hai ancora problemi con la posizione delle frecce del carosello, prova ad applicare la seguente correzione CSS:

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

Spiegazione

Spesso usiamo pseudo-elementi CSS (::before) contenuti all’interno dei pulsanti per visualizzare le frecce del carosello. Tuttavia, alcuni temi di negozio scelgono di bloccare il rendering degli pseudo-elementi, il che fa scomparire le frecce del carosello dal cart drawer. Questo crea un problema per cui le frecce del carosello degli upsell appaiono correttamente nell’anteprima dell’editor ma non sul negozio live effettivo.

⌘I

Per iniziare

Moduli del carrello

Impostazioni del carrello

Pulsante carrello fisso

Multicart

Personalizzazioni

Analisi

Integrazioni e compatibilità

Fatturazione e account

Risoluzione dei problemi

Correggere le frecce del carosello mancanti nel modulo upsell V1.0 di Upcart

Panoramica

HTML

CSS

Spiegazione

​Panoramica

​HTML

​CSS

​Spiegazione

Panoramica

HTML

CSS

Spiegazione