CMS TIENDA ONLINE COMER 3.3

Transcripción

1 CMS TIENDA ONLINE COMER 3.3 Objetivo Esta tienda online está hecha para todo tipo de comercio que desee su tienda o catálogo on-line: Pequeño y gran comercio, proveedores,... A contrario de otros CMS como prestashop. Esta tienda es muy ligera, especializada para soportar miles de productos sin que pierda la velocidad en la red, aun estando instalada en servidores de baja capacidad. Características destacadas: Está adaptada a todos los dispositivos: desktop, tablets, móviles,... Facilidad de búsqueda de productos. Buscador avanzado de productos. Poder separar los productos por talla, color u otras características. Puedes comprar por unidades, lotes o metros lineales, especificando cada cosa. Edición de tienda: productos, categorías, proveedores,... Muy rápido y más sencilla que otros MCS para e-commerce. Poder pedir productos a medidas: metros lineales, metros cuadrados o metros cúbicos. Demostración Vamos a crear una pequeña demostración haciendo cambios en el administrador (back-end) y viéndolos en el lado cliente (front-end). Primer paso: Ver la web front-end:

2 Los elementos que están compuestos en frontend son: 1. Cabecera: parte suerior de la web. La constituye Logo Buscador sencillo por palabras para los productos Login del cliente Cesta. 2. Cabecera para el deslizador de imágenes: A continuación de la cabecera y es el lugar donde puede ir un deslizador de imágenes. 3. Menú horizontal superior: Zona enmarcada en amarillo. Es el menú de las páginas que habremos creado en nuestra zona de administración. 4. Menú de Categorías o secciones de productos. 5. Deslizador de Productos destacados o nuevos. 6. Columna izquierda: lugar donde se muestran: Lista de categorías osecciones Lista de subcategorías o subsecciones Lista de Marcas Menú de páginas izquierdo 7. buscador avanzado. 8. Lista de productos. 9. Pie de página: Aunque aquí no se ve. Tiene el menú de pie de página, capa flotante para las reglas de las cookies. Segundo paso: La mayoría de estos elementos puedes activarlos o desactivarlos desde el administrador. Para ello vamos a entrar en el administrador e ir probando cambios para que se reflejen en la web: 1. Vamos a la URL: y nos registramos. info@tienda-demo.esy.es Contraseña: Nos aparece el administrador:

3 El administrador está compuesto por: El menu superior horizontal con botones-iconos. Zona de administración: mayormaente esta zona tiene tres partes: Como vemos en este momento al entrar, que nos muestra el editor de páginas. Buscador: En este caso, de nuestras páginas creadas. Menú horizontal (zona gris más oscura): En este caso nos muestra solo el botón 'crear artículo'. Listas: en este caso, la lista de páginas. 3. Para manejar los módulos o componentes que acabamos de ver en el fornt-end debemos pulsar el botón de diseño En la zona 'Artículos y diseño'. Y saldrá la siguiente tabla: En la columna nombre y descripción te dice una pequeña descripción del módulo. En la columna de valor te dice el posible valor que debe tener, aunque no es necesario para todos los módulos. En la columna Admitido: Podemos pulsar en la palabra Si o No para activar o desactivar el módulo en el front-end. Puede probar para que vea algunas combinaciones y módulos en el fron-end. En la columna editar: Podemos cambiar el nombre del módulo, descripción y el valor o

4 simplemente borrar el módulo: Aviso: no lo borre ni cambie ningún valor para que siga funcionando bien. Tercer paso: Vamos a ver todas las herramientas que tenemos a disposición antes de entrar en la zona de edición de la tienda. De izquierda a derecha: Zona general: Inicio: va al inicio del administrador Salir: sales del administrador Editar administrador: Cambias tus datos personales. Dirección, datos de contacto, nombre de la empresa, tu nombre, contraseña del administrador (no cambies la contraseña para poder entrar yo). Editar BBDD: Zona solo para profesionales en Base de datos. Aviso: No cambies nada. Artículos y diseño: Artículos de menús: Te muestras las páginas de tus menús (superior, izquierdo e inferior). Como puedes observar, en la columna Ordenar, puedes ordenar los links de las páginas en el menú que se muestra en el front-end. En la columna editar: tienes una serie de botones para manejar cada artículo: La estrella: indica la página que se muestra por defecto al inicio. Simplemente pulsa en una estrella gris para cambiar. El icono editar (hoja azul con lápiz amarillo): Editas los datos de la página:

