Knowband Blog | Ecommerce Modules

OpenCart Progressive Web App (PWA) – Manual do Usuário

Joe Parker


1.0 Introdução

Esta extensão OpenCart automatizada foi construída com o objetivo de fornecer facilidade para os proprietários de lojas online transformarem suas lojas em um aplicativo da Web progressivo. A loja de comércio eletrônico em PWA é uma das principais tecnologias avançadas que todo negócio de comércio eletrônico deve procurar. O OpenCart PWA Mobile App é, na verdade, um aplicativo da web que não depende de lojas de aplicativos de terceiros (Google Play e Apple App Store). Os compradores online podem facilmente “Adicionar o aplicativo PWA à tela inicial” e comprar produtos em qualquer lugar como qualquer outro aplicativo.

1.1 Como funciona o OpenCart Progressive Web App (PWA)?

Assim que a loja de comércio eletrônico for convertida em OpenCart PWA Mobile App, sempre que qualquer usuário abrir o URL da loja no navegador do celular, os usuários serão solicitados a “Adicionar PWA à tela inicial”. É muito simples de instalar e usar o OpenCart Progressive Web App.

1.2 Principais recursos para escolher OpenCart PWA:

[IMP] Notas para iOS PWA:

�> Dispositivos iOS (iPhone, iPad, etc.) não oferecem nenhum prompt embutido “Adicionar à tela inicial”. Portanto, os usuários do PWA Mobile App precisam adicionar manualmente o OpenCart PWA Mobile App à tela inicial do iPhone ou iPad. �> iOS não suporta notificações push da web. Portanto, o administrador da loja só pode enviar as notificações push para o dispositivo Android, não no iOS.

[NOVA ATUALIZAÇÃO]�OpenCart PWA suporta idiomas RTL (árabe, hebraico, etc.):

O OpenCart PWA Mobile App Creator agora suporta vários idiomas, incluindo scripts RTL (Right To Left) como árabe, hebraico, persa, etc. Todos os idiomas da loja OpenCart estarão no Progressive Web App e outros idiomas necessários também podem ser adicionados. Os usuários podem escolher o idioma no aplicativo da Web Progressive e todo o conteúdo do aplicativo será traduzido de acordo.

Totalmente compatível com o KnowBand Multi-vendor Marketplace:

Nosso OpenCart PWA Mobile App é compatível com Mercado de vários fornecedores OpenCart. Converta sua loja de comércio eletrônico OpenCart em um mercado completo e lance o aplicativo móvel PWA para o mesmo. Os vendedores do marketplace estarão disponíveis em seu Progressive Web App e os usuários também podem simplesmente navegar por eles.

Observação: Os aplicativos móveis OpenCart PWA são centrados apenas no cliente, ou seja, os usuários podem visitar o aplicativo PWA de navegação junto com os vendedores. Não haverá nenhum painel de controle do vendedor ou gerenciamento via OpenCart Progressive Web App. O administrador pode gerenciar os vendedores do marketplace web e os mesmos serão atualizados automaticamente no PWA Mobile App.

1.3 Veja a demonstração OpenCart PWA:

 

Explore o módulo e os recursos do aplicativo PWA nos links de demonstração abaixo:

Painel de administração do módulo: https://opencartdemo.knowband.com/3.0/pwa/admin/
App de demonstração PWA: https://opencartdemo.knowband.com/3.0/pwa/pwa-app/

(Copiar e colar o URL no navegador do celular e “Adicionar à tela inicial”)

2.0 Telas do painel de administração:

Explore todas as configurações do painel de administração da extensão OpenCart PWA Mobile App junto com a funcionalidade e trabalhe com os instantâneos compartilhados abaixo:

Configurações gerais do 2.1:

