Opencart One Page Checkout – User Manual

1.0 Introdução

A maioria dos visitantes sai do checkout do produto desejado apenas porque acha o processo complexo e demorado para ser concluído. Em última análise, isso leva a um número cada vez maior de carrinhos abandonados. Para controlar as taxas de saída e abandono de carrinho, a Knowband oferece�OpenCart One Page Checkout Pro plugin para lojas OpenCart. Além disso, ao implementar o Check-out de uma página para o seu site de comércio eletrônico, você pode melhorar as taxas de conversão, pois substitui a página de check-out em várias etapas por um check-out de página única.

Exibição móvel:

Recursos importantes da extensão OpenCart One Page Checkout:

1. A extensão oferece a funcionalidade de checkout de convidado, pela qual os usuários podem concluir seus pedidos de maneira fácil e rápida como clientes convidados, sem criar uma nova conta na loja online.
2. A extensão OpenCart Fast Checkout permite que os clientes façam login rapidamente no site usando suas contas do Google, Facebook e Paypal.
3. Os campos na página de checkout podem ser facilmente personalizados pelo administrador a partir do back-end da extensão OpenCart One Page Checkout Pro. O administrador da loja pode mostrar ou ocultar qualquer um dos campos da página de checkout ou torná-los opcionais ou obrigatórios para os usuários preencherem. O administrador também pode reorganizar os campos de posição com a funcionalidade de arrastar e soltar.
4. O proprietário da loja pode personalizar facilmente a aparência da página de checkout, incluindo a alteração da cor dos botões, cor do fundo do botão, cor do texto, etc.
5. O OpenCart One Page Supercheckout oferece compatibilidade com várias lojas e vários idiomas.
6. A extensão OpenCart One Step Checkout suporta quase todos os principais métodos de envio e pagamento que aumentam a confiança dos clientes para escolher o método desejado na página de checkout.
7. O e-comerciante pode aplicar qualquer um dos layouts de design de 3 layouts de caixa diferentes, ou seja, 1 coluna, 2 colunas ou 3 colunas. Os campos podem ser facilmente reorganizados arrastando e soltando.
8. O módulo OpenCart Quick Checkout oferece integração com MailChimp, Klaviyo e SendinBlue que permite sincronizar o banco de dados de seus usuários automaticamente com essas suas contas sem nenhum esforço manual.
9. O e-comerciante também pode personalizar a aparência da extensão por meio de CSS e JS personalizados.
10. O módulo OpenCart Responsive One Step Checkout oferece o recurso de modo de teste pelo qual o proprietário da loja pode verificar e visualizar as personalizações feitas antes de torná-las ativas no site.
11. O módulo Checkout Simplificado OpenCart oferece o recurso Ship2Pay pelo qual o proprietário da loja pode mapear métodos de pagamento específicos com métodos de entrega selecionados. Ele oculta todos os outros métodos de pagamento ao selecionar um método de entrega específico e mostra apenas os métodos de pagamento mapeados para o método de entrega selecionado para o usuário.

2.0�Guia de instalação de�Extensão OpenCart One Page Checkout

Antes de iniciar o processo de instalação, você deve comprar o�Extensão OpenCart One Page Checkout da loja Knowband. Após a compra, você receberá os seguintes arquivos em seu e-mail cadastrado.

• Código-fonte do OpenCart One Page Checkout Extension em formato de arquivo compactado.
• Manual do usuário da extensão OpenCart One Page Checkout.

Agora, para instalar este OpenCart Single Page Checkout em sua loja online, siga os passos indicados: 1. Descompacte o arquivo zip. Você obterá as pastas como mostrado na imagem abaixo

2. Copie todas as pastas do arquivo zip no diretório raiz da configuração do OpenCart via gerenciador de FTP.

• Após descompactar a pasta, você encontrará um arquivo� supercheckout_pro.ocmod.xml conforme imagem abaixo:

