PrestaShop PWA Mobile App – User Manual


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 construido para transformar su tienda en una aplicación web que se puede administrar desde un panel backend amigable. Estas aplicaciones presentan varias características extendidas 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 compra sin problemas y sin problemas 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 de 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 automatizadas)
  • Soporte de chat de Zopim y WhatsApp
  • Soporte para todos los 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 por 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 incorporada de la lista de deseos
  • Asistencia con cupones / vales
  • Soporte de monedas múltiples

Compatible con el mercado de proveedores múltiples de PrestaShop

El 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 del vendedor 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.

<b>Nota:</b> 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 vendedores ni administración desde el extremo de la aplicación. El administrador de la tienda puede administrar a los vendedores desde el módulo PrestaShop Marketplace y los mismos se actualizarán en la aplicación al instante.

Pantallas del panel de administración de 2.0

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 los 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. Las opciones de esta pestaña hacen que la aplicación funcione en los dispositivos de los compradores en línea.

configuración general-1

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 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 tocando “Agregar al carrito”.
c) Descripción breve de la pantalla: Permite mostrar una descripción breve del producto en la pantalla del producto de la aplicación web progresiva.
d) Habilitar logotipo: Agregue el logotipo de su tienda en el encabezado de la aplicación PWA y muestre su marca a los usuarios.

configuración general-2

e) Color de fondo de la pantalla de bienvenida: Elija la opción de color correcta para el fondo de la pantalla de presentación de la aplicación 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 utilizarlos según los requisitos de su tienda.
h) Métodos de envío desactivados: Deshabilite los métodos de envío para que no funcionen en la aplicación PWA, lo que no le parezca correcto. En el sitio web, normalmente funcionarán bien.
i) Páginas CMS habilitadas: Elija las páginas CMS que desee para que se muestren en la aplicación PrestaShop PWA.
j) Habilitar el informe de registro de solicitudes: Habilite la opción de compartir archivos de registro en las aplicaciones web progresivas para obtener detalles de cualquier tipo de comportamiento anormal de la aplicación.
k) Habilite la codificación URL de los enlaces de imágenes:Habilite esta funcionalidad para admitir caracteres no ASCII en la aplicación web Progressive.

Configuración de notificaciones push 2.2

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 de esta pestaña permite a los usuarios configurar y enviar notificaciones push ilimitadas en la aplicación PrestaShop PWA.

notificaciones-push-1

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

firebase-project
Paso 2: Crear nuevo proyecto Al hacer clic en Añadir proyecto, aparecerá el siguiente cuadro de diálogo:

crear-proyecto
Tardará unos segundos en crear el proyecto. Una vez que el proyecto esté listo, haga clic en Continuar.

proyecto continuo
Paso 3: Administrar la configuración del proyecto Una vez creado el proyecto, haga clic en Configuración del proyecto.

configuración del proyecto
Paso 4: Vaya a las opciones de autenticación:
opciones de autenticación

Paso 5: Encuentra las claves de Firebase En la configuración del proyecto, haz clic en Configuración de mensajería en la nube. Desde aquí, puede obtener directamente la clave del servidor.

clave de firebase
Paso 6:
Agregue su aplicación web a Firebase

aplicación web a base de fuego

aplicación web a base de fuego

Paso 7: Obtenga otros detalles relacionados con firebase y péguelos en el panel de administración del módulo PWA.

detalles de firebase

Paso 8: Obtenga la clave del servidor firebase de la pestaña de mensajería en la nube en Configuración:

clave de firebase

Paso 9: Agregue su dominio en autenticación >> inicie sesión.

firebase-server-key

firebase-keys

A) Notificación de pedido exitosa:

Habilite / deshabilite las notificaciones automáticas enviadas a los usuarios de la aplicación para la creación exitosa de pedidos desde la aplicación PrestaShop PWA.

notificaciones push

B) Notificación de actualización de estado del pedido:

Habilite / deshabilite las notificaciones automáticas enviadas a los usuarios de la aplicación para cualquier actualización con respecto al 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.

notificaciones push

C) Notificación push de carro abandonado:

Habilite / deshabilite las notificaciones automáticas enviadas a los usuarios que abandonaron el carrito sin una compra exitosa. Esta notificación de inserción se enviará a los usuarios automáticamente después del intervalo de tiempo ingresado.

notificaciones push

2.2 Historial de notificaciones push

Aquí, el administrador de la tienda puede ver el historial completo de las notificaciones push enviadas a la aplicación PWA. Junto con eso, el administrador de la tienda puede incluso personalizar la notificación manual y enviar la misma a los usuarios de la aplicación web progresiva.

push-notifications-history

A) Enviar notificación:

¿Qué es mejor diseñar y enviar notificaciones push 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.

push-notifications-history
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 de pantalla de inicio fija y diseñar la que se adapte a sus necesidades comerciales. Esta pestaña permite al administrador de la tienda crear y guardar múltiples diseños y usarlos según las ocasiones y festivales en ejecución.

diseño de página de inicio
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) Categorías principales:

Las categorías principales se muestran en forma de pequeños cuadrados en la pantalla de inicio de la aplicación web progresiva. 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.

categorías superiores

B) Cuadrado Banner:

El listado de Banner cuadrado en la pantalla de inicio de la aplicación 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 redireccionamiento correspondiente se puede utilizar para estos banners.

banner cuadrado
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 completamente configurables.

pancartas deslizantes

D) Banners de cuadrícula:

Estos son banners de forma cuadrada que aparecen en la pantalla de inicio de la aplicación 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.

banners de rejilla
E) Banner de cuenta atrás Timer:

El módulo PrestaShop PWA permite al administrador de la tienda configurar y agregar un banner basado en 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 el temporizador hasta que el banner se muestre en la pantalla de inicio de la aplicación web progresiva. Una vez que finaliza el temporizador, el banner se eliminará automáticamente.

cuenta regresiva-temporizador-banner
F) Square Productos:

A partir de los banners, las aplicaciones móviles PrestaShop PWA permiten exhibir productos en una lista de bloques cuadrados. El administrador puede elegir los productos para este elemento.

productos cuadrados
G) Productos deslizantes horizontales:

Puede agregar los productos en forma de deslizamiento horizontal. Los productos elegidos pueden ser de la elección del administrador de la tienda, como los recién llegados, los más vendidos, los productos personalizados, etc.

productos deslizantes
H) Productos de rejilla:

Los productos también se pueden agregar en la pantalla de inicio en forma de listados 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.

productos de rejilla
I) Productos de acceso reciente:

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 navegan recientemente.

<b>Nota:</b> El administrador de la tienda puede agregar hasta 20 elementos mientras diseña el diseño en el panel de backend.

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:Vaya a la URL proporcionada: https://developers.facebook.com/apps/

Paso 2:Haga clic en el botón “Agregar una nueva aplicación”.

añadir nueva aplicación

Paso 3 y 4:Ingrese el nombre de la aplicación y la identificación de correo electrónico, luego haga clic en el botón “Crear identificación de la aplicación”.

crear-aplicación-id

Paso 5 y 6:Después de hacer clic en Crear ID de aplicación, tendrá que pasar por un control de seguridad como se muestra:

crear-aplicación-id

Paso 7:Haga clic en la pestaña “Configuración”.

fb-app-setting

Paso 8-13:Habrá dos opciones disponibles en el desplegable, Básico y Avanzado, haga clic en “Básico”. Y luego ingrese su “Dominio de la aplicación”, “Correo electrónico de contacto”, “Privacidad URL”, “Términos y condiciones URL”, “Agregar logotipo”, “Seleccionar categoría” y haga clic en el botón “Guardar cambios”. Dominios de la aplicación: yourdomain.com is correct yourdomain.com/store is incorrect www.domain.com is correct

id-aplicación-fb

Paso 14:Ahora haga clic en “+ Agregar plataforma”.

añadir plataforma
Paso 15:
Y seleccione Sitio web como Plataforma.

elegir plataforma

Paso 16:Ahora ingrese la URL de su sitio.

ingresar-URL-sitio-web
Paso 17 y 18:Haga clic en “Productos +” y seleccione Iniciar sesión en Facebook.

facebook-login
Paso 19: Seleccione web como la plataforma para la aplicación.

elegir plataforma

Paso 20:Ahora haga clic en guardar.

facebook-app-ID
Paso 21 y 22: Haga clic en Configuración y agregue un URI de redireccionamiento de OAuth válido. URI de redireccionamiento de OAuth válidos: https://example.com/pwa-app/login

Redireccionar URL

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í.

revisión de la aplicación
Paso final: Copie el ID de la aplicación y el Secreto de la aplicación y péguelo en los campos proporcionados en el módulo.

último paso

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.

ID de aplicación de Google

  • Haga clic en el botón Crear nueva 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.
  • Rellene el formulario emergente con los siguientes detalles:

