CMS: mostrar los productos de Wix Stores en una página dinámica de lista
12 min de lectura
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 puedes 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 X
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: Si deseas usar un estilo de repetidor diferente, puedes eliminar el repetidor predeterminado y agregar uno nuevo. Conectarás los elementos repetidores en el siguiente paso.
Consejo:
Puedes mostrar tus productos en una Galería Wix Pro o una tabla (solo en el Editor de Wix) 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 se enlace a tu colección de productos de Wix Stores. Luego, conecta cada elemento repetidor a los valores dinámicos de tu 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 X
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.
Editor de Wix
Editor X
Editor de Wix Studio
- En el Editor, haz clic en el conjunto de datos Products y selecciona Ajustes.
- Edita el campo Cantidad máx. de ítems mostrados para establecer el número máximo de productos que se pueden cargar simultáneamente en la página. Esta es también la cantidad máxima de categorías que se pueden cargar por página en una barra de paginación conectada o por cada clic en un botón "Cargar más".
- (Opcional) Haz clic en + Agregar filtro para mostrar solo productos específicos en el repetidor.
- (Opcional) Haz clic en + Añadir orden para elegir el orden en el que aparecen los productos en el repetidor.
- 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 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ú desplegable, etiquetas de selección o control deslizante (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 los ítems siguientes o anteriores que se muestran o agrega una barra de paginación para alternar entre un número determinado de productos a la vez.
¿Te ha sido útil?
|