Design System para web - Modda

Modda Design System le permite crear un sitio de eCommerce responsive con GeneXus en tiempo record.

Sitio de ejemplo: Modda

Ejemplo de uso en la vida real: Óptica Florida

 

Características Generales

 

Descripción a continuación:

  • Desarrollado basado en Bootstrap (utilizando html, css, js y jQuery).
  • Totalmente Responsive (desktops, tablets, mobile devices).
  • Menús expandibles y colapsables (múltiples niveles por menú).
  • Páginas de error.
  • Páginas prediseñadas de lista de productos, detalle de un producto, carrito de compras, productos favoritos, confirmación de compra, entre otras.
  • Compatibilidad con los navegadores.
  • Colores configurables manteniendo características dentro de la aplicación.
  • Posibilidad de cambiar ícono y favicon de la aplicación sencillamente.
  • Iconos disponibles a partir de las fuentes de Font Awesome y Glyphicons.

Características Particulares

COMPONENTES PÁGINA PRINCIPAL

1.  Barra de Idioma y Menú de Usuario 

 

2.  Menú Principal y Buscador

Para configurar el menú principal se usa el Data Provider DPAdvancedMenu, este menú está hecho usando el User Control AdvancedMenu.

 

El icono del menú principal y el link, pueden ser modificados en los eventos de Top Menu

 

3.  Home Modda le permite definir de forma fácil las imágenes que serán desplegadas en la galería principal del sitio (Home), visualizando la lista de productos destacados. Existen varias formas de mostrar los mismos. El User Control OwlCarousel visualizaciones para los productos.

User Control OwlCarousel Tipo Slide Propiedad Nav con valor true

 

4.  Nuevos Productos User Control OwlCarousel Tipo Product List con 5 Items

 

5.  Categorías y Productos Destacados

User Control OwlCarousel con 3 Items

User Control BootstrapTreeView se carga en el WebPanel TreeCategories.

 

 

6.  Ofertas Especiales y Slider secundario

User Control OwlCarousel Tipo Product List con 2 Items User Control OwlCarousel Tipo Slide Propiedad Nav valor false.

 

7.  Slider de marcas User Control OwlCarousel Tipo Brand List

 

8.  Pié de Página (Footer) con información genérica del sitio. La misma se modifica en el Web Component Footer.

  • Publicidad sobre beneficios
  • Suscripción a boletín de noticias
  • Medios de pago
  • Acerca De
  • Contacto
  • Información
  • Redes sociales

 

  

Lista de productos (Product List)

Se posee una pantalla para mostrar un listado de todos los productos, este se carga a partir del Data Provider DPProductList. A la izquierda, se muestra la lista de más vendidos, que puede ser modificada en el Web Component BestSellers.

 

 

 

Carrito de compra

Confirmación de compra (Shopping Cart and Check Out)

Cuando se trata del paso más importante, Modda le ofrece una experiencia de compra ágil y moderna.

 

 

 

Lista de Deseos Wishlist

 

 

 

Comentarios y calificaciones

Los comentarios y calificaciones de un producto por parte de los clientes están entre los factores determinantes de la compra. Modda incluye un sistema integrado para los mismos.

 

Convierta el correo en su ventaja

Mediante la suscripción facilita las campañas de marketing.

 

 

Manejo de usuarios (registro, login, recuperar contraseña)

El template trae pantallas para el manejo de usuario como es: Signup Page (registro), Login (ingreso), RecoverPassword (recuperar contraseña).

 

 

 

Seguridad con GAM

GAM es el módulo de seguridad que potencia GeneXus para el desarrollo aplicaciones Web.

Requerimientos Previos:

  • Activación de la propiedad Enable Integrate Security, para poder importar los objetos de administración del GAM con el estilio de Ignia.

Aplicar GAM + IGNIA:

  • Seleccionar en el menú de Ignia la opción Security.
  • En la ventana para Tipo de Seguridad (Security Type), seleccionar la Seguridad con GAM (GAM Security) y el Web Template Modda. Click en la opción Confirmar.
  • Finalmente en Folder View de GeneXus, bajo el módulo Ignia se pueden ver los módulos Security y GAM.

Más informacón acerca de Seguridad con Ignia haciendo click en: Link.

 

Páginas relacionadas: