PrestaShop PWA Mobile App – User Manual


1.0 Introducción

El rápido crecimiento en la industria del comercio electrónico 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 una gran cantidad de 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 de fondo amigable. Estas aplicaciones vienen con 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 compras 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 PWA de PrestaShop en su navegador.

URL de la tienda de demostración: https://psm.knowband.com/pwa/17/admin1
URL de la aplicación PWA:?https://psm.knowband.com/pwa/17/pwa-app

Pantallas del panel de administración de 2.0

La aplicación móvil PrestaShop PWA se puede configurar completamente mediante estas prácticas pestañas y configuraciones de administración. Todo lo que necesita hacer es hacer algunos clics y botones necesarios para hacer los cambios en la aplicación web progresiva. Analicemos cada uno de ellos en detalle:

Configuración general de 2.1

Como su nombre indica, estos ajustes de configuración generales son para todo tipo de cambios regulares en las aplicaciones web progresivas. Las opciones en 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:?Enable the PrestaShop PWA module to make the app work on mobile devices.
b) Redireccionar 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 al tocar "Agregar al carrito".
c) Descripción breve de la pantalla:?Enable to display short product description on the product screen of Progressive Web App.
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 bienvenida 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:?Choose the desired Home Page Layout for your PrestaShop app. You can create multiple home screen layouts in the backend as per various festivals & themes & use them as per your store requirement.
h) Métodos de envío discapacitados:?Disable shipping methods from working in PWA app whichever you don’t feel right. On website they will work usually fine.
i) Páginas de CMS habilitadas:?Choose desired CMS pages to be displayed on the PrestaShop PWA app.
j) Habilitar informes de registro de solicitud:?Enable option to share log file on the progressive web apps in order to get details of any sort of abnormal behavior from app.
k) Habilite la codificación URL de los enlaces de imagen:?Enable this functionality to support Non-ASCII characters on the Progressive web app.

Configuración de notificaciones push 2.2

Las notificaciones push son la herramienta útil para comercializar y promocionar los productos, ofertas y ofertas de venta de su tienda. La configuración en 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í hay un proceso paso a paso para hacerlo:

2.21 ¿Cómo configurar una cuenta de Firebase?

Paso 1:?Login Google Firebase

proyecto firebase
Paso 2: Crear un nuevo proyecto al hacer clic en

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

proyecto continuo
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:
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.

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

web-app-to-firebase

web-app-to-firebase

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 >> inicio de 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 la notificación automática enviada a los usuarios de la aplicación para cualquier actualización relacionada con 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

notificaciones push

C) Notificación push de carro abandonado:

Habilitar / deshabilitar notificaciones automáticas enviadas a los usuarios que han abandonado el carrito sin una compra exitosa. Esta notificación push 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 enviarla a los usuarios de la aplicación PWA.

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.

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) Arriba

Parte superior

categorías superiores

B) cuadrado

El listado de Banner cuadrado en la pantalla de inicio de la aplicación PWA ofrece un bloque de banner cuadrado en el que el administrador de la tienda puede usar la imagen deseada. El enlace de redireccionamiento relevante se puede utilizar para estos banners.

banner cuadrado
C) horizontal

Estos son el bloque de pancarta en forma de rectángulo disponible en deslizamiento horizontal en la pantalla de inicio de la aplicación PrestaShop PWA. Para esto también, el enlace de imagen y redirección es totalmente configurable.

pancartas deslizantes

D) rejilla

Estos son pancartas de forma cuadrada que figuran 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) Cuenta atrás

los

cuenta regresiva-temporizador-banner
F) cuadrado

A partir de las pancartas, 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 novedades, productos más vendidos, productos personalizados, etc.

productos deslizantes
H) Productos de cuadrícula:

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

Nota: El administrador de la tienda puede agregar hasta 20 elementos mientras diseña el diseño en el panel de fondo.

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:?Go to given?URL: https://developers.facebook.com/apps/

Paso 2:?Click on the “Add a New App” button.

añadir nueva aplicación

Paso 3 y 4:?Enter your App name and email id, then click on “Create App ID” button.

crear-aplicación-id

Paso 5 y 6:?After clicking on Create App ID you will have to?go through a security check as shown:

crear-aplicación-id

Paso 7:?Click on “Setting” tab.

fb-app-setting

Paso 8-13:?Two option will be available in the?dropdown, Basic and Advanced, click on “Basic”. And then enter your “App Domain”,?”Contact Email”, “Privacy?URL”, “Terms and Conditions?URL”, “Add Logo”, “Select Category” and click on “Save Changes” button.
App Domains:
yourdomain.com is?correct
yourdomain.com/store is?incorrect
www.domain.com is?incorrect

id-aplicación-fb

Paso 14:?Now click on “+Add Platform”.

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

elegir plataforma

Paso 16:?Now Enter your site URL.

enter-website-url
Paso 17 y 18:?Click on “Products+” and select Facebook login.

facebook-login
Paso 19:?Select web as the platform for the app.

elegir plataforma

Paso 20:?Now click on save.

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:?Click on “App review”. And?mark “Make ‘your app name’ Public” to Yes.

revisión de la aplicación
Paso final:?Copy the App ID and App Secret and paste it into the fields provided in the module.

último paso

2.5 ¿Cómo obtener los detalles de la aplicación 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 correspondiente en la página de configuración del módulo.
  • Ahora haga clic en
  • 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.

google-app-id

  • 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

google-app-id

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

Las aplicaciones móviles de PrestaShop para Android e iOS vienen con una categorización adecuada de los productos disponibles en el sitio web. Los compradores móviles pueden navegar fácilmente los productos de múltiples categorías. Todas las páginas de CMS también están disponibles en el menú de 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 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 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 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 y cerrar sesión fácilmente desde la aplicación PrestaShop PWA a través de esta opción.

Pantalla de Categoría 3.3:categoria de pantalla

1. Vistas múltiples:
Las categorías en la aplicación PWA para PrestaShop se pueden ver tanto en la lista como en la vista de 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 móvil PrestaShop 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 "Agotado" 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 decidir 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 procesar aún más el carrito para la compra.

6. Compartir redes sociales de productos:
La opción de compartir 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 móvil PrestaShop pantalla de ingreso al sistemaCreator 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 sencillo:

1. Iniciar sesión
Los usuarios de la aplicación pueden autenticarse fácilmente e iniciar sesión en 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 solo solicita 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 PWA utilizando sus credenciales de cuenta de Google.

Pantalla del carrito de compras 3.6:

La pantalla del carrito de compras de su aplicación móvil PrestaShop 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 el 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 cantidad de 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 simplemente pueden eliminar el producto del carrito con solo tocar la opción "Eliminar".

5. Seguir comprando
Los usuarios de la aplicación pueden dejar el carrito para buscar más productos en su aplicación.

6. Continuar a la comprobación
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 móviles con PrestaShop Mobile App Maker han simplificado pantalla de pagoPago de pantalla única con solo información relevante. Los usuarios pueden ver los detalles completos de pago como detalles de envío, detalles de facturación, resumen del pedido, comentario del pedido, 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 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 del 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 PrestaShop

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, y 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 *