Skip to main content

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

CSS

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

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.