Opencart One Page Checkout – User Manual

1.0 Introdução

A maioria dos visitantes abandona o carrinho de compras simplesmente porque considera o processo complexo e demorado. Isso acaba resultando em um número cada vez maior de carrinhos abandonados. Para controlar as taxas de abandono de carrinho, a Knowband oferece… OpenCart One Page Checkout Pro Plugin para lojas OpenCart. Além disso, ao implementar o One Page Checkout em seu site de e-commerce, você pode melhorar as taxas de conversão, pois ele substitui a página de finalização de compra com várias etapas por uma finalização de compra em uma única página.

Exibição móvel:

Principais funcionalidades da extensão OpenCart One Page Checkout:

1. A extensão oferece a funcionalidade de finalização de compra como visitante, permitindo que os usuários concluam seus pedidos de forma fácil e rápida como clientes visitantes, sem precisar 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 da página de finalização da compra podem ser facilmente personalizados pelo administrador no painel administrativo da extensão OpenCart One Page Checkout Pro. O administrador da loja pode exibir ou ocultar qualquer um dos campos da página de finalização da compra, ou torná-los opcionais ou obrigatórios para os usuários. O administrador também pode reorganizar a posição dos campos com a funcionalidade de arrastar e soltar.
4. O proprietário da loja pode personalizar facilmente a aparência da página de finalização da compra, incluindo a alteração da cor dos botões, da cor de fundo dos botões, da cor do texto, etc.
5. O Supercheckout de uma página do OpenCart oferece compatibilidade com várias lojas e vários idiomas.
6. A extensão OpenCart One Step Checkout é compatível com praticamente todos os principais métodos de envio e pagamento, aumentando a confiança dos clientes na escolha do método desejado na página de finalização da compra.
7. O lojista online pode aplicar qualquer um dos layouts de design entre 3 opções diferentes de finalização de compra: 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, permitindo que você sincronize automaticamente o banco de dados de seus usuários com essas contas, sem qualquer esforço manual.
9. O lojista eletrônico 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, por meio do qual o proprietário da loja pode verificar e visualizar as personalizações feitas antes de publicá-las no site.
11. O módulo OpenCart Simplified Checkout oferece o recurso Ship2Pay, por meio do qual o proprietário da loja pode associar métodos de pagamento específicos a métodos de entrega selecionados. Ao selecionar um método de entrega específico, todos os outros métodos de pagamento são ocultados, exibindo ao usuário apenas aqueles associados a esse método.

Guia de Instalação 2.0 Extensão OpenCart One Page Checkout

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

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

Para instalar este Checkout de Página Única do OpenCart em sua loja online, siga os passos abaixo: 1. Descompacte o arquivo zip. Você encontrará as pastas conforme mostrado na imagem abaixo.

2. Copie todas as pastas do arquivo zip para o diretório raiz da instalação do OpenCart usando um gerenciador de FTP.

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

• Agora, no painel de administração, clique em Extensões no menu lateral esquerdo. Em seguida, clique em Instalador de extensões ( Página inicial -> extensão).

• Agora, faça o upload do arquivo supercheckout_pro.ocmod.xml. Uma mensagem de sucesso será exibida assim que o arquivo for carregado.

• Após o upload do arquivo, acesse  Página inicial -> 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 ficará vermelho, como mostrado abaixo.

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

então, OpenCart One Page Checkout Pro A instalação foi concluída com sucesso e o módulo está pronto para uso em sua loja. Acesse o menu de administração, clique em Extensões e, em seguida, em Módulos. Clique no botão Configurar ao lado de Supercheckout da Knowband.

3.0 Interface de administração de Módulo de finalização de compra responsivo em uma única etapa para OpenCart

Logo após a instalação bem-sucedida do One Page Checkout para o seu site OpenCart, você pode configurar os campos do formulário de finalização de compra de acordo com suas necessidades. Você deve navegar pelas configurações na seguinte ordem: Painel de Administrador > Extensões > Módulos > Supercheckout da Knowband

A interface administrativa fácil de entender do OpenCart One Page Checkout Pro O site 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 é explicada a seguir:

Configurações gerais do 3.1

