Oi Eduardo, tudo bem?
Desculpe a demora em retornar.
Entendo sua frustração em relação ao código Javascript não estar funcionando corretamente em dispositivos móveis e tablets. É importante lembrar que, apesar de parecer algo simples, a compatibilidade entre diferentes dispositivos pode ser um desafio. Vou tentar ajudá-lo a entender melhor a situação e encontrar uma solução para o seu problema.
Primeiramente, é importante verificar se o código Javascript está sendo carregado corretamente em todos os dispositivos. Você pode usar o console do navegador para verificar se há algum erro sendo reportado. Para isso, basta pressionar F12 no seu teclado, selecionar a aba "Console" e recarregar a página. Caso haja algum erro, ele será reportado ali e poderemos trabalhar na correção.
Além disso, é importante lembrar que os dispositivos móveis e tablets possuem resoluções diferentes dos desktops. Isso pode afetar o funcionamento do seu código caso ele esteja fazendo referência a elementos específicos na página. Por exemplo, o código que você compartilhou faz referência a um elemento com a classe "product-tag-sale-badge.position-custom.align-horizontal". É possível que essa classe esteja presente no desktop, mas não nos dispositivos móveis ou tablets, o que explicaria porque nada acontece nesses dispositivos.
Uma solução para isso seria utilizar media queries para adaptar o seu código para diferentes tamanhos de tela. Por exemplo, você poderia criar uma regra CSS que esconde o elemento que você deseja modificar em dispositivos móveis e tablets, e utiliza o seu código Javascript apenas em desktops. Algo assim:
@media screen and (min-width: 768px) {
/* Código Javascript aqui */
}
Isso faria com que o seu código Javascript seja executado apenas em telas com largura maior ou igual a 768 pixels (que é uma medida comum para tablets).
Outra possibilidade seria utilizar uma biblioteca Javascript que lide com a adaptação automática para diferentes dispositivos. Uma opção popular é o jQuery Mobile, que é uma extensão do jQuery feita especialmente para desenvolvimento de aplicações móveis e tablet. Com essa biblioteca, você pode usar os mesmos seletores e métodos que está acostumado, mas com a garantia de que funcionará em todos os dispositivos.
Por fim, é importante lembrar que o Elementor possui suas próprias funcionalidades para lidar com customização de páginas em diferentes dispositivos. Você pode explorar essas opções e ver se elas atendem às suas necessidades.
Espero que essas dicas tenham ajudado a esclarecer a situação e a encontrar uma solução para o seu problema.
Um abraço e bons estudos.