a) Mostrar / ocultar visualização: Toque no botão de olho para exibir / ocultar a visualização do telefone no painel de administração.
b) Situação: Habilite o módulo para PWA funcionar em dispositivos móveis.
c) Habilitar relatório de log de solicitação: Habilite o log de erros no celular.
d) Nome do aplicativo PWA: Digite o nome do aplicativo OpenCart PWA.
e) Selecione o layout da página inicial: Escolha um layout de tela inicial pré-adicionado para OpenCart Progressive Web App.

f) Habilitar barra de guias: Habilite a barra de guias na parte inferior do aplicativo OpenCart PWA para navegação contínua.
g) Fonte para o aplicativo PWA: Escolha uma fonte para OpenCart Progressive Web App (PWA).
h) Cor do botão do aplicativo: Escolha a cor do botão para o aplicativo móvel PWA.
i) Cor do tema do aplicativo: Escolha a cor do tema para o aplicativo PWA.
j) Cor de fundo do aplicativo: Escolha a cor de fundo para o aplicativo PWA.
k) Cor da tela inicial do aplicativo: Escolha uma tela inicial para o aplicativo móvel PWA.
l) Habilitar logotipo: Adicione o logotipo da sua marca no cabeçalho do OpenCart PWA Mobile App.

m) Imagem para o ícone do aplicativo: Adicione a imagem do ícone do aplicativo no painel de administração da extensão OpenCart PWA.
n) Redirecionar na página do carrinho ao adicionar ao carrinho: Controle o redirecionamento do botão Adicionar ao carrinho sempre que qualquer usuário tocar no botão Adicionar ao carrinho.

Configurações de notificações push 2.2

As notificações push são a melhor ferramenta de marketing para o Progressive Web App (PWA) para OpenCart. O administrador da loja pode simplesmente promover os produtos e negócios da loja para os usuários do aplicativo e gerar mais vendas e receita. Insira todos os detalhes nas configurações de notificação push criando um projeto Firebase:

Como configurar uma conta Firebase?

– Faça login no Google Firebase

– Criar um novo projeto Ao clicar em Adicionar projeto, a seguinte caixa de diálogo aparecerá:


A criação do projeto levará alguns segundos. Assim que o projeto estiver pronto, clique em continuar.

– Gerencie as configurações do projeto Depois de criar o projeto, clique em Configurações do projeto.

– Vá para as opções de autenticação:


– Encontre as chaves do Firebase Nas configurações do projeto, clique em Configurações de mensagens na nuvem. A partir daqui, você pode obter diretamente a chave do servidor.


– Adicione seu aplicativo da Web ao Firebase

– Obtenha outros detalhes relacionados ao Firebase e cole-os no painel de administração do módulo PWA.

– Obtenha a chave do servidor Firebase na guia de mensagens em nuvem em Configurações:

– Adicione seu domínio na autenticação >> login.

A) Notificação por push de pedido bem-sucedida:

Habilite / desabilite a notificação automática por push a ser enviada aos usuários do aplicativo sempre que eles fizerem um pedido com êxito no OpenCart Progressive Web App (PWA).

B) Notificação por push da atualização do status do pedido:

Habilite / desabilite a notificação automática por push enviada sempre que o status do pedido do aplicativo for atualizado. Os usuários do aplicativo móvel OpenCart PWA podem ficar de olho nos detalhes de pedidos anteriores.

C) Notificação de envio de carrinho abandonado:

Habilite / desabilite a notificação push automatizada enviada aos usuários que abandonam produtos no carrinho sem compra bem-sucedida. Esta notificação push será enviada aos usuários automaticamente após o intervalo de tempo inserido.

2.3 Histórico de notificações por push

O histórico completo de notificações push enviadas com sucesso será visto aqui. O administrador da loja pode acompanhar as notificações push enviadas anteriormente a partir daqui.

A) Enviar notificação:

Personalize e envie notificações push manualmente para usuários do OpenCart Progressive Web App (PWA) conforme a necessidade. O administrador da loja pode configurar essas notificações por conta própria e enviá-las aos usuários do OpenCart Progressive Web App (PWA).