• Ativar/Desativar: Utilizando esta opção, você pode ativar ou desativar todas as funcionalidades do OpenCart One Page Checkout Pro Conecte o plugue de DESLIGADO para LIGADO.
• Ativar opção de newsletter: Você pode ativar ou desativar a opção de Newsletter na página do Supercheckout. Depois de ativar este botão, as seguintes situações ocorrerão: a) A opção de Newsletter ficará visível para clientes que finalizarem a compra como visitantes, somente se você tiver ativado a opção “Cadastrar visitante automaticamente”. b) A opção de Newsletter estará sempre visível para clientes que criarem uma nova conta. c) A opção de Newsletter nunca ficará visível para clientes que já estiverem logados.
• Cadastre o convidado automaticamente: Você pode ativar esta opção para cadastrar automaticamente os clientes visitantes em sua loja. Ao ativá-la, você poderá cadastrar seus clientes na loja e enviar a eles uma senha gerada por e-mail.
• Registar Conta: Ao ativar este campo, você pode exibir um campo de senha na página de finalização da compra 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 em uma página A página exibe as opções Convidado, Login e Registrar-se.
• Desativar convidado: Você pode ativar ou desativar a funcionalidade de visitante para os usuários na seção de login do One Page Checkout.
• Adicionar estilo personalizado: Com essa opção, você pode adicionar ou incluir um estilo personalizado à página do Supercheckout. Para aplicar um CSS personalizado na página do Supercheckout, você pode digitar o CSS na caixa de texto que fica à direita do rótulo “Adicionar estilo personalizado”. Por exemplo: você pode alterar a cor dos botões na página do Supercheckout.
• Adicione um valor mínimo para exibir o banner de frete grátis.: Nessa aba, o administrador pode adicionar um valor mínimo exigido para que os clientes tenham direito ao frete grátis em seus pedidos.
  
• Ativar detecção automática de país: Após ativar esse recurso, a extensão detectará e preencherá automaticamente o país do usuário na seção de país.
  
• Validação embutida: Com essa funcionalidade, a extensão exibe um erro sempre que o usuário deixa de preencher um campo obrigatório na página de finalização da compra.
  
• Ative o preenchimento automático de endereços do Google: Assim que o usuário começa a digitar seu endereço, a extensão sugere o endereço, caso esse recurso esteja ativado.
  
• Ativar ou desativar novo modelo: Com a extensão OpenCart One Page Checkout, o proprietário da loja pode aplicar o modelo de finalização de compra novo ou antigo, conforme desejar, nas configurações gerais.
• Modo de teste: Esta opção permite ativar ou desativar a funcionalidade do modo de teste deste dispositivo. Extensão OpenCart One Page Checkout.
• URL de teste: Após ativar o modo de teste, você pode definir um URL de supercheckout onde poderá testar a funcionalidade de finalização de compra em uma única página.

Customizer

Na aba Personalizar, você pode personalizar a cor de fundo do botão, a cor da borda do botão, a pré-visualização do botão, a cor do texto do botão, a cor da borda inferior do botão, a cor de fundo do botão Minha Conta, a cor de fundo do botão Login, a cor de fundo do botão Logout, a cor de fundo do botão Código do Cupom, a cor de fundo do botão Código do Voucher, 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 finalização da compra.
• CSS e JS personalizados: Esta seção permite personalizar a aparência da página de finalização da compra com CSS e JS personalizados.

Login 3.2

Nesta aba, você encontrará opções para configurar o login com o Facebook, Google e PayPal, conforme mostrado abaixo.

• Ativar login com o Facebook: Com esta opção, você pode ativar/desativar a opção de login do Facebook no checkout em uma única página.
• ID do aplicativo do Facebook: Esta opção permite definir o ID do aplicativo do Facebook, que pode ser gerado usando a conta de desenvolvedor do Facebook.
• Segredo do aplicativo do Facebook: Utilizando esta opção, defina a chave secreta gerada com a conta de desenvolvedor do Facebook.
• Ativar login do Google: Com essa opção, você pode ativar/desativar a opção de login do Google no checkout em uma única página.
• ID do aplicativo Google: Esta opção permite definir o ID do Google App.
• ID do cliente Google: Este campo permite definir o ID do cliente do Google criado no console do Google.
• Segredo do aplicativo do Google: Com essa opção, você pode definir a chave secreta do aplicativo gerada usando o console do Google.
• Habilitar login do PayPal: Com essa opção, você pode permitir que seus clientes façam login usando suas contas do PayPal.
• ID do cliente PayPal: Esta opção permite adicionar seu ID de cliente do PayPal.
• Segredo do cliente PayPal: Esta opção permite adicionar seu ID secreto de cliente do PayPal.

Para obter instruções detalhadas sobre como gerar o ID do aplicativo, a chave secreta do aplicativo e o ID do cliente, acesse a próxima seção.

3.2.1 Como configurar o login do Facebook?

Um aplicativo do Facebook pode ser criado seguindo os passos abaixo:

1: Acesse o seguinte URL: https://developers.facebook.com/apps/

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

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

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

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

9: Clique na aba “Configurações”.