Tipo de aplicacion: Aplicación web.
Orígenes de JavaScript autorizados: El nombre de dominio de su tienda (http://www.yourstore.com).
URI de redireccionamiento autorizado o URI de la página de redireccionamiento de Loginizer:
https://example.com/pwa-app/login

ID de aplicación de Google

  • Ahora haga clic en el botón Crear ID de cliente para obtener su ID de cliente y su Clave secreta de cliente.
  • Ahora puede usar el secreto del cliente y la ID del cliente para permitir que sus clientes inicien sesión en su tienda utilizando su cuenta de Google.

3.0 Pantallas de la aplicación Front End PWA:

Pantalla de Inicio de 3.1pantalla de inicio

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.

3. Carrito de compras:

El ícono del carrito de compras en la esquina superior derecha de la pantalla de inicio permite a los usuarios encender 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.

La aplicación web progresiva presenta una clasificación adecuada de los productos disponibles en el sitio web. Los compradores móviles pueden buscar fácilmente productos de varias categorías. Todas las páginas de CMS también están disponibles en el menú Acordeón. Ofrece las siguientes opciones:

barra de navegación

1. Mi cuenta:
La opción Mi cuenta contiene toda la información personal, de envío y de pedidos 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 son las mismas que las de su sitio web.

3. Páginas de CMS:
Varias páginas de CMS como Acerca de nosotros, Contáctenos, Términos y condiciones, etc. Se puede acceder 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 con 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 sesión / Cerrar sesión
Los usuarios pueden iniciar sesión / cerrar sesión fácilmente desde la aplicación web progresiva PrestaShop a través de esta opción.

Pantalla de Categoría 3.3:categoria de pantalla

1. Vistas múltiples:
Las categorías de la aplicación PWA para PrestaShop se pueden ver tanto en lista como en cuadrícula.

2. Clasificación:
Esta opción permite a los compradores en línea elegir el orden de clasificación para limitar 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.

Pantalla del producto 3.4:

La pantalla del producto de su aplicación web progresiva 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 pantalla de productoestado de inventario. Contiene las siguientes otras opciones:

1. Información y cuidado del producto
La información completa del producto disponible en el inventario se mostrará aquí.

2. Breve descripción
Los usuarios pueden leer la breve descripción de su producto para tomar una decisión rápidamente sobre la compra.

3. Opciones de producto:
Aquí se muestran todas las opciones relacionadas con el producto, como el tamaño, el color, etc.

5. Añadir a la cesta:
Este botón permite a los usuarios agregar productos al carrito. Los usuarios pueden seguir procesando el carrito para la compra.

6. Compartir redes sociales de productos:
La opción de compartir del 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 pantalla de ingreso al sistemaOfrece 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 aplicaciones PWA utilizando sus credenciales de inicio de sesión de correo electrónico anteriores.

2. Regístrate
Todos los usuarios de la nueva 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. Inicia sesión con Google+
Los usuarios pueden iniciar sesión en la aplicación web progresiva utilizando sus credenciales de cuenta de Google.

Pantalla del carrito de compras 3.6:

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, shopping-cart-screencantidad, precio total y costo de envío. Esta pantalla tiene las siguientes opciones:

1. Aplicar vale
Esta opción permite a los usuarios utilizar cupones de sitios web y obtener ofertas de descuento.

2. Precio total del producto
Los usuarios pueden ver el costo total 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 la cantidad del producto
Los usuarios de la aplicación PWA pueden incluso actualizar la cantidad del producto con la opción “Actualizar cantidad”.

4. Quitar producto
Los usuarios de la aplicación pueden simplemente eliminar el producto del carrito simplemente tocando la opción “Eliminar”.

5. Continuar comprando
Los usuarios pueden dejar el carrito para buscar más productos en su aplicación web progresiva.

6. Continuar con el pago
Los usuarios de la aplicación PWA pueden continuar con las pantallas de pago y pago con solo tocar la opción “Continuar con el pago”.

Pantalla de pago 3.7

Las aplicaciones web progresivas con el módulo PrestaShop PWA tienen una pantalla de pagoPago en una sola pantalla con solo información relevante. Los usuarios pueden ver detalles completos de pago como detalles de envío, detalles de facturación, resumen del pedido, comentario del 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 mejor se adapte a sus necesidades.

4. Ordenar Comentario
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 back-end.

6. Resumen del pago
Esta sección muestra los detalles completos del pago de desglose relacionados con la compra.

7. Proceder al pago
Los usuarios de la aplicación PWA serán redirigidos a la pantalla de Pago después de tocar el botón “Proceder al pago”.

Pantalla de pago 3.8:

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.

pantalla de pago

Pantalla de Mi cuenta 3.9

La pantalla de mi cuenta de la aplicación PrestaShop PWA permite a los usuarios ver sus detalles completos guardados en la aplicación, incluida una lista de pedidos anteriores.mi-cuenta-pantalla

Pantalla de detalles del pedido 3.10

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, el resumen del costo total, etc. Incluso hay una opción para realizar un seguimiento del estado del pedido y su entrega.

detalles del pedido

Joe Parker

We boast of the best in the industry plugins for eCommerce systems and has years of experience working with eCommerce websites. We provide best plugins for platforms like - Magento, Prestashop, OpenCart and Shopify . We also provide custom module development and customization services for the website and modules..

Leave a Reply

Your email address will not be published. Required fields are marked *