Contenido SOLUCIÓN ECOMMERCE

(1)

SOLUCIÓN ECOMMERCE

Elaboró Ing. Daniel Torres Página 1

Contenido

INTRODUCCIÓN ... 2

PLATAFORMA ... 3

¿Por qué PrestaShop? ... 7

DISEÑO ... 8

ADMINISTRACIÓN ... 18

SEGURIDAD ... 25

(2)

INTRODUCCIÓN

A través de este documento el departamento de tecnología, recopila la información y avance del proyecto denominado: SOLUCIÓN ECOMMERCE, estableceremos el funcionamiento general de la plataforma ecommerce, el alcance y las restricciones de la misma.

La información será plasmada en 4 conceptos principales: Plataforma, Diseño, Administración y Seguridad, partiendo de la premisa que las herramientas y funcionalidades son de una plataforma de versión libre, por lo cual toda modificación la realiza directamente el usuario que para este caso es realizado por el departamento de tecnología, entendiendo que una versión libre o community, carece de algunas características que puede poseer una versión paga y además no tendrá soporte por parte del desarrollador de la plataforma, dicho esto debemos entender que cualquier defecto de la plataforma en cuanto a los 4 conceptos principales, deberá ser solucionado por los colaboradores del departamento de tecnología, teniendo en cuenta 2 factores importantes, el primer factor: las restricciones propias de la versión libre de la plataforma y el segundo factor: que solo se dispondrá de foros y documentación que el desarrollador comparte en su web oficial, que por lo general obedece a problemas o errores generales y no particulares.

(3)

PLATAFORMA

Luego de realizar una investigación en el mercado sobre las diferentes plataformas para el servicio de Ecommerce, encontramos similitudes entre las mismas, la mayor diferencia está en aquellas que se alojan en la nube y otras que pueden ser implantadas en un servidor web local o externo, claramente dentro de las opciones están aquellas que generan un gasto mensual específicamente las alojadas en la nube, pero que como gran ventaja poseen un completo servicio de soporte y acompañamiento, dentro de estas podemos encontrar WIX, Shopify, Webnode entre otras.

Plataformas pagas:

WIX: Es una plataforma para el desarrollo web basada en la nube que fue desarrollada y popularizada por la compañía Wix. Permite a los usuarios crear sitios web HTML5 y sitios móviles a través del uso de herramientas de arrastrar y soltar en línea, servicio de ecommerce disponible desde 14 USD por mes.

 Acepta pagos online

 Ancho de banda ILIMITADO  Almacenamiento de 35GB  Conecta tu dominio

 Elimina los anuncios de Wix  10 horas de video

 Google Analytics

 Dominio gratis por 1 año

 App SiteBooster - Valor US$60  App VisitorAnalytics - Valor US$60  Logo profesional - Valor US$50

(4)

Shopify: Se encarga de ofrecer una serie de servicios incluidos pagos, marketing, envíos y herramientas de fidelización de clientes para simplificar el proceso de manejar una tienda en línea para los pequeños comerciantes, servicio de ecommerce disponible desde 29 USD por mes.

 Tienda online

 Incluye una página web de ecommerce y un blog.  Productos ilimitados

 Cuentas para empleados

 Empleados con acceso al panel de control de Shopify y a Shopify POS.  Atención al cliente personalizada

 Canales de venta

 Vende en mercados online y en redes sociales. La disponibilidad de los canales de venta varía según el país.

 Creación manual de pedidos  Códigos de descuento  Certificado SSL gratis

 Recuperación de carritos abandonados  Tarjetas de regalo

Webnode: Es un creador de páginas web en línea que utiliza la tecnología arrastrar y soltar, permitiendo la creación de páginas web, blogs y tiendas en línea, servicio de ecommerce desde 26 USD por mes.

 Almacenamiento  Límite de Tráfico  Usa tu propio dominio  Atención al cliente Premium  Editor de formularios

 Estadísticas de la web  Cuentas de email  Vídeos de fondo  Tienda online

