CMS: mostrar el contenido de una colección en la página de producto de Wix Stores

12 min de lectura
Tu página de producto de Wix Stores tiene diferentes versiones para cada uno de los productos que comparten el mismo estilo. Con el CMS (Sistema de gestión de contenido), ahora puedes personalizar esta página para incluir detalles adicionales del producto que se guardan en una colección del CMS separada. También puedes ocultar el contenido predeterminado de la página de producto y, en su lugar, mostrarlo en elementos compatibles para tener más control sobre el estilo de la página. Esto te da la posibilidad de personalizar la página de producto y mejorar tus listados de producto para crear una experiencia más rica para los clientes.

Primero, crea una colección del CMS 'Detalles' que haga referencia a tu colección de apps de Wix. En la colección 'Detalles', guardarás la información adicional que deseas integrar en la página de producto. Luego, configura conjuntos de datos en tu página y conéctalos a tu colección de la app Wix Stores y a tu colección del CMS 'Detalles'. Por último, conecta elementos compatibles, como el elemento Contenido enriquecido, a la colección 'Detalles' para mostrar la información adicional. 

Si es necesario, puedes ocultar el contenido predeterminado en el widget Página de producto y mostrarlo en otro lugar enlazando elementos a tu colección de la app Wix Stores. Por ejemplo, puedes ocultar la galería integrada de la página de producto y luego agregar una galería Wix Pro y conectarla al tipo de campo Galería de multimedia de la colección de la app Wix Stores. Esto te da más control sobre la personalización de la galería y su visualización en cualquier lugar de la página. Lo mismo ocurre con cualquiera de los elementos del widget de Wix Stores sobre los que te gustaría ejercer más control.  

Esto puede suponer un cambio radical para tu negocio online. Imagina que tienes una boutique y quieres una página de producto personalizada que brinde a los clientes una visión más detallada de tus productos. Con este proceso, puedes agregar fácilmente detalles adicionales, como la historia que hay tras un producto o instrucciones específicas para el cuidado de las prendas, directamente en la página de producto personalizada.
Captura de pantalla de un conjunto de datos de detalles en la página de producto.
Antes de comenzar:
  • 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. Tu colección de la app Wix Stores es de solo lectura e incluye automáticamente todos los detalles de los productos que has configurado en Wix Stores. 

Paso 1 | Crea una colección que haga referencia a tu colección de apps de Wix

Si deseas que tu página de producto incluya detalles sobre tus productos que aún no existen en Wix Stores, debes crear una colección del CMS con la información adicional. Para cada ítem de la colección, también necesitarás un campo de referencia que se conecte al producto correspondiente en tu colección de la app Wix Stores. 
Consejo:
Si no necesitas mostrar información adicional del producto y, en cambio, solo deseas usar los datos existentes de Wix Stores en elementos de página conectados en la página de producto, omite este paso. 

Para crear una colección del CMS que haga referencia a la colección de la app Wix Stores:

  1. Crea una colección de varios ítems (predeterminado) en la que guardarás la información adicional que deseas integrar en tu página de producto. 
  2. Haz clic en + Agregar ítem para agregar ítems para cada producto sobre el que desees guardar detalles adicionales. 
  3. Haz clic en + Agregar campo para agregar campos para cada tipo de contenido que desees guardar (por ejemplo, Contenido enriquecido). 
  4. Haz clic en las celdas correspondientes para agregar tu contenido a cada ítem. 
  5. Agrega un tipo de campo de referencia y conéctalo a la colección de la app Wix Stores: 
    1. Haz clic en Administrar campos y luego en + Agregar campo.
    2. Selecciona Referencia y haz clic en Elegir tipo de campo.
      Consejo: Selecciona el campo Multirreferencia si deseas usar el contenido de un ítem para más de un producto. 
    3. Ingresa el Nombre de campo.
    4. (Solo Velo) Si es necesario, actualiza el ID de campo, que se utiliza en el código del sitio. No es posible actualizar este ID más tarde. 
    5. Haz clic en el menú desplegable Colección referenciada y selecciona Products (Productos) en Stores (Tiendas). 
    6. (Opcional) Ingresa texto de ayuda para incluir una descripción emergente en la colección junto al nombre de campo.
    7. Haz clic en Guardar.
Captura de pantalla de cómo crear un campo de referencia en una colección del CMS
  1. Para cada ítem, haz clic en el campo de referencia y selecciona el producto correspondiente. Puedes seleccionar varios productos si agregaste un campo de multirreferencia en el paso anterior. 
Captura de pantalla que muestra la selección de los productos correspondientes en el campo de referencia de la colección Detalles.

Paso 2 | Configura conjuntos de datos y conéctales elementos

Los conjuntos de datos son las herramientas que enlazan elementos de la página, como texto, botones e imágenes, al contenido de la colección. Facilitan las conexiones entre los elementos y el contenido de los campos de la colección. 

Deberás agregar uno o dos conjuntos de datos a la página de producto, según si deseas mostrar detalles adicionales de tu colección del CMS o no. 

