Tag ul com order_details quebrando página de OBRIGADO

[yassersous]

Existe uma tag ul adicionada à página de obrigado que foi codada de forma que está quebrando as páginas de obrigado.

Para cartão a tag traz número de transação, bandeira do cartão e pagamento em X vezes. Para boleto traz o número da transação, botão para imprimir boleto (que puxa css do próprio tema, o que é legal) e 'linha digitável' do boleto). Para pix traz o texto 'Pix Copia e Cola', um input com o código e o QR code abaixo.

Existe a possibilidade de reescreverem essa parte do código?

Eu fiz uma gambiarra e adicionei um código javascript para melhorar essa apresentação para o usuário para quem está co esse problema e quer implementar uma solução TEMPORÁRIA (segue abaixo, e me desculpe a gambiarra mas eu não sou programador!!! Fiz o que pude):

add_action( 'wp_footer', function () { ?>
<script>

    /* Arruma cartão na página de obrigado */
    const text0 = 'Bandeira de Cartão';
    for (const li of document.querySelectorAll('li')) {
      if (li.textContent.includes(text0)) {
        li.parentElement.style.display = "none";
      }
    }

    /* Arruma boleto na página de obrigado */
    var tagp1 = document.createElement('p');
    var text_tagp1 = document.createTextNode('Ótimo, processamos seu pedido. Agora complete o pagamento do boleto para que possamos aprovar o pedido. CLIQUE NO BOTÃO ABAIXO');
    const text1 = 'Número da Transação';
    const text2 = 'Linha Digitável do Boleto';
    const text3 = 'Imprimir Boleto'
    for (const li of document.querySelectorAll('li')) {
      if (li.textContent.includes(text2)) {
        li.style.display = "none";
        li.parentElement.style.marginLeft = "0";
        li.parentElement.style.listStyleType = "none";
        tagp1.appendChild(text_tagp1);
        li.parentElement.prepend(tagp1);
        for(const li2 of li.parentElement.querySelectorAll('li')) {
             if (li2.textContent.includes(text1)) {
                 li2.style.display = "none";
             }
        }
      }
      if (li.textContent.includes(text2)) {
        li.style.display = "none";
      }
    }
    for (const a of document.querySelectorAll('a')) {   
      if (a.textContent.includes(text3)) {
        a.style.color = "#ffffff";
        a.style.fontWeight = "bold";
      }
    }

    /* Arruma Pix na página de obrigado */
    var tagp2 = document.createElement('p');
    var text_tagp2 = document.createTextNode('Agora, é só pagar com o Pix para finalizar a sua compra.');
    var tagp3 = document.createElement('p');
    var text_tagp3 = document.createTextNode('Como pagar com Pix:');
    var tagp4 = document.createElement('p');
    var text_tagp4 = document.createTextNode('1 - Acesse o app ou site do seu banco');
    var tagp5 = document.createElement('p');
    var text_tagp5 = document.createTextNode('2 - Busque a opção de pagar com Pix');
    var tagp6 = document.createElement('p');
    var text_tagp6 = document.createTextNode('3 - Leia o QR code ou o código Pix');
    var tagp7 = document.createElement('p');
    var text_tagp7 = document.createTextNode('4 - Pronto! Você verá a confirmação de pagamento');
    var tagp8 = document.createElement('p');
    var text_tagp8 = document.createTextNode('ESCANEIE O QR CODE OU COPIE O CÓDIGO PIX ABAIXO:');
    const text4 = 'Após realizar o pagamento do PIX';
    for (const p of document.querySelectorAll('p')) {   
      if (p.textContent.includes(text4)) {
        p.parentElement.style.display = "none";
        p.parentElement.parentElement.style.marginLeft = "0";
        p.parentElement.parentElement.style.listStyleType = "none";
        tagp8.appendChild(text_tagp8);
        p.parentElement.parentElement.prepend(tagp8);
        tagp7.appendChild(text_tagp7);
        p.parentElement.parentElement.prepend(tagp7);
        tagp6.appendChild(text_tagp6);
        p.parentElement.parentElement.prepend(tagp6);
        tagp5.appendChild(text_tagp5);
        p.parentElement.parentElement.prepend(tagp5);
        tagp4.appendChild(text_tagp4);
        p.parentElement.parentElement.prepend(tagp4);
        tagp3.appendChild(text_tagp3);
        p.parentElement.parentElement.prepend(tagp3);
        tagp2.appendChild(text_tagp2);
        p.parentElement.parentElement.prepend(tagp2);
      }
    }

</script>
<?php } );

[devaguia]

Bom dia @yassersous. Tudo bem? Consegue me enviar uma imagem da quebra, sem a sua correção e depois com a sua correção?

[yassersous]

Olá meu amigo, tudo certo por aqui! E você como está?

Desculpe pela demora, hoje o dia foi muito corrido.

Obrigado por sua resposta!

E anexo enviei print das telas de obrigado e dos trechos de códigos antes da minha alteração. E enviei também print das telas depois da minha alteração.

Dá pra perceber que a página de obrigado para cartão de crédito realmente não tem erros (inclusive, dentro da tag ul do cartão não há tantas tags
quanto nos outros métodos de pagamento. Não sei se isso altera algo, enfim, te mandei prints). Os problemas ocorrem para Boleto e Pix.

Perceba que na página de obrigado do boleto, a linha do código do boleto ultrapassa os limites da página dependendo do dispositivo que você usa. Perceba também que na página de obrigado do Pix, as "bolinhas" dos elementos

estão em lugares estranhos.

Mais uma vez obrigado por sua resposta! Se precisar de mais alguma coisa só falar.

Um grande abraço

[devaguia]

@yassersous O layout que utiliza a ul como base também foi corrigido na PR #29, junto com a padronização dos métodos de pagamento que solicitou na Issue #25.

[yassersous]

Obrigado por isso Matheus! Será de grande ajuda!

Uma dúvida: normalmente o dono do plugin demora quanto tempo para aceitar as alterações e implementar?

[devaguia]

@yassersous Não tenho como te informar sobre prazos, mas logo irão começar as validações para o envio de novas versões.

[yassersous]

Obrigado Matheus!

[devaguia]

@yassersous Esse errro já foi resolvido na última atualização.

psc @ThalitaNsc

[thalita-nascimento-vindi]

Encerrando pois já está disponivel na atualização do nosso plugin tal correção.