Loader para campos de cartão e finalização
Closed this issue · 7 comments
Uma solução interessante para contornar um problema que muitos estão tendo com o módulo no carregamento e alteração de cada passo seria deixar o passo seguinte desabilitado ou opaco e impossibilitando o cliente preencher até carregar o JS. Por exemplo, se o cliente seleciona a forma de envio e já seleciona em seguida a forma de pagamento, a mesma é carregada novamente e o cliente passa a não entender o que houve. Se o box da forma de pagamento ficasse opaco com um ícone de carregando o cliente esperaria alguns segundos para escolher e já escolheria a forma de pagamento final. O mesmo acontece com o botão finalizar compra, se o cliente escolhe boleto e já vai clicar no botão finalizar compra, o botão estará desativado até carregar o script, mas não tem nenhum aviso de carregando para ele esperar.
este recurso já vem com o osc, porém por um esquecimento de código css, o loader nao aparecia em cima dos campos que estavam sendo atualizados. Esta aí a solução pra tu amigao.
adicione esta linha no fim do arquivo skin\frontend\rwd\default\onestepcheckout\css\onestepcheckout.css
.onestepcheckout-overlay {
position: absolute;
height: 100%;
width: 100%;
background-color: #fff;
z-index: 999;
}
espero ter ajudado, abraço
Muito obrigado @rovae já testei e funcionou perfeito! Com certeza vai ajudar muita gente que utiliza o módulo.
Só mais uma dúvida, seria legal se o carregamento aparecesse sobre o botão de finalizar compra assim como aparece nos box de pagamento e resumo da compra. Com isto evitaríamos do cliente tentar por uma lentidão no servidor clicar no botão de finalizar mesmo sem carregar os scripts, acarretando erro na finalização.
E novamente muito obrigado pela ajuda!
por padrão o botão de finalizar pedido fica desabilitado enquanto esta carregando, vi que vc editou o botão, você tem que manter o #id e as classes do original. ele tem que inserir a classe "onestepcheckout-place-order-button-disabled" e a propriedade disabled no botao enquanto estiver carregando.
Ele permanece desabilitado mesmo com as alterações. Quanto a isto não deu erro, o problema é o cliente ficar clicando nele enquanto carrega e achar que está com erro por estar desabilitado. Por isso imaginei que para usabilidade do cliente seria interessante se o botão também ficasse carregando até ser clicável.
ta na mão.
adicione estas linhas no arquivo onestepcheckout.css
.onestepcheckout-place-order-button-disabled {
background-image: url('../images/ajax-loader-checkout.gif') !important;background-repeat: no-repeat !important;background-position: center center !important;
}
.onestepcheckout-place-order-button-disabled .onestepcheckout-place-order-title {
visibility: hidden;
}
como o ajax-loader que vem com o módulo tem fundo branco, vou anexar um que eu gerei aqui com fundo transparente pra dar um visual mais elegante. coloque o loader na pasta de imagens do onestepcheckout
Muito obrigado @rovae funcionou perfeitamente.