Paso 3 - Creación de la página > Objeto Catálogo de Productos

Una de las funciones más interesantes de WebSite X5 es la de dar la posibilidad de crear y gestionar sitios web de comercio electrónico, mediante los que es posible no solo presentar los propios productos en un escaparate potencialmente visible para el mundo entero, sino también venderlos directamente en línea.

Además de permitir la inserción de los productos y la gestión del carrito de la compra, WebSite X5 permite preparar un auténtico catálogo en línea mediante un objeto especial llamado Lista de Productos. Este Objeto permite presentar un grupo de productos, seleccionados entre los ya introducidos en el Carrito de la compra, a través de las Fichas de Producto que resumen sus características principales y permiten comprarlos.

Los comandos disponibles para crear un Objeto Lista de Productos están organizados en las siguientes secciones: Lista y Ajustes.

Mediante esta sección es posible especificar qué productos deben ser visualizados en la Lista Productos.

La columna a la izquierda de la ventana presenta la Lista de categorías y productos introducidos durante la creación del Carrito de la compra disponible en el Paso 4 - Ajustes avanzados.

Al lado de cada categoría y de cada producto hay una casilla de verificación: basta pulsar las casillas correspondientes a las categorías y/o productos que se desea activar para hacer que queden añadidos dentro del Objeto Lista de Productos que se está elaborando. Todos los productos seleccionados se muestran automáticamente dentro de la columna al lado derecho de la ventana.

Activar una categoría o activar todos los productos pertenecientes a una categoría no es lo mismo: de hecho, solo en el primer caso, si más tarde se añadiesen nuevos productos a una categoría, estos se añadirían automáticamente a los Objetos Lista de Productos a los que estuviesen vinculados.

Los productos añadidos a la columna de la derecha de la ventana pueden ordenarse pulsando el botón Ordenación y seleccionando el tipo de orden que se desea aplicar: Personalizado, Nombre, Categoría, Precio, Ascendente o Descendente.

Seleccionando el orden Personalizado es posible usar los botones Mover arriba / Mover abajo para definir manualmente el orden de los productos.

Por medio de las opciones disponibles en esta sección es posible definir algunos ajustes gráficos relativos a las fichas a través de las cuales se presentan los productos añadidos a la lista.

Ante todo es preciso especificar el Modo de visualización eligiendo entre los siguientes tipos de fichas de producto:

	Sólo texto En la ficha de producto se indican, uno tras otro, los siguientes datos: Nombre del producto, descripción, lista desplegable con las variantes (si están disponibles), coste y, al lado, un campo para la cantidad con el botón "Comprar"
	Imagen y texto En la ficha de producto aparece a la izquierda la imagen del producto y a la derecha toda la información relativa al mismo.
	Texto y imagen Análogo al anterior tipo de presentación, coloca el texto a la izquierda y la imagen a la derecha.
	Sólo imagen En este caso, debajo de la imagen se indica toda la información asociada excepto la descripción completa.
	Alternar imagen y texto En este caso se alternan Fichas de Producto con imagen y texto a la derecha y Fichas de Producto con imagen y texto a la izquierda.

Independientemente del tipo elegido, en el título y en su caso en la imagen de las Fichas de Producto se activa automáticamente el enlace configurado mediante la opción Enlace (ej. Página de la ficha del producto) de la ventana Configuración del producto | General.

Mediante las funciones del recuadro Configuración de marcos es posible definir:

▪	Fichas por fila: permite especificar cuántas Fichas de Producto deben estar una junto a otra en una única fila.

▪

Altura fichas: permite especificar el valor en píxeles que debe asumir en altura cada Ficha de Producto. En función de este parámetro, el tamaño de las imágenes asociadas a los productos es modificado automáticamente. Si los textos de descripción de los productos son demasiado largos para poder ser visualizados completamente, se muestra la barra de desplazamiento.

▪

