Aperçu

Si vous rencontrez un problème où les flèches de carrousel sont manquantes dans le module d’upsell d’Upcart, cela est généralement dû à un problème de compatibilité avec le thème de votre boutique. Pour y remédier, vous pouvez ajouter manuellement les flèches en appliquant une personnalisation à l’aide de HTML personnalisé dans les paramètres de l’éditeur d’Upcart. Pour accéder aux champs de code personnalisé dans Upcart : Cart Editor > Settings, puis les onglets Custom HTML et Custom CSS. Settings est une rangée d’onglets — tout ce qui ne rentre pas se trouve derrière More settings.

HTML

Pour cette correction, ouvrez le menu déroulant HTML et sélectionnez « Scripts (before load) », puis collez le code suivant dans cette section :

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

N’utilisez pas un simple document.querySelector ici. Upcart s’affiche dans un shadow root sur la plupart des boutiques (c’est le comportement par défaut pour les installations récentes), et document.querySelector ne peut pas voir à l’intérieur — le script ne trouverait rien et, sans les gardes if, générerait une erreur sur null. La ligne host?.shadowRoot ?? document ci-dessus fonctionne dans les deux cas.

Note sur l’héritage : les callbacks window.upcartOnCartOpened fonctionnent toujours mais sont obsolètes et génèrent des avertissements dans la console. Utilisez upcartSubscribeCartOpened pour tous les nouveaux scripts.

Voici à quoi devraient ressembler vos paramètres HTML personnalisés dans Upcart :

Paramètres Custom HTML d'Upcart avec le script des flèches de carrousel dans Scripts Before Load

CSS

Si vous rencontrez toujours des problèmes avec la position des flèches de carrousel, essayez d’appliquer la correction CSS suivante :

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

Explication

Nous utilisons souvent des pseudo-éléments CSS (::before) contenus à l’intérieur des boutons pour afficher les flèches de carrousel. Cependant, certains thèmes de boutique choisissent de bloquer le rendu des pseudo-éléments, ce qui fait disparaître les flèches de carrousel du tiroir de panier. Cela crée un problème où les flèches du carrousel d’upsell apparaissent correctement dans l’aperçu de l’éditeur mais pas sur la boutique en ligne réelle.

Prise en main

Modules de panier

Paramètres du panier

Bouton de panier flottant

Multicart

Personnalisations

Analyses

Intégrations et compatibilité

Facturation et compte

Dépannage

Corriger les flèches de carrousel manquantes dans le module d'upsell V1.0 d'Upcart

Aperçu

HTML

CSS

Explication

​Aperçu

​HTML

​CSS

​Explication

Aperçu

HTML

CSS

Explication