- \n
- Carregamento mais r\u00e1pido e desempenho r\u00e1pido<\/li>\n
- Tela inicial totalmente personaliz\u00e1vel com editor DIY<\/li>\n
- Suporte a todos os m\u00e9todos de envio e pagamento do site<\/li>\n
- Notifica\u00e7\u00f5es push ilimitadas (notifica\u00e7\u00f5es automatizadas e personalizadas)<\/li>\n
- Notifica\u00e7\u00e3o de envio de carrinho abandonado<\/li>\n
- Suporte de bate-papo com Zopim e WhatsApp<\/li>\n
- Interface amig\u00e1vel e envolvente<\/li>\n
- Sem depend\u00eancia de lojas de aplicativos<\/li>\n
- Totalmente marcado para sua loja (etiqueta branca)<\/li>\n
- Email e login social (Google e Facebook)<\/li>\n
- Suporte multil\u00edngue e RTL<\/li>\n
- Modo offline funcionando<\/li>\n
- Funcionalidade de lista de desejos embutida<\/li>\n
- Sincroniza\u00e7\u00e3o ao vivo b \/ w site e aplicativo<\/li>\n
- Atualiza\u00e7\u00e3o autom\u00e1tica de estoque<\/li>\n
- Compatibilidade de v\u00e1rios dispositivos<\/li>\n
- Pagamento de uma p\u00e1gina<\/li>\n
- Aplicativo leve<\/li>\n
- Gerenciamento de p\u00e1ginas CMS<\/li>\n
- Produtos relacionados no Progressive Web App<\/li>\n
- Avalia\u00e7\u00f5es de usu\u00e1rios para produtos no PWA<\/li>\n
- Suporte a multimoedas<\/li>\n
- Suporte para cupons \/ vouchers<\/li>\n<\/ul>\n
[IMP] Notas para iOS PWA:<\/h3>\n
\ufffd> Dispositivos iOS (iPhone, iPad, etc.) n\u00e3o oferecem nenhum prompt embutido “Adicionar \u00e0 tela inicial”. Portanto, os usu\u00e1rios do PWA Mobile App precisam adicionar manualmente o OpenCart PWA Mobile App \u00e0 tela inicial do iPhone ou iPad. \ufffd> iOS n\u00e3o suporta notifica\u00e7\u00f5es push da web. Portanto, o administrador da loja s\u00f3 pode enviar as notifica\u00e7\u00f5es push para o dispositivo Android, n\u00e3o no iOS.<\/p>\n
[NOVA ATUALIZA\u00c7\u00c3O]\ufffdOpenCart PWA suporta idiomas RTL (\u00e1rabe, hebraico, etc.):<\/h3>\n
O OpenCart PWA Mobile App Creator agora suporta v\u00e1rios idiomas, incluindo scripts RTL (Right To Left) como \u00e1rabe, hebraico, persa, etc. Todos os idiomas da loja OpenCart estar\u00e3o no Progressive Web App e outros idiomas necess\u00e1rios tamb\u00e9m podem ser adicionados. Os usu\u00e1rios podem escolher o idioma no aplicativo da Web Progressive e todo o conte\u00fado do aplicativo ser\u00e1 traduzido de acordo.<\/p>\n
Totalmente compat\u00edvel com o KnowBand Multi-vendor Marketplace:<\/h2>\n
Nosso OpenCart PWA Mobile App \u00e9 compat\u00edvel com Mercado de v\u00e1rios fornecedores OpenCart<\/a>. Converta sua loja de com\u00e9rcio eletr\u00f4nico OpenCart em um mercado completo e lance o aplicativo m\u00f3vel PWA para o mesmo. Os vendedores do marketplace estar\u00e3o dispon\u00edveis em seu Progressive Web App e os usu\u00e1rios tamb\u00e9m podem simplesmente navegar por eles.<\/p>\n
Observa\u00e7\u00e3o: <\/strong> Os aplicativos m\u00f3veis OpenCart PWA s\u00e3o centrados apenas no cliente, ou seja, os usu\u00e1rios podem visitar o aplicativo PWA de navega\u00e7\u00e3o junto com os vendedores. N\u00e3o haver\u00e1 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\u00e3o atualizados automaticamente no PWA Mobile App.<\/p>\n
1.3 Veja a demonstra\u00e7\u00e3o OpenCart PWA:<\/h3>\n
<\/p>\n
![\"tela](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Category-Of-Home-screen.png\")
<\/a><\/p>\nExplore o m\u00f3dulo e os recursos do aplicativo PWA nos links de demonstra\u00e7\u00e3o abaixo:<\/p>\n
Painel de administra\u00e7\u00e3o do m\u00f3dulo: <\/strong>https:\/\/opencartdemo.knowband.com\/3.0\/pwa\/admin\/<\/a>
\nApp de demonstra\u00e7\u00e3o PWA:<\/strong> https:\/\/opencartdemo.knowband.com\/3.0\/pwa\/pwa-app\/<\/a><\/p>\n(Copiar e colar o URL no navegador do celular e “Adicionar \u00e0 tela inicial”)<\/p>\n
2.0 Telas do painel de administra\u00e7\u00e3o:<\/h2>\n
Explore todas as configura\u00e7\u00f5es do painel de administra\u00e7\u00e3o da extens\u00e3o OpenCart PWA Mobile App junto com a funcionalidade e trabalhe com os instant\u00e2neos compartilhados abaixo:<\/p>\n
Configura\u00e7\u00f5es gerais do 2.1:<\/h3>\n
![\"Gerais-configura\u00e7\u00f5es\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/General-Settings.png\")
<\/p>\na) Mostrar \/ ocultar visualiza\u00e7\u00e3o:<\/strong> Toque no bot\u00e3o de olho para exibir \/ ocultar a visualiza\u00e7\u00e3o do telefone no painel de administra\u00e7\u00e3o.
\nb) Situa\u00e7\u00e3o:<\/strong> Habilite o m\u00f3dulo para PWA funcionar em dispositivos m\u00f3veis.
\nc) Habilitar relat\u00f3rio de log de solicita\u00e7\u00e3o:<\/strong> Habilite o log de erros no celular.
\nd) Nome do aplicativo PWA:<\/strong> Digite o nome do aplicativo OpenCart PWA.
\ne) Selecione o layout da p\u00e1gina inicial:<\/strong> Escolha um layout de tela inicial pr\u00e9-adicionado para OpenCart Progressive Web App.<\/p>\n![\"configura\u00e7\u00f5es](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/General-Settings-2.png\")
<\/p>\nf) Habilitar barra de guias:<\/strong> Habilite a barra de guias na parte inferior do aplicativo OpenCart PWA para navega\u00e7\u00e3o cont\u00ednua.
\ng) Fonte para o aplicativo PWA:<\/strong> Escolha uma fonte para OpenCart Progressive Web App (PWA).
\nh) Cor do bot\u00e3o do aplicativo:<\/strong> Escolha a cor do bot\u00e3o para o aplicativo m\u00f3vel PWA.
\ni) Cor do tema do aplicativo:<\/strong> Escolha a cor do tema para o aplicativo PWA.
\nj) Cor de fundo do aplicativo:<\/strong> Escolha a cor de fundo para o aplicativo PWA.
\nk) Cor da tela inicial do aplicativo:<\/strong> Escolha uma tela inicial para o aplicativo m\u00f3vel PWA.
\nl) Habilitar logotipo:<\/strong> Adicione o logotipo da sua marca no cabe\u00e7alho do OpenCart PWA Mobile App.<\/p>\n![\"configura\u00e7\u00f5es](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/General-settings-3.png\")
<\/p>\nm) Imagem para o \u00edcone do aplicativo:<\/strong> Adicione a imagem do \u00edcone do aplicativo no painel de administra\u00e7\u00e3o da extens\u00e3o OpenCart PWA.
\nn) Redirecionar na p\u00e1gina do carrinho ao adicionar ao carrinho:<\/strong> Controle o redirecionamento do bot\u00e3o Adicionar ao carrinho sempre que qualquer usu\u00e1rio tocar no bot\u00e3o Adicionar ao carrinho.<\/p>\nConfigura\u00e7\u00f5es de notifica\u00e7\u00f5es push 2.2<\/h3>\n
![\"push-notifications-settings\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/3-2.jpg\")
<\/a><\/p>\nAs notifica\u00e7\u00f5es push s\u00e3o a melhor ferramenta de marketing para o Progressive Web App (PWA) para OpenCart. O administrador da loja pode simplesmente promover os produtos e neg\u00f3cios da loja para os usu\u00e1rios do aplicativo e gerar mais vendas e receita. Insira todos os detalhes nas configura\u00e7\u00f5es de notifica\u00e7\u00e3o push criando um projeto Firebase:<\/p>\n
Como configurar uma conta Firebase?<\/strong><\/p>\n
– <\/strong> Fa\u00e7a login no Google Firebase<\/p>\n
![\"firebase\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/1.png\")
<\/p>\n– <\/strong> Criar um novo projeto Ao clicar em Adicionar projeto, a seguinte caixa de di\u00e1logo aparecer\u00e1:<\/p>\n
![\"projeto](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/2.png\")
\nA cria\u00e7\u00e3o do projeto levar\u00e1 alguns segundos. Assim que o projeto estiver pronto, clique em continuar.<\/p>\n![\"continuar-projeto\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/3.png\")
<\/p>\n– <\/strong> Gerencie as configura\u00e7\u00f5es do projeto Depois de criar o projeto, clique em Configura\u00e7\u00f5es do projeto.<\/p>\n
![\"configura\u00e7\u00f5es](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/4.png\")
<\/p>\n– <\/strong> V\u00e1 para as op\u00e7\u00f5es de autentica\u00e7\u00e3o:<\/p>\n
![\"op\u00e7\u00f5es](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/5.png\")
\n– <\/strong> Encontre as chaves do Firebase Nas configura\u00e7\u00f5es do projeto, clique em Configura\u00e7\u00f5es de mensagens na nuvem. A partir daqui, voc\u00ea pode obter diretamente a chave do servidor.<\/p>\n![\"chave](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/9.png\")
\n– <\/strong> Adicione seu aplicativo da Web ao Firebase<\/p>\n![\"web-app-to-firebase\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/7.png\")
<\/p>\n![\"web-app-to-firebase\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/7-1.png\")
<\/p>\n– <\/strong> Obtenha outros detalhes relacionados ao Firebase e cole-os no painel de administra\u00e7\u00e3o do m\u00f3dulo PWA.<\/p>\n
![\"detalhes](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/8.png\")
<\/p>\n– <\/strong> Obtenha a chave do servidor Firebase na guia de mensagens em nuvem em Configura\u00e7\u00f5es:<\/p>\n
![\"chave](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/9-1.png\")
<\/p>\n– <\/strong>Adicione seu dom\u00ednio na autentica\u00e7\u00e3o >> login.<\/p>\n
![\"chave](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/10.png\")
<\/p>\n![\"chave](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/11.png\")
<\/p>\nA) Notifica\u00e7\u00e3o por push de pedido bem-sucedida:<\/strong><\/p>\n
Habilite \/ desabilite a notifica\u00e7\u00e3o autom\u00e1tica por push a ser enviada aos usu\u00e1rios do aplicativo sempre que eles fizerem um pedido com \u00eaxito no OpenCart Progressive Web App (PWA).<\/p>\n
![\"pedido-sucesso\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Order-success-.png\")
<\/p>\nB) Notifica\u00e7\u00e3o por push da atualiza\u00e7\u00e3o do status do pedido:<\/strong><\/p>\n
Habilite \/ desabilite a notifica\u00e7\u00e3o autom\u00e1tica por push enviada sempre que o status do pedido do aplicativo for atualizado. Os usu\u00e1rios do aplicativo m\u00f3vel OpenCart PWA podem ficar de olho nos detalhes de pedidos anteriores.<\/p>\n
![\"notifica\u00e7\u00e3o](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Order-status-notification.png\")
<\/p>\nC) Notifica\u00e7\u00e3o de envio de carrinho abandonado:<\/strong><\/p>\n
Habilite \/ desabilite a notifica\u00e7\u00e3o push automatizada enviada aos usu\u00e1rios que abandonam produtos no carrinho sem compra bem-sucedida. Esta notifica\u00e7\u00e3o push ser\u00e1 enviada aos usu\u00e1rios automaticamente ap\u00f3s o intervalo de tempo inserido.<\/p>\n
![\"carrinho](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Abandoned-cart.png\")
<\/p>\n2.3 Hist\u00f3rico de notifica\u00e7\u00f5es por push<\/h3>\n
O hist\u00f3rico completo de notifica\u00e7\u00f5es push enviadas com sucesso ser\u00e1 visto aqui. O administrador da loja pode acompanhar as notifica\u00e7\u00f5es push enviadas anteriormente a partir daqui.<\/p>\n
![\"push-notification-hist\u00f3rico\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/push-notification-history.png\")
<\/p>\nA) Enviar notifica\u00e7\u00e3o:<\/strong><\/p>\n
Personalize e envie notifica\u00e7\u00f5es push manualmente para usu\u00e1rios do OpenCart Progressive Web App (PWA) conforme a necessidade. O administrador da loja pode configurar essas notifica\u00e7\u00f5es por conta pr\u00f3pria e envi\u00e1-las aos usu\u00e1rios do OpenCart Progressive Web App (PWA).<\/p>\n
![\"enviar](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/send-notification.png\")
<\/p>\nLayout da P\u00e1gina Inicial do 2.4:<\/h3>\n
Projete e salve v\u00e1rios designs de layouts (venda, festivais, etc.) e apenas escolha um certo no painel de administra\u00e7\u00e3o para atualizar no OpenCart Progressive Web App. <\/em><\/p><\/blockquote>\n
<\/a><\/p>\nO OpenCart Progressive Web App (PWA) oferece uma tela inicial personaliz\u00e1vel cujo layout pode ser projetado a partir do painel de administra\u00e7\u00e3o com alguns cliques do mouse e arrastar e soltar. O layout atraente de acordo com a execu\u00e7\u00e3o do festival, venda, ocasi\u00e3o, etc. pode certamente ajudar a melhorar as vendas por meio de OpenCart PWA Mobile Apps.<\/p>\n
![\"layout](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/home-page-layout.png\")
<\/p>\nAdicione um novo layout a partir desta guia ou edite os adicionados anteriormente. As defini\u00e7\u00f5es de configura\u00e7\u00e3o da p\u00e1gina inicial oferecem os seguintes elementos:<\/p>\n
Principais categorias: <\/strong><\/p>\n
![\"categoria](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Top-category-.png\")
<\/p>\nBanner Quadrado:<\/strong><\/p>\n
![\"faixa](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Square-Banner-.png\")
<\/p>\nBanner deslizante horizontal:<\/strong><\/p>\n
![\"faixa](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Sliding-Banner.png\")
<\/p>\nBanner da grade: <\/strong><\/p>\n
![\"faixa](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Grid-Banner.png\")
<\/p>\nBanner do cron\u00f4metro de contagem regressiva: <\/strong><\/p>\n
![\"contagem](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Countdown-Timer-Banner.png\")
<\/p>\nProdutos quadrados: <\/strong><\/p>\n
![\"produto](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Square-Product.png\")
<\/p>\nProdutos de deslizamento: <\/strong><\/p>\n
![\"produtos](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Sliding-Products-.png\")
<\/p>\nProdutos de grade: <\/strong><\/p>\n
![\"produtos](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Grid-products.png\")
<\/p>\nComo obter detalhes do aplicativo do Facebook?<\/h3>\n
O aplicativo do Facebook pode ser criado seguindo as etapas abaixo mencionadas: –<\/p>\n
– <\/strong> V\u00e1 para o URL fornecido: https:\/\/developers.facebook.com\/apps\/<\/p>\n
– <\/strong>Clique no bot\u00e3o “Adicionar um novo aplicativo”.<\/p>\n
![\"adicionar](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/04\/1.jpg\")
<\/a><\/p>\nEtapa 3 e 4:<\/strong>Insira o nome do aplicativo e a id de e-mail e clique no bot\u00e3o “Criar ID do aplicativo”.<\/p>\n
![\"create-app-id\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/04\/2.jpg\")
<\/a><\/p>\nEtapa 5 e 6:<\/strong> Ap\u00f3s clicar em Criar ID de aplicativo, voc\u00ea ter\u00e1 que passar por uma verifica\u00e7\u00e3o de seguran\u00e7a, conforme mostrado:<\/p>\n
![\"create-app-id\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/04\/3.jpg\")
<\/a><\/p>\n– <\/strong>Clique na aba “Configura\u00e7\u00f5es”.<\/p>\n
![\"configura\u00e7\u00e3o](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/04\/4.jpg\")
<\/a><\/p>\nEtapa 8-13:<\/strong>Duas op\u00e7\u00f5es estar\u00e3o dispon\u00edveis no menu suspenso, B\u00e1sico e Avan\u00e7ado, clique em “B\u00e1sico”. Em seguida, insira seu “Dom\u00ednio do aplicativo”, “E-mail de contato”, “Privacidade URL”, “Termos e Condi\u00e7\u00f5es URL”, “Adicionar logotipo”, “Selecionar categoria” e clique no bot\u00e3o “Salvar altera\u00e7\u00f5es”. Dom\u00ednios de aplicativos: seudominio.com est\u00e1 correto seudom\u00ednio.com\/store est\u00e1 incorreto www.domain.com est\u00e1 incorreto<\/p>\n
![\"ID](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/04\/5.jpg\")
<\/a><\/p>\n– <\/strong>Agora clique em “+ Adicionar plataforma”.<\/p>\n
![\"adicionar](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/04\/6.jpg\")
<\/a>
\nEtapa 15: <\/strong>E selecione Site como Plataforma.<\/p>\n![\"escolha-plataforma\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/04\/7.jpg\")
<\/a><\/p>\n– <\/strong> Agora digite o URL do seu site.<\/p>\n
![\"enter-site-url\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/04\/8.jpg\")
<\/a>
\nEtapa 17 e 18:<\/strong>Clique em “Produtos +” e selecione o login do Facebook.<\/p>\n![\"entrar](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/04\/9.jpg\")
<\/a>
\n– <\/strong> Selecione a web como plataforma para o aplicativo.<\/p>\n![\"escolha-plataforma\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/04\/10.jpg\")
<\/a><\/p>\n– <\/strong> Agora clique em salvar.<\/p>\n
![\"facebook-app-id\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/04\/11.jpg\")
<\/a>
\nEtapa 21 e 22: <\/strong>Clique em Configura\u00e7\u00f5es e adicione URIs de redirecionamento OAuth v\u00e1lidos. URIs de redirecionamento OAuth v\u00e1lidos: https:\/\/example.com\/pwa-app\/login<\/p>\n![\"URL](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/04\/12.jpg\")
<\/a><\/p>\nEtapa 23 e 24:<\/strong>Clique em “Avalia\u00e7\u00e3o do aplicativo”. E marque “Tornar ‘o nome do seu aplicativo’ P\u00fablico” como Sim.<\/p>\n
![\"revis\u00e3o](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/04\/13.jpg\")
<\/a>
\nEtapa final:<\/strong> Copie o ID do aplicativo e o segredo do aplicativo e cole-os nos campos fornecidos no m\u00f3dulo.<\/p>\n![\"passo](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/04\/14.jpg\")
<\/a><\/p>\nComo obter detalhes do Google App?<\/h3>\n
- \n
- V\u00e1 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\u00e1gina de configura\u00e7\u00e3o do m\u00f3dulo.<\/li>\n
- Agora clique em Criar Projeto \u00e0 esquerda da p\u00e1gina.<\/li>\n
- Digite um nome para o seu projeto e prossiga para a pr\u00f3xima etapa.<\/li>\n
- Agora clique em APIs e autentica\u00e7\u00e3o-> Credenciais no menu \u00e0 esquerda, conforme mostrado abaixo.<\/li>\n<\/ul>\n
![\"google-app-id\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/04\/a.jpg\")
<\/a><\/p>\n- \n
- Clique no bot\u00e3o Criar novo ID do cliente no painel direito da tela.<\/li>\n
- Pode ser necess\u00e1rio preencher o formul\u00e1rio da Tela de consentimento antes de prosseguir. Para fazer isso, \u00e9 necess\u00e1rio clicar na tela de consentimento no menu \u00e0 esquerda, como mostra a imagem acima.<\/li>\n
- Preencha o formul\u00e1rio de pop-up com os detalhes abaixo:<\/li>\n<\/ul>\n
Tipo de aplica\u00e7\u00e3o:<\/strong> Aplicativo da Web.
\nOrigens do JavaScript autorizadas:<\/strong> Nome de dom\u00ednio de sua loja (https:\/\/www.yourstore.com).
\nURI de redirecionamento autorizado ou URI da p\u00e1gina de redirecionamento do Loginizer:<\/strong>
\nhttps:\/\/example.com\/pwa-app\/login<\/p>\n![\"google-app-id\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/04\/b.jpg\")
<\/a><\/p>\n- \n
- Agora clique no bot\u00e3o Criar identifica\u00e7\u00e3o do cliente para obter sua identifica\u00e7\u00e3o e chave secreta do cliente.<\/li>\n
- Agora voc\u00ea pode usar o segredo e o ID do cliente para permitir que seus clientes acessem sua loja usando a conta do Google.<\/li>\n<\/ul>\n
P\u00e1ginas de Informa\u00e7\u00e3o 2.7:<\/h3>\n
Adicione p\u00e1ginas CMS no aplicativo e ofere\u00e7a conte\u00fado informativo para usu\u00e1rios do OpenCart PWA Mobile App.<\/p>\n
![\"p\u00e1ginas](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Information-pages-.png\")
<\/p>\n3.0 Telas do aplicativo PWA de front-end:<\/h2>\n
Tela inicial do 3.1:<\/h3>\n
![\"tela](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Home-screen.png\")
<\/a><\/p>\nA tela inicial do OpenCart Progressive Web App (PWA) \u00e9 totalmente personaliz\u00e1vel com um editor DIY, conforme explicado acima nas telas do painel de administra\u00e7\u00e3o. Altere a apar\u00eancia da tela inicial do aplicativo a qualquer momento e ofere\u00e7a uma apar\u00eancia mais amig\u00e1vel e voltada para vendas.<\/p>\n
1. Layout personalizado:<\/h4>\n
Usando v\u00e1rios banners, controles deslizantes e elementos de produtos, o administrador da loja pode criar um layout din\u00e2mico de acordo com a necessidade.<\/p>\n
2. Logotipo da marca:<\/h4>\n
Use o logotipo da sua loja no cabe\u00e7alho superior do OpenCart Progressive Web App (PWA).<\/p>\n
3. Sacola do carrinho de compras:<\/h4>\n
O \u00edcone do carrinho de compras no canto superior direito da tela inicial permite que os usu\u00e1rios acessem a tela do carrinho e verifiquem os produtos adicionados.<\/p>\n
4. Menu de navega\u00e7\u00e3o esquerdo:<\/h4>\n
Navegue pelas categorias exibidas no aplicativo PWA com navega\u00e7\u00e3o no menu de navega\u00e7\u00e3o esquerdo.<\/p>\n
Menu Acorde\u00e3o 3.2 (barra de navega\u00e7\u00e3o)<\/h3>\n
O OpenCart PWA Mobile Apps vem com categoriza\u00e7\u00e3o perfeita e adequada dispon\u00edvel. Os usu\u00e1rios podem encontrar categorias relevantes no menu de navega\u00e7\u00e3o esquerdo e navegar pelos produtos. V\u00e1rias p\u00e1ginas CMS tamb\u00e9m podem ser adicionadas ao menu, oferecendo conte\u00fado relevante no aplicativo.<\/p>\n
![\"acorde\u00e3o-menu-barra](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Accordion-Menu-Navigation-Bar.png\")
<\/a><\/p>\n1. Minha conta:<\/h4>\n
A op\u00e7\u00e3o Minha conta cont\u00e9m todas as informa\u00e7\u00f5es pessoais dos usu\u00e1rios, incluindo frete e pedido. Os compradores do OpenCart Progressive Web App podem visualizar e atualizar as informa\u00e7\u00f5es salvas.<\/p>\n
2. Categorias:<\/h4>\n
As categorias exibidas no menu de navega\u00e7\u00e3o esquerdo do OpenCart Progressive Web App s\u00e3o as mesmas dispon\u00edveis na loja de com\u00e9rcio eletr\u00f4nico.<\/p>\n
3. P\u00e1ginas CMS:<\/h4>\n
V\u00e1rias p\u00e1ginas do CMS, como Sobre n\u00f3s, Fale conosco, Termos e condi\u00e7\u00f5es, etc. podem ser acessadas aqui. Essas p\u00e1ginas de informa\u00e7\u00f5es podem ser adicionadas a partir do painel de administra\u00e7\u00e3o da extens\u00e3o.<\/p>\n
4. Idioma (s):<\/h4>\n
A op\u00e7\u00e3o de idioma permite que os usu\u00e1rios do aplicativo PWA visualizem o aplicativo da web em seu idioma desejado.<\/p>\n
5. Moeda (s):<\/h4>\n
Todas as moedas dispon\u00edveis em seu site s\u00e3o exibidas aqui no aplicativo OpenCart Progressive Web App (PWA).<\/p>\n
6. Login \/ Logout:<\/h4>\n
Os usu\u00e1rios podem facilmente entrar \/ sair do aplicativo OpenCart PWA por meio desta op\u00e7\u00e3o.<\/p>\n
3.3 Category Screen:<\/h3>\n
![\"tela](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Category-Screen.png\")
<\/a><\/p>\nTelas de categoria livres de confus\u00e3o com a exibi\u00e7\u00e3o de lista e grade permitem que os usu\u00e1rios escolham o que \u00e9 melhor para eles em uma categoria espec\u00edfica. Todo o estoque da loja permanecer\u00e1 sincronizado com o aplicativo m\u00f3vel OpenC Progressive Web App (PWA), e novas adi\u00e7\u00f5es e altera\u00e7\u00f5es ser\u00e3o atualizadas em tempo real.<\/p>\n
1. Visualiza\u00e7\u00e3o de lista e grade:<\/h4>\n
As categorias no aplicativo PWA para OpenCart podem ser navegadas tanto em lista quanto em grade.<\/p>\n
2. Classifica\u00e7\u00e3o de produtos:<\/h4>\n
A op\u00e7\u00e3o de classifica\u00e7\u00e3o permite que os compradores online restrinjam os produtos na ordem de classifica\u00e7\u00e3o desejada e encontrem o correto.<\/p>\n
3. Filtro de produto:<\/h4>\n
O OpenCart PWA Mobile App oferece a op\u00e7\u00e3o de filtrar produtos simplificando a busca de produtos. Os compradores online podem encontrar os produtos desejados nas categorias usando filtros para v\u00e1rios atributos, como tamanho, cor, pre\u00e7o, etc.<\/p>\n
Tela do produto 3.4:<\/h3>\n
![\"tela](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Product-Screen-1.png\")
<\/a><\/p>\nA tela do produto do OpenCart Progressive Web App \u00e9 t\u00e3o simples e intrigante quanto poderia parecer. Com todas as op\u00e7\u00f5es e informa\u00e7\u00f5es necess\u00e1rias sobre o produto, em quest\u00e3o de minutos o usu\u00e1rio ter\u00e1 a certeza do produto que vai adquirir. V\u00e1rias imagens est\u00e3o dispon\u00edveis para o produto com as op\u00e7\u00f5es Em estoque e Fora de estoque.<\/p>\n
1. Informa\u00e7\u00f5es e cuidados do produto:<\/h4>\n
As informa\u00e7\u00f5es completas do produto, conforme dispon\u00edveis no invent\u00e1rio, ser\u00e3o exibidas aqui.<\/p>\n
2. Pequena descri\u00e7\u00e3o:<\/h4>\n
Os usu\u00e1rios podem ler a breve descri\u00e7\u00e3o de seu produto para decidir rapidamente sobre a compra.<\/p>\n
3. Op\u00e7\u00f5es do produto:<\/h4>\n
Todas as op\u00e7\u00f5es relacionadas ao produto, como tamanho, cor etc. s\u00e3o exibidas aqui.<\/p>\n
4. Adicionar ao carrinho:<\/h4>\n
Este bot\u00e3o permite aos usu\u00e1rios adicionar produtos ao carrinho. Os usu\u00e1rios podem ainda processar o carrinho para compra.<\/p>\n
5. Compartilhamento Social de Produtos:<\/h4>\n
A op\u00e7\u00e3o de compartilhamento do produto permite que os usu\u00e1rios compartilhem produtos em v\u00e1rios canais sociais.<\/p>\n
Tela de Login 3.5<\/h3>\n
![\"tela](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Login-Screen-1.png\")
<\/a><\/p>\nO OpenCart PWA Mobile App oferece op\u00e7\u00f5es 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.<\/p>\n
1. Entrar:<\/h4>\n
Os usu\u00e1rios do aplicativo podem facilmente autenticar e fazer login em aplicativos PWA usando suas credenciais de login de e-mail anteriores.<\/p>\n
2. Inscreva-se:<\/h4>\n
Todos os novos usu\u00e1rios do aplicativo podem se inscrever e criar suas contas na loja a partir do aplicativo OpenCart PWA. O formul\u00e1rio de inscri\u00e7\u00e3o pede apenas os detalhes necess\u00e1rios para criar uma conta.<\/p>\n
3. Fa\u00e7a login com o Facebook:<\/h4>\n
Os usu\u00e1rios podem fazer login no aplicativo PWA usando suas credenciais de conta do Facebook.<\/p>\n
4. Fa\u00e7a login com o Google:<\/h4>\n
Os usu\u00e1rios podem fazer login no aplicativo PWA usando suas credenciais de conta do Google.<\/p>\n
Tela do carrinho de compras 3.6:<\/h3>\n
A tela Carrinho de compras do OpenCart PWA Mobile App exibir\u00e1 todos os produtos adicionados ao carrinho de compras. Os usu\u00e1rios do aplicativo podem ver o nome do produto, quantidade, pre\u00e7o total e custo de envio. Esta tela possui as seguintes op\u00e7\u00f5es:<\/p>\n
![\"tela](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Shopping-Cart-Screen-1.png\")
<\/a><\/p>\n1. Aplicar vale:<\/h4>\n
Esta op\u00e7\u00e3o permite que os usu\u00e1rios usem cupons do site e obtenham ofertas de desconto.<\/p>\n
2. Pre\u00e7o Total do Produto:<\/h4>\n
Os usu\u00e1rios visualizam o custo completo de sua sacola de compras antes de prosseguir. \u00c9 atualizado automaticamente de acordo com qualquer atualiza\u00e7\u00e3o com a quantidade do produto ou nova adi\u00e7\u00e3o.<\/p>\n
3. Atualize a Quantidade de Produtos:<\/h4>\n
Os usu\u00e1rios do aplicativo PWA podem at\u00e9 atualizar a quantidade do produto com a op\u00e7\u00e3o “Atualizar quantidade”.<\/p>\n
4. Remover Produto:<\/h4>\n
Os usu\u00e1rios do aplicativo podem simplesmente remover o produto do carrinho simplesmente tocando na op\u00e7\u00e3o “Remover”.<\/p>\n
5. Continue comprando:<\/h4>\n
Os usu\u00e1rios do aplicativo podem sair do carrinho para procurar mais produtos no seu aplicativo.<\/p>\n
6. Continue para verificar:<\/h4>\n
Os usu\u00e1rios do aplicativo PWA podem prosseguir para as telas de checkout e pagamento apenas tocando na op\u00e7\u00e3o “Continue To Checkout”.<\/p>\n
3.7 tela de check-out<\/h3>\n
O Progressive Web App para OpenCart tem uma verifica\u00e7\u00e3o simplificada em uma \u00fanica tela com apenas informa\u00e7\u00f5es relevantes. Os usu\u00e1rios do aplicativo podem visualizar detalhes completos de checkout, como detalhes de envio, detalhes de faturamento, resumo do pedido, coment\u00e1rio do pedido, resumo do pagamento.<\/p>\n
![\"tela](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Checkout-Screen.png\")
<\/a><\/p>\n1. Detalhes de envio e cobran\u00e7a:<\/h4>\n
Esta tela fornece detalhes dos endere\u00e7os de envio e cobran\u00e7a salvos pelo usu\u00e1rio. O usu\u00e1rio tamb\u00e9m pode editar \/ salvar o novo endere\u00e7o de entrega, se necess\u00e1rio.<\/p>\n
2. Resumo do pedido:<\/h4>\n
Os usu\u00e1rios do aplicativo visualizam os detalhes do produto antes de efetuar o pagamento.<\/h4>\n
3. M\u00e9todos de envio: Todos os m\u00e9todos de envio dispon\u00edveis s\u00e3o exibidos aqui. Os usu\u00e1rios podem escolher aquele que atende \u00e0s suas necessidades.<\/p>\n
4. Coment\u00e1rio do pedido:<\/h4>\n
Os usu\u00e1rios tamb\u00e9m podem adicionar qualquer coment\u00e1rio relacionado ao pedido que ficar\u00e1 vis\u00edvel para armazenar o administrador na p\u00e1gina da web do pedido no back-end.<\/p>\n
6. Resumo de pagamento:<\/h4>\n
Esta se\u00e7\u00e3o exibe os detalhes completos do pagamento da reparti\u00e7\u00e3o envolvidos na compra.<\/p>\n
7. Proceder ao pagamento:<\/h4>\n
Os usu\u00e1rios do aplicativo PWA ser\u00e3o redirecionados para a tela Pagamento depois de tocar no bot\u00e3o “Continuar com o pagamento”.<\/p>\n
3.8 Payment Screen:<\/h3>\n
A tela de pagamento do OpenCart PWA App possui todos os pagamentos via web dispon\u00edveis na loja. Os compradores online podem encontrar experi\u00eancias de pagamento semelhantes em sites e aplicativos.<\/p>\n
![\"tela](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Payment-Screen-1.png\")
<\/a><\/p>\n3.9 Minha conta tela<\/h3>\n
![\"tela](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/My-Account-Screen-1.png\")
<\/a><\/p>\n![\"tela](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Order-Detail-Screen.png\")
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"