Menu Flutuante no Checkout

Layout
1

Boa tarde comunidade! Tudo certo?
Analisei uma questão que pode ser de muita importância para todos aqui!
Possuo tema do qual o menu flutuante se mantém acima do teclado virtual (mobile) o que diminui e muito o espaço visual na hora do cliente conferir ou digitar os dados no Carrinho e Checkout, e isso dificulta muito a compra. Para nós que estamos acostumados com nossos sites/layouts e tecnologia, ok! Mas trabalhamos para usuários que cada vez mais pedem por praticidade e agilidade. O que acham?

Eu tentei acertar o código e manter o menu escondido abaixo do teclado virtual, mas não consegui!
Se alguém por favor conseguir me dar essa força e contribuir para a comunidade, serei grato.

Valeu

ajuste
ajuste1495×1282 193 KB

1 curtida
2

Fala @LucasLeite boa tarde!

Sua observação faz muito sentido.

Percebi isso também nesse tema que inclusive uso também.
Esse é um ponto muito sensível temos que pensar em todos os detalhes para facilitar o cliente comprar, eu conseguir reduzir um pouco esse espaço, mas se tiver alguém que consiga ocultar quando o teclado estiver ativo seria uma boa alternativa.

3 curtidas
3

Cara, bem colocado, nunca havia pensado com esse olhar crítico.
Talvez isso resolva o seu caso. Infelizmente não tenho um celular em mãos para ter certeza de funcionamento, peço que valide e me avise.

$(window).resize(()=>{
    if(( window.innerHeight/screen.availHeight)*100 < 60)
    {
       $('.barra-mobile').css({display:"none"})
       return
    }
    $('.barra-mobile').css({display:"fixed"})
})
2 curtidas
4

tem que testar, nao sei se funciona,

@media (max-height: 700px) {
    .barra-mobile {
        display:none;
    }
}

ou

@media only screen and (max-height: 700px) {
    .barra-mobile {
        display:none;
    }
}

fonte: Responsive Height Design - Ahmad Shadeed

2 curtidas
5

Fala Yuri, beleza? Cara, a página de checkout e carrinho são bem sensíveis, não pode ter nada que gere objeção no cliente, este campo fica muito pequeno, principalmente na hora da digitação dos dados do cartão! O código do Teus_G abaixo, é justamente até onde consegui, ele desativa o menu quando o teclado é ativo, mas depois ele não volta o menu! Mas já ajuda muito!

Depois faz um teste no seu site.

Valeu

1 curtida
6

Fala Teus, beleza? Cara muito obrigado pelo código, cheguei nesse ponto também, mas como falei ali para o Yuri, o código faltou pouco para ser perfeito, ao finalizar a digitação e com o teclado virtual desativado, o menu não retorna, mas já ajuda bastante.

Valeuuu

1 curtida
7

Fala Leonardo, tudo certo? Muito obrigado!
Este código ele desativa o menu, o bacana seria “ocultar o menu” ao ativar o teclado!
Pois mesmo o menu sendo um “local de saída” do Checkout, ele é importante pois tem botões como o de contato direto para WhatsApp/chat para caso o cliente tenha dúvidas e outros, que acho não ser interessante esconder de vez!

Mas muito obrigado!

1 curtida
8

teoricamente ele desativa de acordo com a resolução da altura, exemplo.
mas não sei se o navegador ativa com o evento de mostrar caixa preenchimento.

image
image1212×901 146 KB

image
image1405×502 110 KB

1 curtida
9

Beleza e ai?
Sim, no meu mais ainda pois na página do produto tenho campos de personalização, tinha percebido isso mas o que eu fiz foi só diminuir mesmo rsr.

Vamos tentar achar essa solução, vai ser bom para vários lojistas.

10

Então, ontem pensei um pouco a respeito e acredito que teria que duplicar a condição. No caso está executando para =>, acredito que colocando <= (habilitando/desabilitando a div), resolva o problema.

Creio também que dê para tentar com o “display: hidden/visible”, talvez seja aí que more o problema.