Aplicación web progresiva OpenCart (PWA) – Manual del usuario


1.0 Introducción

Esta extensión OpenCart automatizada está construida con el motivo de facilitar a los propietarios de tiendas en línea la transformación de su tienda en una aplicación web progresiva. La tienda de comercio electrónico en PWA es una de las principales tecnologías avanzadas que todas las empresas de comercio electrónico deben buscar. La aplicación móvil OpenCart PWA es en realidad una aplicación web que no depende de las tiendas de aplicaciones de terceros (Google Play y Apple App Store). Los compradores en línea pueden “Agregar la aplicación PWA a la pantalla de inicio” fácilmente y comprar productos sobre la marcha como cualquier otra aplicación.

1.1 ¿Cómo funciona la aplicación web progresiva OpenCart (PWA)?

Una vez que la tienda de comercio electrónico se convierte a la aplicación móvil OpenCart PWA, cada vez que un usuario abre la URL de la tienda en el navegador móvil, se le pedirá a los usuarios que “Agregar PWA a la pantalla de inicio”. Es así de simple de instalar y usar la aplicación web OpenCart Progressive.

1.2 Principales características para elegir OpenCart PWA:

  • Carga más rápida y rendimiento rápido
  • Pantalla de inicio totalmente personalizable con editor de bricolaje
  • Todos los métodos de pago y envío del sitio web son compatibles
  • Notificaciones push ilimitadas (notificaciones automáticas y personalizadas)
  • Notificación push de carrito abandonado
  • Soporte de chat de Zopim y WhatsApp
  • Interfaz amigable y atractiva
  • Sin dependencia de las tiendas de aplicaciones
  • Totalmente de marca para su tienda (etiqueta blanca)
  • Correo electrónico e inicio de sesión social (Google y Facebook)
  • Soporte multilingüe y RTL
  • Funcionamiento en modo sin conexión
  • Funcionalidad incorporada de la lista de deseos
  • Sincronización en vivo sitio web y aplicación en blanco y negro
  • Actualización automática de inventario
  • Compatibilidad con múltiples dispositivos
  • Pago de una página
  • Aplicación ligera
  • Gestión de páginas CMS
  • Productos relacionados en la aplicación web progresiva
  • Reseñas de usuarios sobre productos en PWA
  • Soporte de monedas múltiples
  • Asistencia con cupones / vales

Totalmente compatible con el mercado de proveedores de KnowBand:

Nuestra aplicación móvil OpenCart PWA es compatible con Mercado de múltiples proveedores de OpenCart. Convierta su tienda de comercio electrónico OpenCart en un mercado completo y ejecute la aplicación móvil PWA para el mismo. Los vendedores del mercado estarán disponibles en su aplicación web progresiva y los usuarios también pueden simplemente navegar por ellos.

<b>Nota:</b> Las aplicaciones móviles de OpenCart PWA solo están centradas en el cliente, es decir, los usuarios pueden visitar la aplicación de navegación PWA junto con los vendedores. No habrá ningún panel o administración del vendedor a través de la aplicación web OpenCart Progressive. El administrador puede gestionar los vendedores desde la web del mercado y los mismos se actualizarán automáticamente en la aplicación móvil de PWA.

1.3 Ver demostración de OpenCart PWA:

 

pantalla de inicio

Explore las características del módulo y la aplicación PWA desde los siguientes enlaces de demostración:

Panel de administración del módulo: https://opencartdemo.knowband.com/3.0/pwa/admin/
Aplicación de demostración de PWA: https://opencartdemo.knowband.com/3.0/pwa/pwa-app/

(Copie y pegue la URL en el navegador móvil y “Agregar a la pantalla de inicio”)

2.0 Pantallas del panel de administración:

Explore todas las configuraciones del panel de administración de la extensión de la aplicación OpenCart PWA Mobile junto con la funcionalidad y trabaje con las siguientes instantáneas compartidas:

Configuración general de 2.1:

-configuración general