(5)

 Sin publicidad de Webnode  Google Analytics

 Registro de usuarios

Las anteriores plataformas pueden incurrir en gastos adicionales como cobros por transacciones monetarias (comisiones) realizadas al momento de vender un producto.

Plataformas libres:

Prestashop: (Plataforma usada actualmente): Es un sistema gestor de contenidos (CMS) libre y de código abierto, pensado para construir desde cero tiendas en línea de comercio electrónico. Enfocado para crear tiendas en línea,desde pequeñas empresas a grandes corporaciones. Cuenta con un amplio mercado de temas con los que es posible personalizar la tienda,además de 5000 módulos, entre gratuitos y de pago, con los que es posible adaptar las funcionalidades propias de la herramienta, esta plataforma ya no tiene disponible una versión paga.

Magento: Magento Open Source, previamente llamada MagentoCommunityEdition, es una plataforma de comercio electrónico de código abierto.

Las plataformas anteriores no conllevan a un costo de implementación ni utilización de la misma, sin embargo, generan costos en las transacciones monetarias (comisiones) ya que deben utilizar una pasarela de pagos.

Estas plataformas libres carecen de soporte oficial, por lo cual para la solución de cualquier error a nivel de software solo se cuenta con un repositorio de errores generales y foros de opinión de otros usuarios community.

Como un ejemplo:

 Después de realizar la migración de servicio local a nuestro hosting externo (solinoff.com), se generaba un error al no cargar las imágenes de los productos, en la documentación oficial no aparecen errores

(6)

específicos, los temas contenidos allí son orientados hacia el uso de las herramientas de la plataforma:

 Se recurre a realizar la búsqueda del error en el foro de la comunidad, y se encuentran varias opiniones de usuarios que luego de analizarlas se deben ejecutar en nuestra plataforma local para probar la solución, luego de que efectivamente solucione el error estas configuraciones se replican en el sitio de producción.

 De la captura anterior se realizan 3 procedimientos que aparentemente solucionan el error, sin embargo, estas pruebas se hacen en el entorno local, pues cualquier cambio a la estructura podría generar más errores en la plataforma e inclusive que no funcione nuevamente y se deba implementar desde cero.

 Luego de ejecutar las pruebas se encuentra que una de las carpetas que contiene parte de la información de las imágenes, se encuentra con los permisos 755, lo cual no permite una ejecución para los paths de las

(7)

imágenes así que se cambia el permiso por el 644 que es el establecido por la plataforma.

 La solución del error anterior tomo un tiempo de 50 minutos, la razón de este tiempo es que: la plataforma es un desarrollo de un tercero, no se conoce a cabalidad como está distribuida la estructura de los archivos pues cuenta con un aproximado de 28.520 archivos y 7.606 carpetas, y el único soporte, son los foros y la documentación, y a el día de hoy prestashop no cuenta con una opción de pago es 100% Open Source.

En resumen los tiempos de solución a inconvenientes o errores de software de la plataforma varían en que tan común es el error, pues de esto depende que otros usuarios hubieran experimentado el mismo error y se encuentre la solución disponible, cuando este factor no existe y el error o problema es demasiado especifico los tiempos de solución serán más prolongados, pues de no existir en el foro se debe plantear la pregunta en el mismo y esperar a que algún otro usuario a través de su experiencia lo haya podido solucionar y de este modo se pueda aplicar la solución del problema.

¿Por qué PrestaShop?

Luego de contemplar otras opciones en el mercado y validar las características técnicas y económicas, se selecciona PrestaShop para realizar un piloto de la plataforma y conocer su funcionamiento, entre los aspectos destacados para la selección de esta plataforma se encuentran:

 Plataforma Open Source  Puesta en marcha sin costo

 Implantación o instalación fácil y accesible

 Permite el uso de recursos disponibles en la compañía (Hosting, BD)  Colección de más de 5000 addons o módulos complementarios gratis y

de pago