Los pasos de esta sección te muestran cómo agregar los siguientes conjuntos de datos a tu página de producto: 
  • Conjunto de datos de la colección de apps de Wix: lee la información del producto que está almacenada y administrada dentro de tu app Wix Stores. Agrega un filtro de slug de URL a este conjunto de datos. Puedes conectar elementos compatibles al conjunto de datos para mostrar contenido de Wix Stores.  
  • Conjunto de datos 'Detalles': permite leer el contenido adicional que has almacenado sobre tus productos desde tu propia colección del CMS. Agrega un filtro al conjunto de datos que filtre el campo de referencia o multirreferencia de la colección. Conecta elementos, como el contenido enriquecido, a este conjunto de datos para mostrar el contenido adicional que has agregado a la colección 'Detalles' del CMS. 
    Nota: No necesitas este conjunto de datos si no quieres mostrar información adicional de la colección del CMS 'Detalles' y, en su lugar, solo quieres mostrar contenido de tu colección de la app Wix Stores. 
Captura de pantalla de los conjuntos de datos necesarios para esta función.
Editor de Wix
Editor de Wix Studio
  1. Ve al editor.
  2. Ve a la página del producto:
    1. Haz clic en Páginas y menú  a la izquierda del editor.
    2. Haz clic en Páginas de la tienda y selecciona Página del producto
  3. Agrega un conjunto de datos que se conecte a la colección del CMS 'Detalles' y filtre el campo de referencia o multirreferencia:
    Nota: Omite este paso si no necesitas mostrar detalles adicionales de la colección del CMS 'Detalles'. 
    1. Haz clic en CMS  a la izquierda 
    2. Haz clic en Agregar elementos
    3. Haz clic en Conjunto de datos
    4. Haz clic en el menú desplegable Elige una colección y selecciona la colección 'Detalles'. 
    5. Edita el nombre del conjunto de datos si es necesario y haz clic en Crear
    6. Haz clic en + Agregar filtro debajo de Filtro en los ajustes del conjunto de datos. 
    7. Haz clic en el menú desplegable Campo, selecciona el campo Referencia (Productos) o el campo Multirreferencia (Productos) y luego haz clic en Agregar filtro
Captura de pantalla que muestra cómo agregar un filtro de referencia al conjunto de datos
  1. Agrega un conjunto de datos que se conecte a tu colección de la app Wix Stores:
    1. Haz clic en Agregar un conjunto de datos en la parte inferior del panel a la derecha. 
    2. Haz clic en el menú desplegable Elige una colección y selecciona la colección Products en Stores
    3. Edita el nombre del conjunto de datos si es necesario y haz clic en Crear.
Captura de pantalla de cómo crear un conjunto de datos que se conecta a la colección de la app Wix Stores.
  1. Agrega un filtro de slug de URL al conjunto de datos de Stores/Products:
    1. Haz clic en el icono Más acciones  junto al conjunto de datos de Stores/Products y selecciona Ajustes de conjunto de datos.
    2. Haz clic en + Agregar filtro debajo de Filtrar
    3. Haz clic en el menú desplegable Campo y selecciona Slug (Texto)
    4. Deja seleccionada la opción es/está como condición
    5. En Fuente del valor, selecciona Slug de URL
    6. Haz clic en Agregar filtro
Captura de pantalla que muestra cómo agregar un filtro de slug de URL a la colección de apps de Wix.
  1. Agrega los elementos compatibles que deseas conectar. 
  2. Conecta los elementos a los campos correspondientes en el conjunto de datos correspondiente: 
    • Conjunto de datos Detalles: conéctate a los campos de la colección en este conjunto de datos para usar contenido de la colección del CMS 'Detalles'.  
    • Conjunto de datos Stores/Products: conéctate a los campos de la colección en este conjunto de datos para usar contenido de la colección de app Wix Stores.
      Consejo: Puedes agregar un botón o una imagen y luego conectar su acción de clic a la acción del conjunto de datos Agregar al carrito para crear tu propio botón 'Agregar al carrito'. Del mismo modo, conéctate a la acción Abrir vista rápida para crear un botón que abra la ventana 'Vista rápida'.
Captura de pantalla que muestra cómo conectar un elemento de contenido enriquecido al campo de contenido enriquecido.
  1. (Opcional) Oculta los detalles predeterminados del widget Página de producto:
    1. Haz clic en el elemento Página del producto y selecciona Ajustes
      Nota: Si no ves Ajustes, estás usando la nueva página de producto de Wix Stores. Selecciona el icono Elementos en su lugar y desmarca las casillas junto a cada elemento del widget que desees ocultar. Luego, pasa directamente al paso 9. 
    2. Haz clic en la pestaña Ajustes
    3. Desmarca las casillas de verificación junto a cada detalle que deseas ocultar del widget Página de producto. 
    4. Desactiva la palanca junto a los botones o iconos correspondientes para ocultarlos del widget. 
    5. Si es necesario, personaliza aún más el widget Página de producto.
Captura de pantalla que muestra cómo personalizar el widget Página de producto.
  1. Usa la barra de herramientas Vista previa para probar las conexiones de los productos correspondientes. 
  2. Cuando esté todo listo, publica tu sitio para implementar los cambios. 

¿Te ha sido útil?

|