Amavelmente Adicionar URL de retorno de chamada para exclusão. Você pode conferir a descrição da URL de retorno de chamada de exclusão 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 o “Domínio do Aplicativo”, o “URL de Privacidade”, o “URL dos Termos de Serviço”, adicione um ícone, selecione a categoria e clique no botão “Salvar Alterações”.

Domínios do aplicativo:

seudominio.com é correta

seudomínio.com/loja é incorreto

www.domínio.com é incorreto

16: Agora clique em “+Adicionar plataforma”.

17: E selecione Website como Plataforma.

18 e 19: Agora, insira o URL do seu site.

20 e 21: Clique em “Produtos+” e clique no botão Configurar na aba 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álidas.

URIs de redirecionamento OAuth válidas:

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

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

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

30: Copie o ID do aplicativo e o segredo do aplicativo e cole-os nos campos fornecidos no módulo.

Etapa final:

1. Faça login com o SDK JavaScript.

Defina este campo como Sim.

2. Domínios permitidos para o SDK JavaScript

Defina o domínio da loja.

Nota: o domínio deve ser inserido no formato abaixo.

https://octest.knowband.com

3.2.2 Como configurar o login do Google?

Siga os passos 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. Acesse o Gerenciador de APIs, clique no menu à esquerda, clique em APIs e Serviços e, em seguida, clique em Criar Credenciais.

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

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

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

Utilize 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 Adicionar Domínio, adicione o Domínio Autorizado e, em seguida, clique em Salvar e Continuar.

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; em seguida, clique no botão Salvar e continuar.

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

14. Clique em Credenciais e, em seguida, no botão +Criar Credenciais e selecione ID do Cliente Oath.

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 o ID do Cliente e a Chave Secreta do Cliente no campo de texto mostrado abaixo no módulo de finalização de compra em uma página do Prestashop.

Como gerar a chave da API do Google:

1) Acesse o Gerenciador de APIs, clique no menu à esquerda, clique em APIs e Serviços e, em seguida, clique em Credenciais.

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

3) Copie a chave da API e insira-a no campo “ID do aplicativo Google” da página de login do módulo de administração.

3.3 Endereço de pagamento

Esta aba contém as configurações dos campos que serão exibidos na seção Endereço de Pagamento ou Cobrança na página de finalização da compra, conforme mostrado abaixo.

1. É composto por duas seções. A da esquerda é para clientes visitantes e a da direita para clientes cadastrados.
2. Para exibir/ocultar um campo na página de finalização da compra, marque a caixa de seleção à esquerda do rótulo “Exibir”.
3. Para tornar um campo obrigatório (campo obrigatório), marque a caixa de seleção à esquerda de “Rótulo obrigatório”.
4. Os campos também podem ser reorganizados de acordo com a necessidade. Para reorganizá-los, basta mover o cursor até o ícone de arrastar e soltar o campo onde for necessário, como mostrado abaixo.
5. Ao salvar, os campos serão reorganizados de acordo com as alterações.

3.4 Endereço de envio

Esta aba contém as configurações dos campos que serão exibidos na seção Endereço de Entrega na página de finalização da compra, conforme mostrado abaixo.

1. É composto por duas seções. A da esquerda é para clientes visitantes e a da direita para clientes cadastrados.
2. Para exibir/ocultar um campo na página de finalização da compra, marque a caixa de seleção à esquerda do rótulo “Exibir”.
3. Para tornar um campo obrigatório (campo obrigatório), marque a caixa de seleção à esquerda de “Rótulo obrigatório”.
4. Os campos também podem ser reorganizados de acordo com a necessidade. Para reorganizá-los, basta mover o cursor até o ícone de arrastar e soltar o campo onde for necessário, como mostrado abaixo.
5. Ao salvar, os campos serão reorganizados de acordo com as alterações.

3.5 Método de Envio

Esta aba contém as configurações do método de envio exibido na página de finalização da compra. Ela inclui opções para ativar/desativar e definir o método de envio padrão, conforme mostrado abaixo:

• Exibir métodos de envio: Com essa opção, você pode mostrar/ocultar os métodos de envio na página de finalização da compra. Para isso, basta alternar o botão de LIGADO para DESLIGADO ou vice-versa.
• Estilo de exibição: Esta opção permite selecionar o estilo de exibição dos métodos de envio adicionados ao seu site. Você pode escolher entre três opções: Somente Texto, Somente Imagem ou Texto com Imagens.
• Exibir o 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 finalização da compra.
• Selecione um método de envio padrão: Essa opção permite que você selecione qualquer método como 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 logotipo desejado para cada um dos métodos de envio configurados para sua loja.

3.6 Ship2Pay

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

Método de pagamento 3.7

Esta aba contém as configurações dos métodos de pagamento exibidos na página de finalização da compra, como ativar/desativar ou selecionar um método padrão.