(8)

 Fácil integración con las pasarelas de pago más usadas  Fácil administración de la plataforma

 Foros communitycon mejor presencia que otras plataformas Aspectos negativos:

 No existe soporte dedicado

 Limitaciones en el diseño de la plantilla

 Limitaciones en herramientas de administración

 Limitaciones en modificación de estructura de backend  Limitaciones en modificación de estructura frontend

DISEÑO

Una parte fundamental en los servicios WEB es el diseño frontend, esta característica permite, mostrar la identidad de la compañía, para este caso en el servicio de Ecommerce, dentro del diseño se determinan algunas características como:

 Colores corporativos  Carrusel de imágenes  Banner’s

 Imágenes de producto  Información para el cliente  Accesos para contacto  Iconos para redes sociales  Logo

 FAVIcon

Actualmente en el desarrollo del Ecommerce – Solinoff, se realizaron los siguientes cambios a nivel de diseño, teniendo en cuenta las restricciones de la plataforma:

(9)

La captura anterior corresponde al tema clásico o por default que incluye la plataforma, al terminar la “instalación de la plataforma” el tema anteriormente mencionado es el que queda activado, existen muchos temas con diferentes estilos y diseños, pero se deben comprar para poder utilizarlos.

A continuación, se explicarán las modificaciones que se realizaron al tema default y las restricciones de modificación.

Nav Bar Principal:

 Color #2f2c29, Nav Bar, se realiza cambio por tono de la página principal.

 Color #ffffff, Font del menú  Color #ffffff, Iniciar Sesión  Color #ffffff, Carrito

 Se reemplaza logo

 Color #ffffff, Box de búsqueda

 Se modifican las categorías anteriores, incluimos las nuestras (Sillas, Mesas, Accesorios, Kits)

Restricciones del Nav Bar:

 Tamaño del logo (es el especificado por el tema)  Tipo de Menú (es el especificado por el tema)

 Distancia en px de la margen Top y los elementos (Menú, logo, box de búsqueda) (es el especificado por el tema)

(10)

 Icono de carrito (es el especificado por el tema) Carrusel de imágenes:

 Se realiza arte en modo demo

 Se pueden adjuntar 4 imágenes al carrusel Restricciones del carrusel de imágenes:

 Tamaño del box del carrusel (es el especificado por el tema)  Animación del carrusel (es el especificado por el tema)  Posición del carrusel (es el especificado por el tema)

(11)

 Se seleccionan algunos productos en modo demo para esta sección  Se modifica el color de background, #e31c19 de la banderilla y el color

del Font, #ffffff

 Se modifica el color de Font del script, ##e31c19 vista rápida Restricciones sección productos destacados:

 El factor forma del contenedor de la imagen (es el especificado por el tema)

 El color del contenedor de la imagen (es el especificado por el tema) Vista rápida:

 Se realiza cambio de color #e31c19, botón añadir al carrito

 Se realiza cambio de color #2f2c29, a hover de botón añadir al carrito  Se realiza cambio de color#e31c19, a precio de producto

(12)

 Es posible modificar información de políticas de seguridad, de envió y devolución

Restricciones vista rápida:

 Factor forma de la vista rápida (es el especificado por el tema)  Tamaño de las imágenes (es el especificado por el tema)  Iconos de redes sociales (es el especificado por el tema) Banner:

 Banner actual en modo demo

 Se puede realizar cambio de imagen Restricciones de banner:

 Tamaño de banner (es el especificado por el tema)  Posición del banner (es el especificado por el tema)  Solo se permite un banner

Sección más vendidos:

 Comparte las modificaciones de productos destacados  Puede des habilitarse este bloque

(13)

Restricciones sección más vendidos:

 Mismas restricciones de productos destacados Footer:

 Se realiza cambio de color #e31c19, botón suscribirse

 Se realiza cambio de color #2f2c29, a hover botón suscribirse Restricciones footer:

 Posición de los elementos (es el especificado por el tema) Chat:

(14)

 Se realiza modificación de color #e31c19 en el encabezado Restricciones chat:

 Marca de agua de proveedor (Se elimina en la versión de pago)  Solo funcionan las herramientas básicas

 Herramientas personalizadas (Solo en la versión de pago) Descripción del producto:

 Comparte modificaciones de vista rápida Restricciones de descripción del producto:

 Mismas restricciones que en vista rápida Pop-UP carrito de compra:

(15)

 Se realiza cambio de color #e31c19, a botón ir a pagar

 Se realiza cambio de color #2f2c29, a hover de botón ir a pagar  Se cambia “pasar por caja” por “Ir a pagar”

Restricciones de Pop-Up carrito de compra:  Factor forma (es el especificado por el tema) Carrito de compra:

 Se realiza cambio de color #e31c19, a botón ir a pagar

 Se realiza cambio de color #2f2c29, a hover de botón ir pagar Restricciones carrito de compra:

 Factor forma (es el especificado por el tema) Formulario información de comprador:

(16)

 Se realiza cambio de color #e31c19, botón continuar Restricciones información inicial:

 Factor forma (es el especificado por el tema) Sección información para envío:

 Se realiza cambio de color #e31c19, botón continuar  Se cambia texto DNI por Número de cedula

 Se agrega lista de departamentos

Restricciones sección información para envío:  Factor forma (es el especificado por el tema) Sección método de envío:

(17)

 Se realiza cambio de color #e31c19, botón continuar  Se agrega Solinoff Logistics como prueba

 Se puede configurar la cantidad de días para la entrega

 Se puede configurar el valor del envio; (Nota: en el concepto administración se explicará con detalle el alcance de esta configuración) Restricciones método de envío:

 Factor forma (es el especificado por el tema) Sección pago:

 Se realiza cambio de color #e31c19, botón pedido con obligación de pago

 Se incluye mercadopago como método de pago Restricciones sección de pago:

 Factor forma (es el especificado por el tema)

 Factor forma pasarela (el especificado por la pasarela) Resumen de pedido confirmado:

(18)

 No se realizan cambios en esta sección Restricciones de pedido confirmado:

 Factor forma (es el especificado por el tema ADMINISTRACIÓN

La plataforma prestashop contiene un amplio contexto de administración, organizado en 3 módulos principales:

 Vender  Personalizar  Configurar

Cada uno de estos módulos contiene varios sub módulos, enfocado en un aspecto especifico de la administración, todos los módulos son modificables según el parámetro de la plataforma, es decir que habrá restricciones en algunas configuraciones que no pueden ser ajustadas del todo a las necesidades de la compañía, a continuación, se explicaran los módulos contenidos en la plataforma.

Modulo Vender:

Este módulo se divide en 5 sub módulos (pedidos, catálogos, clientes, servicio al cliente, estadísticas), todo enfocado al producto y el cliente.

Sub modulo pedidos:

Pedidos:En este módulo se administran los pedidos realizados a través de la ecommerce, información que brinda el módulo:

 Referencia de pedido (valores alfabéticos aleatorios, no es modificable ejemplo: OUWBTPUCM)

 Cliente

 Estado del pedido (Algunos se pueden modificar)  Transporte

(19)

 Dirección de envío  Mensajes

 Producto

Nota: No es posible agregar opciones diferentes a las establecidas por la plataforma.

Facturas: Permite administrar todo lo relacionado a la generación de la factura, cabe anotar que esta factura no tiene relación ninguna con el software ERP de la compañía, es una herramienta que integra la plataforma y no puede ser modificada.

Albarán o comprobante de entrega: Documento que genera la plataforma genéricamente no se puede modificar.

Carritos de compra: Muestra la información de los carritos de compra. Sub modulo Catalogo:

Productos: En este módulo se agregan los productos que estarán a la venta en la ecommercese puede configurar:

 Nombre del producto  Referencia  Cantidad  Precio  Categoría  Características  Marca  Resumen  Descripción  Imágenes

 Combinaciones (medidas, colores, o alguna característica adicional) Nota: No es posible agregar opciones diferentes a las establecidas por la plataforma.

(20)

Categorías: En este módulo se crean las categorías de los productos, estas categorías se usan para ser mostradas en el menú principal, se puede configurar:

 Nombre

 Si es visible en el ecommerce  Categoría padre

 Descripción

 Imagen en la portada de la categoría

Monitoreo: Este módulo muestra un resumen de la información de productos y categorías:

 Listado de categorías vacías

 Listado de productos con combinaciones, pero sin cantidades disponibles para la venta

 Listado de productos sin combinaciones y sin cantidades disponibles para la venta

 Lista de productos desactivados  Listado de productos sin imágenes  Listado de productos sin descripción  Listado de productos sin precio

Atributos: Estemódulo permite crear atributos específicos (Color, tapiz, dimensiones, tamaño), se puede configurar:

(21)

 Nombre atributo

 Características (Composición, propiedades, etc)

Marcas: Estemódulo permite agregar marcas para los productos, se puede configurar:

 Nombre  Descripción  Logo

 Proveedores

Archivos: Permite agregar archivos como: manuales, fichas técnicas, otros, se puede configurar:

 Seleccionar el archivo  Descripción

Descuentos: Permite crear reglas para descuentos sin embargo solo se pueden crear según los criterios dispuestos por la plataforma.

Stocks: Permite administrar el stock de productos.  Stock y movimientos

(22)

Clientes: Permite administrar la información de los clientes y agregar nuevos, se puede configurar:  Nombre  Apellidos  Email  Fecha de nacimiento  Estado

Direcciones: Muestra las direcciones de los clientes, permite agregar direcciones.

Sub modulo servicio al cliente:

Servicio al cliente: Este módulo recopila la información enviada por los clientes a través del formulario de contáctenos, desde este módulo se puede dar respuesta al cliente.

Estadísticas: Muestra estadísticas respecto a todos los procesos de la ecommerce.

Modulo Personalizar: Sub Módulos:

Module Manager: Herramienta de instalación y administración de módulos adicionales e instalados.

(23)

Sub modulo diseño:

Tema y logotipo: Herramienta de administración de diseño página principal. Nota: No es posible agregar opciones diferentes a las establecidas por la plataforma.

Catálogo de temas: Herramienta de instalación de temas adicionales.

Tema Email: Administra el tema predeterminado de visualización de emails envidos desde la plataforma.

Paginas: Permite modificar el contenido de páginas como (Aviso legal, términos y condiciones, sobre nosotros, pago seguro)

Sub modulo transporte:

Transportistas: Permite crear un carrier con algunos datosespecíficos, se puede configurar:

 Nombre del transportista  Tiempo de transito  URL de seguimiento  Costos de envío

 Rangos: aquí se establecen los rangos de precios para las zonas de envíos, para el caso de Colombia solo perite establecer los departamentos, no se pueden listar las ciudades, ni los municipios, adicionalmente los rangos se establecen en 2 opciones por función del precio o por función del peso total, en el caso del precio se establece una condición >= (costo) y < (costo) se pueden agregar rangos para

(24)

diferentes costos, pero no es posible indicar rangos por cantidad de ítems, para el peso aplica la misma fórmula >=(Kg) y < (Kg)

Sub modulo pago:

Métodos de pago: Por defecto la plataforma habilita 2 medios de pago, por transferencia bancaria y por cheque, ambos son métodos de uso manual por lo cual no aplica para las necesidades de la compañía.

Pasarela de pago: Método que utiliza la plataforma a través de módulos de terceros, (se explica con mayor detalle en el concepto de seguridad)

Sub modulo Internacional:

Localización: Se ubica la configuración regional y moneda.

Ubicaciones geográficas: Se configuran zonas, países y provincias (departamentos).

Modulo configurar:

Este módulo es un apartado a la parte técnica de la plataforma, encontramos configuraciones como:  Activación de certificados SSL  Iframes  Bases de datos  Logs  Webservice  Rendimiento  Cache

(25)

SEGURIDAD

Un aspecto muy importante dentro de cualquier plataforma transaccional es la seguridad, tanto en la navegación del sitio como en la compra de los productos, por tal razón esta divida en esos 2 aspectos.

Seguridad del sitio: Esta característica está implícita dentro de la codificación de la plataforma, para el caso de prestashopestá desarrollada en los siguientes lenguajes: (PHP, HTML5, Framework Bootstrap, CCS, JavaScript) e incluye la opción de instalar un certificado de seguridad SSL, además de que toda la información de la plataforma es transaccional gracias a un motor y base de datos basados en MySQL, el acceso a las carpetas que contienen los archivos de la plataforma está restringida gracias a las reglas ya configuradas implícitamente.

Es importante tener en cuenta que la adquisición de un certificado SSL para elecommerce, aparte de ser una buena práctica casi obligatoria, genera confianza en el comprador, pues el cliente a través de su navegador sabrá que es una página segura gracias al certificado.

En el mercado un certificado SSL tiene un valor aproximado de $ 150.000, por un periodo de un año.

Pasalera de pago: Para entender de mejor manera la misión de la pasarela de pago en elecommerce, debemos tener en cuenta que en una transacción en se puede reducir a 3 pasos principales:

 Ecommerce: Allí seleccionamos los productos que deseados comprar, y los “colocamos” virtualmente en nuestro carrito de compra, el ecommerce se encarga de listar los productos del carrito, evaluar las cantidades, sumar los precios e impuestos, sumar los costos de envío (si aplica) y generar una liquidación final del valor a pagar por parte del cliente.

(26)

 Pasarela de pago: Es un intermediario entre la liquidación del ecommerce y la entidad pagadora del cliente, de este modo la pasarela toma la liquidación del ecommerce (nombre de los productos, cantidades y costo), le presenta al cliente los medios para realizar el pago, y lleva la información del monto a debitar a la entidad bancaria o franquicia del cliente, esto lo hace a través de cifrados propios de la pasarela y que son ajenos a elecommerce, en este punto la responsabilidad de la transacción es de la pasarela pues debe garantizar que la información que transporta en el caso de tarjetas de crédito (nombre del tarjeta habitante, número de tarjeta, fecha de vencimiento y código de seguridad), y en el caso de PSE (Cedula de ciudanía, tipo de persona, entidad bancaria) sea entregada y aceptada por la entidad pagadora.  Entidad pagadora: Corresponde a la entidad que realiza la transacción

monetaria y traslada el dinero a la cuenta bancaria de la compañía o fiduciaria de la pasarela de pago, finalmente, el cliente es devuelto a la páginadelecommerce en donde aparecerá un mensaje del estado de la transacción realizada.

Luego de la explicación anterior es importante destacar, que en la actualidad y a pesar de todos los avances en materia de seguridad informática se siguen presentando casos de fraude a través de transacciones en línea, especialmente con medios de pago como tarjetas de crédito, no existe ninguna plataforma 100% segura.

(27)

GLOSARIO

Back End:Es la parte del desarrollo web que se encarga de que toda la lógica de una página web funcione.

Bootstrap: Biblioteca multiplataforma o conjunto de herramientas de código abierto para diseño de sitios y aplicaciones web.

CSS: Lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado.

Front End: Es la parte de un programa o dispositivo a la que un usuario puede acceder directamente.

Hexadecimal:Sistema de numeración posicional que tiene como base el 16. Su uso actual está muy vinculado a la informática y ciencias de la computación, (los colores que se cambiaron en el ecommerce están expresados en hexadecimal, ejemplo #ffffff).

Hover: Cuando el usuario interactúa con un elemento con un dispositivo señalador, pero no necesariamente lo activa.

HTML:Lenguaje de marcado para la elaboración de páginas web

JavaScript: Lenguaje de programación, se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas MySQL: Sistema de gestión de bases de datos relacional.

Open Source:Modelo de desarrollo de software basado en la colaboración abierta.

PHP: HypertextPreprocessor (preprocesador de hipertexto), es un lenguaje de programación de propósito general de código del lado del servidor.

SSL:Son protocolos criptográficos, que proporcionan comunicaciones seguras por una red, comúnmente Internet.