• Agora, no painel de administração, clique em Extensões no menu do lado esquerdo. Em seguida, clique em Instalador de extensão (�Início->extensão).

• Agora, carregue o supercheckout_pro.ocmod.xml. Uma mensagem de sucesso é exibida assim que o arquivo é carregado.

• Após o upload do arquivo, vá para��Home->Modificação

• Você encontrará um arquivo com o nome Supercheckout Pro v2.8 (isso significa que seu ocmod foi instalado com sucesso). Clique no ícone “+” correspondente para ativá-lo. O ícone verde se transforma em vermelho, conforme mostrado abaixo.

• Por fim, clique no botão atualizar (obrigatório).

Então,�OpenCart One Page Checkout Pro agora foi instalado com sucesso e está pronto para ser usado em sua loja. Vá para o menu admin e clique em Extensões e depois em Módulos. Clique no botão Configurar ao lado de�Supercheckout da banda de conhecimento.

Interface de administração 3.0 de�Módulo de checkout de uma etapa responsivo do OpenCart

Logo após a instalação bem-sucedida do site One Page Checkout for OpenCart, você pode configurar os campos do formulário de checkout de acordo com seus requisitos. Você tem que navegar pelas configurações na ordem dada: Painel de Administrador > Extensões > Módulos >�Knowband Supercheckout

A interface de administração fácil de entender do�OpenCart One Page Checkout Pro está dividido em dez seções, a saber: 1. Configurações gerais 2. Personalizador 3. Configurações de login 4. Endereço de pagamento 5. Endereço de entrega 6. Método de envio 7. Ship2Pay 8. Método de pagamento 9. Carrinho 10. Design 11. Newsletter Cada uma dessas seções foi discutido abaixo:

Configurações gerais do 3.1

• Habilitar desabilitar: Usando esta opção, você pode habilitar ou desabilitar toda a funcionalidade do�OpenCart One Page Checkout Pro�plugin de OFF para ON.
• Ativar opção de boletim informativo: Você pode habilitar ou desabilitar a opção Newsletter na página do Supercheckout. Depois de ativar este botão, os seguintes casos serão os seguintes: a.) A opção Newsletter ficará visível para clientes de check-out de convidados, somente se você tiver ativado a opção Registrar convidado automaticamente. b.) A opção Newsletter estará sempre visível para os clientes se eles estiverem criando uma nova conta. c.) A opção Newsletter nunca estará visível para clientes logados.
• Registrar Convidado Automaticamente: Você pode ativar esta opção para registrar automaticamente os clientes convidados em sua loja. Ao habilitar esta opção, você pode cadastrar seus clientes na loja e enviar a eles uma senha gerada em seu e-mail.
• Registar Conta: Ao habilitar este campo, você pode mostrar um campo de senha na página do supercheckout para que os novos usuários possam definir facilmente a senha desejada para sua conta.
• Selecione a opção padrão na finalização da compra: Com esta opção, você pode definir uma opção padrão na seção de login do seu OpenCart�Supercheckout de uma página�página fora das opções como Convidado, Login e Registro.
• Desabilitar Convidado: Você pode ativar ou desativar a funcionalidade de convidado para os usuários na seção de login do One Page Checkout.
• Adicionar estilo personalizado:�Com esta opção, você pode adicionar ou incluir estilo personalizado na página do Supercheckout. Para aplicar algum CSS personalizado na página do Supercheckout, você pode escrever esse CSS na caixa de texto à direita do rótulo Adicionar estilo personalizado. Por exemplo: Você pode alterar a cor dos botões na página do Supercheckout.
• Adicionar valor mínimo para mostrar o banner de frete grátis: Nessa guia, o administrador pode adicionar um valor mínimo necessário, após o qual os clientes serão elegíveis para obter frete grátis de seus pedidos.
  
• Ativar detecção automática de país: Depois de habilitar esse recurso, o ramal detectará e preencherá o país do usuário automaticamente na seção de país.
  
