Knowband Blog | Ecommerce Modules

Extensão de Checkout Avançado OpenCart One Page – Manual do Usuário

Joe Parker

 

1.0 Introdução

Cada 1 em cada 10 usuários on-line obrigam a abandonar o carrinho apenas por causa do checkout longo e complicado. Além disso, você pode otimizar o checkout do seu site para um interessante, incorporando o OpenCart One Page Advanced Checkout Extension da Knowband. Na verdade, o módulo pop-up de checkout responsivo do OpenCart transforma todo o processo de checkout em um único pop-up baseado em ajax. Além disso, que é acionado na tela quando o cliente opta por comprar um produto na loja. Assim, este One Page Checkout for OpenCart reduz o abandono de carrinho ao oferecer todo o processo de compra em um único pop-up, sem carregar a próxima página.

1.1 Recursos do One Page Checkout para OpenCart

Incorporar o One Page Checkout para a loja OpenCart não é grande coisa, pois oferece personalização simples sem envolver habilidades técnicas ou modificações de código existentes. Assim, permita rapidamente que seus clientes comprem o produto por meio de um único pop-up, proporcionando-lhes uma finalização da compra mais rápida. Além disso, uma experiência de menos interrupção. Assim, abaixo listados estão os destaques marcantes desta extensão OpenCart One Page Checkout. 1. O módulo OpenCart One Page Checkout exibe os campos de check-out totais na forma de um pop-up de check-out baseado em ajax responsivo no front-end. Além disso, do site sem redirecionar para outro URL. 2. Este One Page Checkout para OpenCart fornece uma maneira perfeita de aumentar as assinaturas de newsletter para o negócio online. 3. O pop-up de checkout responsivo incorporado usando o módulo de checkout simplificado do OpenCart pode ser facilmente ativado ou desativado usando o botão de alternância fornecido no back-end. 4. O recurso de registro de convidado do pop-up de checkout responsivo OpenCart registra automaticamente o cliente no site. Além disso, envie-lhes a senha de login em seu e-mail. 5. Você tem a flexibilidade de ativar ou desativar a funcionalidade de checkout de convidado do módulo OpenCart One Page Checkout. 6. Usando esta extensão de checkout OpenCart Single Page, você pode adicionar código CSS à página de checkout avançado. 7. O módulo de checkout de página única do OpenCart oferece um recurso de modo de teste que permite testar a funcionalidade avançada da página de checkout em um IP específico. 8. Com o módulo de checkout simplificado do OpenCart, ofereça aos clientes o benefício das opções de login social. Por exemplo, Google e Facebook na página de checkout. 9. A extensão de checkout rápido do OpenCart permite que você mostre/oculte os campos de endereço de pagamento e entrega de forma diferente para clientes conectados e convidados da loja. 10. As marcas de campo de endereço personalizado são necessárias ou opcionais com a ajuda deste módulo OpenCart One Page Supercheckout. 11. Usando One Page Checkout para o site OpenCart, você pode fornecer vários métodos de envio e pagamento para os clientes que são configuráveis no back-end. 12. O módulo pop-up de checkout responsivo do OpenCart facilita a configuração de uma imagem de logotipo e título desejados para cada um dos métodos de pagamento e envio exibidos na página supercheckout. 13. O recurso ship2pay da extensão de checkout rápido OpenCart seleciona automaticamente o método de pagamento correspondente a cada método de envio selecionado pelo cliente. 14. A extensão pop-up de checkout responsivo OpenCart oferece um carrinho configurável cujos campos podem ser corrigidos de acordo com as necessidades de negócios. 15. O módulo OpenCart One Page Checkout é compatível com várias lojas e vários idiomas. 16. A extensão de checkout rápido OpenCart oferece um layout responsivo móvel para os clientes. 17. O recurso MailChimp Integrator do checkout OpenCart Single Page sincroniza automaticamente os dados do cliente com a conta MailChimp conectada do vendedor.

1.2 Interface frontal do módulo pop-up de checkout responsivo OpenCart

Quando o usuário clicar no botão “Adicionar ao carrinho” correspondente a um produto, ele verá o seguinte controle deslizante de checkout responsivo na tela.

Seção de resumo do carrinho do OpenCart One Page Advanced Checkout

Além disso, ao clicar no botão “Checkout”, eles podem visualizar e preencher o formulário de checkout avançado completo de uma só vez, conforme mostrado nas imagens abaixo:

Seção de login da conta

Se o cliente desmarcar a caixa de seleção “Enviar para o mesmo endereço”, ele verá a seção de endereço de entrega conforme mostrado abaixo:


Seção de envio e método de pagamento

2.0 Guia de instalação do OpenCart One Page Advanced Checkout Extension

Antes de iniciar o processo de instalação, você deve comprar o módulo OpenCart One Page Checkout na loja Knowband. Além disso, uma vez adquirido, você receberá os seguintes arquivos em seu e-mail registrado.

Agora, para instalar este OpenCart Advanced 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. Portanto, o OpenCart One Page Advanced Checkout foi instalado com sucesso. Além disso, está pronto para usar em sua loja. Além disso, vá para o menu de administração. Além disso, clique nas extensões e, assim, clique no botão Configurar ao lado de One Page Advanced Checkout.

3.0 Interface de administração do pop-up de check-out 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. Além disso, você deve navegar pelas configurações na ordem fornecida: Painel do administrador > Extensões > Módulos > Check-out avançado de uma página

