1.0 Introducción
El rápido crecimiento en la industria del comercio móvil ha llevado a la urgencia de tener una aplicación móvil de comercio electrónico. Pero, la creación de aplicaciones móviles implica mucha codificación y otros tecnicismos. ¿Por qué no convertir su sitio web en línea en una aplicación web? Ofrecer una aplicación PrestaShop PWA optimizada, es decir, mejoraría la experiencia de compra móvil para los usuarios. Este módulo de la aplicación PrestaShop PWA está diseñado y creado para transformar su tienda en una aplicación web que se puede administrar desde un panel de back-end amigable. Estas aplicaciones vienen con varias características más amplias que las aplicaciones nativas, como el modo fuera de línea y la independencia de la plataforma, lo que las convierte en una solución de compras sin problemas y sin inconvenientes para los usuarios.
1.1 Ver aplicación de demostración:
Antes de comprar la extensión, vea el funcionamiento de la aplicación de demostración abriendo la URL de la aplicación de demostración PrestaShop PWA en su navegador.
URL de la tienda de demostración: https://psm.knowband.com/pwa/admin1
URL de la aplicación PWA: https://psm.knowband.com/pwa/pwa-app/
1.2 Características principales de la aplicación web progresiva PrestaShop (PWA):
- Interfaz de pantalla de inicio personalizable (Editor de bricolaje)
- Notificaciones push ilimitadas (notificaciones manuales y automáticas)
- Soporte de chat de Zopim y WhatsApp
- Todo el soporte de métodos de pago y envío
- Sincronización en tiempo real
- Actualización automática de inventario
- Aplicación ligera con carga más rápida
- Soporte multilingüe y RTL
- Opciones de correo electrónico e inicio de sesión social (Google y Facebook)
- Interfaz intuitiva con navegación en capas
- Sin dependencia de Google Play o Apple App Store
- Solución completa de marca blanca
- Accesibilidad en modo sin conexión
- Pago simplificado de una página
- Control de páginas CMS (páginas de información)
- Mostrar productos relacionados
- Mostrar reseñas de usuarios
- Funcionalidad de lista de deseos incorporada
- Asistencia con cupones / vales
- Soporte de monedas múltiples
[IMP] Notas para iOS:
–> Los dispositivos iOS no ofrecen ningún indicador incorporado “Agregar a la pantalla de inicio”, por lo que los usuarios deben agregar manualmente la aplicación móvil PWA a la pantalla de inicio del iPhone o iPad. –> iOS no admite notificaciones push web, por lo tanto, las notificaciones push solo se pueden enviar al dispositivo Android desde el panel de administración de PrestaShop PWA Mobile App Builder.
[NUEVA ACTUALIZACIÓN] PrestaShop PWA admite secuencias de comandos de lenguaje RTL
PrestaShop PWA Mobile App Creator ahora es compatible con todos los idiomas del mundo, incluidos los RTL (de derecha a izquierda), como el árabe, el hebreo, el persa, etc. El administrador de la tienda puede incluir todos los idiomas de su tienda en la aplicación web progresiva e incluso puede agregar cualquier idioma RTL según el requerimiento. Por otro lado, los compradores móviles no tendrán ningún problema para acceder a la aplicación móvil PrestaShop PWA en su idioma preferido.
Compatible con PrestaShop Marketplace de múltiples proveedores
Nuestra Mercado de múltiples proveedores de PrestaShop El módulo es totalmente compatible con la aplicación móvil PrestaShop PWA. La aplicación web progresiva muestra la sección de vendedores con todos los vendedores del mercado en la misma aplicación. Los detalles del vendedor permanecen sincronizados en tiempo real con la web del mercado y se actualizarán automáticamente en la aplicación PrestaShop PWA.
Nota: La aplicación móvil PWA de múltiples proveedores para PrestaShop solo está centrada en el cliente. Esto significa que no habrá ningún panel de control o administración del vendedor desde el final de la aplicación. El administrador de la tienda puede administrar a los vendedores desde el módulo PrestaShop Marketplace y lo mismo se actualizará en la aplicación al instante.
2.0 Pantallas del panel de administración
La aplicación móvil PrestaShop PWA se puede configurar completamente utilizando estas prácticas pestañas y configuraciones de administración. Todo lo que necesita hacer es hacer algunos clics necesarios y alternar botones para realizar los cambios en la aplicación web progresiva. Analicemos cada uno de ellos en detalle:
Configuración general de 2.1
Como sugiere el nombre, estos ajustes de configuración generales son para todo tipo de cambios regulares en las aplicaciones web progresivas (PWA). Las opciones debajo de esta pestaña hacen que la aplicación funcione en los dispositivos de los compradores en línea.
a) Habilitar complemento:Habilite el módulo PrestaShop PWA para que la aplicación funcione en dispositivos móviles.
b) Redirigir en la página del carrito cuando se agrega al carrito:�Esta funcionalidad le permite al administrador controlar la redirección del botón “Agregar al carrito”. Los usuarios pueden ser redirigidos al carrito de compras o mantenerse en la pantalla del producto al tocar “Agregar al carrito”.
c) Mostrar descripción breve:Habilite la visualización de una breve descripción del producto en la pantalla del producto de la aplicación web progresiva (PWA).
d) Habilitar logotipo: Agregue el logotipo de su tienda en el encabezado de la aplicación web progresiva (PWA) y muestre su marca a los usuarios.
e) Color de fondo de la pantalla de bienvenida: Elija la opción de color adecuada para el fondo de la pantalla de inicio de la aplicación web progresiva (PWA).
f) Nombre de la aplicación PWA: Elija el nombre de su aplicación PWA según su elección.
g) Seleccionar diseño:Elija el diseño de página de inicio deseado para su aplicación PrestaShop. Puede crear múltiples diseños de pantalla de inicio en el backend según varios festivales y temas y usarlos según los requisitos de su tienda.
h) Métodos de envío deshabilitados:Inhabilite los métodos de envío para que no funcionen en la aplicación web progresiva (PWA), lo que no le parezca correcto. En el sitio web, normalmente funcionarán bien.
i) Páginas CMS habilitadas:Elija las páginas de CMS deseadas para que se muestren en la aplicación PrestaShop PWA.
j) Habilitar informes de registro de solicitudes:Habilite la opción para compartir el archivo de registro en las aplicaciones web progresivas para obtener detalles de cualquier tipo de comportamiento anormal de la aplicación.
k) Habilitar la codificación de URL de los enlaces de imágenes:Habilite esta funcionalidad para admitir caracteres que no sean ASCII en la aplicación web progresiva (PWA).
2.2 Configuración de notificaciones automáticas
Las notificaciones automáticas son la herramienta útil para comercializar y promocionar los productos, las ofertas y las ofertas de venta de su tienda. La configuración en esta pestaña permite a los usuarios configurar y enviar notificaciones automáticas ilimitadas en la aplicación PrestaShop PWA.
Los diversos detalles de esta configuración se obtendrán cuando configure la cuenta de Firebase. Aquí está el proceso paso a paso para hacerlo:
2.21 ¿Cómo configurar una cuenta de Firebase?
Paso 1:�Iniciar sesión en Google Firebase
Paso 2: Crear nuevo proyecto Al hacer clic en Agregar proyecto, aparecerá el siguiente cuadro de diálogo:
Tardará unos segundos en crear el proyecto. Una vez que el proyecto esté listo, haga clic en continuar.
Paso 3: Administrar la configuración del proyecto Una vez creado el proyecto, haga clic en Configuración del proyecto.
Paso 4: Vaya a las opciones de autenticación:
Paso 5: Buscar claves de Firebase En la configuración del proyecto, haga clic en Configuración de mensajería en la nube. Desde aquí, puede obtener directamente la clave del servidor.
Paso 6: Agregue su aplicación web a Firebase
Paso 7: Obtenga otros detalles relacionados con firebase y pegue lo mismo en el panel de administración del módulo PWA.
Paso 8: Obtenga la clave del servidor Firebase desde la pestaña de mensajería en la nube en Configuración:
Paso 9: Agregue su dominio en autenticación>>iniciar sesión.
A) Notificación de envío de pedido exitoso:
Habilite/desactive la notificación automática enviada a los usuarios de la aplicación para la creación exitosa de pedidos desde la aplicación PrestaShop PWA.
B) Notificación automática de actualización del estado del pedido:
Habilite/desactive la notificación automática enviada a los usuarios de la aplicación para cualquier actualización sobre el estado de entrega de su pedido anterior. Los usuarios pueden ver este estado en la pestaña “Detalles del pedido” de la aplicación PWA
C) Notificación automática de carrito abandonado:
Habilitar/deshabilitar la notificación automática enviada a los usuarios que han abandonado el carrito sin una compra exitosa. Esta notificación automática se enviará a los usuarios automáticamente después del intervalo de tiempo ingresado.
2.2 Historial de notificaciones push
Aquí, el administrador de la tienda puede ver el historial completo de las notificaciones automáticas enviadas a la aplicación web progresiva (PWA). Junto con eso, el administrador de la tienda puede incluso personalizar la notificación manual y enviarla a los usuarios de Progressive Web App.
A) Enviar Notificación:
¿Qué es mejor diseñar y enviar notificaciones automáticas según la necesidad? Esta opción permite a los propietarios de tiendas configurar y enviar una notificación personalizada manualmente a los usuarios de la aplicación PrestaShop PWA.
Diseño de página de inicio de 2.3
El módulo PrestaShop PWA permite al administrador de la tienda eludir las restricciones de tener una interfaz de usuario fija en la pantalla de inicio y diseñar la que se adapte a sus necesidades comerciales. Esta pestaña le permite al administrador de la tienda crear y guardar múltiples diseños y usarlos según las ocasiones y festivales en curso.
Para configurar los diseños de la página de inicio de la aplicación PWA, los siguientes elementos están disponibles en el back-end:
A) Principales categorías:
Las principales categorías se muestran en forma de pequeños cuadrados en la pantalla de inicio de Progressive Web App (PWA). Sus imágenes y enlaces de redirección se pueden configurar desde aquí. Estas categorías se pueden usar para resaltar las mejores marcas en la pantalla de inicio de la aplicación. El módulo PrestaShop PWA permite un máximo de 8 categorías en las que un mínimo de 4 son obligatorias.
B) Pancarta Cuadrada:
La lista de Banner cuadrado en la pantalla de inicio de la aplicación web progresiva (PWA) ofrece un bloque de banner de forma cuadrada en el que el administrador de la tienda puede usar la imagen deseada. El enlace de redirección correspondiente se puede utilizar para estos banners.
C) Pancarta Deslizante Horizontal:
Estos son los bloques de banner en forma de rectángulo disponibles en deslizamiento horizontal en la pantalla de inicio de la aplicación PrestaShop PWA. Para esto también, la imagen y el enlace de redirección son totalmente configurables.
D) Banners de rejilla:
Estos son banners de forma cuadrada que aparecen en la pantalla de inicio de Progressive Web App (PWA) en forma de vista de cuadrícula. El administrador de la tienda puede agregar tantos banners como sea necesario y establecer su enlace de redirección.
E) Banner del temporizador de cuenta regresiva:
El módulo PrestaShop PWA permite al administrador de la tienda configurar y agregar un banner basado en un temporizador en la pantalla de inicio de la aplicación web. El administrador de la tienda puede agregar una imagen de banner y una pantalla de inicio junto con un temporizador hasta que el banner se muestre en la pantalla de inicio de la aplicación web progresiva. Una vez que termine el tiempo, el banner se eliminará automáticamente.
F) Productos Cuadrados:
A partir de los banners, las aplicaciones móviles PrestaShop PWA permiten exhibir productos en listas de bloques cuadrados. El administrador puede elegir los productos para este elemento.
G) Productos deslizantes horizontales:
Puede agregar los productos en forma de deslizamiento horizontal. Los productos elegidos pueden ser de elección del administrador de la tienda, como recién llegados, los más vendidos, productos personalizados, etc.
H) Productos de rejilla:
Los productos también se pueden agregar en la pantalla de inicio en forma de listas de bloques de vista de cuadrícula. El administrador de la tienda puede elegir los productos deseados y la cantidad que se mostrará en la pantalla de inicio de la aplicación PrestaShop PWA.
I) Productos accedidos recientemente:
El módulo PrestaShop Mobile PWA permite al propietario de la tienda agregar un elemento de pestaña reciente en la pantalla de inicio de la aplicación web. Mostrará todos los productos que los usuarios han buscado recientemente.
Nota: El administrador de la tienda puede agregar hasta 20 elementos mientras diseña el diseño en el panel de back-end.
2.4 ¿Cómo obtener los detalles de la aplicación de Facebook?
La aplicación de Facebook se puede crear siguiendo los pasos mencionados a continuación:
Paso 1:�Ir a la URL dada: https://developers.facebook.com/apps/
Paso 2:�Haga clic en el botón “Agregar una nueva aplicación”.
Paso 3 y 4:Ingrese el nombre de su aplicación y la identificación de correo electrónico, luego haga clic en el botón “Crear ID de aplicación”.
Paso 5 y 6:Después de hacer clic en Crear ID de aplicación, deberá pasar por un control de seguridad como se muestra:
Paso 7:Haga clic en la pestaña “Configuración”.
Paso 8-13:�Estarán disponibles dos opciones en el menú desplegable, Básico y Avanzado, haga clic en “Básico”. Y luego ingrese su “Dominio de la aplicación”, “Correo electrónico de contacto”, “URL de privacidad”, “URL de términos y condiciones”, “Agregar logotipo”, “Seleccionar categoría” y haga clic en el botón “Guardar cambios”. Dominios de la aplicación: sudominio.com es correcto sudominio.com/tienda es incorrecto www.dominio.com es incorrecto
Paso 14:�Ahora haga clic en “+Agregar plataforma”.
Paso 15:�Y seleccione Sitio web como Plataforma.
Paso 16:Ahora ingrese la URL de su sitio.
Paso 17 y 18:�Haga clic en “Productos+” y seleccione iniciar sesión en Facebook.
Paso 19:�Seleccione web como la plataforma para la aplicación.
Paso 20:�Ahora haga clic en guardar.
Paso 21 y 22:�Haga clic en Configuración y agregue un URI de redirección de OAuth válido. URI de redireccionamiento de OAuth válidos: https://example.com/pwa-app/login
Paso 23 y 24:�Haga clic en “Revisión de la aplicación”. Y marque “Hacer público ‘el nombre de su aplicación'” en Sí.
Paso final:�Copie el ID de la aplicación y el Secreto de la aplicación y péguelos en los campos proporcionados en el módulo.
2.5 ¿Cómo obtener los detalles de la aplicación de Google?
- Vaya a Google Developers Console (https://console.developers.google.com/project) o haga clic en el enlace que se encuentra en la parte superior derecha de la pestaña respectiva en la página de configuración del módulo.
- Ahora haga clic en Crear proyecto a la izquierda de la página.
- Ingrese un nombre para su proyecto y continúe con el siguiente paso.
- Ahora haga clic en API y autenticación-> Credenciales en el menú de la izquierda, como se muestra a continuación.
- Haga clic en el botón Crear nuevo ID de cliente en el panel derecho de la pantalla.
- Es posible que deba completar el formulario para la pantalla de consentimiento antes de continuar. Para hacerlo, debe hacer clic en Pantalla de consentimiento en el menú de la izquierda, como se muestra en la imagen de arriba.
- Complete el formulario emergente con los detalles a continuación:
Tipo de aplicacion: Aplicación web.
Orígenes autorizados de JavaScript: El nombre de dominio de su tienda (https://www.yourstore.com).
URI de redireccionamiento autorizado o URI de la página de redireccionamiento del iniciador de sesión:
https://example.com/pwa-app/login
- Ahora haga clic en el botón Crear ID de cliente para obtener su ID de cliente y clave secreta de cliente.
- Ahora puede usar el secreto del cliente y la identificación del cliente para permitir que sus clientes inicien sesión en su tienda usando su cuenta de Google.
3.0 Pantallas de la aplicación Front End PWA:
Pantalla de Inicio de 3.1
1. Diseño dinámico:
Usando varios elementos de diseño, el administrador de la tienda puede crear un diseño dinámico según la necesidad.
2. Logotipo de la tienda:
Agregue el logotipo de la tienda en el encabezado de la aplicación web progresiva (PWA).
3. Carrito de compras:
El ícono del carrito de compras en la esquina superior derecha de la pantalla de inicio permite a los usuarios cambiar a la pantalla del carrito.
4. Menú de navegación:
Explore las categorías en las aplicaciones con el menú de navegación izquierdo en la pantalla de inicio.
3.2 Menú Acordeón (Barra de Navegación)
La aplicación web progresiva presenta una categorización adecuada de los productos disponibles en el sitio web. Los compradores móviles pueden buscar fácilmente productos de múltiples categorías. Todas las páginas de CMS también están disponibles en el Menú Acordeón. Proporciona las siguientes opciones:
1. Mi cuenta:
La opción Mi cuenta contiene toda la información personal, de envío y de pedido del usuario. Los compradores de la aplicación PWA pueden ver todos los datos almacenados relacionados con ellos y también pueden actualizarlos.
2. Categorías
Las categorías que se muestran en el menú de navegación izquierdo de la aplicación web progresiva (PWA) son las mismas que las de su sitio web.
3. Páginas de CMS:
Se puede acceder a varias páginas de CMS como Acerca de nosotros, Contáctenos, Términos y condiciones, etc. desde aquí.
4. Idioma(s)
La opción de idioma permite a los usuarios de la aplicación PWA ver la aplicación web en el idioma deseado. Todos los idiomas disponibles se muestran solo en esta opción.
5. Moneda(s)
Todas las monedas disponibles en su sitio web se muestran aquí en la aplicación PrestaShop PWA.
6. Iniciar/Cerrar sesión
Los usuarios pueden iniciar o cerrar sesión fácilmente en la aplicación web progresiva de PrestaShop a través de esta opción.
3.3 Pantalla de categoría:
1. Vistas múltiples:
Las categorías en la aplicación web progresiva (PWA) para PrestaShop se pueden ver tanto en la vista de lista como en la de cuadrícula.
2. Clasificación:
Esta opción permite a los compradores en línea elegir el orden de clasificación para reducir la búsqueda y obtener el producto deseado con facilidad.
3. Filtrar:
La opción de filtrar productos simplifica la búsqueda de productos. Los usuarios pueden filtrar todos los productos en categorías usando varios atributos como tamaño, color, precio, etc.
3.4 Pantalla del producto:
La pantalla del producto de su aplicación web progresiva (PWA) es simple e intrigante. Se muestran varias imágenes del mismo producto junto con el nombre y el precio. La disponibilidad del producto también se muestra como “En stock” o “Fuera de stock” según 
estado de inventario. Contiene las siguientes otras opciones:
1. Información y cuidado del producto
Aquí se mostrará la información completa del producto disponible en el inventario.
2. Descripción breve
Los usuarios pueden leer la breve descripción de su producto para decidir rápidamente sobre la compra.
3. Opciones de productos:
Todas las opciones relacionadas con el producto como tamaño, color, etc. se muestran aquí.
5. Agregar al carrito:
Este botón permite a los usuarios agregar productos al carrito. Los usuarios pueden seguir procesando el carrito para la compra.
6. Intercambio social de productos:
La opción de compartir para el producto permite a los usuarios compartir el producto en múltiples canales sociales.
Pantalla de inicio de sesión de 3.5
La aplicación web progresiva (PWA)�
Ofrece varias opciones de inicio de sesión con un solo toque y hace que el proceso de inicio de sesión/registro sea más fluido:
1. Iniciar sesión
Los usuarios de la aplicación pueden autenticarse e iniciar sesión fácilmente en las aplicaciones PWA utilizando sus credenciales de inicio de sesión de correo electrónico anteriores.
2. Regístrate
Todos los nuevos usuarios de la aplicación pueden registrarse y crear su cuenta en la tienda desde la aplicación PrestaShop PWA. El formulario de registro solicita solo los detalles necesarios para crear una cuenta.
3. Inicia sesión con Facebook
Los usuarios pueden iniciar sesión en la aplicación PWA utilizando sus credenciales de cuenta de Facebook.
4. Iniciar sesión con Google+
Los usuarios pueden iniciar sesión en la aplicación web progresiva (PWA) utilizando las credenciales de su cuenta de Google.
3.6 Pantalla del carrito de compras:
La pantalla del carrito de compras de su aplicación web progresiva mostrará todos los productos agregados al carrito de compras. Los usuarios de la aplicación pueden ver el nombre del producto, 
cantidad, precio total y costo de envío. Esta pantalla tiene las siguientes opciones:
1. Aplicar cupón
Esta opción permite a los usuarios usar cupones del sitio web y obtener ofertas de descuento.
2. Precio total del producto
Los usuarios pueden ver el costo completo de su bolsa de compras antes de continuar. Se actualiza automáticamente de acuerdo con cualquier actualización con cantidad de producto o nueva incorporación.
3. Actualizar cantidad de producto
Los usuarios de la aplicación PWA pueden incluso actualizar la cantidad del producto con la opción “Actualizar cantidad”.
4. Eliminar producto
Los usuarios de la aplicación pueden simplemente eliminar el producto del carrito simplemente tocando la opción “Eliminar”.
5. Seguir comprando
Los usuarios pueden dejar el carrito para buscar más productos en su aplicación web progresiva.
6. Continuar al pago
Los usuarios de la aplicación PWA pueden continuar con las pantallas de pago y pago simplemente tocando la opción “Continuar con el pago”.
Pantalla de pago 3.7
Las aplicaciones web progresivas con módulo PrestaShop�Progressive Web App(PWA) tienen un 
pago en una sola pantalla con solo información relevante. Los usuarios pueden ver detalles de pago completos, como detalles de envío, detalles de facturación, resumen de pedido, comentario de pedido, resumen de pago.
1. Detalles de envío y facturación
Esta pantalla proporciona detalles de las direcciones de envío y facturación guardadas por el usuario. El usuario también puede editar/guardar la nueva dirección de envío si es necesario.
2. Resumen del pedido
Los usuarios de la aplicación web progresiva pueden ver los detalles del producto antes de realizar el pago.
3. Métodos de envío
Todos los métodos de envío disponibles se muestran aquí. Los usuarios pueden elegir el que se adapte a sus necesidades.
4. Comentario del pedido
Los usuarios también pueden agregar cualquier comentario relacionado con su pedido que será visible para el administrador de la tienda en la página web del pedido en el backend.
6. Resumen de pago
Esta sección muestra los detalles completos del pago desglosado relacionados con la compra.
7. Proceder al pago
Los usuarios de la aplicación Progressive Web App (PWA) serán redirigidos a la pantalla de pago después de tocar el botón “Continuar con el pago”.
3.8 Pantalla de pago:
La pantalla de pago de la aplicación PrestaShop�PWA tiene todos los pagos de vista web disponibles en la tienda. Los compradores en línea pueden encontrar una experiencia de pago similar tanto en el sitio web como en las aplicaciones web progresivas.
3.9 Pantalla Mi cuenta
La pantalla Mi cuenta de la aplicación web progresiva PrestaShop (PWA) permite a los usuarios ver sus detalles completos guardados en la aplicación, incluida una lista de pedidos anteriores.
3.10 Pantalla de detalles del pedido
La pantalla de detalles del pedido de la aplicación web progresiva PrestaShop proporciona detalles completos del pedido específico de la aplicación PWA. Los usuarios pueden ver fácilmente la dirección de envío, el resumen del producto, el método de envío y pago, y el resumen del costo total, etc. Incluso hay una opción para realizar un seguimiento del estado del pedido y su entrega.
