Corriger les flèches de carrousel manquantes dans le module d'upsell V1.0 d'Upcart
Cet article explique comment corriger les flèches de carrousel manquantes sur la boutique en ligne alors qu’elles apparaissent dans l’aperçu de l’éditeur.
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.
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 :
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.
Cette page vous a-t-elle été utile ?
⌘I
Assistant
Responses are generated using AI and may contain mistakes.