a) Mostrar / ocultar vista previa: Toque el botón del ojo para mostrar / ocultar la vista previa del teléfono en el panel de administración.
b) Estado: Habilite el módulo para que PWA funcione en dispositivos móviles.
c) Habilite los informes de registro de solicitudes: Habilite el registro de errores en el móvil.
d) Nombre de la aplicación PWA: Ingrese el nombre de la aplicación OpenCart PWA.
e) Seleccione Diseño para la página de inicio: Elija entre el diseño de pantalla de inicio agregado previamente para la aplicación web OpenCart Progressive.

configuración general-2

f) Habilitar barra de pestañas: Habilite la barra de pestañas en la parte inferior de la aplicación OpenCart PWA para una navegación perfecta.
g) Fuente para la aplicación PWA: Elija una fuente para la aplicación web progresiva OpenCart (PWA).
h) Color del botón de la aplicación: Elija el color del botón para la aplicación móvil PWA.
i) Color del tema de la aplicación: Elija el color del tema para la aplicación PWA.
j) Color de fondo de la aplicación: Elija el color de fondo de la aplicación PWA.
k) Color de la pantalla de presentación de la aplicación: Elija una pantalla de presentación para la aplicación móvil PWA.
l) Habilitar logotipo: Agregue el logotipo de su marca en el encabezado de la aplicación móvil OpenCart PWA.

configuración general-3

m) Imagen del icono de la aplicación: Agregue la imagen del icono de la aplicación en el panel de administración de la extensión OpenCart PWA.
n) Redirigir en la página del carrito cuando se agrega al carrito: Controle la redirección del botón Agregar al carrito cada vez que un usuario toque el botón Agregar al carrito.

Configuración de notificaciones push 2.2

ajustes-notificaciones-push

Las notificaciones push son la mejor herramienta de marketing para la aplicación web progresiva (PWA) para OpenCart. El administrador de la tienda puede simplemente promocionar los productos y ofertas de la tienda a los usuarios de la aplicación y generar más ventas e ingresos. Ingrese todos los detalles en la configuración de notificaciones push creando un proyecto de Firebase:

¿Cómo configurar una cuenta de Firebase?

Paso 1: Iniciar sesión en Google Firebase

base de fuego

Paso 2: Crear un nuevo proyecto Al hacer clic en Agregar 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: Encuentre las 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

aplicación web a base de fuego

aplicación web a base de fuego

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

detalles de firebase

Paso 8:Obtenga la clave del servidor de base de fuego 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-server-key

A) Notificación de pedido exitosa:

Habilite / deshabilite la notificación automática automática que se enviará a los usuarios de la aplicación cada vez que realicen un pedido exitoso desde la aplicación web progresiva OpenCart (PWA).

orden-éxito

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

Habilite / deshabilite las notificaciones automáticas enviadas cada vez que se actualice el estado del pedido desde la aplicación. Los usuarios de la aplicación móvil OpenCart PWA pueden estar atentos a los detalles de pedidos anteriores.

notificación-estado-pedido

C) Notificación push de carro abandonado:

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

carro abandonado

2.3 Historial de notificaciones push

Aquí se verá el historial completo de notificaciones push de las notificaciones push enviadas con éxito. El administrador de la tienda puede realizar un seguimiento de las notificaciones push enviadas anteriormente desde aquí.

historial de notificaciones push

A) Enviar notificación:

Personalice y envíe notificaciones automáticas manualmente a los usuarios de la aplicación web progresiva OpenCart (PWA) según sus necesidades. El administrador de la tienda puede configurar estas notificaciones por su cuenta y enviarlas a los usuarios de la aplicación web progresiva OpenCart (PWA).

Enviar notificación

Diseño de la página de inicio de 2.4:

Diseñe y guarde varios diseños de diseños (rebajas, festivales, etc.) y simplemente elija el correcto desde el panel de administración para actualizar en la aplicación web OpenCart Progressive.

pantalla de inicio

La aplicación web progresiva OpenCart (PWA) ofrece una pantalla de inicio personalizable cuyo diseño se puede diseñar desde el panel de administración con unos pocos clics del mouse y arrastrar y soltar. El diseño atractivo según el festival en ejecución, la venta, la ocasión, etc., seguramente puede ayudar a mejorar las ventas a través de las aplicaciones móviles OpenCart PWA.

