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.
Hoje em dia, as pessoas estão gastando muito mais tempo usando dispositivos móveis para acessar a internet e consumindo o dobro dos dados que consomem em sites de desktop. Isso também vale para os padrões de compras online. Usar um site de comércio eletrônico para gerar vendas é um desafio quando você tem conectividade lenta com a Internet. E pedir aos usuários que instalem um aplicativo móvel é, novamente, um assassino de conversão. O PWA (Progressive Web App) se encaixa entre o aplicativo móvel nativo e o navegador do site e é mais provavelmente projetado para impulsionar as conversões móveis para lojas de comércio eletrônico. Progressive Web App é o novo formato obrigatório para a marca móvel de sua empresa. Os aplicativos móveis PWA superaram o problema mais alarmante de distribuição. Você costuma usar o navegador para navegar no Google Maps? Provavelmente não! A pesquisa diz que a maioria dos usuários, cerca de 87% opta por navegar em aplicativos nativos. Isso torna obrigatório ter o aplicativo instalado no dispositivo do usuário. O aplicativo móvel PWA é derivado diretamente do navegador móvel do site e não há necessidade de visitar qualquer loja de aplicativos ou meio de terceiros para instalar o aplicativo. Na verdade, sempre que qualquer usuário abre um site ativo do PWA em um navegador móvel, uma mensagem de prompt pede “Adicionar aplicativo à tela inicial”. Os desenvolvedores de aplicativos e trabalhadores de serviço (arquivos de script) em combinação criam PWAs para oferecer uma experiência de usuário dinâmica e tranquila ao acessar o conteúdo através de um site / aplicativo da web.
Introdução ao Progressive Web App
Os Progressive Web Applications, também conhecidos como PWA, são versões aprimoradas de aplicativos da web, desenvolvidos com javascript. Os PWAs têm recursos extras, como o usuário pode acessá-los offline e também receber notificações push com base nos padrões de marketing. O PWA melhora o desempenho, a segurança, a acessibilidade e os recursos de SEO do seu site. Ele aumenta sua confiabilidade e fluxo de trabalho. Eles permitem que você trabalhe offline e em redes instáveis. Os aplicativos da web progressivos são rápidos e envolventes. Os PWAs têm navegação contínua e são embalados com animações suaves e rolagem sem interrupções, o que o torna mais rápido.
Principais vantagens do Progressive Web App
Para criar aplicativos da web eficientes, os aplicativos da web progressivos (PWAs) são mais uma técnica que inclui uma combinação de tecnologias. Com uma interface de usuário aprimorada, os indivíduos podem passar mais tempo em sites e ver mais anúncios. Eles preferem comprar mais e têm maior probabilidade de retornar regularmente com notificações de aviso.
# 1. Desempenho confiável
Um site típico força os usuários a aguardar enquanto está ocupado fazendo viagens para o servidor, sem fazer nada. Cada solicitação da rede para buscar um ativo ou parte dos dados passa por um service worker, que primeiro verifica se a resposta a uma solicitação específica já está no cache. Conforme os usuários obtêm conteúdo real imediatamente, mesmo em um link incorreto, eles confiam mais no aplicativo e o vêem como mais confiável.
# 2. Carregamento rápido
Esta IU não é instável. A rolagem é perfeita e o aplicativo reage à interação do usuário com facilidade. Seu Progressive Web App será naturalmente mais rápido que os aplicativos nativos, sendo leve e possuindo um mecanismo de carregamento rápido. Isso fornece aos usuários do aplicativo uma experiência de usuário excepcional que mantém os serviços em pé de igualdade.
# 3. Mais envolvente
Parece um aplicativo nativo. Na tela inicial do usuário, um PWA pode obter uma localização. Ao oferecer um ambiente de trabalho em tela inteira, ele fornece uma experiência semelhante a um aplicativo nativo. Para manter os usuários ativos, ele faz uso de notificações push.
# 4. Uso offline
O padrão de “primeiro off-line ou” primeiro em cache “é a técnica mais comum para fornecer conteúdo ao usuário. Se um recurso estiver em cache e a acessibilidade off-line poderá ser verificada antes de baixar o conteúdo. Baixe-o se ainda não estiver no cache e guarde-o para uso futuro.
# 5. Notificações via push
As notificações push aumentam efetivamente a taxa de conversão de sua loja de comércio eletrônico. Os PWAs permitem que os proprietários da loja configurem e enviem notificações push ilimitadas. Eles têm funcionalidades embutidas para automatizá-los e agendá-los. Usar títulos e gráficos atraentes em suas notificações pode fazer maravilhas.
Por que você deve ter um aplicativo da Web progressivo?
Embora um PWA não seja uma funcionalidade obrigatória, é uma forma de melhorar seu relacionamento com clientes atuais e potenciais, ao mesmo tempo em que supera o difícil desafio de visitantes que saem do site. Muitas pessoas se esquecem dos prompts para inserir uma lista de e-mail e às vezes não dão o próximo passo para abrir e ler os e-mails, mas você pode construir fidelidade real à marca se conseguir que um cliente use seu Progressive Web App. O Google oferece suporte aos PWAs desde 2015 e agora o iOS também os permite em seu navegador da web. O Google pontua melhor os aplicativos da Web progressivos durante o rastreamento e outras práticas. Várias extensões do Google Chrome são criadas para oferecer suporte aos PWAs. O PWA pode ser uma boa ideia se você estiver iniciando seu novo site. Faz sentido distribuir seu aplicativo da web aos usuários, no início, para obter seus comentários antes de criar seu aplicativo móvel responsivo. O Progressive Web App não pode ser substituído por aplicativos móveis responsivos, mas de certa forma, quando você planeja lançar seu aplicativo móvel, é uma boa opção para começar.
A KnowBand desenvolveu o PWA para várias plataformas de comércio eletrônico:
A extensão Progressive Web App Builder está disponível para quase todas as principais plataformas de comércio eletrônico. O administrador da loja só precisa escolher o plugin certo e instalá-lo para seguir as diretrizes simples de configuração.
Principais recursos das extensões Progressive Web App
Os recursos mencionados abaixo são os mais proeminentes e foram todos reunidos e nossos especialistas da Knowband desenvolveram o Aplicativo Web Progressivo. O aplicativo é leve e de carregamento mais rápido e desempenho aprimorado. O aplicativo PWA Mobile oferece suporte a várias moedas e vários idiomas, o que permite que você expanda seus negócios globalmente.
1. Altere a aparência do PWA- O dono da loja pode alterar as cores, adicionar o logotipo da marca e vários designs para torná-la bonita. Até mesmo o design completo da tela inicial pode ser editado e alterado por meio de um editor DIY. As alterações serão refletidas no aplicativo real a qualquer momento.
2. Lista de produtos em destaque – Projetado de forma que o usuário possa adicionar diferentes elementos baseados em produtos / categorias. O administrador da loja pode mostrar os mais vendidos, produtos em destaque, comprados recentemente, etc. na tela inicial.
3. Fácil instalação- Os usuários não precisam visitar nenhuma loja de aplicativos de terceiros. Em vez disso, o PWA Mobile App pode ser adicionado ao telefone diretamente abrindo o site em um navegador móvel.
4. Confiável e envolvente – O eCommerce PWA Mobile App funciona perfeitamente em nenhuma / lenta conectividade com a Internet. Mesmo no modo offline, os dados em cache e as páginas carregadas anteriormente tornam o conteúdo disponível para os usuários do aplicativo.
5. E-mail e login social- O proprietário da loja pode permitir que os usuários se inscrevam adicionando um endereço de e-mail ou com suas contas de mídia social.
6. Suporte a todos os métodos de pagamento e envio- O cliente geralmente se recupera devido aos métodos de envio e pagamento limitados, mas com o PWA, isso não é mais um desafio. Todos os métodos de pagamento e envio do site estarão funcionando ativamente no PWA Mobile App.
7. Modo offline- Mesmo sem uma conexão com a Internet ou em uma rede lenta, seu aplicativo PWA funcionará corretamente. Os usuários não precisarão depender da Internet o tempo todo para comprar itens de aplicativos.
8. Check-out em uma página, notificações push ilimitadas, sincronização ao vivo, e Rastrear Pedido recursos semelhantes são as vantagens adicionais do PWA.
9. Venda cruzada– Permite que você mostre produtos relacionados para melhorar as vendas no PWA. Ele também permite que o gerente da loja selecione as páginas do CMS no site e será otimizado automaticamente. Aqui está um lista de benefícios oferecidos pelo PrestaShop PWA (Progressive Web App). Desenvolvemos os PWAs para muitos clientes e alguns dos histórias de sucesso para 2020 são discutidos em nosso artigo anterior.
Conclusão:
Transforme o site de comércio eletrônico on-line no PWA Smartphone App e ofereça aos visitantes móveis um aplicativo de compras na web integrado. Os PWAs altamente envolventes podem ser iniciados a partir da tela inicial, pois você pode adicionar um ícone para ele e até mesmo enviar notificações push. Este é um ótimo exemplo de desenvolvimento de tecnologia e tem muito escopo em avanços futuros. Os Progressive Web Apps ainda estão em sua infância, conforme descrito, mas é um momento estimulante para experimentar as metodologias por trás deles e ver como eles podem se relacionar com seus aplicativos da web. Sinta-se à vontade para comentar no tópico se você tiver sugestões sobre lugares que gostaria de ver abrangidos.
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.
Esta extensão OpenCart automatizada foi construída com o objetivo de fornecer facilidade para os proprietários de lojas online transformarem suas lojas em um aplicativo da Web progressivo. A loja de comércio eletrônico em PWA é uma das principais tecnologias avançadas que todo negócio de comércio eletrônico deve procurar. O OpenCart PWA Mobile App é, na verdade, um aplicativo da web que não depende de lojas de aplicativos de terceiros (Google Play e Apple App Store). Os compradores online podem facilmente “Adicionar o aplicativo PWA à tela inicial” e comprar produtos em qualquer lugar como qualquer outro aplicativo.
1.1 Como funciona o OpenCart Progressive Web App (PWA)?
Assim que a loja de comércio eletrônico for convertida em OpenCart PWA Mobile App, sempre que qualquer usuário abrir o URL da loja no navegador do celular, os usuários serão solicitados a “Adicionar PWA à tela inicial”. É muito simples de instalar e usar o OpenCart Progressive Web App.
1.2 Principais recursos para escolher OpenCart PWA:
Carregamento mais rápido e desempenho rápido
Tela inicial totalmente personalizável com editor DIY
Suporte a todos os métodos de envio e pagamento do site
Notificações push ilimitadas (notificações automatizadas e personalizadas)
Notificação de envio de carrinho abandonado
Suporte de bate-papo com Zopim e WhatsApp
Interface amigável e envolvente
Sem dependência de lojas de aplicativos
Totalmente marcado para sua loja (etiqueta branca)
Email e login social (Google e Facebook)
Suporte multilíngue e RTL
Modo offline funcionando
Funcionalidade de lista de desejos embutida
Sincronização ao vivo b / w site e aplicativo
Atualização automática de estoque
Compatibilidade de vários dispositivos
Pagamento de uma página
Aplicativo leve
Gerenciamento de páginas CMS
Produtos relacionados no Progressive Web App
Avaliações de usuários para produtos no PWA
Suporte a multimoedas
Suporte para cupons / vouchers
[IMP] Notas para iOS PWA:
�> Dispositivos iOS (iPhone, iPad, etc.) não oferecem nenhum prompt embutido “Adicionar à tela inicial”. Portanto, os usuários do PWA Mobile App precisam adicionar manualmente o OpenCart PWA Mobile App à tela inicial do iPhone ou iPad. �> iOS não suporta notificações push da web. Portanto, o administrador da loja só pode enviar as notificações push para o dispositivo Android, não no iOS.
O OpenCart PWA Mobile App Creator agora suporta vários idiomas, incluindo scripts RTL (Right To Left) como árabe, hebraico, persa, etc. Todos os idiomas da loja OpenCart estarão no Progressive Web App e outros idiomas necessários também podem ser adicionados. Os usuários podem escolher o idioma no aplicativo da Web Progressive e todo o conteúdo do aplicativo será traduzido de acordo.
Totalmente compatível com o KnowBand Multi-vendor Marketplace:
Nosso OpenCart PWA Mobile App é compatível com Mercado de vários fornecedores OpenCart. Converta sua loja de comércio eletrônico OpenCart em um mercado completo e lance o aplicativo móvel PWA para o mesmo. Os vendedores do marketplace estarão disponíveis em seu Progressive Web App e os usuários também podem simplesmente navegar por eles.
Observação: Os aplicativos móveis OpenCart PWA são centrados apenas no cliente, ou seja, os usuários podem visitar o aplicativo PWA de navegação junto com os vendedores. Não haverá nenhum painel de controle do vendedor ou gerenciamento via OpenCart Progressive Web App. O administrador pode gerenciar os vendedores do marketplace web e os mesmos serão atualizados automaticamente no PWA Mobile App.
1.3 Veja a demonstração OpenCart PWA:
Explore o módulo e os recursos do aplicativo PWA nos links de demonstração abaixo:
(Copiar e colar o URL no navegador do celular e “Adicionar à tela inicial”)
2.0 Telas do painel de administração:
Explore todas as configurações do painel de administração da extensão OpenCart PWA Mobile App junto com a funcionalidade e trabalhe com os instantâneos compartilhados abaixo:
Configurações gerais do 2.1:
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) Situação: Habilite o módulo para PWA funcionar em dispositivos móveis. c) Habilitar relatório de log de solicitação: Habilite o log de erros no celular. d) Nome do aplicativo PWA: Digite o nome do aplicativo OpenCart PWA. e) Selecione o layout da página inicial: Escolha um layout de tela inicial pré-adicionado para OpenCart Progressive Web App.
f) Habilitar barra de guias: Habilite a barra de guias na parte inferior do aplicativo OpenCart PWA para navegação contínua. g) Fonte para o aplicativo PWA: Escolha uma fonte para OpenCart Progressive Web App (PWA). h) Cor do botão do aplicativo: Escolha a cor do botão para o aplicativo móvel PWA. i) Cor do tema do aplicativo: Escolha a cor do tema para o aplicativo PWA. j) Cor de fundo do aplicativo: Escolha a cor de fundo para o aplicativo PWA. k) Cor da tela inicial do aplicativo: Escolha uma tela inicial para o aplicativo móvel PWA. l) Habilitar logotipo: Adicione o logotipo da sua marca no cabeçalho do OpenCart PWA Mobile App.
m) Imagem para o ícone do aplicativo: Adicione a imagem do ícone do aplicativo no painel de administração da extensão OpenCart PWA. n) Redirecionar na página do carrinho ao adicionar ao carrinho: Controle o redirecionamento do botão Adicionar ao carrinho sempre que qualquer usuário tocar no botão Adicionar ao carrinho.
Configurações de notificações push 2.2
As notificações push são a melhor ferramenta de marketing para o Progressive Web App (PWA) para OpenCart. O administrador da loja pode simplesmente promover os produtos e negócios da loja para os usuários do aplicativo e gerar mais vendas e receita. Insira todos os detalhes nas configurações de notificação push criando um projeto Firebase:
Como configurar uma conta Firebase?
– Faça login no Google Firebase
– 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:
Habilite / desabilite a notificação automática por push a ser enviada aos usuários do aplicativo sempre que eles fizerem um pedido com êxito no OpenCart Progressive Web App (PWA).
B) Notificação por push da atualização do status do pedido:
Habilite / desabilite a notificação automática por push enviada sempre que o status do pedido do aplicativo for atualizado. Os usuários do aplicativo móvel OpenCart PWA podem ficar de olho nos detalhes de pedidos anteriores.
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 do OpenCart Progressive Web App (PWA) conforme a necessidade. O administrador da loja pode configurar essas notificações por conta própria e enviá-las aos usuários do OpenCart Progressive Web App (PWA).
Layout da Página Inicial do 2.4:
Projete e salve vários designs de layouts (venda, festivais, etc.) e apenas escolha um certo no painel de administração para atualizar no OpenCart Progressive Web App.
O OpenCart Progressive Web App (PWA) oferece uma tela inicial personalizável cujo layout pode ser projetado a partir do painel de administração com alguns cliques do mouse e arrastar e soltar. O layout atraente de acordo com a execução do festival, venda, ocasião, etc. pode certamente ajudar a melhorar as vendas por meio de OpenCart PWA Mobile Apps.
Adicione um novo layout a partir desta guia ou edite os adicionados anteriormente. As definições de configuração da página inicial oferecem os seguintes elementos:
Principais categorias:
Banner Quadrado:
Banner deslizante horizontal:
Banner da grade:
Banner do cronômetro de contagem regressiva:
Produtos quadrados:
Produtos de deslizamento:
Produtos de grade:
Como obter detalhes do aplicativo do Facebook?
O aplicativo do Facebook pode ser criado seguindo as etapas abaixo mencionadas: –
– Vá para o URL fornecido: https://developers.facebook.com/apps/
– Clique no botão “Adicionar um novo aplicativo”.
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.
Páginas de Informação 2.7:
Adicione páginas CMS no aplicativo e ofereça conteúdo informativo para usuários do OpenCart PWA Mobile App.
3.0 Telas do aplicativo PWA de front-end:
Tela inicial do 3.1:
A tela inicial do OpenCart Progressive Web App (PWA) é totalmente personalizável com um editor DIY, conforme explicado acima nas telas do painel de administração. Altere a aparência da tela inicial do aplicativo a qualquer momento e ofereça uma aparência mais amigável e voltada para vendas.
1. Layout personalizado:
Usando vários banners, controles deslizantes e elementos de produtos, o administrador da loja pode criar um layout dinâmico de acordo com a necessidade.
2. Logotipo da marca:
Use o logotipo da sua loja no cabeçalho superior do OpenCart Progressive Web App (PWA).
3. Sacola do carrinho de compras:
O ícone do carrinho de compras no canto superior direito da tela inicial permite que os usuários acessem a tela do carrinho e verifiquem os produtos adicionados.
4. Menu de navegação esquerdo:
Navegue pelas categorias exibidas no aplicativo PWA com navegação no menu de navegação esquerdo.
Menu Acordeão 3.2 (barra de navegação)
O OpenCart PWA Mobile Apps vem com categorização perfeita e adequada disponível. Os usuários podem encontrar categorias relevantes no menu de navegação esquerdo e navegar pelos produtos. Várias páginas CMS também podem ser adicionadas ao menu, oferecendo conteúdo relevante no aplicativo.
1. Minha conta:
A opção Minha conta contém todas as informações pessoais dos usuários, incluindo frete e pedido. Os compradores do OpenCart Progressive Web App podem visualizar e atualizar as informações salvas.
2. Categorias:
As categorias exibidas no menu de navegação esquerdo do OpenCart Progressive Web App são as mesmas disponíveis na loja de comércio eletrônico.
3. Páginas CMS:
Várias páginas do CMS, como Sobre nós, Fale conosco, Termos e condições, etc. podem ser acessadas aqui. Essas páginas de informações podem ser adicionadas a partir do painel de administração da extensão.
4. Idioma (s):
A opção de idioma permite que os usuários do aplicativo PWA visualizem o aplicativo da web em seu idioma desejado.
5. Moeda (s):
Todas as moedas disponíveis em seu site são exibidas aqui no aplicativo OpenCart Progressive Web App (PWA).
6. Login / Logout:
Os usuários podem facilmente entrar / sair do aplicativo OpenCart PWA por meio desta opção.
3.3 Category Screen:
Telas de categoria livres de confusão com a exibição de lista e grade permitem que os usuários escolham o que é melhor para eles em uma categoria específica. Todo o estoque da loja permanecerá sincronizado com o aplicativo móvel OpenC Progressive Web App (PWA), e novas adições e alterações serão atualizadas em tempo real.
1. Visualização de lista e grade:
As categorias no aplicativo PWA para OpenCart podem ser navegadas tanto em lista quanto em grade.
2. Classificação de produtos:
A opção de classificação permite que os compradores online restrinjam os produtos na ordem de classificação desejada e encontrem o correto.
3. Filtro de produto:
O OpenCart PWA Mobile App oferece a opção de filtrar produtos simplificando a busca de produtos. Os compradores online podem encontrar os produtos desejados nas categorias usando filtros para vários atributos, como tamanho, cor, preço, etc.
Tela do produto 3.4:
A tela do produto do OpenCart Progressive Web App é tão simples e intrigante quanto poderia parecer. Com todas as opções e informações necessárias sobre o produto, em questão de minutos o usuário terá a certeza do produto que vai adquirir. Várias imagens estão disponíveis para o produto com as opções Em estoque e Fora de estoque.
1. Informações e cuidados do produto:
As informações completas do produto, conforme disponíveis no inventário, serão exibidas aqui.
2. Pequena descrição:
Os usuários podem ler a breve descrição de seu produto para decidir rapidamente sobre a compra.
3. Opções do produto:
Todas as opções relacionadas ao produto, como tamanho, cor etc. são exibidas aqui.
4. Adicionar ao carrinho:
Este botão permite aos usuários adicionar produtos ao carrinho. Os usuários podem ainda processar o carrinho para compra.
5. Compartilhamento Social de Produtos:
A opção de compartilhamento do produto permite que os usuários compartilhem produtos em vários canais sociais.
Tela de Login 3.5
O OpenCart PWA Mobile App oferece opções de login social com um toque e torna o processo de login / registro mais simples. O OpenCart Progressive Web App oferece login do Google e do Facebook.
1. Entrar:
Os usuários do aplicativo podem facilmente autenticar e fazer login em aplicativos PWA usando suas credenciais de login de e-mail anteriores.
2. Inscreva-se:
Todos os novos usuários do aplicativo podem se inscrever e criar suas contas na loja a partir do aplicativo OpenCart PWA. O formulário de inscrição pede apenas os detalhes necessários para criar uma conta.
3. Faça login com o Facebook:
Os usuários podem fazer login no aplicativo PWA usando suas credenciais de conta do Facebook.
4. Faça login com o Google:
Os usuários podem fazer login no aplicativo PWA usando suas credenciais de conta do Google.
Tela do carrinho de compras 3.6:
A tela Carrinho de compras do OpenCart PWA Mobile App exibirá todos os produtos adicionados ao carrinho de compras. Os usuários do aplicativo podem ver o nome do produto, quantidade, preço total e custo de envio. Esta tela possui as seguintes opções:
1. Aplicar vale:
Esta opção permite que os usuários usem cupons do site e obtenham ofertas de desconto.
2. Preço Total do Produto:
Os usuários visualizam o custo completo de sua sacola de compras antes de prosseguir. É atualizado automaticamente de acordo com qualquer atualização com a quantidade do produto ou nova adição.
3. Atualize a Quantidade de Produtos:
Os usuários do aplicativo PWA podem até atualizar a quantidade do produto com a opção “Atualizar quantidade”.
4. Remover Produto:
Os usuários do aplicativo podem simplesmente remover o produto do carrinho simplesmente tocando na opção “Remover”.
5. Continue comprando:
Os usuários do aplicativo podem sair do carrinho para procurar mais produtos no seu aplicativo.
6. Continue para verificar:
Os usuários do aplicativo PWA podem prosseguir para as telas de checkout e pagamento apenas tocando na opção “Continue To Checkout”.
3.7 tela de check-out
O Progressive Web App para OpenCart tem uma verificação simplificada em uma única tela com apenas informações relevantes. Os usuários do aplicativo podem visualizar detalhes completos de checkout, como detalhes de envio, detalhes de faturamento, resumo do pedido, comentário do pedido, resumo do pagamento.
1. Detalhes de envio e cobrança:
Esta tela fornece detalhes dos endereços de envio e cobrança salvos pelo usuário. O usuário também pode editar / salvar o novo endereço de entrega, se necessário.
2. Resumo do pedido:
Os usuários do aplicativo visualizam os detalhes do produto antes de efetuar o pagamento.
3. Métodos de envio: Todos os métodos de envio disponíveis são exibidos aqui. Os usuários podem escolher aquele que atende às suas necessidades.
4. Comentário do pedido:
Os usuários também podem adicionar qualquer comentário relacionado ao pedido que ficará visível para armazenar o administrador na página da web do pedido no back-end.
6. Resumo de pagamento:
Esta seção exibe os detalhes completos do pagamento da repartição envolvidos na compra.
7. Proceder ao pagamento:
Os usuários do aplicativo PWA serão redirecionados para a tela Pagamento depois de tocar no botão “Continuar com o pagamento”.
3.8 Payment Screen:
A tela de pagamento do OpenCart PWA App possui todos os pagamentos via web disponíveis na loja. Os compradores online podem encontrar experiências de pagamento semelhantes em sites e aplicativos.
3.9 Minha conta tela
A tela Minha conta do OpenCart PWA Mobile App permite que os compradores online vejam seus detalhes completos salvos no Progressive Web App. Essa tela também exibe uma lista de pedidos de aplicativos anteriores.
1. Detalhes pessoais:
Os usuários podem visualizar e atualizar seus dados pessoais pré-salvos no PWA Mobile App.
2. Endereço (s) de envio:
Os usuários do aplicativo podem ver a lista completa de endereços de entrega pré-salvos no aplicativo PWA.
3. Detalhes do pedido:
Os usuários do aplicativo podem visualizar a lista completa dos pedidos feitos anteriormente no aplicativo PWA e seus detalhes.
4. Reordenar recurso:
Há um botão direto de novo pedido na tela Minha conta do OpenCart Progressive Web App (PWA). Todos os produtos anteriores deste pedido serão adicionados ao carrinho com apenas um único botão.
Tela 3.91 Order Detail
A tela de detalhes do pedido do OpenCart Progressive Web App fornece detalhes completos de pedidos específicos do aplicativo PWA. Os usuários podem visualizar facilmente o endereço de entrega, resumo do produto, método de envio e pagamento e resumo do custo total, etc. Ele ainda oferece a opção de controlar o status do pedido e da entrega.
Os comerciantes de comércio eletrônico sempre procuram fazer experiência de compras online de seus clientes convenientes e melhores do que nunca. E é vital porque o mercado de comércio eletrônico está muito ocupado e a competição é feroz. Os clientes têm muitas opções de escolha, o que torna importante que você esteja à frente do jogo e atenda às demandas dos clientes. Os compradores online são atraídos pela marca ou pelo site que lhes proporciona uma experiência de compra tranquila, o que inclui certos fatores como carregamento mais rápido de páginas da web, interface do usuário atraente, rapidez e checkout simplificadoe compatibilidade com dispositivos móveis. Além disso, o que os consumidores exigem é a disponibilidade de várias opções de pagamento, em que as carteiras digitais têm um grande papel a desempenhar.
O que é uma carteira digital?
Uma carteira digital, também conhecida como e-wallet, armazena as informações de pagamento dos usuários (detalhes do cartão de crédito ou de débito) em um único lugar e permite que eles façam transações sem complicações, sem ter que inserir os detalhes do cartão todas as vezes. Quando você faz o pagamento em uma loja por meio de um mobile app, também é uma carteira digital, embora seja freqüentemente chamada de carteira móvel. Você pode dizer que uma carteira digital é a categoria principal, enquanto a carteira móvel é a secundária. A ligeira diferença entre os dois é que a carteira móvel é um aplicativo de pagamento online em seu smartphone, enquanto a carteira digital pode ser encontrada em dispositivos incluindo desktop, laptop e celular. O PayPal é uma das carteiras digitais mais populares aceitas por milhões de comerciantes online. Algumas outras carteiras digitais populares que os consumidores usam atualmente são Amazon Pay, Google Pay, Apple Pay, Paytm, etc.
Por que as carteiras digitais são preferidas aos cartões de crédito?
Os consumidores adoram carteiras digitais. Tão simples como isso! Há uma razão pela qual tantas empresas estão apresentando suas próprias carteiras digitais. O motivo pelo qual os clientes os amam e são tendências entre os compradores online é simplesmente porque torna sua experiência de compra conveniente e sem esforço. Eles não precisam mais retirar o cartão de crédito ou débito da carteira e inserir os detalhes do cartão, como número do cartão, validade do cartão e código de segurança, que também chamamos de CVV. As pessoas têm medo de sacar o cartão de crédito em público, o que é óbvio, considerando o roubo que acontece hoje em dia. Uma carteira digital elimina esse medo completamente. Onde quer que esteja, você pode fazer compras online facilmente. Além disso, os pagamentos feitos por meio de carteiras digitais são altamente seguros. Portanto, não é necessário se preocupar com o compartilhamento online de seus dados. As carteiras digitais não se restringem apenas a compras online, mas são aceitas no máximo em lojas físicas. Isso também elimina a necessidade de carregar um cartão de crédito ou dinheiro sempre que sair, como shoppings ou restaurantes. No caixa, eles podem simplesmente escanear o código QR através do aplicativo em seu smartphone ou perguntar ao interessado sobre as carteiras digitais que aceitam. Para a maioria dos clientes, uma carteira digital é uma solução completa para tudo, seja para fazer compras offline ou online.
Benefícios das carteiras digitais para comerciantes
No parágrafo anterior, já abordei as vantagens das carteiras digitais para os consumidores e por que elas são uma opção melhor do que os cartões de crédito. Agora vamos entender como as carteiras digitais também podem ser benéficas para varejistas de comércio eletrônico. Já se foram aqueles dias em que você poderia expandir seus negócios tendo apenas cartão de crédito e cartão de débito como seus modos de pagamento. Sobreviver no competitivo mercado de comércio eletrônico de hoje requer a integração de várias opções de pagamento, incluindo carteiras digitais. A maioria dos compradores online, mesmo o que compra offline, utiliza carteiras digitais para realizar transações. A maioria das pessoas possui um smartphone e tem acesso à Internet e é por isso que a maioria das pessoas prefere pagar através de seus dispositivos móveis.
mobile Commerce já ultrapassou o eCommerce em termos de conversões e vendas e está crescendo a cada dia. Conforme Estatísticas As vendas coletadas pelo Statista, Mobile Commerce ou m-commerce chegaram a US $ 268.78 bilhões nos Estados Unidos em 2019, e o número deve chegar à marca de 340 bilhões de dólares em 2020.
Conclusão
Só porque as carteiras móveis / carteiras digitais têm uma vantagem sobre os cartões de crédito e de débito, não significa que você deve parar de aceitar os últimos em sua loja online. Algumas pessoas ainda preferem pagar com seus cartões do que configurar uma carteira digital. Os cartões de crédito são o método da velha escola e nunca devem ser abandonados. Portanto, a conclusão que tiramos deste artigo é que aceitamos ambos, mas mantemos seu foco principal nas carteiras digitais. Nós, da Knowband, também oferecemos diferentes módulos para integrar várias opções de pagamento no seu site, incluindo carteiras digitais. Alguns dos melhores módulos que temos para isso são One Page Checkout e Construtor de aplicativos para dispositivos móveis. Verifique-os.
