Visão geral

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.

HTML

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:

Configurações de Custom HTML do Upcart com o script das setas do carrossel em Scripts Before Load

CSS

Se você ainda tiver problemas com a posição das setas do carrossel, tente aplicar a seguinte correção de CSS:

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

Explicação

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.

⌘I

Primeiros passos

Módulos do carrinho

Configurações do carrinho

Botão de carrinho fixo

Multicart

Personalizações

Análises

Integrações e compatibilidade

Faturamento e conta

Solução de problemas

Corrigindo setas do carrossel ausentes no módulo de upsell V1.0 do Upcart

Visão geral

HTML

CSS

Explicação

​Visão geral

​HTML

​CSS

​Explicação

Visão geral

HTML

CSS

Explicação