• Exibir métodos de pagamento: Com essa opção, você pode mostrar/ocultar os métodos de pagamento na página de finalização da compra. Para isso, basta alternar o botão de LIGADO para DESLIGADO ou vice-versa.
• Estilo de exibição: Esta opção permite selecionar o estilo de exibição dos métodos de pagamento adicionados ao seu site. Você pode escolher entre três opções: Somente texto, Somente imagem ou Texto com imagens.
• Selecione um método de pagamento padrão: Essa opção permite que você selecione 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 logotipo desejado para cada um dos métodos de pagamento configurados para sua loja.

3.8 Carrinho

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

1. Para exibir/ocultar o carrinho na página de finalização da compra, desmarque a caixa de seleção ao lado do rótulo “Exibir carrinho”.
2. Para ativar/desativar qualquer coluna no carrinho, marque/desmarque a caixa de seleção em frente à respectiva coluna.
3. Para ativar/desativar as imagens pop-up do produto, marque/desmarque a caixa de seleção em frente à respectiva coluna.
4. Para alterar o tamanho da janela pop-up da imagem, insira a largura e a altura da janela pop-up na caixa de texto em frente ao rótulo “Tamanho da Imagem do Produto”.
5. As opções de cupom, pontos de recompensa e voucher também podem ser ativadas ou desativadas marcando/desmarcando a caixa de seleção correspondente. Observe que a caixa de texto de pontos de recompensa só ficará visível na página do Supercheckout se 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 possa ser comprado com pontos de recompensa.

Confirme:

1. Esta aba está novamente dividida em duas seções: a da esquerda é para clientes visitantes e a da direita para clientes registrados ou conectados.
2. Para ativar a caixa de comentários do cliente para o pedido, marque a caixa de seleção ao lado da etiqueta “Deixe um comentário para o pedido” e, para desativá-la, desmarque a mesma caixa de seleção.
3. Para aceitar os termos ou quaisquer outras informações salvas no painel de administração da loja, marque/desmarque a caixa de seleção ao lado do rótulo “Concordo com as condições”.

3.9 Aba Design

Esta aba 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 finalização da compra usando uma simples ação de arrastar e soltar. Ao salvar, o bloco será reorganizado na página de finalização da compra de acordo com as alterações.

Boletim 3.10

Ao clicar na aba “Newsletter” do Módulo de finalização de compra responsivo em uma única etapa para OpenCartVocê pode configurar as definições do MailChimp, SendinBlue e Klaviyo Integrator conforme mostrado abaixo:

• Ativar o MailChimp: Você pode ativar ou desativar a funcionalidade de integração com o MailChimp para sua loja. Você pode ativar essa opção se quiser aumentar o número de inscritos na newsletter da sua loja.
• Chave da API do MailChimp: Esta opção ajuda você a configurar a chave da API do Mailchimp para capturar os e-mails dos clientes.
• Lista do MailChimp: Uma vez que a chave esteja configurada com isso Com a extensão de finalização de compra rápida para OpenCart, você pode buscar e selecionar a lista do MailChimp.

O mesmo pode ser feito para SendinBlue e Klaviyo.

4.0 Interface frontal de Extensão de finalização de compra em uma etapa para OpenCart

Quando o usuário clicar no botão “Adicionar ao carrinho” correspondente a um produto e realizar a finalização da compra, verá a seguinte tela de finalização de compra (supercheckout) em sua tela.

Tutorial 5.0 do Opencart One Page Checkout Pro da Knowband

Para tornar o processo de instalação, configuração e ajuste totalmente descomplicado, criamos um tutorial detalhado e fácil de entender para o One Page Checkout Pro da Knowband para OpenCart. Este guia passo a passo orienta você em tudo, desde o download e a instalação do módulo até a configuração de todos os seus recursos avançados para uma experiência de finalização de compra mais rápida, fluida e intuitiva. Seja você um iniciante ou um usuário experiente do OpenCart, o tutorial garante que você poderá personalizar campos, gerenciar opções de login social, habilitar a finalização de compra como visitante, configurar métodos de pagamento e envio e otimizar o design geral sem qualquer dificuldade. Assista ao tutorial completo aqui para garantir uma instalação perfeita e o bom funcionamento da extensão One Page Checkout Pro.

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

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

Demonstração da página inicial de finalização de compra em uma única página do OpenCart: https://opencartdemo.knowband.com/demo/index.php?module=oc_onepagecheckout_knowband&demo=front&lang=en

Checkout em uma página para OpenCart, disponível no Marketplace oficial do OpenCart: https://www.opencart.com/index.php?route=marketplace/extension/info&extension_id=15353