Adaptación de tienda virtual con woocommerce

Adaptación de tienda virtual con woocommerce

Proyecto modificado y simplificado a fecha 03/08/17:

Objetivo: creación de blog con tienda-guia virtual de rutas de campo. Hay que adaptar la estructura de una tienda virtual con woocommerce para la venta de rutas de campo en formato digital. Las rutas son productos digitales que cada uno tiene un valor de entre 0,30€ a 1,5€.
Pero se deben de vender de forma que el pago mínimo sea de 5€.

Detalles proyecto Skimoguide:

Lo más importante es la tienda-guia (rutas), hay que solucionar el tema del pago mínimo de 5€, es decir el usuario va añadiendo una a una las rutas que quiere comprar y solo disfruta de ellas cuando llega al pago mínimo (algo así como un carrito pre compra), las paga y se añaden a su cuenta. En la cuenta que tiene en la tienda el usuario (mi guía), es donde el usuario almacena todas las rutas que el ha comprado, para poder disfrutar de todas las rutas con toda la información (organizada en pestañas).

Los mapas: Hay mapas libres y mapas de ruta que se disfrutan cuando el usuario ha comprado la ruta y está logeado. Se gestionan con sort-code y yo los confecciono todos dando como resultado un sort-code. He comprado el Pluging MapsMarker Pro y tiene servicio de ayuda (en inglés) para cualquier problema de integración.
Visita: https://www.mapsmarker.com/, el freelance tiene la posibilidad de usar una versión integra de prueba gratis durante un mes para instalar donde lo necesite.

El problema de los mapas y la memoria cache. El sistema de gestión de la cache en los mapas organizados en teselas (como es este caso) es el mismo que usa google maps. Es decir, el usuario con conexión se mueve por una parte del mapa, descargando varias teselas que se almacenan en caché para la optimización del refrescado del mapa en la sesión.
Si esa cache no se elimina y el usuario pierde conexión y quiere volver a navegar por esa misma zona del mapa, el sistema tira de memoria caché y te presenta las teselas de mapa como si estuvieras conectado. Ese es el sistema que hay que usar.

Por un lado tendremos el mapa de la home (mapa libre) con información variada que yo confeccionaré. Por otro lado; la pestaña Rutas tiene 5 apartados (categorías de producto): Pirineos, Cantábrica, Sist. Central e Ibérico, S.
Nevada y Andes. Cada pestaña remitirá a un mapa libre de cada zona.

El producto (las rutas seleccionables una a una): con estructura visual de tienda con la información organizada en pestañas, con pestañas de acceso libre y otras pestañas de acceso logeado y comprado producto. Por lo tanto el producto tiene dos formas de visualizarse, una es visualización no logeado o en caso de estar logeado no comprado, y otra forma de visualización completa del producto que es cuando el usuario está logeado y ha comprado producto.

Un usuario logeado o no, puede ver una información libre del producto no comprado: Carrusel de fotos, texto invitando a compra y las pestañas libres. Unas pestañas están accesibles sin pagar (pestañas libres) , que son dos pestañas: una de comentarios de otros usuarios (solo pueden comentar los usuarios logeados) y otra pestaña con información adicional libre (la pestaña “más info”). Y dos pestañas sin acceso, la pestaña de mapa de ruta y otra de texto con más fotos.
Es en estas dos pestañas donde además añadiremos los archivos de descarga: gpx, kml y pdf.

Una vez que el usuario ha completado el sistema de compra de esa ruta (que ha tenido que ser llegando a pago mínimo y está logeado), disfruta de la información de todas las pestañas y también del mapa ruta y descargas.

No usar la simbología típica de tienda de “mi carrito”, si se ve oportuno usar simbología de libro abierto. Por ejemplo, sustituimos es texto del típico boton comprar por “Añadir a Mi Guía”

Para la gestión de la tienda-guía tendremos las pestañas Mi Guía y Mi cuenta. En la pestaña Mi Guía el usuario logeado disfrutará de un listado con el historial de todas las rutas compradas ordenadas por fecha de compra y con la opción de ordenarlas por categorías.
Cada elemento del listado está compuesto por una foto miniatura, nombre de producto y texto introductorio. Es muy recomendable también que en esta pestaña el usuario pueda ver las rutas que tiene en pre-compra y el dinero que le falta para poder finalizar compra y añadirlas así a su guía. El usuario accederá a su ruta comprada al pinchar el nombre de producto o la foto que debe acompañar El usuario no logeado al entrar en esta pestaña se le invita a logearse y disfrutar de su guía personalizada de rutas.
En pestaña Mi cuenta tendría el usuario logeado todas las herramientas necesarias para gestionar su cuenta de usuario en Skimoguide, incluida la gestión de rutas en pre-compra. El usuario debiera de no poder ver ni siquiera esta pestaña. Se valorará positivamente el poder fundir estas dos pestañas en una.
La gestión e usabilidad de la tienda-guía es una de las cosas más importantes del proyecto.