• Validação em linha: Com esse recurso, a extensão exibe um erro toda vez que o usuário deixa de preencher um campo obrigatório na página de checkout.
  
• Ative o endereço automático do Google para preencher: Assim que o usuário começa a digitar seu endereço, o ramal sugere seu endereço se esse recurso estiver ativado.
  
• Ativar ou desativar novo modelo: Com a extensão OpenCart One Page Checkout, o proprietário da loja pode aplicar o modelo de checkout novo ou antigo conforme desejar nas configurações gerais.
• Modo de teste:�Esta opção ajuda você a ativar ou desativar a funcionalidade do modo de teste�Extensão OpenCart One Page Checkout.
• URL de teste:�Depois de ativar o modo de teste, você pode definir um URL de supercheckout onde pode testar a funcionalidade de checkout de uma página.

Customizer

Na guia Personalizador, você pode personalizar a cor de fundo do botão, a cor da borda do botão, a visualização do botão, a cor do texto do botão, a cor inferior da borda do botão, a cor de fundo do botão Minha conta, a cor de fundo do botão de login, a cor de fundo do botão de login, a cor de fundo do botão de logout, o cupom Cor de fundo do botão de código, Cor de fundo do botão de código de comprovante, etc.

• Cor de fundo da barra de frete grátis: Esta seção permite que você altere a cor de fundo da barra de frete grátis na página de checkout.
• CSS e JS personalizados: Esta seção permite personalizar a aparência da página de checkout com CSS e JS personalizados.

Login 3.2

Nesta guia, você encontrará opções para configurar as opções de login do Facebook, Google e Paypal, conforme mostrado abaixo.

• Ativar login no Facebook: Com esta opção, você pode ativar/desativar a opção de login do Facebook no One Page Checkout.
• ID do aplicativo do Facebook: Esta opção permite definir o ID do aplicativo do Facebook, que pode ser gerado usando a conta do desenvolvedor do Facebook.
• Segredo do aplicativo do Facebook: Usando esta opção, defina a chave secreta gerada usando a conta do desenvolvedor do Facebook.
• Ativar login do Google:�Com esta opção, você pode ativar/desativar a opção Google Login no One Page Checkout.
• ID do aplicativo do Google:�Esta opção permite definir o ID do GoogleApp.
• O ID do cliente Google:�Este campo permite definir o ID do cliente do Google criado no console do Google.
• Segredo do Google App:� Usando esta opção, você pode definir a chave secreta do aplicativo gerada usando o console do Google.
• Ativar login do Paypal: Com esta opção, você pode permitir que seus clientes façam login por meio de suas contas Paypal.
• ID do cliente Paypal: Esta opção permite adicionar seu ID de cliente Paypal.
• Segredo do cliente Paypal: Esta opção permite adicionar seu ID secreto do cliente Paypal.

Para obter instruções detalhadas para gerar App ID, App Secret Key e Client ID, pule para a próxima seção.

3.2.1 Como configurar o login do Facebook?

O aplicativo do Facebook pode ser criado pelas etapas abaixo mencionadas: –

1:�Vá para o URL fornecido�: https://developers.facebook.com/apps/

2:�Clique no botão “Criar aplicativo”.

3 e 4: Selecione os “Criar experiências conectadas” opção e clique no botão ‘Continuar’.

5 e 6: Adicione “Nome de exibição do aplicativo”, “E-mail de contato do aplicativo” e escolha “Você tem uma conta do Gerenciador de Negócios?” e, em seguida, clique no botão “Criar aplicativo”.

7 e 8: Após clicar em Criar ID de aplicativo, você terá que passar por uma verificação de segurança, conforme mostrado:

9:Clique na guia “Configuração”.

Amavelmente adicionar excluir URL de retorno de chamada. Você pode verificar a descrição do URL de retorno de chamada aqui -�https://developers.facebook.com/docs/development/create-an-app/app-dashboard/data-deletion-callback/

