Programação Selos do Rodapé

Layout
1

Boa tarde a todos,

Estou adicionando selos ao rodapé, porém, gostaria de alterar a ordem dos mesmos. Colocar o SafeBrowsing em 1°, SSL (LI fornece automaticamente, por isso não está no código) em 2° e em 3° as avaliações do google, porém, não estou conseguindo, segue a print e o código de como está atualmente.

capturar 2
capturar 21296×191 32.9 KB 

<ul id="selos-rodape" class="hide">
    <li>
       <a href="http://www.google.com/safebrowsing/diagnostic?site=www.allaviation.com.br" title="Google Safe Browsing" target="_blank">
            <img src="https://cdn.awsli.com.br/1872/1872805/arquivos/pilot-shop-allaviation-google-safe.png" alt="Google Safe Browsing">
          </a>
    </li>
    
         <li>
          <img src="https://cdn.awsli.com.br/1872/1872805/arquivos/pilotshop-allaviation-google-avaliacoes-.png" alt="Avaliaçõs do consumidor">
        </li>
        
        </ul>
        
<script type="text/javascript">
    $(document).ready(function() {
        $('#selos-rodape li').appendTo($('#rodape .selos ul'));
    });
</script>
<style>
    .selos li { margin-bottom: 10px; }
</style>

Abaixo a print e o código de como ficou depois da modificação.

Capturar
Capturar1289×349 34.9 KB 

<ul id="selos-rodape" class="hide">
    <li>
       <a href="http://www.google.com/safebrowsing/diagnostic?site=www.allaviation.com.br" title="Google Safe Browsing" target="_blank">
            <img src="https://cdn.awsli.com.br/1872/1872805/arquivos/pilot-shop-allaviation-google-safe.png" alt="Google Safe Browsing">
          </a>
    </li>
    
         <li>
          <img src="https://cdn.awsli.com.br/1872/1872805/arquivos/pilotshop-allaviation-google-avaliacoes-.png" alt="Avaliaçõs do consumidor">
        </li>
        
        </ul>
        
<script type="text/javascript">
    $(document).ready(function() {
        $('#selos-rodape li').appendTo($('#rodape .selos ul'));
    });
</script>
<style>
    .selos li { margin-bottom: 10px; }
    ul .selos-rodape{
  display: flex;
  flex-direction: column;
}

ul li:first-child{
  order: 2;
}

ul li:nth-child(2){
  order: 1;
}

ul li:nth-child(3){
  order: 3;
}

</style>

Ou seja, o rodapé deixou de ser horizontal e os itens se tornaram verticais, gostaria de alterar a ordem, mas mantendo o aspecto “original”.

2

Entre em contato com o Lucas, ótimo desenvolvedor e sempre resolve minhas necessidades com a loja integrada. (11) 997354244

1 curtida
3

Entrando em contato, obrigado!

4

Código para fazer a modificação.

Javascript (JS)

$('.pagamento-selos .selos ul').children().eq(0)).before($('.pagamento-selos .selos ul').children().eq(1)

image

5

Coloquei o código, dentro do html

<ul id="selos-rodape" class="hide">
    <li>
       <a href="http://www.google.com/safebrowsing/diagnostic?site=www.allaviation.com.br" title="Google Safe Browsing" target="_blank">
            <img src="https://cdn.awsli.com.br/1872/1872805/arquivos/pilot-shop-allaviation-google-safe.png" alt="Google Safe Browsing">
          </a>
    </li>
    
         <li>
          <img src="https://cdn.awsli.com.br/1872/1872805/arquivos/pilotshop-allaviation-google-avaliacoes-.png" alt="Avaliaçõs do consumidor">
        </li>
        
        </ul>
        
<script type="text/javascript">
    $(document).ready(function() {
        $('#selos-rodape li').appendTo($('#rodape .selos ul'));
    });
    
    $('.pagamento-selos .selos ul').children().eq(0)).before($('.pagamento-selos .selos ul').children().eq(1)
    
</script>
<style>
    .selos li { margin-bottom: 10px; }
  
</style>

ao usar o código acima ficou assim

image
image1349×203 22.7 KB

e fora, sendo um novo “arquivo” em .js somente com o código, mas, não teve nenhum tipo de efeito.

6

Tenta esse:

$('.pagamento-selos .selos ul li').first().insertBefore($('.pagamento-selos .selos ul li').last());
7

irei tentar agora! .

8

Não funfou, inseri o código, coloquei e tirei itens no carrinho para atualizar os cookies e nada.

9

Acho que vou deixar quieto, ta dando muito trabalho.

10

Que estranho, aqui no teste, está funcionando.

image

11

Estou criando um novo arquivo .js com esse código, também estou colocando no rodapé, agora estou mudando para o cabeçalho.

12

Como vc colocou no teste ? em que parte ?

13

Tenho uma extensão pra inserir JS e CSS em sites. Eu inseri esse código que te enviei, e funcionou.

image
image2560×1440 416 KB