diseño de página de inicio

Agregue un nuevo diseño desde esta pestaña o edite los agregados anteriormente. Los ajustes de configuración de la página de inicio ofrecen los siguientes elementos:

Categorías principales:

categoría superior

Banner cuadrado:

banner cuadrado

Banner deslizante horizontal:

banner deslizante

Banner de cuadrícula:

banner-rejilla

Banner de temporizador de cuenta regresiva:

cuenta regresiva-temporizador-banner

Productos cuadrados:

producto cuadrado

Productos deslizantes:

productos deslizantes

Productos de rejilla:

productos de rejilla

¿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”.

configuración de la aplicación fb

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

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

Páginas de información 2.7:

Agregue páginas CMS en la aplicación y ofrezca contenido informativo a los usuarios de la aplicación OpenCart PWA Mobile.

páginas de información

3.0 Pantallas de la aplicación Front End PWA:

Pantalla de Inicio 3.1:

pantalla de inicio

La pantalla de inicio de la aplicación web progresiva OpenCart (PWA) es totalmente personalizable con un editor de bricolaje como se explicó anteriormente en las pantallas del Panel de administración. Cambie el aspecto de la pantalla de inicio de la aplicación en cualquier momento y ofrezca una apariencia más fácil de usar y orientada a las ventas.

1. Diseño personalizado:

Utilizando varios banners, controles deslizantes y elementos de productos, el administrador de la tienda puede crear un diseño dinámico según las necesidades.

2. Logotipo:

Use el logotipo de su tienda en el encabezado superior de la aplicación web progresiva OpenCart (PWA).

3. Bolsa de carrito de compras:

El ícono del carrito de compras en la esquina superior derecha de la pantalla de inicio permite a los usuarios acceder a la pantalla del carrito y verificar los productos agregados.

4. Menú de navegación izquierdo:

Explore las categorías que se muestran en la aplicación PWA con el menú de navegación izquierdo.

Las aplicaciones móviles OpenCart PWA vienen con una categorización perfecta y adecuada disponible. Los usuarios pueden encontrar categorías relevantes en el menú de navegación de la izquierda y buscar productos. También se pueden agregar varias páginas CMS al menú que ofrecen contenido relevante en la aplicación.

barra de navegación de menú de acordeón

1. Mi cuenta:

La opción Mi cuenta contiene toda la información personal de los usuarios, incluidos el envío y el pedido. Los compradores de la aplicación web progresiva OpenCart pueden ver y actualizar la información guardada.

2. Categorías:

Las categorías que se muestran en el menú de navegación izquierdo de la aplicación web OpenCart Progressive son las mismas que están disponibles en la tienda de comercio electrónico.

3. Páginas de CMS:

Se puede acceder desde aquí a varias páginas de CMS como Acerca de nosotros, Contáctenos, Términos y condiciones, etc. Estas páginas de información se pueden agregar desde el panel de administración de la extensión.

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.

5. Moneda (s):

Todas las monedas disponibles en su sitio web se muestran aquí en la aplicación OpenCart Progressive Web App (PWA).

6. Iniciar sesión / Cerrar sesión:

Los usuarios pueden iniciar sesión / cerrar sesión fácilmente desde la aplicación OpenCart PWA a través de esta opción.

Pantalla de Categoría 3.3:

categoria de pantalla

Las pantallas de categorías sin desorden con la vista de lista y cuadrícula permiten a los usuarios elegir lo que es mejor para ellos de una categoría específica. Todo el inventario de la tienda permanecerá sincronizado con la aplicación móvil OpenC Progressive Web App (PWA) y las nuevas incorporaciones y cambios incluso se actualizarán en tiempo real.

1. Vista de lista y cuadrícula:

Las categorías de la aplicación PWA para OpenCart se pueden explorar tanto en lista como en cuadrícula.

2. Clasificación de productos:

La opción de clasificación permite a los compradores en línea reducir los productos en el orden de clasificación deseado y encontrar el correcto.