5 Cada página puede contener, a la vez, otras página hasta un segundo nivel creando, así, un menú desplegable. Si te fijas en los iconos que hay antes del editor de texto. Estos son para insertar enlaces, galerías de imágenes, vídeos, música, mapa google, formulario o imágens. Las galerías de imágenes y vídeos, música puedes editarla en el menú principal, bajo la etiqueta multimedia. El editor de texto es el potente tinymce. Icono eliminar página (hoja azul con señal de prohibido en rojo): eliminas la página. Antes de eliminarla te muestra un aviso si estás seguro de ello (todos los elementos de la web te mostrarán este aviso antes de borrarlo). Icono vista de la página (lupa):de momento está desactivado, pero te debe mostrar la página en la web. Icono de destacado (medallita amarilla o plateada): Para las webs que se comportan como blog de noticias. Activar esta medalla para que cambie a amarillo, pondrá la página en destacadas (esta acción está obsoleta ya que se traslada la acción a los productos cuando estos se comporten como noticias cuando la web se comporte como un blog de noticias). Icono de publicar (monitores): Publica o no la página añadiéndola al menú o quitándola de este. Diseño (icono bote de pintura): Ya visto anteriormente. Noticias (icono periódico): Obsoleto, ya que esta accion ha pasado a la edición de productos, los cuales se pueden comportar como noticias de un blog. Autores (icono personas hombre y mujer): Crea autores para las páginas. Multimedia: Galería de imágenes (icono en forma de cámara de fotos): Crea una galería de imágenes, que luego puedes editar e insertar tantas imágenes como desee). Luego podrás insertarla en la página con los botones que hay encima del editor de texto tinymce. Archivos (icono carpeta): con el podemos insertar cualquier clase de archivo que luego podemos insertar en nuestras páginas o productos con los botones que hay encima del editor de texto tinymce. Los iconos que le siguen a archivo: Música y vídeo son para filtrar los archivos que hemos insertado. Zona de edición de tienda: Ahora vamos a lo que más nos interesa. El editor de la tienda. Que es el último icono del menú

6 suprior bajo el título App. Si pulsamos en él, veremos que el menú superior cambia totalmente: Vamos a describir cada icono: Bajo la pestaña Genera: Inicio: vuelve al menú principal. Bajo la pestaña de productos: Configuración tienda (ruedas dentadas): Aquí es donde le decimos a la tienda si se comporta como catálogo, si muestra los precios, el cálculo de impuestos, si controla el stock, el precio de transporte por defecto y máximo de compra para cobrar el transporte Productos (icono etiqueta): Donde editamos los productos y los creamos.

7 Aquí tienes todo lo necesario para editar los productos. Para no extender demasiado, te invito a que explores todas las columnas y botones de edición. Sin embargo, te describiré por encima los botones de edición de la última columna: Icono estrellas: Si pulsas lo activa o desactiva como destacado. Icono Medalla: Si pulsas lo activa o desactiva como nuevo. Icono ingresar productos pertenecientes a este producto: Inserta productos que se asocian a este producto porque solo se diferencia por su talla (zapatos, vestidos...) o color. El icono en verde significa que tiene productos asociados, en gris que no tiene productos asociados. Icono editar producto: cambiamos los datos. Muestra un formulario completo para editar los datos del producto. Icono PDF: Sirve para insertar un PDF asociado al producto. Icono borrar producto: borra el producto. Icono galería de imágenes: Sirve para isertar más imágenes del producto. Todas las que quiera. Icono ver producto (lupa): vemos los datos del producto. Seguimos describiendo los iconos del menú superior de la tienda: Icono cliente (icono persona): editamos los clientes. Icono empresa (tiendita azúl): son los proveedores. Icono secciones: Secciones y subsecciones de productos.

8 Icono categorías: categorías asociadas a las subsecciones de productos. Icono marcas: marcas con las que trabajas. Icono facturas: pedidos de tus clientes. Icono peso: tarifas según el peso total de tus productos para el transporte. Icono transporte: Configura las zonas de transporte y su precio si no tienes peso editado. Icono comercial: creación de tus comerciales. Icono medidas: cuando un producto se puede pedir por metros cuadrado o metros cúbico, aquí pones los límites y crear cuantos sean necesario si tienes productos muy diferentes. Cuando creas un producto, te preguntará si lo asocias a una de las medidas que has creado y cual. Esta zona es delicada: cuidado con manejarla (mejor preguntarme antes de hacer cambios). Icono regalos: La web te permite crea regalos que los clientes pueden ganar acumulando puntos por sus compras. Sistema hecho, pero no actualizado en este CMS por estar en fase de prueba. Zona forn-end o de usuario: Te invito a que navegues por la zona del fornt-end o visitante para que veas todas sus ventajas. No puedo describírtela aquí porque si lo hago significa que la web es poca intuitiva y no debe de ser así. Si deseas hacer un pedido puedes crearte una cuenta o usar un cliente de prueba ya creado cuyos datos para entrar son: franb@gmail.com Contraseña: thorheras Esto es un resumen a groso modo del proyecto. Esto es una pequeña muestra de lo que puedo hacer. Tengo más proyectos interesantes y que deseo hacer.