10-15: Duas opções estarão disponíveis no menu suspenso, Básico e Avançado, clique em “Básico”. Em seguida, insira seu “Domínio do aplicativo”, “URL de privacidade”, “URL dos termos de serviço”, “Adicionar ícone”, “Selecionar categoria” e clique no botão “Salvar alterações”.

Domínios do aplicativo:

seudominio.com é correta

seudominio.com/store is incorreto

www.domain.com é incorreto

16:�Agora clique em “+Adicionar plataforma”.

17:�E selecione Site como Plataforma.

18 e 19: Agora digite o URL do seu site.

20&21:�Clique em “Produtos +” e clique no botão Configuração na guia de login do Facebook.

22:�Selecione a web como plataforma para o aplicativo.

23: Adicione o URL do site e clique em salvar.

24-26:�Clique em Configurações e adicione URIs de redirecionamento OAuth válidos.

URIs de redirecionamento OAuth válidos:

https://your_store_url/index.php?route=kbstepcheckout/kbstepcheckout&fblogin=1

27: Selecione os “Em desenvolvimento” opção.

28 e 29: Escolha uma categoria no menu suspenso e clique no botão “Alternar modo”.

30:�Copie o App ID e o App Secret e cole-os nos campos fornecidos no módulo.

Etapa final:

1. Faça login com o JavaScript SDK.

Defina este campo como Sim.

2. Domínios permitidos para o JavaScript SDK

Defina o domínio da loja.

Nota:- aqui o domínio deve ser inserido no tipo abaixo.

https://octest.knowband.com

3.2.2 Como configurar o Login do Google?

Siga as etapas abaixo para obter o ID do cliente e o segredo do cliente. 1. Acesse o link “ https://console.developers.google.com/project “. 2. Clique em “Criar um projeto”.

3. Insira o nome do projeto e o nome da organização desejados e clique em “Criar”.

4. Vá para API Manager, clique no menu à esquerda, clique em API & Services e, em seguida, clique em Create Credentials.

5. Selecione a opção ID do cliente OAuth.

6. Clique no botão “Configurar tela de consentimento”. Digite “ID de e-mail”, “Nome do produto” e clique no botão “Salvar”.

7. Selecione a opção Externa, clique no botão “Criar”,

Use o seguinte URL de redirecionamento https://your_store_url/index.php?route=supercheckout/supercheckout 8. Adicione o nome do aplicativo e o e-mail de suporte ao usuário.

9. Clique em Add Domain e adicione Authorized Domain e então clique em Save and Continue.

10. Clique no botão Salvar e continuar.

Clique em +Adicionar usuários.

11. Adicione um nome de usuário e clique no botão Adicionar.

12. O usuário adicionado ficará visível e, em seguida, clique no botão Salvar e continuar.

13. Clique na tela de conteúdo Juramento e, em seguida, clique no botão Publicar Adicionar.

14. Clique em Credentials e, em seguida, no botão +Create Credentials e selecione Oath Client ID.

15. Adicione o tipo e o nome do aplicativo e clique no botão Adicionar.

16. Adicione os URLs e clique no botão Criar.

17. Copie e cole a ID do cliente e o segredo do cliente no campo de texto mostrado abaixo no módulo de checkout de uma página do Prestashop

Como gerar a chave de API do Google:

1) Vá para API Manager, clique no menu à esquerda, clique em API & Services e, em seguida, clique em Credentials.

2) Clique em Criar credenciais e selecione a chave API.

3) Copie a chave API e insira-a no campo Google App Id da página de login do módulo admin end.

3.3 Endereço de Pagamento

Esta guia contém configurações para os campos que devem ser mostrados na seção Endereço de Pagamento ou Cobrança na página de checkout, conforme mostrado abaixo.

