CMS: mostrar los productos de Wix Stores en una página dinámica de lista
10 min
En este artículo
- Paso 1 | Agrega una página dinámica de lista para tus productos
- Paso 2 | Conecta el repetidor al CMS
- Paso 3 | (Opcional) Administra los ajustes del conjunto de datos
- Paso 4 | (Opcional) Permite que los clientes filtren productos
- Paso 5 | (Opcional) Agrega botones de navegación o "Cargar más"
Usa el CMS (Sistema de gestión de contenido) para apelar a la creatividad con la visualización de tus productos de Wix Stores mostrándolos en un repetidor totalmente personalizable dentro de una página dinámica de lista. Elige solo los elementos de la página que necesites (por ejemplo, texto, botones, imágenes) y conéctalos a los campos correspondientes utilizados por tus productos (por ejemplo, nombre, precio, cantidad disponible).
Puedes enlazar botones o imágenes a la página de producto de modo que los clientes puedan hacer clic para obtener más información antes de comprar. También es posible crear los botones 'Agregar al carrito' y 'Vista rápida' para lograr una experiencia de compra fluida.
Antes de comenzar:
- Crea tus propios productos en Wix Stores.
- Asegúrate de agregar el CMS a tu sitio si aún no lo has hecho.
- Habilita las colecciones de apps de Wix para que puedas usar Wix Stores con el CMS.
Paso 1 | Agrega una página dinámica de lista para tus productos
Ve a Colecciones de apps de Wix en el CMS del editor y crea una página dinámica de lista a partir de la colección de Wix Stores. Esta página incluye un repetidor que ya está parcialmente conectado a tus productos de Wix Stores.
Editor de Wix
Editor de Wix Studio
- Ve al editor.
- Haz clic en CMS
a la izquierda del editor. - Selecciona Colecciones de apps de Wix a la izquierda.
- Desplázate hacia abajo hasta la sección Stores, pasa el cursor sobre Products y haz clic en el icono Más acciones
. - Haz clic en Agregar página dinámica.
- Haz clic en Página de una lista.
- Haz clic en Agregar al sitio.
Consejo:
Puedes mostrar tus productos en una galería Wix Pro o en una tabla en lugar de un repetidor. Para hacerlo, elimina el repetidor y agrega una galería o una tabla. Luego, sigue el resto de los pasos de este artículo para conectar la galería o el repetidor al CMS.
Paso 2 | Conecta el repetidor al CMS
Conecta el repetidor a un conjunto de datos que enlace a tu colección de productos de Wix Stores. Luego, conecta cada elemento repetidor a los valores dinámicos de la colección que cambian según el producto que se muestra. Asegúrate de enlazar una imagen o un botón en el repetidor a la página de producto de Wix Stores para que los clientes puedan ver información adicional sobre los productos antes de comprarlos. También puedes crear enlaces "Agregar al carrito" y "Vista rápida".
Editor de Wix
Editor de Wix Studio
- (Opcional) Agrega elementos al repetidor (por ejemplo, botones, texto, imágenes) o elimina elementos que no necesites. Puedes ajustar el tamaño del repetidor para que contenga todos los elementos.
- Haz clic en el elemento repetidor y selecciona el icono Conectar a CMS
. - Haz clic en el menú desplegable Elige un conjunto de datos y selecciona Products.
- En Conexiones, haz clic en el elemento repetidor que deseas conectar.
Nota: Si estás usando el repetidor predeterminado incluido con la página dinámica, los elementos Imagen y Texto ya están conectados. Puedes eliminar elementos de texto adicionales o desconectarlos y reemplazarlos con texto estático. - Haz clic en los menús desplegables correspondientes y selecciona los campos de colección dinámica de Wix Stores que deseas conectar o las opciones de enlace del conjunto de datos para botones e imágenes:
- Campos de las colecciones de Wix Stores: selecciona los campos correspondientes, por ejemplo:
- Name (texto): el nombre del producto que creaste en Wix Stores.
- Formatted Discounted Price (texto): el precio al que se aplica el formato de la divisa (por ejemplo, 20 USD).
- Main Media (Image): el elemento multimedia principal (imagen o video) del producto.
- Opciones de enlace de botones e imágenes: haz clic en el menú desplegable La acción del clic conecta a o El enlace se conecta a y selecciona la opción correspondiente:
- Navegar a la URL de la página de producto: ve a la dirección web de la página del producto en tu sitio.
- Agregar al carrito: agrega el producto al carrito.
- Abrir vista rápida: abre una ventana emergente con detalles sobre el producto.
- Campos de las colecciones de Wix Stores: selecciona los campos correspondientes, por ejemplo:
- Haz clic en Conectar repetidor y repite los pasos 4 y 5 anteriores para conectar elementos adicionales en el repetidor.
- Haz clic para ajustar los elementos repetidores según sea necesario.
Consejo: Puedes agregar o eliminar elementos del repetidor en cualquier momento. Desconecta los elementos si quieres usar contenido estático que no cambie según la categoría correspondiente. - Haz clic en Vista previa para probar tu página dinámica de productos.
- Haz clic en Publicar si está todo listo para publicar los cambios.
Paso 3 | (Opcional) Administra los ajustes del conjunto de datos
En los ajustes de tu conjunto de datos, puedes elegir el máximo de productos que se pueden mostrar a la vez. También puedes agregar filtros para incluir solo ciertos productos o agregar clasificaciones para controlar el orden en el que se muestran los productos.
Nota:
El campo Ítems por carga no se aplica a las tablas. Si usas una tabla para mostrar tus productos, puedes limitar el número de ítems que se muestran haciendo clic en el icono Estilo 
. Luego, establece una altura de tabla personalizada y habilita la paginación.
. Luego, establece una altura de tabla personalizada y habilita la paginación. Editor de Wix
Editor de Wix Studio
- En el editor, haz clic en el repetidor o en la galería Wix Pro.
- Haz clic en el icono Conectar a CMS .
- Haz clic en Ajustes del conjunto de datos.
- (Opcional) Haz clic en el tipo de permiso junto a Permisos para determinar quién puede ver, agregar, actualizar o eliminar el contenido de la colección en tu sitio online.
- Edita el campo Ítems por carga para establecer el número máximo de ítems que se pueden cargar a la vez.
Nota: Este es también el número máximo de ítems que se pueden cargar cuando los visitantes hacen clic en los botones 'Mostrar más', los botones 'Próxima página' y 'Página anterior' o las barras de paginación. - (Opcional) Haz clic en + Agregar filtro para mostrar solo ítems específicos en el repetidor.
- (Opcional) Haz clic en + Agregar nuevo orden para elegir el orden en el que aparecen los productos en el repetidor.
- Haz clic en Vista previa para probar la página dinámica de productos.
- Haz clic en Publicar si está todo listo para publicar los cambios.
Paso 4 | (Opcional) Permite que los clientes filtren productos
Ofrece a los compradores una forma de ver solo los productos que coinciden con los filtros que aplican, como precio, inventario o marca. Elige cualquiera de los siguientes elementos de entrada que permiten filtrar: botones de radio, casillas de verificación, menús desplegables, etiquetas de selección o controles deslizantes (solo deslizadores de rango).
Aprende cómo configurar elementos de entrada que permiten a los visitantes filtrar el contenido de la colección.
Paso 5 | (Opcional) Agrega botones de navegación o "Cargar más"
Puedes mejorar el rendimiento de tu página limitando el número de productos que aparecen y agregando un botón 'Cargar más'.
Agrega botones de navegación para permitir que los compradores hagan clic para ver la página siguiente o anterior de los productos que se muestran o agrega una barra de paginación para alternar entre un número determinado de productos a la vez.
Consejo:
Más información sobre las acciones del conjunto de datos del CMS que puedes aplicar a botones e imágenes.