3. Filtro de producto:

La aplicación móvil OpenCart PWA ofrece la opción de filtrar productos simplificando la búsqueda de productos. Los compradores en línea pueden encontrar los productos deseados en categorías utilizando filtros para varios atributos como tamaño, color, precio, etc.

Pantalla del producto 3.4:

pantalla de producto

La pantalla del producto de la aplicación web OpenCart Progressive es tan simple e intrigante como podría ser. Con todas las opciones e información necesarias sobre el producto, se convierte en cuestión de minutos para que los usuarios estén seguros del producto que están a punto de adquirir. Varias imágenes están disponibles para el producto con las opciones En stock y Fuera de stock.

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 rápidamente una decisión sobre la compra.

3. Opciones de producto:

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

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

5. Compartir redes sociales de productos:

La opción para compartir del producto permite a los usuarios compartir productos en múltiples canales sociales.

Pantalla de inicio de sesión de 3.5

pantalla de ingreso al sistema

La aplicación móvil OpenCart PWA ofrece opciones de inicio de sesión social con un solo toque y hace que el proceso de inicio de sesión / registro sea más sencillo. La aplicación web OpenCart Progressive ofrece inicio de sesión en Google y Facebook.

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ístrese:

Todos los usuarios de la nueva aplicación pueden registrarse y crear su cuenta en la tienda desde la aplicación OpenCart PWA. El formulario de registro solicita solo los detalles necesarios para crear una cuenta.

3. Inicie sesión con Facebook:

Los usuarios pueden iniciar sesión en la aplicación PWA utilizando sus credenciales de cuenta de Facebook.

4. Inicie 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 Carrito de la compra de la aplicación móvil OpenCart PWA mostrará todos los productos agregados al carrito de la compra. Los usuarios de la aplicación pueden ver el nombre del producto, la cantidad, el precio total y el costo de envío. Esta pantalla tiene las siguientes opciones:

shopping-cart-screen

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. Eliminar 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 de la aplicación pueden dejar el carrito para buscar más productos en su aplicación.

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

La aplicación web progresiva para OpenCart tiene un pago simplificado en una sola pantalla con solo información relevante. Los usuarios de la aplicación pueden ver detalles completos de pago como detalles de envío, detalles de facturación, resumen del pedido, comentario del pedido, resumen del pago.

pantalla 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 pueden ver los detalles del producto antes de realizar el pago.

3. Métodos de envío: Aquí se muestran todos los métodos de envío disponibles. 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 back-end.

6. Resumen de pagos:

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

7. Proceda 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 OpenCart PWA tiene todos los pagos de vista web disponibles en la tienda. Los compradores en línea pueden encontrar experiencias de pago similares tanto en sitios web como en aplicaciones.

pantalla de pago

Pantalla de Mi cuenta 3.9

mi-cuenta-pantalla

La pantalla de mi cuenta de la aplicación móvil OpenCart PWA permite a los compradores en línea ver sus detalles completos guardados en la aplicación web progresiva. Esta pantalla también muestra una lista de pedidos de aplicaciones anteriores.

1. Datos personales:

Los usuarios pueden ver y actualizar sus datos personales guardados previamente en la aplicación móvil PWA.

2. Dirección (s) de envío:

Los usuarios de la aplicación pueden ver la lista completa de direcciones de envío guardadas previamente en la aplicación PWA.

3. Detalles del pedido:

Los usuarios de la aplicación pueden ver la lista completa de los pedidos realizados anteriormente desde la aplicación PWA y sus detalles.

4. Reordenar la función:

Hay un botón de reorden directo en la pantalla Mi cuenta de la aplicación web progresiva OpenCart (PWA). Todos los productos anteriores de este pedido se agregarán al carrito con solo un botón.

Pantalla de detalles del pedido 3.91

La pantalla de detalles del pedido de la aplicación web OpenCart Progressive proporciona detalles completos de pedidos específicos 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 ofrece la opción de realizar un seguimiento del estado del pedido y la entrega.

pantalla de detalles de 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 *