1. É composto por duas seções. O da esquerda é para Clientes Convidados e o da direita para clientes logados.
2. Para exibir/ocultar um campo na página de checkout, marque a caixa de seleção à esquerda do rótulo Mostrar.
3. Para tornar um campo obrigatório (campo obrigatório), marque a caixa de seleção à esquerda de Exigir rótulo.
4. Os campos também podem ser reorganizados de acordo com a necessidade. Para reorganizar, basta mover o cursor para o ícone de arrastar e arrastar e soltar o campo onde for necessário, conforme mostrado abaixo.
5. Ao salvar, os campos serão reorganizados de acordo com as alterações.

3.4 Endereço de entrega

Esta guia contém configurações para os campos que devem ser mostrados na seção Endereço de entrega na página de checkout, conforme mostrado abaixo.

1. É composto por duas seções. O da esquerda é para Clientes Convidados e o da direita para clientes registados.
2. Para exibir/ocultar um campo na página de checkout, marque a caixa de seleção à esquerda do rótulo Mostrar.
3. Para tornar um campo obrigatório (campo obrigatório), marque a caixa de seleção à esquerda de Exigir rótulo.
4. Os campos também podem ser reorganizados de acordo com a necessidade. Para reorganizar, basta mover o cursor para o ícone de arrastar e arrastar e soltar o campo onde for necessário, conforme mostrado abaixo.
5. Ao salvar, os campos serão reorganizados de acordo com as alterações.

3.5 Método de Envio

Esta guia contém configurações para o método de envio que é mostrado na página de checkout. Ele contém configurações para ativar/desativar e definir o método de envio padrão, conforme mostrado abaixo:

• Exibir métodos de envio: Por esta opção, você pode mostrar/ocultar os métodos de envio na página de checkout. Para isso, você deve alternar o botão de ON para OFF ou vice-versa.
• Estilo de exibição: Esta opção permite que você selecione o estilo de exibição para os métodos de envio que você adicionou ao seu site. Você pode escolher qualquer estilo entre três opções como Somente texto, Somente imagem ou Texto com imagens.
• Exibir título do método de envio: Com esta opção, você pode ativar ou desativar o título dos métodos de envio exibidos na página de checkout.
• Selecione um método de envio padrão: Esta opção ajuda você a selecionar qualquer método como o método de envio padrão para sua loja.
• Função:
  Com esta opção, você pode definir títulos correspondentes a cada um dos métodos de envio adicionados e configurados para sua loja. Você pode definir o título em inglês ou francês.
• Logo: Esta opção permite definir o logótipo pretendido correspondente a cada um dos métodos de envio configurados para a sua loja.

3.6 Ship2Pay

O recurso ship2pay oferecido pelo módulo OpenCart Supercheckout desativa automaticamente os métodos de pagamento com base no método de envio selecionado pelo cliente. Ou seja, o administrador pode mapear algumas opções de pagamento específicas com algumas opções de envio específicas na loja.

Método de pagamento 3.7

Esta guia contém configurações para métodos de pagamento mostrados na página de checkout, como ativar/desativar ou selecionar um método padrão.

• Exibir métodos de pagamento:�Por esta opção, você pode mostrar/ocultar os métodos de pagamento na página de checkout. Para isso, você deve alternar o botão de ON para OFF ou vice-versa.
• Estilo de exibição:�Essa opção permite que você selecione o estilo de exibição para os métodos de pagamento que você adicionou ao seu site. Você pode escolher qualquer estilo entre três opções como Somente texto, Somente imagem ou Texto com imagens.
• Selecione um método de pagamento padrão:�Essa opção ajuda você a selecionar qualquer método como método de pagamento padrão para sua loja.
• Função:
  �Com esta opção, você pode definir títulos correspondentes a cada um dos métodos de pagamento adicionados e configurados para sua loja. Você pode definir o título em inglês ou francês.
• Logo:�Esta opção permite definir o logótipo pretendido�correspondente a cada um dos meios de pagamento configurados para a sua loja.

3.8 Carrinho