Ancho imagen (%): permite especificar, si se ha elegido un tipo de presentación en el que texto e imagen estén uno al lado del otro, cuánto espacio de la Ficha de Producto debe ser ocupado por la imagen y cuánto por el texto. En la práctica, si la imagen ocupa el 30% del ancho de la Ficha de Producto, el restante 70% será ocupado por el texto.

▪	Margen interior: el margen es el espacio vacío existente entre el borde de la Ficha de Producto y su contenido. Así pues, mediante esta opción es posible definir cuánto espacio debe haber alrededor del contenido dentro de la Ficha de Producto.

Mediante las funciones del recuadro Gráfica es posible definir:

▪	Color Texto/Color Fondo: definen el color del texto y del fondo de la Ficha de Producto.

▪	Fuente: define el tipo de carácter, el estilo y el tamaño del texto.

Mediante las funciones del recuadro Opciones es posible definir:

▪	Grosor: especifica el grosor de los bordes, también individualmente.

▪	Color: especifica el color de los bordes, también individualmente.

▪	Esquinas redondeadas: define el factor de redondeo de las esquinas, también individualmente.

▪	Sombra: aplica una sombra, definiendo su color, la posición, la difusión y el tamaño.

Mediante las funciones del recuadro Comandos es posible definir:

▪	Activar vínculo sobre la imagen: activa en las diferentes imágenes de la Ficha de Producto el enlace a las imágenes ampliadas correspondientes. Dichas imágenes ampliadas son visualizadas mediante la ventana ShowBox.

La apariencia de la ventana de ShowBox se puede personalizar completamente: a través de las opciones que hay en la sección Estilo de la ventana ShowBox del Paso 1 - Estilo de la Plantilla se pueden ajustar, por ejemplo, los colores, la sombra, la opacidad y efectos de apertura.

▪	Añadir sin mostrar el Carrito de la compra: hace que pulsando el botón de compra el Cliente añada directamente el producto al pedido sin ser automáticamente reenviado al Carrito de la compra.

Mediante las funciones del recuadro Opciones es posible definir:

▪	Mostrar precio: muestra el precio asociado al producto, con o sin IVA, en la Ficha de Producto.

▪	Mostrar el botón Comprar: muestra en la Ficha del Producto el botón que es necesario pulsar para proceder a la compra. En caso de que el Botón de Compra no se muestre, el campo Cantidad tampoco estará presente.

▪	Mostrar campo cantidad: muestra en la Ficha de Producto un Campo Cantidad para dar al cliente la posibilidad de especificar la cantidad de unidades del producto que quiere añadir al carrito de la compra.

▪	Mostrar también la Disponibilidad Efectiva: muestra en la Ficha de Producto, además del icono para la Disponibilidad Indicativa, también el número que indica su Disponibilidad Efectiva.

Si se activa la opción Mostrar también la Disponibilidad Efectiva y hay al menos un Producto para el que se contempla la indicación de este tipo de disponibilidad, para la Página en la que está el Objeto Catálogo de Productos debe estar configurada la extensión .PHP: es posible hacerlo mediante la opción Extensión del archivo generado de la ventana Propiedades de la página | Avanzado.

Por último, es posible añadir Lazos definiendo:

▪	Tipo de lazo: permite definir los ajustes para los lazos que se mostrarán en las Fichas de Producto en los casos de "Nuevo producto" o "Producto en oferta".

▪	Archivo imagen: define la imagen que se usará como lazo. Es posible pulsar sobre la flecha que hay en el campo para seleccionar una imagen de la librería disponible o pulsar el botón e importar el archivo gráfico (.JPG, .GIF, .PNG.) de la imagen que se quiere utilizar.

▪	Alineación: especifica cómo debe alinearse el lazo respecto al interior de la Ficha de Producto.

▪	Ancho (%): especifica la anchura del lazo en porcentaje respecto al tamaño de la Ficha de Producto.

Para que el Objeto Lista de Productos funcione correctamente, es necesario haber añadido primero productos al carrito de la compra con los comandos de la sección Carrito de la compra del Paso 4 - Ajustes avanzados.