Checkout Lite Opencart - One Checkout Conversion

Checkout exclusivo feito pela Codemarket, o Checkout Lite Opencart - One Checkout Conversion vai ajudar a sua loja a ter ainda mais vendas e melhorar sua conversão e vendas.

Pensamos por meses em recursos essenciais para o Opencart e um deles foi um Checkout inovador com foco em conversão e ótimo desempenho.

Sabemos da complexidade, investimento e tempo para criar um bom Checkout, por isso foi um projeto de longo prazo, vários clientes desejsavam um novo Checkout inovador e perguntavam qual Checkout usavamos em nosso Marketplace, por isso resolvemos trabalhar por meses nesse projeto, foi feito uma versão anterior de base e refeita para criar o Checkout Lite Opencart, após meses de desenvolvimento e dedicação, criamos um Checkout usando tecnologias modernas e compatível com o Opencart 3, mantendo o mesmo padrão do Checkout nativo, porém agora no modo conhecido como One Checkout, no qual as etapas são exibidas para o cliente em uma página de forma responsiva e usando tecnologias modernas para uma melhor interação e desempenho.
 

Gif animado trocando o Frete e escolhendo o Pagamento

 

Conheça também o Checkout Pro, mesma base do Lite, mas com alguns recursos extras como o Completar Cep e Validar CPF/CNPJ: Checkout Pro Opencart - One Checkout Conversion
O Checkout Pro é a versão mais recomendada, tendo melhor custo benefício e melhor valor de retorno.

O que faz​

• Checkout especial exclusivo da Codemarket
• One Page Checkout/ One Checkout, em resumo, tela do Checkout mostrando todas as etapas desda parte dos endereços até a parte de confirmar o pedido
• Ativar Tema do Checkout, com isso pega mesmo em tema fora do padrão com CSS e JS próprios do Checkout usando Header e Footer próprios do Checkout
• Com o Tema ativo do Checkout pode definir o conteúdo do Header (cabeçalho) ao lado esquerdo do topo, o conteúdo abaixo e o conteúdo do Footer (rodapé) pelo Painel
• Pode definir o Conteúdo extra do Checkout, fica acima dos conteúdos, logo abaixo do Header (rodapé) usando principalmente caso não ative o Tema do Checkout
• Máscara para os campos: Telefone/Celular, CPF, CNPJ, CPF/CNPJ, Cep e Data de Nascimento
• Máscaras no Carrinho, Cadastro, Cadastro Checkout, Criar Endereço do Checkout, Editar Conta no Minha Conta e Editar Endereço no Minha Conta
• Pode informar o Cupom de Desconto dentro do Checkout de forma simples e fácil e já atualiza o Preço
• Tela de Login especial, cliente informa o E-mail, se já existir aparece o campo de Senha para ele Logar, se não existir o E-mail cadastrado, então ele vai para o Cadastro e logo depois para o Checkout logado
• Completo contendo: Tela de Login, Cadastro e Checkout com o Endereço de Cobrança, Endereço de Entrega, Formas de Entrega, Formas de Pagamento e Confirmar com o Pagamento
• Pode Adicionar novo Endereço pelo Checkout, abrindo um formulário em Modal
• Etapa Confirmar Pedido com imagem da miniatura dos Produtos e largura completa melhorando a compatibilidade com Pagamentos Transparentes
• O cliente vê facilmente as etapas do Checkout de forma intuitiva e simples
• Ícones em cada etapa do Checkout para facilitar a usabilidade do Checkout e ficar mais bonito visualmente
• Uso do Vue.js principalmente + Jquery para um melhor desempenho e atualizacões em realtime (tempo real)
• Lite, pois ele é leve, moderno e realmente o essencial para um excelente Checkout, servindo de base para a versão do Checkout Pro
• Focado no desempenho e conversão
• Link para Recuperar Senha na etapa de Login do Checkout
• Pode configurar o Redirecionar Checkout Cadastro, se tiver Produto no Carrinho, redireciona o Cadastro para o do Checkout
• Se o cliente fez o Cadastro normal do Opencart ou está sem endereço, abre a tela de Cadastro de Endereço no Checkout
• Aumente suas vendas, com esse Checkout feito exclusivamente pela nossa equipe com mais de 8 anos de experiência em E-commerce e Opencart
• Cadastro nativo do Opencart e completo, já com a parte do endereço e campos extras
• Pode informar se é Apenas Brasil, se marcar Sim, escondemos o País do Endereço de Cadastro, Endereço de Pagamento/Entrega e da Seleção do Endereço, melhorando assim a usabilidade
• Adicionado Campos Extras na Seleção do Endereço de Pagamento e Entrega do Checkout se tiver o campo preenchido, como: CEP, Número, Complemento e Bairro, ficando ainda mais completo e claro para o cliente final qual o endereço escolhido
• O cliente precisa fazer um Cadastro ou Logar, não foi feito para o modo Visitante
• Suporte a Produto sem entrega e Produto com entrega
• Se o Produto for sem entrega, não exibe o endereço de Entrega e os Fretes, ficando menos etapas
• Recurso para verificar o tempo de algumas requisições com Ajax, no qual se chegar o tempo limite configurado no Painel vai aparecer uma mensagem de aviso para o cliente, ex: Se o retorno dos Fretes levar mais que o tempo configurado em segundos, então aparece o aviso, vamos supor que configurou 10, mas o Correios usado em sua loja está instável e já levou mais de 10s e a melhoria não tratou certo o limite, então vai aparecer o aviso para o cliente de Timeout, informando para ele tentar novamente ou entrar em contato, pode alterar na linguagem a mensagem como os outros textos
• Pode Habilitar ou Desabilitar pelo Painel
• Adicionar CSS extra pelo Painel caso queira mudar cores dos títulos, fonte...
• Exibir Breadcrumb (Navegação estrutural) ou esconder
• Modo Debug para testes
• Design pensando na usabilidade e conversão para aumentar a conversão do Checkout
• Responsivo, funciona em diferentes dispositivos, inclusive em Celulares e Computadores
• Fácil de editar os textos do Checkout pela linguagem do Opencart
• Painel Codemarket

