Com o crescimento da indústria de comércio eletrônico e aplicativos móveis, os negócios online estão passando por grandes mudanças. As mais recentes mudanças de tecnologia são capazes de proporcionar uma experiência de compra agradável aos clientes e também auxiliam no aumento de vendas e receita. O Progressive Web App é uma tecnologia conhecida por sua capacidade de resposta, carregamento rápido, instalação rápida e outros vários recursos interessantes. Além disso, o eCommerce PWA Mobile App Builder permite que o administrador da loja transforme facilmente a loja de eCommerce em um Progressive Web App. O Knowband PWA Mobile App Maker para eCommerce é um plug-in pronto para lançar um aplicativo de compras em destaque. A extensão oferece uma experiência semelhante a um aplicativo nativo no PWA Mobile App sem qualquer tipo de conhecimento técnico. O administrador da loja pode lidar com todas as alterações e configurações do backend do módulo. As alterações serão refletidas no aplicativo móvel PWA de comércio eletrônico ao vivo automaticamente. É um aplicativo muito leve e pode ser executado sem problemas e sem problemas em qualquer dispositivo.
[NOVA ATUALIZAÇÃO] Recurso RTL em aplicativos móveis KnowBand PWA:
A linguagem desempenha um papel importante em chamar a atenção do usuário e melhorar a experiência de compra. Porém, muitos aplicativos móveis de comércio eletrônico não podem atingir um vasto público móvel devido à barreira do idioma. Para atingir o mercado regional e globalmente, o administrador da loja só precisa adicionar seu idioma nativo no site e no Progressive Web App. Com o PWA Mobile App Maker, é muito útil lançar o Progressive Web App para a loja de comércio eletrônico. O administrador da loja pode adicionar vários idiomas no PWA Mobile App, incluindo idiomas RTL, como árabe, hebraico, persa, etc. O Progressive Web App oferece suporte a todos os idiomas disponíveis no site de comércio eletrônico. Isso torna mais fácil atingir o público de diferentes regiões e expandir o alcance dos negócios. Agora, o administrador da loja pode incluir mais idiomas no aplicativo além do site. Aqui estão algumas das telas que mostram a aparência das telas RTL:
O que é PWA Mobile App Builder e como ele funciona?
O Progressive Web App Creator oferece uma ótima experiência do cliente aos usuários e é um plugin de software pronto que permite ao administrador da loja realizar todas as personalizações. Todas as mudanças são realizadas com alguns ajustes do mouse no painel de administração, sem nenhum conhecimento de codificação. Depois que o site de comércio eletrônico for integrado ao Progressive Web App Builder, todos os dados / inventário do site de comércio eletrônico serão buscados automaticamente no aplicativo móvel. O usuário pode instalar facilmente o Progressive Web App apenas acessando a URL da loja no navegador móvel. A Knowband oferece o PWA Mobile App para todas as principais plataformas, como PrestaShop, Magento 2, WooCommerce, OpenCart. Verifique mais detalhes nos links abaixo:
Outros recursos importantes do Progressive Web App Creator:
Estes são alguns pontos que você deve considerar em seu Progressive Web App antes de começar. Esses recursos ajudam o negócio de comércio eletrônico a obter um impulso na conversão –
1. Fácil criação de marca com opção de personalização:
A opção de marca no eCommerce PWA Mobile App consiste em um logotipo do aplicativo, nome da marca, ícone, imagem, tela inicial, cor de fundo, etc. Isso permite que o administrador da loja estabeleça a identidade da marca na mente dos clientes que usam o PWA Mobile Aplicativo. Estratégias de branding ruins podem levar a diminuir o tráfego e reduzir a taxa de conversão. Toda a aparência do layout da tela inicial, cor, fonte, etc. pode ser facilmente alterada no painel de administração do módulo. O conjunto certo de banners, imagens e texto pode levar a conversões e interface de aplicativo aprimoradas.
2. Compatível com tablet e celular:
O eCommerce Progressive Web App não depende de plataforma ou dispositivo e é muito leve. O aplicativo de comércio eletrônico pode ser executado sem problemas em Android / iOS e celular / tablet e ser facilmente adaptado a todos os dispositivos de vários tamanhos de tela.
3. Login e check-out com um clique:
O PWA Mobile App Builder consiste em opções de login com um clique com Facebook e Google. O login embutido e as opções de registro, como Google e Facebook e e-mail, permitem que os usuários acessem o PWA Mobile App com facilidade. O aplicativo de compras de comércio eletrônico permite que os clientes preencham apenas as informações necessárias durante a realização das transações. Isso dá a eles o benefício de um check-out simplificado. Esta opção evita que o cliente fique irritado e oferece um processo de transação tranquilo.
4. Suporte a todos os métodos de pagamento e envio:
Para ganhar a confiança dos clientes, o administrador da loja pode usar várias opções de pagamento e envio no aplicativo móvel PWA. Todas as opções de pagamento e envio disponíveis no site de comércio eletrônico podem ser adicionadas ao Progressive Web App. Os clientes podem comprar facilmente nas opções de pagamento e envio mais preferidas.
5. Sincronização em tempo real:
O recurso de sincronização em tempo real busca o inventário e os dados do produto do site de comércio eletrônico no aplicativo móvel automaticamente. O administrador da loja pode atualizar facilmente o inventário do aplicativo a partir do site, sem a necessidade de putar esforços manuais novamente.
6. Aplicativo leve com carregamento rápido:
O aplicativo PWA é muito mais leve e de carregamento rápido do que os aplicativos nativos. O Progressive Web App Builder garante um desempenho rápido do aplicativo e faz com que ele seja executado sem problemas em todos os dispositivos e plataformas. Os usuários não precisam depender da Play Store e App Store para instalar o aplicativo móvel de comércio eletrônico.
7. Suporta modo offline:
O eCommerce PWA Mobile App Builder consiste em um cache de dados carregados anteriormente. Ele mostra os dados aos usuários, mesmo que eles não estejam conectados à Internet. O usuário usa convenientemente o aplicativo de compras com facilidade e adiciona produtos à sua lista de desejos e carrinho.
8. Opções de chat de Zopim e Whatsapp:
O Progressive Web App Maker é composto pelos recursos Zopim e Whatsapp Chat que auxiliam na solução de dúvidas e problemas dos clientes. O suporte ao cliente está disponível 24 horas por dia, 7 dias por semana para compradores móveis. O recurso permite que o usuário se conecte ao administrador da loja sempre que necessário.
Conclusão:
Este blog consiste em recursos do PWA Mobile App Builder de eCommerce que garantem um desempenho rápido e um canal de compras confiável para o seu público móvel. Esse PWA Mobile App pode dar um impulso e uma vantagem competitiva aos negócios. Os excelentes recursos do plugin readymade ajudam a alcançar uma boa taxa de conversão e vendas do público móvel. Você pode nos encontrar em support@knowband.com em caso de dúvidas.
O aplicativo PWA Mobile para comércio eletrônico foi projetado e desenvolvido para fornecer facilidade ao administrador da loja por possuir um aplicativo de compras. Os proprietários da loja agora podem transformar facilmente a loja de comércio eletrônico no Progressive Web App. O Progressive Web App é uma das tecnologias mais relacionáveis pela qual todo administrador de loja de comércio eletrônico deve optar. Ele oferece alguns recursos incríveis no aplicativo móvel, como modo offline, opções fáceis de personalização, independência de plataforma, notificações push, etc.
A Knowband é uma empresa renomada, especialmente conhecida por desenvolver plug-ins prontos para sites de comércio eletrônico. Desenvolvemos plug-ins de comércio eletrônico para diferentes plataformas, como OpenCart, PrestaShop, Magento 2, WooCommerce. Uma dessas extensões é PWA Mobile App Builder. Essa solução pronta permite que o administrador da loja torne seu site PWA ativo e os clientes obterão “Adicionar aplicativo PWA à tela inicial” para instalar e acessar o aplicativo de compras.
Observações importantes do aplicativo móvel PWA para trabalhar em dispositivos iOS:
Tem havido muitos mitos e confusões na indústria de comércio eletrônico – sobre o funcionamento dos aplicativos móveis PWA em dispositivos iOS como iPhone, iPad, etc. Aqui estão alguns dos principais para esclarecer o conceito:
1. Dispositivos iOS não permitem o prompt “Adicionar à tela inicial”
O PWA Mobile App Builder fornece uma facilidade para o cliente adicionar facilmente o aplicativo móvel na tela inicial do dispositivo sem acessá-lo da App and Play store. Assim que o URL da loja é aberto no navegador móvel, um prompt vem com “Adicionar à tela inicial”. Este recurso está funcionando perfeitamente no Android a partir de agora. Os usuários do aplicativo iOS precisam adicionar o Progressive Web App no iPhone / iPad manualmente porque o iOS não oferece nenhum pop-up “Adicionar à tela inicial” embutido.
2. As notificações push da web não funcionam no iOS
Notificação push é uma das melhores ferramentas de marketing do eCommerce PWA Mobile App Builder. O recurso de notificação push do eCommerce PWA Mobile App Maker é muito útil no envio de atualizações sobre descontos, ofertas, taxas de abandono de carrinho para compradores móveis. O administrador da loja pode facilmente configurar e enviar notificações push para usuários do Android, mas a partir de agora, esta opção não está disponível para usuários do iOS.
O que é PWA Mobile App Builder e como ele funciona?
O Progressive Web App Maker é uma tecnologia da web moderna que oferece uma experiência semelhante a um aplicativo nativo por meio de um aplicativo da web. É um plugin de software pronto que converte sua loja de comércio eletrônico em um Progressive Web App sem nenhum conhecimento de codificação. Além disso, o administrador da loja pode obter todas as vantagens do aplicativo de comércio eletrônico no Progressive Web App. Habilitar o PWA Mobile App em dispositivos móveis permite que o administrador da loja economize tempo e dinheiro e vem com opções de personalização fáceis.
Assim que o site for convertido em PWA Mobile App, sempre que qualquer usuário abrir a URL da loja no navegador do celular, o pop-up “Adicionar à tela inicial” estará lá. O Progressive Web App será simplesmente adicionado ao dispositivo móvel e o mesmo pode ser acessado a qualquer momento para navegar ou comprar produtos.
A Knowband oferece o PWA Mobile App Maker para todas as principais plataformas, como PrestaShop, Magento, WooCommerce, OpenCart. Verifique os links abaixo para obter mais informações:
Outros recursos importantes do PWA Mobile App Builder (no Android e no iOS)
Existem alguns recursos principais do Progressive Web App que estão disponíveis em dispositivos Android e iOS. Mencionamos alguns deles nesta seção:
1. Marca com tela inicial Home Personalização:
A marca é uma das partes mais importantes de todo negócio de comércio eletrônico porque dá uma identidade à marca de comércio eletrônico na mente dos clientes. O administrador da loja também pode tirar proveito da estratégia de marca apropriada, adicionando o logo da marca, o nome da marca, o ícone, a imagem, a tela inicial, a cor do plano de fundo etc. no Progressive Web App. Todas essas mudanças podem ser feitas facilmente acessando o backend do módulo.
O PWA Mobile App consiste em várias opções eficazes de personalização a partir das quais o administrador da loja pode alterar a aparência e o funcionamento do aplicativo sem qualquer alteração na codificação técnica. O PWA para comércio eletrônico permite que o administrador da loja execute as alterações mesmo se o aplicativo estiver ativo. O administrador da loja pode alterar banners, imagens, controles deslizantes, cores intuitivas e fonte, etc., e projetar o layout da tela inicial a partir do painel de administração.
2. Compatível com tablet e celular:
O eCommerce PWA Mobile App é muito leve e pode ser facilmente compatível com todos os dispositivos. O eCommerce Progressive Web App não é dependente de plataforma ou dispositivo e pode ser executado sem problemas em Android ou iOS e em celulares ou tablets.
3. Login e check-out com um clique:
A maioria dos aplicativos de eCommerce mobile não é capaz de fornecer a opção de login e checkout fácil que pode levar a uma alta taxa de abandono do carrinho. O PWA Mobile App Builder oferece solução de login de um clique com Google e Facebook. O administrador da loja pode ativar as opções de login social e login / registro de e-mail. O simples processo de checkout permite que os clientes preencham as informações necessárias para completar as transações. Esta opção permite apenas que os usuários preencham as informações relevantes para concluir o pedido no PWA Mobile App.
4. Suporte a todos os métodos de pagamento e envio:
O administrador da loja também pode incluir o pagamento múltiplo e envio no inAplicativo móvel PWA de comércio eletrônico disponível no site de comércio eletrônico. O cliente pode comprar convenientementecom o pagamento e o método de envio preferidos. As opções de pagamento e envio confiáveis aumentam a confiança do cliente e os persuadem a comprar mais.
5. Suporte a idiomas multilíngue e RTL:
O eCommerce PWA Mobile App suporta todos os idiomas disponíveis no site de comércio eletrônico. O Progressive Web App também permite que o administrador da loja adicione vários idiomas, incluindo scripts RTL (da direita para a esquerda) como árabe, hebraico, persa, etc. O comerciante de e-commerce pode incluir os idiomas de acordo com a região de destino e as necessidades dos usuários. Os compradores móveis só precisam selecionar o idioma no aplicativo de comércio eletrônico e ele será traduzido de acordo.
6. Sincronização em tempo real:
A sincronização em tempo real garante que todo o inventário de produtos e dados do site de comércio eletrônico sejam buscados no aplicativo de compras automaticamente. Se alguma alteração for realizada no estoque da loja, a mesma também será refletida no aplicativo da Web progressivo de eCommerce front-end. Isso elimina os esforços manuais do administrador da loja e economiza muito tempo.
7. Aplicativo leve com carregamento rápido:
O PWA Mobile App Builder é muito leve e oferece um desempenho rápido se o compararmos com os aplicativos nativos. O aplicativo móvel Progressive permite que o cliente instale-o sem se preocupar com o espaço nos celulares. O aplicativo PWA também não depende da Play Store e da App Store. O usuário pode instalá-lo diretamente do site de comércio eletrônico.
8. Suporta modo offline:
O modo offline do PWA Mobile App permite que os usuários acessem o aplicativo móvel de comércio eletrônico sem qualquer internet. O cache das telas carregadas anteriormente aparece no Progressive Web App. Esta opção permite que o usuário use convenientemente o aplicativo móvel com facilidade, mesmo se estiver enfrentando problemas de Internet.
9. Opções de chat de Zopim e Whatsapp:
O Progressive Web App Builder fornece um recurso de bate-papo conveniente para compradores móveis. Os usuários podem se conectar diretamente ao administrador da loja sobre suas dúvidas, problemas e confusão e obter respostas via chat. O administrador da loja pode fornecer soluções instantâneas para suas preocupações. Este recurso permite que o usuário se conecte com o administrador da loja a qualquer momento e obtenha a assistência necessária.
10. Compatível com Multi-vendor Marketplace:
O fabricante do Progressive Web App também é compatível com o mercado de vários fornecedores. O plug-in do mercado de vários fornecedores permite que o administrador da loja registre facilmente o vendedor, obtendo algumas informações necessárias. Permite que os vendedores se cadastrem no marketplace web e o mesmo seja buscado no aplicativo PWA de eCommerce junto com seus perfis e produtos.
Aqui, neste artigo, tentamos cobrir todas as preocupações relacionadas ao aplicativo PWA Mobile e à plataforma iOS. Junto com isso, tentamos restringir todos os recursos pendentes do plugin PWA Mobile App Builder. IÉ a opção mais conveniente para levar sua empresa até a plataforma mobile e ajudá-lo a atingir o objetivo que você busca.
Para saber mais sobre o PWA Mobile App, entre em contato conosco em support@knowband.com.
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:
�> 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�que ele/ela está prestes a comprar. 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.
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.