Layout da Página Inicial do 2.4:

Projete e salve vários designs de layouts (venda, festivais, etc.) e apenas escolha um certo no painel de administração para atualizar no OpenCart Progressive Web App.

O OpenCart Progressive Web App (PWA) oferece uma tela inicial personalizável cujo layout pode ser projetado a partir do painel de administração com alguns cliques do mouse e arrastar e soltar. O layout atraente de acordo com a execução do festival, venda, ocasião, etc. pode certamente ajudar a melhorar as vendas por meio de OpenCart PWA Mobile Apps.

Adicione um novo layout a partir desta guia ou edite os adicionados anteriormente. As definições de configuração da página inicial oferecem os seguintes elementos:

Principais categorias:

Banner Quadrado:

Banner deslizante horizontal:

Banner da grade:

Banner do cronômetro de contagem regressiva:

Produtos quadrados:

Produtos de deslizamento:

Produtos de grade:

Como obter detalhes do aplicativo do Facebook?

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

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

– Clique no botão “Adicionar um novo aplicativo”.

Etapa 3 e 4:Insira o nome do aplicativo e a id de e-mail e clique no botão “Criar ID do aplicativo”.

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

– Clique na aba “Configurações”.

Etapa 8-13: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”, “E-mail de contato”, “Privacidade URL”, “Termos e Condições URL”, “Adicionar logotipo”, “Selecionar categoria” e clique no botão “Salvar alterações”. Domínios de aplicativos: seudominio.com está correto seudomínio.com/store está incorreto www.domain.com está incorreto

– Agora clique em “+ Adicionar plataforma”.


Etapa 15: E selecione Site como Plataforma.

– Agora digite o URL do seu site.


Etapa 17 e 18:Clique em “Produtos +” e selecione o login do Facebook.


– Selecione a web como plataforma para o aplicativo.

– Agora clique em salvar.


Etapa 21 e 22: Clique em Configurações e adicione URIs de redirecionamento OAuth válidos. URIs de redirecionamento OAuth válidos: https://example.com/pwa-app/login

Etapa 23 e 24:Clique em “Avaliaçã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-os nos campos fornecidos no módulo.

Como obter detalhes do Google App?