Criado exclusivamente por Felipo Antonoff CEO da Codemarket e Victor Henrique Ramos Desenvolvedor Web da Codemarket, profissionais com anos de experiência em E-commerce e Opencart.

Nosso Checkout tem alguns diferenciais, vamos a alguns pontos:
1) Uso do Vue.js, com isso proporciona melhor desempenho e melhor interatividade em tempo real
2) Foco em conversão e simples, fizemos de forma a manter visualmente etapas semelhantes ao Checkout nativo, porém de forma One Page e mais simplificada, aumentando a probabilidade de maior conversão e sem distrair o cliente com recursos que não fazem parte de um Checkout, no qual o foco é realizar a venda de forma intuitiva e simples, poupando o tempo valioso dos clientes e guiando eles de forma clara sem distrações.
3) Foco em Pagamento Transparentes, fizemos a parte do Confirmar Pedido na largura completa assim como o Checkout padrão, garantindo assim o mesmo espaço para os Pagamentos, nada de deixar os Pagamentos Transparentes apertados ou prejudicando sua usabilidade, além de ser mantido o botão do Pagamento, para melhor compatibilidade com bons Pagamentos Transparentes
4) Baseado no Checkout nativo na parte lógica, com isso funciona no geral da mesma forma a listagem dos Fretes, Pagamentos, Confirmar, Login, Cadastro e outros recursos, porém de forma inovadora, mais intuitiva e com tecnologias modernas
5) Anos de muito estudo, meses de desenvolvimento e um alto investimento. Fizemos com calma e muito preparo, diferente de Checkout de temas e muitos outros que são feito sem um preparo técnico ou investimento alto, além de termos testado várias e várias vezes de forma exaustiva e tudo financiado por nossa equipe, custiando assim uma parte do valor final do Checkout

Recomendado o uso do tema padrão, porém funciona com Temas que usam o Bootstrap 3 a maioria dos temas e mantiveram o padrão do Opencart.
O visual é adaptado conforme o CSS do tema, com isso fica a cor do tema basicamente, já que essa versão fica dentro da Loja, mantendo o Header e Footer original.