Nesta seção, você encontrará os campos do carrinho divididos em duas seções, a esquerda é para clientes convidados e a direita é para clientes registrados ou logados.

1. Para exibir/ocultar o carrinho da página de checkout, desmarque a caixa de seleção presente na frente da etiqueta Exibir carrinho.
2. Para ativar/desativar qualquer coluna no carrinho, marque/desmarque a caixa de seleção na frente da respectiva coluna.
3. Para ativar/desativar as imagens pop-up para o produto, marque/desmarque a caixa de seleção na frente da respectiva coluna.
4. Para alterar o tamanho do pop-up da imagem, insira a largura e a altura do pop-up na caixa de texto na frente do rótulo Tamanho da imagem do produto.
5. As opções de cupom, pontos de recompensa e voucher também podem ser desativadas ou ativadas marcando/desmarcando a caixa de seleção na frente do respectivo campo. Observe que a caixa de texto do ponto de recompensa só ficará visível na página do Supercheckout depois que as três condições a seguir forem atendidas. a.) O cliente deve estar logado. b.) Ele deve ter pelo menos 1 ponto de recompensa em sua conta. c.) Ele deve ter um produto no carrinho que pode ser adquirido com pontos de recompensa.

Confirme:

1. Esta guia é novamente dividida em duas seções, a esquerda é para clientes convidados e a direita para clientes registrados ou logados.
2. Para habilitar a caixa de comentário para o pedido do cliente, marque a caixa de seleção na frente de Deixe um comentário para a etiqueta do pedido e para desativar, desmarque a mesma caixa de seleção.
3. Para permitir concordar com o termo ou qualquer outra informação salva no admin da loja, marque/desmarque a caixa de seleção na frente de Concordo com o rótulo de condições.

3.9 Aba Projeto

Esta guia contém as configurações para o design de�OpenCart One Page Checkout Pro conforme mostrado abaixo:

1 colunas

2 colunas

3 colunas

Você pode alterar facilmente a largura de qualquer coluna, ajustando o controle deslizante presente na parte superior, conforme mostrado abaixo.

 

Além disso, você pode reposicionar diferentes blocos da página de checkout usando uma simples ação de arrastar e soltar. Ao salvar, o bloco será reorganizado na página de checkout de acordo com as alterações.

Boletim 3.10

Ao clicar na guia Newsletter do�Módulo de checkout de uma etapa responsivo do OpenCart, você pode definir as configurações do MailChimp, SendinBlue e Klaviyo Integrator conforme mostrado abaixo:

• Habilitar MailChimp: Você pode habilitar ou desabilitar a funcionalidade do MailChimp Integrator para sua loja. Você pode habilitar esta opção se quiser aumentar as assinaturas de newsletter para sua loja.
• Chave da API do MailChimp: Esta opção ajuda você a definir a chave de API do Mailchimp para capturar os e-mails do cliente.
• Lista MailChimp: Assim que a chave estiver configurada com isto�Extensão de checkout rápido do OpenCart, você pode buscar e selecionar a lista MailChimp.

O mesmo pode ser feito para SendinBlue e Klaviyo.

4.0 Interface frontal de�Extensão de pagamento em uma etapa do OpenCart

Quando o usuário clicar no botão “Adicionar ao Carrinho” correspondente a um produto e realizar o seu checkout, ele visualizará em sua tela o seguinte supercheckout.

Extensão OpenCart One Page Checkout: https://www.knowband.com/opencart-one-supercheckout-pro

Demonstração do administrador de checkout de uma página do OpenCart: https://opencartdemo.knowband.com/demo/index.php?module=oc_onepagecheckout_knowband&demo=admin&lang=en

Demonstração frontal do checkout de uma página do OpenCart: https://opencartdemo.knowband.com/demo/index.php?module=oc_onepagecheckout_knowband&demo=front&lang=en

OpenCart One Page Checkout do OpenCart Marketplace oficial: https://www.opencart.com/index.php?route=marketplace/extension/info&extension_id=15353