Se você está enfrentando um problema em que as setas do carrossel estão ausentes no módulo de upsell do Upcart, isso geralmente se deve a um problema de compatibilidade com o tema da sua loja.Para resolver, você pode adicionar as setas manualmente aplicando uma personalização com HTML personalizado nas configurações do editor do Upcart.Para acessar os campos de código personalizado no Upcart:Cart Editor > Settings, depois as abas Custom HTML e Custom CSS. Settings é uma linha de abas — o que não couber fica atrás de More settings.
Para esta correção, abra o menu suspenso de HTML e selecione “Scripts (before load)”, depois cole o seguinte código nessa seção:
<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ão use um document.querySelector simples aqui. O Upcart é renderizado dentro de um shadow root na maioria das lojas (é o padrão para instalações mais recentes), e o document.querySelector não consegue enxergar dentro de um — o script não encontraria nada e, sem as proteções de if, geraria um erro em null. A linha host?.shadowRoot ?? document acima funciona nos dois casos.
Nota sobre legado: os callbacks window.upcartOnCartOpened ainda funcionam, mas estão obsoletos e registram avisos no console. Use upcartSubscribeCartOpened em todos os scripts novos.
Veja como suas configurações de Custom HTML devem ficar no Upcart:
Frequentemente usamos pseudoelementos CSS (::before) contidos dentro dos botões para exibir as setas do carrossel. No entanto, alguns temas de loja optam por bloquear a renderização de pseudoelementos, o que faz as setas do carrossel desaparecerem do cart drawer.Isso cria um problema em que as setas do carrossel de upsell aparecem corretamente na prévia do editor, mas não na loja ao vivo.
Esta página foi útil?
⌘I
Assistant
Responses are generated using AI and may contain mistakes.