Caso o tema não use o Bootstrap 3 e não siga o padrão da plataforma, pode também ativar o Tema do Checkout, com ele ativo, o Checkout passa a usar Header e Footer próprios baseados no tema padrão, com isso mesma tema fora do padrão como o Journal, Pavo, Lexus e outros vai funcionar, já que o tema não vai afetar o Checkout com esse modo ativo. Logo se usa o Journal e outros temas citados ative o modo tema do Checkout, não desative ele, pois o Journal por exemplo mexe no CSS, rotas e outros detalhes que vai afetar o funcionamento correto do Checkout, por isso mesmo o serviço de adaptação não é para adaptar visualmente nestes temas fora do padrão e sim fazer funcionar neles usando o modo tema do Checkout e se preciso mais algum ajuste como no Journal em muitos casos temos que editar o xml dele para o mesmo não adicionar nada no endereço do nosso Checkout. A parte de cores e outros detalhes pode editar como desejar no Painel da melhoria e se precisar mudar a estrutura pode mudar diretamente no twig do Checkout, caso deseje um orçamento de tema personalizado ou mudanças para sua identidade visual podemos fazer um orçamento se desejar, em todo caso o modo tema padrão do Checkout já é feito focado na usabilidade e conversão, sendo muito fácil também fazer por CSS pequenas mudanças visuais de cores usando o próprio painel da melhoria.

Testado com os nossos Pagamentos e Formas Entregas, além de funcionar também 100% com as formas de Entregas e Pagamentos nativas ou outras que seguem o padrão correto de desenvolvimento do Opencart.
Arquivos de linguagem igual o Checkout padrão  nos arquivos do módulo para facilitar alterações e mudanças.

Adicionado a partir da versão 1.5 o Cupom no Checkout

Lançamento Oficial
03/08/2021, lançada após mais de 1 ano de homologações em diversas lojas e novos recursos

Atualização
Versão 1.5 Lançamento Oficial - 03/08/2021

• Adicionado o Cupom de Desconto no Checkout, atualizando em tempo real o Preço e avisando caso o Cupom não seja válido
• Recurso do Cupom utiliza o mesmo recurso de Cupom do Carrinho, inclusive a mesma linguagem
• Aumenta a conversão, pois o cliente pode utilizar o Cupom direto no Checkout em tempo real

Atualização recomendada, vários clientes estavam ansiosos por este recurso inédito de Cupom no Checkout

Versão 1.4 - 06/02/2021

• Adicionado campos extras na Seleção do Endereço de Pagamento e Entrega se tiver o campo preenchido, como: CEP, Número, Complemento e Bairro, ficando ainda mais completo e claro para o cliente final
• Adicionado recurso para poder informar se é Apenas Brasil, se marcar Sim, escondemos o País do Endereço de Cadastro, Endereço de Pagamento/Entrega e da Seleção do Endereço, melhorando assim a usabilidade
• Adicionado nova Tab no Painel e novos campos para configurar os novos recursos

Atualização opcional, mas recomendada

Versão 1.3 - 21/01/2021

• Atualizado os JavaScripts e CSS
• Adicionado mensagens de aviso, quando não tem forma de entrega disponível ou forma de pagamento
• Adicionado suporte para produto digital/sem entrega, neste caso fica sem o endereço de entrega e frete
• Adicionado recurso para verificar o limite do tempo de algumas requisições ajax com timeout configurado no Painel em segundos, se chegar no limite aparece um aviso, só vai exibir se uma requisição usando axios atingir o tempo limite, algo muito raro e mais para evitar ficar o carregando para sempre nestes casos
• Alterado alguns nomes de Class e IDs do HTML

Atualização opcional, mas recomendada

Versão 1.2.1 - 07/01/2021

• ID do Endereço de Entrega melhorado, caso não venha na sessão por algum motivo raro o id do endereço de entrega, então usamos o id do endereço de pagamento

Atualização opcional, mas recomendada

Versão 1.2 - 03/10/2020

• Se o cliente está sem endereço, abre a tela para Cadastrar Endereço, normalmente para cliente que usou o Cadastro normal
• Adicionado na tradução o texto para Cadastrar Endereço no título do Modal do Novo Endereço e botão Continuar trocado para Salvar Endereço
• Suporte ao PHP 7.4
• Adicionado redirecionamento para o Cadastro do Checkout se tiver Produtos no Carrinho e tiver marcado no Painel para Redirecionamento

Atualização recomendada, caso deseje usar com o PHP 7.4 ou os novos recursos.
 

• Se tiver sem endereço de entrega na sessão, usamos o do Pagamento e se não tiver usamos o padrão do endereço do cliente
• Removido os @ dos xmls para evitar problema com algumas hospedagens

Atualização recomendada, principalmente se raramente aparece sem selecionar o endereço de entrega no Checkout

