Icone / Imagem / Selo PIX - Pagina Checkout | Ajuste Texto Desconto

Layout
1

Boa tarde! Gostaria de pedir uma nova ajuda.
Na minha página de checkout notei um problema quanto ao valor de Frete e Descontos.
Note no print da visão desktop que aparecem normalmente o frete e o desconto, porém na versão mobile, o valor do Desconto fica recuado do lado esquerdo e o valor do frete simplesmente some.
Conseguiriam me ajuda nesse sentido? O valor não está errado, mas fica feio achei.

image
image1153×369 11.7 KB

Visão mobile (fiz o teste no celular e no desktop reduzindo a tela e ambos se comportaram iguais)
image

E uma segunda ajuda se possível seria nessa tela do Boleto com desconto. Devido a frase “Desconto de 3%” o simbolo do Pix fica para baixo deixando tb a imagem sem padrão. Pensei em reduzir essa frase talvez para “Desc. 3%”.

image

1 curtida
2

no caso da imagem do pix pode ser:

mudar esse CSS para 0px
image

mudar o texto (JS):

$(function(){
    $("#pagamento6 > .forma-conteiner.with-discount > span.cor-secundaria").html($("#pagamento6 > .forma-conteiner.with-discount > span.cor-secundaria").html().replace("Desconto de", "Desconto "));
});

diminuir o tamanho do texto (CSS):

span.forma-conteiner.with-discount {
    font-size: 12px;
}
1 curtida
3

Perfeito
image

4

o mais perto que cheguei!

$(function(){
$(".table.tabela-carrinho.borda-alpha > tbody > tr > td:not([class])").addClass("esconder-mobile");
$(".bg-dark.esconder-mobile").removeClass("esconder-mobile").removeClass("hide").attr("style", 'margin: 0 0 5px;');
$(".tr-checkout-frete").removeClass("esconder-mobile").removeClass("hide").attr("style", 'margin: 0 0 5px;');
$(".desconto-tr").removeClass("esconder-mobile").removeClass("hide").attr("style", 'margin: 0 0 5px;');
$(".tr-checkout-total").removeClass("esconder-mobile").removeClass("hide").attr("style", 'margin: 0 0 5px;');
});

@media only screen and (max-width: 767px){
	.resumo-compra .tabela-carrinho .produto-info {
		width: 300px;
	}
   .tabela-carrinho tr {
      margin: 0 0 5px;
      border: 1px solid #ccc;
  }
}

image
image731×741 18.6 KB

1 curtida
5

Muito obrigado @Leonardo_Vicentini_F
Ficou muito bom mais uma vez e mais transparente para o cliente.

1 curtida
6

mais um acerto…
se o cliente escolher boleto, que tem desconto, voltar para outra forma de pagamento, e depois escolher boleto de novo, da um bugzinho.

Código completo abaixo com bug corrigido

$(function(){
$(".table.tabela-carrinho.borda-alpha > tbody > tr > td:not([class])").addClass("esconder-mobile");
$(".bg-dark.esconder-mobile").removeClass("esconder-mobile").removeClass("hide").attr("style", 'margin: 0 0 5px;');
$(".tr-checkout-frete").removeClass("esconder-mobile").removeClass("hide").addClass("fix-display-block").attr("style", 'margin: 0 0 5px;');
$(".desconto-tr").removeClass("esconder-mobile").removeClass("hide").attr("style", 'margin: 0 0 5px;');
$(".tr-checkout-total").removeClass("esconder-mobile").removeClass("hide").attr("style", 'margin: 0 0 5px;');
});

@media only screen and (max-width: 767px){
	.resumo-compra .tabela-carrinho .produto-info {
		width: 300px;
	}
   .tabela-carrinho tr {
      margin: 0 0 5px;
      border: 1px solid #ccc;
  }
   .fix-display-block {
       display: block !important;
   }

}
2 curtidas
7

Legal, vou testar aqui. :+1: :+1:

8

Fiz vários testes aqui, aparentemente fechou.

9

Olá boa tarde @Leonardo_Vicentini_F poderia por gentileza me informar em qual local insiro esses dois códigos?
Desde já agradeço!

10

O primeiro trecho é Java script, inserir HTML, o outro é css

1 curtida
11

Valeu, muito obrigado!

12

Olá @FabianoBrassioli como você colocou a logo do Pix ao lado logo do mercado pago redirect. Qual código você usou. Se puder compartilhar aí amigo agradeço. Estou pesquisando a um tempão não achei

13

@Point_Distribuidora tudo bem? Creio que sua dificuldade possa ser quanto ao id da forma de pagto. O script é o que está nesse post:

Porém onde está #pagamento26 no meu caso eu mudei para #pagamento18.
Veja se assim consegue.

image

1 curtida
14

Consegui muito obrigado pela dicas, só não consegui ainda colocar a logo do pix no rodapé nos selos de forma de pagamento ainda. Tem alguma dica ou código eu uso o mercado pago redirect so achei um código mais na minha não funcionou

15

Seria esse post aqui:

vc vai encontrar um script semelhante a esse do print abaixo: (não sei porque eu ainda não aprendi a colar um código aqui no texto, deve ter algum segredo ou permissão que não peguei ainda rsrss)

image
image1122×327 14.9 KB

16

Falta o resto do código … coloca ele no bloco de notas e tira print (se não conseguir copiar e colar aqui)