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


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:

  • Carregamento mais rápido e desempenho rápido
  • Tela inicial totalmente personalizável com editor DIY
  • Suporte a todos os métodos de envio e pagamento do site
  • Notificações push ilimitadas (notificações automatizadas e personalizadas)
  • Notificação de envio de carrinho abandonado
  • Suporte de bate-papo com Zopim e WhatsApp
  • Interface amigável e envolvente
  • Sem dependência de lojas de aplicativos
  • Totalmente marcado para sua loja (etiqueta branca)
  • Email e login social (Google e Facebook)
  • Suporte multilíngue e RTL
  • Modo offline funcionando
  • Funcionalidade de lista de desejos embutida
  • Sincronização ao vivo b / w site e aplicativo
  • Atualização automática de estoque
  • Compatibilidade de vários dispositivos
  • Pagamento de uma página
  • Aplicativo leve
  • Gerenciamento de páginas CMS
  • Produtos relacionados no Progressive Web App
  • Avaliações de usuários para produtos no PWA
  • Suporte a multimoedas
  • Suporte para cupons / vouchers

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

Nosso OpenCart PWA Mobile App é compatível com OpenCart Multi-vendor Marketplace. 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:

 

tela inicial

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:

Gerais-configurações

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) Status: 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.

configurações gerais-2

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.

configurações gerais-3

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

push-notifications-settings

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

firebase

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

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

continue-project

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

configurações do projeto

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

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.

chave do firebase
Adicione seu aplicativo da Web ao Firebase

web-app-to-firebase

web-app-to-firebase

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

firebase-details

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

chave do firebase

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

chave do servidor firebase

chave do servidor firebase

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).

pedido-sucesso

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.

notificação de status do pedido

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.

carrinho abandonado

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.

push-notification-history

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).

enviar notificação

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.

tela inicial

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.

layout de página inicial

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:

categoria superior

Banner Quadrado:

faixa quadrada

Banner deslizante horizontal:

faixa deslizante

Banner da grade:

faixa de grade

Banner do cronômetro de contagem regressiva:

contagem regressiva-temporizador-banner

Produtos quadrados:

produto quadrado

Produtos de deslizamento:

produtos deslizantes

Produtos de grade:

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”.

adicionar 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”.

create-app-id

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:

create-app-id

Clique na aba “Configurações”.

configuração do aplicativo fb

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

fb-app-id

Agora clique em “+ Adicionar plataforma”.

adicionar plataforma
Etapa 15:
E selecione Site como Plataforma.

escolha-plataforma

Agora digite o URL do seu site.

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

entrar no Facebook
Selecione a web como plataforma para o aplicativo.

escolha-plataforma

Agora clique em salvar.

facebook-app-id
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

URL de redirecionamento

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

revisão do aplicativo
Etapa final: Copie o ID do aplicativo e o segredo do aplicativo e cole-os nos campos fornecidos no módulo.

passo final

Como obter detalhes do Google App?

  • Vá para o Google Developers Console (https://console.developers.google.com/project) ou clique no link fornecido na parte superior direita da respectiva guia na página de configuração do módulo.
  • Agora clique em Criar Projeto à esquerda da página.
  • Digite um nome para o seu projeto e prossiga para a próxima etapa.
  • Agora clique em APIs e autenticação-> Credenciais no menu à esquerda, conforme mostrado abaixo.

google-app-id

  • Clique no botão Criar novo ID do cliente no painel direito da tela.
  • Pode ser necessário preencher o formulário da Tela de consentimento antes de prosseguir. Para fazer isso, é necessário clicar na tela de consentimento no menu à esquerda, como mostra a imagem acima.
  • Preencha o formulário de pop-up com os detalhes abaixo:

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

google-app-id

  • Agora clique no botão Criar identificação do cliente para obter sua identificação e chave secreta do cliente.
  • Agora você pode usar o segredo e o ID do cliente para permitir que seus clientes acessem sua loja usando a conta do Google.

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.

páginas de informação

3.0 Telas do aplicativo PWA de front-end:

Tela inicial do 3.1:

tela inicial

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.

acordeão-menu-barra de navegação

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:

tela de categoria

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:

tela do produto

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

tela de login

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:

tela de carrinho de compras

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.

tela de checkout

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.

tela de pagamento

3.9 Minha conta tela

tela da minha conta

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.

tela de detalhes do pedido

Joe Parker

We boast of the best in the industry plugins for eCommerce systems and has years of experience working with eCommerce websites. We provide best plugins for platforms like - Magento, Prestashop, OpenCart and Shopify . We also provide custom module development and customization services for the website and modules..

Leave a Reply

Your email address will not be published. Required fields are marked *