Tipo de aplicação: Aplicativo da Web.
Origens do JavaScript autorizadas: Nome de domínio de sua loja (https://www.yourstore.com).
URI de redirecionamento autorizado ou URI da página de redirecionamento do Loginizer:
https://example.com/pwa-app/login

Páginas de Informação 2.7:

Adicione páginas CMS no aplicativo e ofereça conteúdo informativo para usuários do OpenCart PWA Mobile App.

3.0 Telas do aplicativo PWA de front-end:

Tela inicial do 3.1:

A tela inicial do OpenCart Progressive Web App (PWA) é totalmente personalizável com um editor DIY, conforme explicado acima nas telas do painel de administração. Altere a aparência da tela inicial do aplicativo a qualquer momento e ofereça uma aparência mais amigável e voltada para vendas.

1. Layout personalizado:

Usando vários banners, controles deslizantes e elementos de produtos, o administrador da loja pode criar um layout dinâmico de acordo com a necessidade.

2. Logotipo da marca:

Use o logotipo da sua loja no cabeçalho superior do OpenCart Progressive Web App (PWA).

3. Sacola do carrinho de compras:

O ícone do carrinho de compras no canto superior direito da tela inicial permite que os usuários acessem a tela do carrinho e verifiquem os produtos adicionados.

4. Menu de navegação esquerdo:

Navegue pelas categorias exibidas no aplicativo PWA com navegação no menu de navegação esquerdo.

O OpenCart PWA Mobile Apps vem com categorização perfeita e adequada disponível. Os usuários podem encontrar categorias relevantes no menu de navegação esquerdo e navegar pelos produtos. Várias páginas CMS também podem ser adicionadas ao menu, oferecendo conteúdo relevante no aplicativo.

1. Minha conta:

A opção Minha conta contém todas as informações pessoais dos usuários, incluindo frete e pedido. Os compradores do OpenCart Progressive Web App podem visualizar e atualizar as informações salvas.

2. Categorias:

As categorias exibidas no menu de navegação esquerdo do OpenCart Progressive Web App são as mesmas disponíveis na loja de comércio eletrônico.

3. Páginas CMS:

Várias páginas do CMS, como Sobre nós, Fale conosco, Termos e condições, etc. podem ser acessadas aqui. Essas páginas de informações podem ser adicionadas a partir do painel de administração da extensão.

4. Idioma (s):

A opção de idioma permite que os usuários do aplicativo PWA visualizem o aplicativo da web em seu idioma desejado.

5. Moeda (s):

Todas as moedas disponíveis em seu site são exibidas aqui no aplicativo OpenCart Progressive Web App (PWA).

6. Login / Logout:

Os usuários podem facilmente entrar / sair do aplicativo OpenCart PWA por meio desta opção.

3.3 Category Screen:

Telas de categoria livres de confusão com a exibição de lista e grade permitem que os usuários escolham o que é melhor para eles em uma categoria específica. Todo o estoque da loja permanecerá sincronizado com o aplicativo móvel OpenC Progressive Web App (PWA), e novas adições e alterações serão atualizadas em tempo real.

1. Visualização de lista e grade:

As categorias no aplicativo PWA para OpenCart podem ser navegadas tanto em lista quanto em grade.

2. Classificação de produtos:

A opção de classificação permite que os compradores online restrinjam os produtos na ordem de classificação desejada e encontrem o correto.

3. Filtro de produto:

O OpenCart PWA Mobile App oferece a opção de filtrar produtos simplificando a busca de produtos. Os compradores online podem encontrar os produtos desejados nas categorias usando filtros para vários atributos, como tamanho, cor, preço, etc.

Tela do produto 3.4:

A tela do produto do OpenCart Progressive Web App é tão simples e intrigante quanto poderia parecer. Com todas as opções e informações necessárias sobre o produto, em questão de minutos o usuário terá a certeza do produto que vai adquirir. Várias imagens estão disponíveis para o produto com as opções Em estoque e Fora de estoque.

1. Informações e cuidados do produto:

As informações completas do produto, conforme disponíveis no inventário, serão exibidas aqui.

2. Pequena descrição:

Os usuários podem ler a breve descrição de seu produto para decidir rapidamente sobre a compra.

3. Opções do produto:

Todas as opções relacionadas ao produto, como tamanho, cor etc. são exibidas aqui.

4. Adicionar ao carrinho:

Este botão permite aos usuários adicionar produtos ao carrinho. Os usuários podem ainda processar o carrinho para compra.

5. Compartilhamento Social de Produtos:

A opção de compartilhamento do produto permite que os usuários compartilhem produtos em vários canais sociais.

Tela de Login 3.5

O OpenCart PWA Mobile App oferece opções de login social com um toque e torna o processo de login / registro mais simples. O OpenCart Progressive Web App oferece login do Google e do Facebook.

1. Entrar:

Os usuários do aplicativo podem facilmente autenticar e fazer login em aplicativos PWA usando suas credenciais de login de e-mail anteriores.

2. Inscreva-se:

Todos os novos usuários do aplicativo podem se inscrever e criar suas contas na loja a partir do aplicativo OpenCart PWA. O formulário de inscrição pede apenas os detalhes necessários para criar uma conta.

3. Faça login com o Facebook:

Os usuários podem fazer login no aplicativo PWA usando suas credenciais de conta do Facebook.

4. Faça login com o Google:

Os usuários podem fazer login no aplicativo PWA usando suas credenciais de conta do Google.

Tela do carrinho de compras 3.6:

A tela Carrinho de compras do OpenCart PWA Mobile App exibirá todos os produtos adicionados ao carrinho de compras. Os usuários do aplicativo podem ver o nome do produto, quantidade, preço total e custo de envio. Esta tela possui as seguintes opções:

1. Aplicar vale:

Esta opção permite que os usuários usem cupons do site e obtenham ofertas de desconto.

2. Preço Total do Produto:

Os usuários visualizam o custo completo de sua sacola de compras antes de prosseguir. É atualizado automaticamente de acordo com qualquer atualização com a quantidade do produto ou nova adição.

3. Atualize a Quantidade de Produtos:

Os usuários do aplicativo PWA podem até atualizar a quantidade do produto com a opção “Atualizar quantidade”.

4. Remover Produto:

Os usuários do aplicativo podem simplesmente remover o produto do carrinho simplesmente tocando na opção “Remover”.

5. Continue comprando:

Os usuários do aplicativo podem sair do carrinho para procurar mais produtos no seu aplicativo.

6. Continue para verificar:

Os usuários do aplicativo PWA podem prosseguir para as telas de checkout e pagamento apenas tocando na opção “Continue To Checkout”.

3.7 tela de check-out

O Progressive Web App para OpenCart tem uma verificação simplificada em uma única tela com apenas informações relevantes. Os usuários do aplicativo podem visualizar detalhes completos de checkout, como detalhes de envio, detalhes de faturamento, resumo do pedido, comentário do pedido, resumo do pagamento.

1. Detalhes de envio e cobrança:

Esta tela fornece detalhes dos endereços de envio e cobrança salvos pelo usuário. O usuário também pode editar / salvar o novo endereço de entrega, se necessário.

2. Resumo do pedido:

Os usuários do aplicativo visualizam os detalhes do produto antes de efetuar o pagamento.

3. Métodos de envio: Todos os métodos de envio disponíveis são exibidos aqui. Os usuários podem escolher aquele que atende às suas necessidades.

4. Comentário do pedido:

Os usuários também podem adicionar qualquer comentário relacionado ao pedido que ficará visível para armazenar o administrador na página da web do pedido no back-end.

6. Resumo de pagamento:

Esta seção exibe os detalhes completos do pagamento da repartição envolvidos na compra.

7. Proceder ao pagamento:

Os usuários do aplicativo PWA serão redirecionados para a tela Pagamento depois de tocar no botão “Continuar com o pagamento”.

3.8 Payment Screen:

A tela de pagamento do OpenCart PWA App possui todos os pagamentos via web disponíveis na loja. Os compradores online podem encontrar experiências de pagamento semelhantes em sites e aplicativos.

3.9 Minha conta tela

A tela Minha conta do OpenCart PWA Mobile App permite que os compradores online vejam seus detalhes completos salvos no Progressive Web App. Essa tela também exibe uma lista de pedidos de aplicativos anteriores.

1. Detalhes pessoais:

Os usuários podem visualizar e atualizar seus dados pessoais pré-salvos no PWA Mobile App.

2. Endereço (s) de envio:

Os usuários do aplicativo podem ver a lista completa de endereços de entrega pré-salvos no aplicativo PWA.

3. Detalhes do pedido:

Os usuários do aplicativo podem visualizar a lista completa dos pedidos feitos anteriormente no aplicativo PWA e seus detalhes.

4. Reordenar recurso:

Há um botão direto de novo pedido na tela Minha conta do OpenCart Progressive Web App (PWA). Todos os produtos anteriores deste pedido serão adicionados ao carrinho com apenas um único botão.

Tela 3.91 Order Detail

A tela de detalhes do pedido do OpenCart Progressive Web App fornece detalhes completos de pedidos específicos do aplicativo PWA. Os usuários podem visualizar facilmente o endereço de entrega, resumo do produto, método de envio e pagamento e resumo do custo total, etc. Ele ainda oferece a opção de controlar o status do pedido e da entrega.