1.0 Introdução
O rápido crescimento da indústria de comércio móvel levou à urgência de ter um aplicativo móvel de comércio eletrônico. Mas, criar aplicativos móveis envolve muita codificação e outros aspectos técnicos. Por que não transformar seu site online em um aplicativo da web? Oferecer um aplicativo PrestaShop PWA otimizado, ou seja, aprimoraria a experiência de compra móvel para os usuários. Este módulo PrestaShop PWA App foi projetado e construído para transformar sua loja em um aplicativo da web que pode ser gerenciado a partir de um painel de back-end amigável. Esses aplicativos vêm com vários recursos estendidos além dos aplicativos nativos, como modo offline e independência de plataforma, o que os torna uma solução de compras descomplicada e perfeita para os usuários.
1.1 Exibir aplicativo de demonstração:
Antes de comprar a extensão, visualize o funcionamento do aplicativo de demonstração abrindo o URL do aplicativo de demonstração PrestaShop PWA em seu navegador.
URL da loja de demonstração: https://psm.knowband.com/pwa/admin1
URL do aplicativo PWA: https://psm.knowband.com/pwa/pwa-app/
1.2 Principais recursos do PrestaShop Progressive Web App (PWA):
- Interface de tela inicial personalizável (editor DIY)
- Notificações push ilimitadas (notificações manuais e automatizadas)
- Suporte para chat de Zopim e WhatsApp
- Suporte a todos os métodos de pagamento e envio
- Sincronização em tempo real
- Atualização automática de estoque
- Aplicativo leve com carregamento mais rápido
- Suporte multilíngue e RTL
- Opções de e-mail e login social (Google e Facebook)
- Interface intuitiva com navegação em camadas
- Sem dependência do Google Play ou da Apple App Store
- Solução de etiqueta branca completa
- Acessibilidade no modo offline
- Check-out simplificado de uma página
- Controle de páginas CMS (páginas de informações)
- Mostrar produtos relacionados
- Exibir avaliações de usuários
- Funcionalidade de lista de desejos embutida
- Suporte para cupons / vouchers
- Suporte a multimoedas
[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 podem ser enviadas apenas para o dispositivo Android a partir do painel de administração do PrestaShop PWA Mobile App Builder.
[NOVA ATUALIZAÇÃO] PrestaShop PWA suporta scripts de linguagem RTL
O PrestaShop PWA Mobile App Creator agora suporta todos os idiomas mundiais, incluindo RTL (Right To Left), como árabe, hebraico, persa, etc. O administrador da loja pode trazer todos os idiomas de sua loja no Progressive Web App e pode até adicionar qualquer idioma RTL conforme a exigência. Por outro lado, os compradores móveis não enfrentarão nenhum problema ao acessar o aplicativo móvel PrestaShop PWA em seu idioma preferido.
Compatível com PrestaShop Multi-vendor Marketplace
O Mercado de vários fornecedores PrestaShop módulo é totalmente compatível com PrestaShop PWA Mobile App. O Progressive Web App exibe a seção do vendedor com todos os vendedores do marketplace no mesmo aplicativo. Os detalhes do vendedor permanecem sincronizados em tempo real com a web do marketplace e serão atualizados automaticamente no aplicativo PrestaShop PWA.
Observação: O aplicativo móvel PWA de vários fornecedores para PrestaShop é centrado apenas no cliente. Isso significa que não haverá nenhum painel de controle de vendedor ou gerenciamento no final do aplicativo. O administrador da loja pode gerenciar os vendedores do módulo PrestaShop Marketplace e o mesmo será atualizado no aplicativo instantaneamente.
Telas do Painel de Administração do 2.0
O PrestaShop PWA Mobile App pode ser totalmente configurado usando essas guias e configurações de administrador úteis. Tudo o que você precisa fazer é fazer alguns cliques necessários e alternar botões para fazer as alterações no Progressive Web App. Vamos discutir cada um deles em detalhes:
Configurações gerais do 2.1
Como o nome sugere, essas configurações gerais são para todos os tipos de alterações regulares em Progressive Web Applications (PWA). As opções nesta aba fazem o aplicativo funcionar nos dispositivos do comprador online.
a) Habilite o plug-in: Habilite o módulo PrestaShop PWA para fazer o aplicativo funcionar em dispositivos móveis.
b) Redirecionar na página do carrinho ao adicionar ao carrinho: Esta funcionalidade permite que o administrador controle o redirecionamento do botão “Adicionar ao carrinho”. Os usuários podem ser redirecionados ao carrinho de compras ou mantidos na tela do produto clicando em “Adicionar ao carrinho”.
c) Exibir descrição resumida:�Ative para exibir uma breve descrição do produto na tela do produto do Progressive Web App (PWA).
d) Habilitar logotipo: Adicione o logotipo da sua loja no cabeçalho do Progressive Web App (PWA) e mostre sua marca aos usuários.
e) Cor de fundo da tela inicial: Escolha a opção de cor certa para o plano de fundo da tela inicial do Progressive Web App (PWA).
f) Nome do aplicativo PWA: Escolha o nome do seu aplicativo PWA de acordo com sua escolha.
g) Selecione Layout: Escolha o layout da página inicial desejado para seu aplicativo PrestaShop. Você pode criar vários layouts de tela inicial no back-end de acordo com vários festivais e temas e usá-los de acordo com os requisitos da sua loja.
h) Métodos de envio desativados:�Desative os métodos de envio de trabalhar no�Progressive Web App (PWA)�o que você não achar certo. No site, eles funcionarão normalmente bem.
i) Páginas CMS ativadas: Escolha as páginas CMS desejadas a serem exibidas no aplicativo PrestaShop PWA.
j) Habilitar relatório de log de solicitação: Habilite a opção de compartilhar o arquivo de log nos aplicativos da web progressivos para obter detalhes de qualquer tipo de comportamento anormal do aplicativo.
k) Habilitar codificação de URL de links de imagem:�Ative esta funcionalidade para dar suporte a caracteres não ASCII no Progressive Web App (PWA).
Configurações de notificações push 2.2
As notificações push são uma ferramenta útil para comercializar e promover os produtos, negócios e ofertas de venda da sua loja. As configurações nesta guia permitem que os usuários configurem e enviem notificações push ilimitadas no aplicativo PrestaShop PWA.
Os vários detalhes nessas configurações serão obtidos quando você configurar a conta Firebase. Aqui está o processo passo a passo para fazer isso:
2.21 Como configurar uma conta Firebase?
– Faça login no Google Firebase
– Criar Novo Projeto Conforme você clica 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.
– Gerenciar as configurações do projeto Depois de criar o projeto, clique em Configurações do projeto.
– Vá para 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 o mesmo no painel de administração do módulo PWA.
– Obtenha a chave do servidor firebase na guia de mensagens na nuvem em Configurações:
– Adicione o 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 enviada aos usuários do aplicativo para a criação bem-sucedida do pedido do aplicativo PrestaShop PWA
B) Notificação por push da atualização do status do pedido:
Habilite / desabilite a notificação automática por push enviada aos usuários do aplicativo para qualquer atualização em relação ao status anterior de entrega do pedido. Os usuários podem visualizar esse status na guia “Detalhes do pedido” do aplicativo PWA
C) Notificação de envio de carrinho abandonado:
Habilite / desabilite a notificação push automatizada enviada aos usuários que abandonaram o carrinho sem comprar com sucesso. Esta notificação push será enviada aos usuários automaticamente após o intervalo de tempo inserido.
2.2 Histórico de notificações por push
Aqui, o administrador da loja pode visualizar o histórico completo de notificações push enviadas ao Progressive Web App (PWA). Junto com isso, o administrador da loja pode até personalizar a notificação manual e enviar a mesma para os usuários do Progressive Web App.
A) Enviar notificação:
O que é melhor para projetar e enviar notificações push conforme a necessidade? Esta opção permite que os proprietários das lojas configurem e enviem uma notificação personalizada manualmente para os usuários do aplicativo PrestaShop PWA.
Layout da Página Inicial do 2.3
O módulo PrestaShop PWA permite ao administrador da loja contornar as restrições de ter uma interface de usuário fixa da tela inicial e projetar aquela que se adapta às suas necessidades comerciais. Essa guia permite que o administrador da loja crie e salve vários layouts e os use de acordo com as ocasiões e festivais em execução.
Para configurar os layouts da página inicial do aplicativo PWA, os seguintes elementos estão disponíveis no back-end:
A) Principais Categorias:
As principais categorias são exibidas na forma de pequenos quadrados na tela inicial do Progressive Web App (PWA). Suas imagens e links de redirecionamento podem ser configurados aqui. Essas categorias podem ser usadas para destacar as principais marcas na tela inicial do aplicativo. O módulo PrestaShop PWA permite no máximo 8 categorias em que no mínimo 4 são obrigatórias.
B) Square Banner:
A listagem de Banner quadrado na tela inicial do Progressive Web App (PWA) oferece um bloco de banner em forma de quadrado no qual o administrador da loja pode usar a imagem desejada. O link de redirecionamento relevante pode ser usado para esses banners.
C) Bandeja horizontal deslizante:
Estes são os blocos de banner em forma de retângulo disponíveis em deslizamento horizontal na tela inicial do aplicativo PrestaShop PWA. Para isso também, a imagem e o link de redirecionamento são totalmente configuráveis.
D) Grid Banners:
Estes são banners em forma de quadrado listados na tela inicial do Progressive Web App (PWA) na forma de exibição de grade. O administrador da loja pode adicionar quantos banners forem necessários e definir seu link de redirecionamento.
E) Contagem regressiva Timer Banner:
O módulo PrestaShop PWA permite que o administrador da loja configure e adicione um banner baseado em cronômetro na tela inicial do aplicativo da web. O administrador da loja pode adicionar a imagem do banner e a tela inicial junto com o cronômetro até que o banner seja exibido na tela inicial do aplicativo web progressivo. Assim que o cronômetro terminar, o banner será removido automaticamente.
F) Quadrado Produtos:
A partir de banners, os aplicativos móveis PrestaShop PWA permitem a exibição de produtos em listas de blocos quadrados. O administrador pode escolher os produtos para este elemento.
G) Produtos de deslizamento horizontal:
Você pode adicionar os produtos na forma de deslizamento horizontal. Os produtos escolhidos podem ser de escolha do administrador da loja, como novidades, mais vendidos, produtos personalizados, etc.
H) Produtos de rede:
Os produtos também podem ser adicionados na tela inicial na forma de listas de blocos de visualização em grade. O administrador da loja pode escolher os produtos desejados e a quantidade a ser exibida na tela inicial do aplicativo PrestaShop PWA.
I) Produtos acessados recentemente:
O módulo PrestaShop Mobile PWA permite que o proprietário da loja adicione um elemento de guia recente na tela inicial do aplicativo da web. Ele exibirá todos os produtos navegados pelos usuários recentemente.
Observação: O administrador da loja pode adicionar até 20 elementos ao projetar o layout no painel de back-end.
2.4 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.
2.5 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: O nome do domínio da 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 do aplicativo PWA de front-end:
Tela inicial do 3.1
1. Layout dinâmico:
Usando vários elementos de design, o administrador da loja pode criar um layout dinâmico de acordo com a necessidade.
2. Logotipo da loja:
Adicione o logotipo da loja no cabeçalho do �Progressive Web�App (PWA).
3. Carrinho de Compras:
O ícone do carrinho de compras no canto superior direito da tela inicial permite que os usuários ativem a tela do carrinho.
4. Menu de Navegação:
Navegue pelas categorias nos aplicativos com o menu de navegação esquerdo na tela inicial.
Menu Acordeão 3.2 (barra de navegação)
O aplicativo da web progressivo vem com a categorização adequada dos produtos disponíveis no site. Os compradores móveis podem navegar facilmente por produtos de várias categorias. Todas as páginas CMS também estão disponíveis no menu Accordion. Ele oferece as seguintes opções:
1. Minha conta:
A opção Minha conta contém todas as informações pessoais, de envio e de pedido do usuário. Os compradores do aplicativo PWA podem visualizar todos os dados armazenados relacionados a eles e também podem atualizá-los.
2. Categorias
As categorias exibidas no menu de navegação esquerdo do aplicativo �Progressive Web�(PWA) são as mesmas do seu site.
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.
4. Línguas)
A opção de idioma permite que os usuários do aplicativo PWA visualizem o aplicativo Web no idioma desejado. Todos os idiomas disponíveis são exibidos somente nesta opção.
5. Moeda (s)
Todas as moedas disponíveis em seu site são exibidas aqui no aplicativo PrestaShop PWA.
6. Entrar sair
Os usuários podem facilmente entrar / sair do PrestaShop Progressive Web App por meio desta opção.
3.3 Category Screen:
1. Várias vistas:
As categorias no Progressive Web App (PWA) para PrestaShop podem ser visualizadas tanto em lista quanto em grade.
2. Classificação:
Essa opção permite que os compradores online escolham a ordem de classificação para restringir a pesquisa e obter o produto desejado com facilidade.
3. Filtro:
A opção de filtrar produtos simplifica a pesquisa de produtos. Os usuários podem filtrar todos os produtos em categorias usando vários atributos como tamanho, cor, preço etc.
Tela do produto 3.4:
A tela do produto do seu Progressive Web App (PWA) é simples e intrigante. Várias imagens do mesmo produto são exibidas junto com o nome e o preço. A disponibilidade do produto também é exibida como “Em estoque” ou “Esgotado” com base na 
Estado do inventário. Ele contém as seguintes outras opções:
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 do 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 processar posteriormente o carrinho para compra.
6. Compartilhamento Social de Produtos:
A opção de compartilhamento do produto permite que os usuários compartilhem o produto em vários canais sociais.
Tela de Login 3.5
O Progressive Web App (PWA)�
oferece várias opções de login de um toque e torna o processo de login / registro mais simples:
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. Inscrever-se
Todos os novos usuários do aplicativo podem se inscrever e criar sua conta na loja a partir do PrestaShop PWA App. O formulário de inscrição pede apenas os detalhes necessários para criar uma conta.
3. Entre com Facebook
Os usuários podem fazer login no aplicativo PWA usando suas credenciais de conta do Facebook.
4. Faça o login com o Google+
Os usuários podem fazer login no �Progressive Web�app (PWA) usando suas credenciais de Conta do Google.
Tela do carrinho de compras 3.6:
A tela Carrinho de compras do seu aplicativo da web Progressive 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 Voucher
Esta opção permite aos usuários usar cupons do site e obter 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. Atualizar a quantidade do produto
Os usuários do aplicativo PWA podem até atualizar a quantidade do produto com a opção “Atualizar quantidade”.
4. Remova o 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 podem sair do carrinho para procurar mais produtos em seu aplicativo da web progressivo.
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
Os aplicativos da Web progressivos com o módulo PrestaShop�Progressive Web App (PWA) têm um 
checkout em uma única tela com apenas informações relevantes. Os usuários 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 progressivos do aplicativo da web podem ver os detalhes do produto antes de fazer 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 atenda às suas necessidades.
4. Comentário de encomenda
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 do pagamento
Esta seção exibe os detalhes completos do pagamento da repartição envolvidos na compra.
7. Prossiga para o pagamento
Os usuários do aplicativo Progressive Web App (PWA) serão redirecionados para a tela de pagamento depois de tocar no botão “Prosseguir para o pagamento”.
3.8 Payment Screen:
A tela de pagamento do aplicativo PrestaShop�PWA 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 da web progressivos.
3.9 Minha conta tela
A tela Minha conta do PrestaShop Progressive Web App (PWA) permite que os usuários visualizem seus detalhes completos salvos no aplicativo, incluindo uma lista de pedidos anteriores.
Tela 3.10 Order Detail
A tela de detalhes do pedido do PrestaShop Progressive Web App fornece detalhes completos de um pedido específico do aplicativo PWA. Os usuários podem visualizar facilmente o endereço de entrega, o resumo do produto, o método de envio e pagamento e o resumo do custo total, etc. Há até uma opção para manter um controle do status do pedido e sua entrega.