A interface de administração simples de entender da extensão de checkout rápido do OpenCart é dividida em nove seções, a saber:

  1. Configurações gerais
  2. Configurações de Login
  3. Endereço de Pagamento
  4. Morada de entrega
  5. método de envio
  6. Ship2Pay
  7. Pagamentos
  8. Carrinho
  9. Newsletter

Configurações gerais do 3.1

3.2 Configurações de Login

Observação: você pode obter o ID do aplicativo do Google, o ID do cliente e a chave secreta em https://code.google.com/apis/console, discutido na seção 3.2.2

3.2.1 Como configurar o Login do Facebook

O aplicativo do Facebook pode ser criado seguindo as etapas mencionadas abaixo:- 1: Vá para o URL fornecido: https://developers.facebook.com/apps/ 2: Clique no botão “Adicionar um novo aplicativo”. 3 e 4: Digite o nome do aplicativo e o ID do e-mail e clique no botão “Criar ID do aplicativo”.


5&6: Após clicar em Create App ID você terá que passar por uma verificação de segurança conforme mostrado:

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

8-13: Duas opções estarão disponíveis no menu suspenso, Básico e Avançado, clique em “Básico”. Em seguida, digite seu “Domínio do aplicativo”, “E-mail de contato”, “URL de privacidade”, “URL de termos e condições”, “Adicionar logotipo”, “Selecionar categoria” e clique no botão “Salvar alterações”. Domínios de aplicativos: seudominio.com está correto seudominio.com/loja está incorreto www.dominio.com está incorreto

14: Agora clique em “+Adicionar plataforma”.


15: E selecione Site como Plataforma


16: Agora digite a URL do seu site.


17&18: Clique em “Produtos+” e selecione login no Facebook.


19: Selecione web como plataforma para o aplicativo.


20: Agora clique em salvar.


21 e 22: 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


23 e 24: Clique em “Revisão do aplicativo”. E marque “Tornar ‘o nome do seu aplicativo’ Público” como Sim.


Etapa final: copie o ID do aplicativo e o segredo do aplicativo e cole-o nos campos fornecidos no módulo.

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 na opção suspensa destacada no botão “2” e depois clique em “Criar um projeto”.

3. Digite o nome do projeto desejado e clique em “Criar”.


4. Acesse o API Manager, clique em Create Credentials e selecione a opção OAuth client ID.

5. Clique no botão “Configurar tela de consentimento”.

6. Digite “Id do e-mail”, “Nome do produto” e clique no botão “Salvar”.


7. Selecione “Aplicativo da Web”, digite “Nome”, “URIs redirecionados autorizados” conforme mencionado abaixo e clique no botão “Criar”,


Use o seguinte URL de redirecionamento

https://your_store_url/index.php?route=kbstepcheckout/kbstepcheckout

8. Copie o ID do cliente e o segredo do cliente.

9. Cole a ID do cliente e o segredo do cliente no campo de texto mostrado abaixo no painel de administração do módulo de checkout de uma página 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

O OpenCart One Page Checkout permite que você mostre ou oculte qualquer campo para o endereço de pagamento. Os campos podem ser habilitados ou desabilitados separadamente para clientes logados e desconectados. Você pode marcar qualquer campo como obrigatório, diferentemente para clientes logados e desconectados da loja. Além disso, você pode reordenar os campos de endereço usando uma simples ação de arrastar e soltar.

3.4 Endereço de entrega

 

O módulo pop-up de checkout responsivo do OpenCart permite que você mostre ou oculte qualquer campo para o endereço de entrega. Os campos podem ser habilitados ou desabilitados separadamente para clientes logados e desconectados. Usando o OpenCart One Page Advanced Checkout, você pode marcar qualquer campo como obrigatório, diferentemente para clientes logados e desconectados da loja. Além disso, você pode reordenar os campos de endereço usando uma simples ação de arrastar e soltar. Observação: para incluir e mostrar mais campos personalizados no endereço de pagamento, endereço de entrega, seção de carrinho ou seção de conta do checkout, você pode consultar a seção 3.10

3.5 Método de Envio

Da mesma forma, você pode modificar o título e a imagem do logotipo para todos os métodos de envio usando este módulo de check-out avançado de uma página do OpenCart.

3.6 Ship2Pay

Método de pagamento 3.7

Da mesma forma, você pode modificar o título e a imagem do logotipo para todos os métodos de pagamento com a ajuda de uma página supercheckout.

3.8 carrinho

Nesta seção do OpenCart One Page Supercheckout, você pode personalizar o carrinho e exibi-lo da maneira que desejar em sua loja. O tamanho da imagem dos itens do carrinho pode ser facilmente modificado definindo a altura e a largura da imagem.

Boletim 3.9

3.9.1 Como configurar o MailChimp

  1. Faça login na sua conta do Mail Chimp.
  2. Clique na guia do canto direito > Escolha Perfil > Extras > Chaves de API.
  3. Aqui, o administrador pode criar uma chave de API clicando no botão “Criar uma chave”.
  4. Copie a chave de API.
  5. O administrador também pode criar uma lista diferente para cada cliente de login social clicando em “Lista” na barra de menu superior.
  6. Agora cole a chave de API na seção Chave de API do chimpanzé de correio fornecido e clique no botão “Obter lista”.
  7. Selecione a lista no menu suspenso.

3.10 Como adicionar editar ou excluir campos personalizados na página do Supercheckout

Para adicionar campos personalizados a qualquer seção do One Page Checkout, você pode ir para a opção “Campos personalizados” na guia “Clientes” na seção do lado esquerdo da interface administrativa.