Versão 1.1 - 25/07/2020

• Adicionado ícones das etapas na linguagem Inglês igual tem na Português Brasil
• Adicionado o placeholder do E-mail na linguagem Inglês igual tem na Português Brasil
• Placeholder corrigido do e-mail para puxar da linguagem e adicionado para senha placeholder
• Adicionado link para Recuperar Senha na etapa de Login do Checkout
• Melhorado o aviso em caso de erro na senha, usando igual os outros avisos por JS
• Adicionado verificação da linguagem, se for diferente de pt-br, desativa as máscaras, pois em outros países não tem CEP, CPF e etc

Atualização recomendada, feita diversas melhorias ligadas a linguagem inglês, avisos, entre outras melhorias. 

Versão 1.0 - 24/04/2020

• Adicionado textos extras do Checkout para as linguagens
• Adicionado conteúdo extra no Checkout pelo Painel
• Footer (rodapé) removido o produzido por e adicionado conteúdo pelo Painel
• Footer (rodapé) pode desabilitar ou ativar o footer
• Header (cabeçalho) pode adicionar conteúdo pelo Painel
• Header (cabeçalho) pode adicionar conteúdo no topo esquerdo pelo Painel
• Header (cabeçalho) adicionado o menu do topo, deixado só o Minha Conta e Carrinho com o lado esquerdo podendo editar pelo Painel
• Header (cabeçalho) se não informado o conteúdo vai ficar o Logo como antes
• Atualizado o Font Awesome do 5.12.1 para 5.13.0

Versão 0.9.6 - 20/03/2020

• Máscara dos Campos Extras adicionadas também no Cadastro do Checkout e no Criar Endereço do Checkout

Versão 0.9.5 - 14/02/2020

• Adicionado melhoria de máscara para Telefone, Celular, CPF, CNPJ, CEP e Data de Nascimento
• Melhorado a ordem dos campos extras do endereço de Pagamento e Entrega
• Melhorado grupo de usuários e campos extras do Registro, ao escolher o grupo de usuário o campo extra muda
• Adicionado na linguagem os textos de informativos para cada Passo do Checkout, podendo facilmente editar ou tirar eles na linguagem
• Adicionado na linguagem ícones para cada Passo do Checkout ao lado esquerdo dos títulos, podendo facilmente editar na linguagem
• Adicionado no Checkout css para lidar com problema de espaço em branco no Footer quando falta conteúdo na tela e adicionado o JS por CDN do Font Awesome
• Mudado o nome do log para Code-Checkout.log

Recomendado a atualização por todos os clientes para melhorar no geral o Checkout.
Atualização gratuita para todos, devido ser um produto ainda em homologação para o lançamento Oficial, em breve versão final 1.0, se não tiver novas mudanças está pode virar a 1.0.

Versão 0.9.4 - 30/01/2020

• Diversas melhorias em geral, principalmente relacionada a entrega
• Melhoria na formatação
• Adicionado mais logs
• Modificado o nome para Checkout Lite e iniciado o Checkout Pro

Recomendado a atualização por todos os clientes para melhorar no geral o Checkout.
Atualização gratuita para todos, devido ser um produto ainda em homologação para o lançamento Oficial, em breve versão final 1.0.

Compatibilidade
Opencart 3 até 3.0.3.2
Painel Codemarket
Tema padrão de preferência, mas funciona em qualquer tema se ativo o Tema do Checkout
Sistemas de Fretes, Descontos e Pagamentos feitos de forma correta, em geral a maioria dos feito com qualidade e os nativos
Ideal boa Hospedagem Cloud como a Infinite, pois One Checkout precisa fazer várias etapas do Checkout de uma vez, evitar hospedagem compartilhada caso deseje um melhor desempenho
Preferência PHP 7.0.x ou mais atual, se for Opencart 3 recomendado o PHP 7.4, assim tem melhor desempenho e melhor compatibilidade com novos produtos

Hospedagem recomendada
Recomendamos a Hospedagem Infinite
Pode escolher entre usar a Amazon AWS, Digital Ocean ou Google, tem planos a partir de  60 reais com recursos isolados como a memória ram.
São Cloud gerenciados de qualidade, muito superior a qualquer hospedagem compartilhada, resultando em um desempenho melhor na loja e com isso uma melhora no SEO e conversão das vendas