Publicado el

El widget de tienda online o minitienda de Codeeta es un widget multipágina, es decir, contiene varias vistas diferentes a las que se puede acceder mediante distintas acciones. En este caso, existen cuatro pantallas distintas: escaparate, vista del producto, carro de compra y la pantalla que contiene el formulario donde se recogen los datos del cliente.

Escaparate
Esta vista muestra todos los elementos de los que se compone la tienda, o sea, los productos que ofertamos a nuestros clientes y es lo primero que se ve en este tipo de widgets. La estructura que tiene es la siguiente:

Vista del escaparate

1. Título de la tienda virtual.

2. Menú de páginas: en este menú tenemos acceso a la vista del escaparate (por defecto) o a la del carrito de la compra, que indica junto a ella el número de artículos que llevamos adquiridos. La vista activa está resaltada en todo momento con un fondo gris oscuro.

3. Escaparate: muestra los productos que podemos adquirir. Por defecto, éstos se reparten en hileras de tres productos, por lo que si añadimos nuevos artículos a nuestro escaparate aparecerán en una hilera nueva. El número de productos mostrados por hilera dependerá de la anchura del widget: más anchura, más productos por fila.
Los productos que salen en el escaparate muestran en nombre del producto, su precio final (con descuentos aplicados, gastos de envío, etc) y un botón (“Ver producto”) que permite ver en detalle cada artículo.
4. Más productos: este botón permite ir a la siguiente hilera de productos. Si estamos ya en la última fila de artículos, se mostrará en enlace de “Productos anteriores” y si nos encontramos en una línea intermedia se mostrarán ambos simultáneamente, para saltar a hileras anteriores o posteriores:

Productos anteriores

Vista del producto

La vista más completa que podemos ver de un producto se muestra en la siguiente imagen:
Vista del producto

1. Nombre del artículo

2. Menú de páginas: análogo al de la vista anterior, excepto que ahora muestra una nueva opción, “Producto”, que indica que estamos visualizando un artículo. Para volver a al escaparate basta con pulsar “Escaparate” en este menú.

3. Foto del producto: muestra la primera foto de la galería que hayamos creado para el artículo. Poniendo el ratón sobre los extremos de la imagen aparecen dos flechas que permiten ver el resto de imágenes. Opcionalmente puede editarse una presentación para que estas imágenes cambien solas de una a otra.

4. Cajetín de precio: la fila superior indica el precio total del producto y la hilera inferior el descuento aplicado y el ahorro que se ha producido. Los gastos de envío, aunque no se muestran en este desglose, también están aplicados en el precio final.

5. Variantes: en este espacio se encuentran las distintas variantes que se han creado para el producto. Una vez que el cliente haya elegido una opción en el desplegable, el precio total variará en consecuencia.

6. Galería de imágenes: muestra todas las imágenes disponibles para este producto. Pulsando directamente sobre estas miniaturas podremos verlas un poco más grandes en la zona “Foto del producto”. Si hemos habilitado la presentación de imágenes, el orden de las miniaturas señala el orden en el que las imágenes aparecerán en su reproducción.

7. Descripción del producto: texto para describir las características del producto. Aparece un scroll en el lado derecho de esta sección si la extensión excede del espacio habilitado.

8. Botón “Añadir al carro”: permite añadir el producto al carrito de la compra. Tras pulsarlo, una unidad del artículo aparecerá reflejado en la sección del carro de compra y el botón cambiará, apareciendo otro gris en su lugar que nos ofrece la posibilidad de volver al escaparate o ir directamente al carro de compra:
Botón escaparate-carrito de la compra

Carro de compra
Vista carro de la compra
1. Nombre de la tienda virtual.

2. Menú de páginas: análogo a los anteriores. Ahora aparece resaltada la pestaña “Carro de compra” porque es la vista donde nos encontramos. El número de artículos que aparece a su derecha hace referencia a la cantidad de productos que vamos a adquirir y no al número de artículos diferentes que hay en el carro de la compra.

3. Listado de productos adquiridos: aquí se muestran todos los artículos que conforman nuestra compra. Tenemos la opción de eliminar los productos que queramos haciendo clic en el icono en forma de aspa situado en el lado izquierdo de cada elemento. Esta acción eliminará cualquier cantidad adquirida de un producto. Si lo que queremos es reducir (o aumentar) el número de unidades que vamos a comprar, podemos valernos de las flechas situadas a la izquierda de cada cajetín de cantidad. El precio final se verá reflejado en el lado derecho y en el precio total.
4. Vaciar el carro: pulsar este icono supone eliminar todas las unidades de todos los productos adquiridos.

5. Precio total: indica el precio total que tendremos que abonar por nuestra compra.

6. Botón “Comprar”: una vez estemos satisfechos con el contenido de nuestro carrito, pulsar “Comprar” nos lleva al siguiente paso del proceso de compra, esto es, a la cumplimentación del formulario que recoge los datos personales del cliente.

7. Atrás: nos lleva de nuevo al escaparate de la tienda.

Adicionalmente, si situamos el cursor sobre el precio de cada artículo aparecerá un cajetín con el desglose del precio, indicando lo que cuesta una unidad, los recargos según variante y gastos de envío y los descuentos aplicados.

Detalle del precio final

Datos del cliente
Vista de los datos pedidos al cliente
1. Nombre de la tienda virtual.

2. Formulario de recogida de datos del cliente.

3. Botón “Enviar”: al hacer clic en este botón seremos reconducidos a la pasarela de pagos para efectuar el pago. Por defecto esta pasarela de pagos es PayPal pero esta opción puede configurarse con el editor avanzado para eliminarla y/o añadir nuevas (explicado en el tercer apartado de este manual).

4. “Atrás”: pulsarlo nos lleva de vuelta al carro de compra