1.0 Introdução
Este plug-in pronto é projetado e desenvolvido pela KnowBand para converter sua loja WooCommerce em execução em um aplicativo da Web progressivo rico em recursos. Depois que a loja de comércio eletrônico for transformada em aplicativo PWA, sempre que qualquer usuário abrir a URL da loja no navegador móvel, a pessoa em questão será solicitada a “Adicionar PWA à tela inicial”. Uma vez que o WooCommerce PWA Mobile App é adicionado à tela inicial do dispositivo móvel, o usuário pode navegar na loja no aplicativo como qualquer outro aplicativo. O WooCommerce PWA Mobile App é um aplicativo da web que, na verdade, não depende da publicação de aplicativos no Google Play e na Apple App Store. Os usuários podem simplesmente adicionar o Progressive Web App ao dispositivo móvel e usar como qualquer outro aplicativo.
1.1 Recursos atraentes para escolher o WooCommerce PWA:
– Carregamento mais rápido e desempenho rápido – Tela inicial totalmente personalizável com o editor DIY – Suporte a todos os métodos de envio e pagamento do site – Interface amigável e envolvente – Sem dependência de lojas de aplicativos – Totalmente marca para sua loja – E-mail e login social (Google e Facebook ) – Suporte multilíngue e RTL – Funcionamento no modo offline – Sincronização ao vivo b/w site e aplicativo – Compatível com Android e iOS – Check-out de uma página – Aplicativo leve – Gerenciamento de páginas CMS
1.2 Veja a demonstração do WooCommerce 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://wcdemo1.knowband.com/pwa/wp-login.php
App de demonstração PWA: https://wcdemo1.knowband.com/pwa/pwa-app/
Nota-�Copie e cole o URL no navegador móvel e “Adicionar à tela inicial”.
[IMP] Notas para iOS:
�> Os dispositivos iOS não oferecem nenhum prompt embutido “Adicionar à tela inicial”, portanto, os usuários precisam adicionar manualmente o PWA Mobile App à tela inicial do iPhone ou iPad. �> iOS não suporta notificações push da web. Portanto, as notificações push não serão recebidas no PWA instalado no iPhone ou iPad.
[NOVA ATUALIZAÇÃO]�WooCommerce�PWA suporta scripts de linguagem RTL:
O criador do WooCommerce Progressive Web App agora suporta todos os idiomas do mundo, incluindo RTL (direita para a esquerda), como árabe, hebraico, persa, etc. O administrador da loja agora pode até adicionar idiomas RTL no WooCommerce PWA Mobile App.
2.0 Telas do painel de administração:
Explore todas as configurações no Painel de administração do WooCommerce PWA Mobile App e verifique como elas funcionam com a ajuda abaixo das capturas de tela detalhadas:
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) Ativar/Desativar: 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) Redirecionar na página do carrinho quando adicionar ao carrinho: Controle o redirecionamento do botão Adicionar ao carrinho sempre que qualquer usuário tocar no botão Adicionar ao carrinho.
e) Exibir breve descrição: Ative e exiba uma breve descrição do produto (se adicionado na página do produto do site).
f) Exibir Adicionar à tela inicial pop-up: Ofereça a mensagem pop-up “Adicionar à tela inicial” e permita que os usuários adicionem o aplicativo PWA nos dispositivos móveis.
g) Habilitar logotipo: Adicione o logotipo da sua marca no cabeçalho do WooCommerce PWA Mobile App.
h) Cor de fundo da tela inicial: Escolha e defina a cor da tela inicial do WooCommerce Progressive Web App.
i) Nome do aplicativo PWA: Digite o nome desejado para o aplicativo WooCommerce PWA. Ele será exibido assim que o usuário adicionar o aplicativo nos dispositivos móveis.
j) Imagem do ícone do aplicativo: Adicione a imagem do ícone do aplicativo no painel de administração.
k) Selecione a Fonte do Aplicativo: Escolha a fonte para o seu aplicativo móvel WooCommerce PWA.
l) Selecione Layout para Home Page: Escolha um layout de tela inicial pré-adicionado para o WooCommerce PWA App.
m) Cor do botão do aplicativo: Escolha a cor do botão para o aplicativo móvel PWA.
n) Cor do tema do aplicativo: Escolha a cor do tema para o aplicativo PWA.
o) Cor de fundo do aplicativo: Escolha a cor de fundo para o aplicativo PWA.
p) Ativar Barra de Abas: Ative a barra de guias na parte inferior do aplicativo PWA para navegação rápida e fácil.
q) CSS personalizado: Insira o código CSS para melhorar a aparência das páginas de visualização na Web do aplicativo PWA, como pagamento de visualização na Web, páginas CMS, etc.
Configurações de notificações push 2.2
As notificações push são a melhor ferramenta de marketing para o aplicativo PWA para WooCommerce. O administrador da loja pode simplesmente promover os produtos e ofertas da loja para os usuários do aplicativo e gerar mais vendas e receita.�Insira todos os detalhes nas configurações de notificação por push criando um projeto do 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:
Ative/desative a notificação automática por push para ser enviada aos usuários do aplicativo sempre que fizerem um pedido bem-sucedido do aplicativo WooCommerce PWA.
B) Notificação por push da atualização do status do pedido:
Ative/desative a notificação push automatizada enviada sempre que o status do pedido do aplicativo for atualizado. Os usuários do aplicativo móvel WooCommerce PWA podem ficar de olho nos detalhes dos 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 de aplicativos PWA conforme a necessidade. O administrador da loja pode configurar essas notificações por conta própria e enviá-las aos usuários do aplicativo WooCommerce PWA.
Layout da Página Inicial do 2.4:
O WooCommerce PWA Mobile App 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 o festival, venda, ocasião etc. certamente pode ajudar a melhorar as vendas por meio dos aplicativos móveis WooCommerce PWA.
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:
a) Principais categorias:�
b) Faixa quadrada:�
c) Faixa Deslizante Horizontal:�
d) Faixas de grade:�
e) Banner do temporizador de contagem regressiva:�
f) Produtos Quadrados:�
g) Produtos deslizantes:�
h) Produtos da Rede:�
Páginas de Informação 2.5:
Adicione páginas CMS no aplicativo e ofereça conteúdo informativo aos usuários do WooCommerce PWA Mobile App.
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?
- 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.
- 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 (https://www.yourstore.com).
URI de redirecionamento autorizado ou URI da página de redirecionamento do Loginizer:
https://example.com/pwa-app/login
- 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.
3.0 Telas de PWA de front-end:
Tela inicial do 3.1:
A tela inicial do WooCommerce PWA Mobile App é totalmente personalizável com o 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 orientada para a venda.
1. Layout personalizado:
Usando vários banners, controles deslizantes e elementos de produtos, o administrador da loja pode criar um layout dinâmico conforme a necessidade.
2. Logotipo da marca:
Use o logotipo da sua loja no cabeçalho superior do aplicativo WooCommerce 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.
3.2 Menu Acordeão (Barra de Navegação):
O WooCommerce PWA Mobile Apps vem com categorização perfeita e adequada disponível. Os usuários podem encontrar categorias relevantes no menu de navegação à esquerda e navegar pelos produtos. Várias páginas do 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 envio e pedido. Os compradores do WooCommerce Progressive Web App podem visualizar e atualizar as informações salvas.
2. Categorias
As categorias exibidas no menu de navegação esquerdo do WooCommerce 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. Línguas)
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 WooCommerce PWA.
6. Entrar sair
Os usuários podem fazer login/logout facilmente do aplicativo WooCommerce PWA por meio desta opção.
3.3 Category Screen:
Telas de categoria sem 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 inventário da loja permanecerá sincronizado com o WooCommerce PWA Mobile App 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 WooCommerce podem ser navegadas na visualização de lista e 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 WooCommerce PWA Mobile App oferece a opção de filtrar produtos simplificando a pesquisa de produtos. Os compradores on-line podem encontrar os produtos desejados em categorias usando filtros para vários atributos, como tamanho, cor, preço etc.
Tela do produto 3.4:
A tela do produto do WooCommerce Progressive Web App é tão simples e intrigante quanto poderia ser. Com todas as opções e informações necessárias sobre o produto, é questão de minutos para que os usuários tenham certeza sobre o produto
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.
5. Adicionar ao carrinho:
Este botão permite aos usuários adicionar produtos ao carrinho. Os usuários podem ainda processar o carrinho para compra.
6. 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 WooCommerce PWA Mobile App oferece opções de login social com um toque e torna o processo de login/registro mais simples. O WooCommerce Progressive Web App oferece login no Google e no 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 sua conta na loja do aplicativo WooCommerce PWA. O formulário de inscrição solicita 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 do carrinho de compras do aplicativo móvel WooCommerce PWA exibirá todos os produtos adicionados ao carrinho de compras. Os usuários do aplicativo podem visualizar o nome do produto, quantidade, preço total e custo de envio. Esta tela tem 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 WooCommerce tem um checkout simplificado de tela única com apenas informações relevantes. Os usuários do aplicativo podem visualizar detalhes completos de checkout, como detalhes de envio, detalhes de cobrança, 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.
5. Resumo de pagamento:
Esta seção exibe os detalhes completos do pagamento da repartição envolvidos na compra.
6. 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 WooCommerce PWA App tem todos os pagamentos via web disponíveis na loja. Os compradores on-line podem encontrar experiências de pagamento semelhantes em sites e aplicativos.
3.9 Minha conta tela
A tela Minha conta do WooCommerce PWA Mobile App permite que os compradores online visualizem seus detalhes completos salvos no Progressive Web App. Essa tela também exibe uma lista de pedidos anteriores de aplicativos.
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 aplicativo 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 WooCommerce 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 acompanhar o status do pedido e da entrega.