El usuario tiene que tener la opción de elegir entre pago con Pay-pal o Stripe. No usaremos pasarela de pago con tarjeta.

Estructura visual de la página. Parte superior con el menú principal de la página y otras herramientas como son logo (con enlace a mapa home), traductor de Google (a la izda. Junto a logo), buscador de página, opción de logeo y enlaces a las redes sociales asociadas a skimoguide (Facebook, Twitter, Linkedin y You-Tube).
Pestañas del menú principal: Mapa (mapa libre que hace de home),  Rutas (tienda-guia), Mi Guía (gestión de la cuenta del usuario), Blog, Facebook (donde visualizará el usuario el muro de facebook integrado en la página), Twitter (donde visualizará el usuario el muro de twitter integrado en la página) y por último una pestaña de FAQ-Ayuda.

Le sigue la linea de breadcrumbs o migas de pan.

Cuerpo de página, donde se insertarán mapa (cuando proceda), contenidos tipo artículo, producto individualizado, listados de productos (rutas), listados de artículos, etc. Esta parte sin menús laterales, simplemente con margenes laterales de entre un 5% a 10% por cada lado aproximadamente.

Es importante en este proyecto en general, optimizar también el tema de los margenes superiores debido a que se trabaja con mapas que deben de aprovechar al máximo el espacio de pantalla disponible.

El blog: Pinchando en el menú principal la pestaña Blog, se abre la página donde habrá un listado ordenado por orden de publicación con los últimos artículos publicados. Ese listado está compuesto por una foto en miniatura, el título del artículo con fecha, autor y un pequeño texto introductorio. Al pinchar tanto el título o la foto se accede al artículo en cuestión.


Los artículos del blog: estructura normal de texto con fotos ampliables y la herramienta indice de contenidos. Herramienta de compartir arriba y abajo del artículo.Los comentarios del blog usaremos el plugin Facebook comments. Para finalizar artículo me gustaría que se propusieran artículos relacionados.


Por último un footer de herramientas varias. Este footer está presidido por una banner horizontal, que será una foto que es clicable y abre pestaña nueva de esponsor. Bloques: 1.-
Invitación a página de formulario de contacto ( a elaborar). Más un enlace a página de “webs amigas” y herramienta de invitación a News Letter compatible con sistema Mail Chimp. 2.-Bloque de enlaces a rutas agrupadas (categorías de producto) más un buscador pero sólo de rutas. 3.-Bloque herramientas de artículos blog. Con enlace de los tres últimos artículos y nube de categorías de artículos.

Termina página con el footer de wordpress con: “ Copyright Skimoguide 2017 -  Web protegida por Copyscape – Mapa de sitio – Avisos legales”.  Tanto las palabras Skimoguide, Copyscape, Mapa de sitio y Avisos legales con formato diferenciado y enlazado a sus respectivos sitios. Mapa del sitio de elaboración por parte del freelace.


La página dispondrá de la típica flecha de ascenso a top.

El sistema debe priorizar: seguridad, velocidad, seo, tiene que ser responsive, multilenguaje (compatible wpml para un futuro, ahora con la herramienta de traducción en menú es suficiente) y amplitud en el uso de pantalla grande. Y por supuesto la usabilidad del sitio para los diferentes navegadores del mercado. Por lo tanto y por razones de seguridad, se verificará la optimización del archivo funtions.php y la protección del archivo wp-config.php, entre otros.


Como plugines obligados ya tenemos Woocommerce, Wordfence Security, BBQ (versión gratis para cortafuegos) y Maps Marker Pro. Como plugin de copia de seguridad me gusta UpdraftPlus. Más los plugin que se estimen oportunos por parte del desarrollador.


Me gustaría saber que tema se usará, por supuesto legal y si hay sobrecostes por ello o por uso de plugins.

Por último me gustaría saber como se va a hacer el seguimiento, testeado del proyecto y su entrega final, con el fin de evitar cuestiones como las de enlaces rotos y otros detalles de entrega.

Visita skimoguide.com, página web en modo demo no funcional. Sin forma de contacto, no se contactará fuera de Workana.