PrestaShop PWA Mobile App – User Manual


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

Compatível com PrestaShop Multi-vendor Marketplace

Os PrestaShop Multi-vendor Marketplace 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 mudanças regulares em aplicativos da Web progressivos. As opções nesta guia fazem com que o aplicativo funcione nos dispositivos dos compradores online.

configurações gerais-1

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: Habilite a exibição de uma breve descrição do produto na tela do Progressive Web App
d) Habilitar logotipo: Adicione o logotipo da sua loja no cabeçalho do aplicativo PWA e mostre sua marca aos usuários.

configurações gerais-2

e) Cor de fundo da tela inicial: Escolha a opção de cor certa para o fundo da tela inicial do aplicativo 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 trabalho no aplicativo PWA, o que você achar que não está certo. No site eles geralmente funcionam 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: Habilite esta funcionalidade para oferecer suporte a caracteres não ASCII no aplicativo Web progressivo.

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.

push-Notifications-1

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

firebase-project
Criar Novo Projeto Conforme você clica 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
Gerenciar as configurações do projeto Depois de criar o projeto, clique em Configurações do projeto.

configurações do projeto
Vá para 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 o mesmo no painel de administração do módulo PWA.

firebase-details

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

chave do firebase

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

chave do servidor firebase

firebase-keys

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

notificações via push

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

notificações via push

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.

notificações via push

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 aplicativo PWA. Junto com isso, o administrador da loja pode até personalizar a notificação manual e enviá-la aos usuários do aplicativo Web progressivo.

push-notificações-história

A) Enviar notificação:

O que é melhor para projetar e enviar notificações push de acordo com a necessidade? Esta opção permite que os proprietários de lojas configurem e enviem uma notificação personalizada manualmente para os usuários do aplicativo PrestaShop PWA.

push-notificações-história
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.

layout de página inicial
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. 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, nas quais, no mínimo, 4 são obrigatórias.

principais categorias

B) Square Banner:

A listagem do Banner quadrado na tela inicial do aplicativo 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.

faixa quadrada
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.

banners deslizantes

D) Grid Banners:

Esses são banners em forma de quadrado listados na tela inicial do aplicativo 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.

banners de grade
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.

contagem regressiva-temporizador-banner
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.

produtos quadrados
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.

produtos deslizantes
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.

produtos de grade
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”.

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

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.

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: O nome do domínio da 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.

3.0 Telas do aplicativo PWA de front-end:

Tela inicial do 3.1tela inicial

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 aplicativo Progressive Web App.

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.

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:

Barra de navegação

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 WebProgressive 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:tela de categoria

1. Várias vistas:
As categorias no aplicativo PWA para PrestaShop podem ser visualizadas em lista e 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 de seu Progressive Web App é 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 “Fora de estoque” com base em tela do produtoEstado 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 tela de login 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 aplicativo Progressive Web 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, tela de carrinho de comprasquantidade, 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 módulo PrestaShop PWA têm um simplificado tela de checkoutcheckout 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 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 PrestaShop PWA App possui todos os pagamentos via web disponíveis na loja. Os compradores online podem encontrar uma experiência de pagamento semelhante no site e em aplicativos da web progressivos.

tela de pagamento

3.9 Minha conta tela

A tela Minha conta do aplicativo PrestaShop PWA permite que os usuários visualizem seus detalhes completos salvos no aplicativo, incluindo uma lista de pedidos anteriores.tela da minha conta

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.

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 *