Caso de uso de variables: Crear bloque de productos personalizados en un contenido web

Los bloques de productos dinámicos sirven para mostrar recomendaciones personalizadas de productos a tus contactos. Esto permite que los contenidos de tu web se adapten al comportamiento y al ciclo de vida de cada usuario, manteniéndose actualizados y relevantes, lo que mejora las conversiones.

En este artículo, aprenderás cómo crear un bloque de productos personalizados en un contenido web.

  

Tiempo de implementación: 15 minutos.
Dificultad: Baja
¿Cuándo utilizarlo?: Cuando necesites mostrar productos en tu web sin modificar el código.

  

Antes de leer este artículo, te recomendamos echar un vistazo al Editor de contenido web.

 

PASO 1. Crea un contenido web con un bloque de productos dinámico

1. Accede a "Contenidos > Contenido Web" y haz clic en  Crear nuevo contenido web.

Bloque_de_productos_personalizados_en_contenido_web_-_1.png

2. Selecciona el tipo de contenido web en el que quieres mostrar las recomendaciones personalizadas.

  

Los bloques de productos personalizados se pueden mostrar en cualquier tipo de contenido web.

Las notificaciones push, por su naturaleza y tamaño, sólo pueden mostrar un producto.

3. Nombra el contenido para identificarlo.

4. Haz clic en  Crear contenido web.

Bloque_de_productos_personalizados_en_contenido_web_-_2.png

5. Añade un componente avanzado de tipo "Productos", arrastrando el bloque desde la pestaña Componentes al editor.

Bloque_de_productos_personalizados_en_contenido_web_-_3.png

 

Si quieres aprender más sobre los distintos componentes del editor de contenido web, haz clic aquí.

 

PASO 2. Personaliza tu bloque de productos

 

Puedes previsualizar cualquier cambio en el proceso de creación y personalización de un bloque de productos. Siempre que consideres necesario, sigue las instrucciones del PASO 3  para validar tus cambios, antes de continuar con el siguiente punto.

 

2.1. Configuración básica

(En este apartado se van a indicar los datos identificativos y estilo general del bloque de productos).

6. Haz clic en  (Editar elemento) en el menú contextual que aparece al pasar el ratón sobre el bloque insertado.

Bloque_de_productos_personalizados_en_contenido_web_-_4.png

7. (Opcional) En Nombre, establece un título para identificar el bloque.

 

Si usas más de un bloque de productos dinámico, te recomendamos establecer un nombre a cada uno de ellos. Esto te facilitará la asignación de variables en el workflow en el que se haga uso del contenido web.

8. En Tipo, elige el comportamiento visual del bloque de productos.

  

En este apartado puedes escoger entre dos opciones:
Estático: muestra en pantalla tantos productos cómo se configuren en su estructura.
Carrusel: contiene más productos de los que se ven en pantalla, alternando su visualización mediante una rotación automática.

Bloque_de_productos_personalizados_en_contenido_web_-_18.png

 

2.2. Configuración de la plantilla

(En este apartado se va a definir el contenido del bloque de productos).

9. En Plantillas, escoge entre las tres opciones por defecto.

  

Las plantillas incluyen espacios designados para mostrar la información básica de un producto: su nombre, imagen o un botón para ir a su ficha en el eCommerce, entre otros datos del producto.

Las características principales que las distinguen son:
Producto con valoración: incluye un espacio reservado para la descripción del producto y otro para las valoraciones (si se está registrando el dato en Connectif ya que no forma parte de la integración por módulo), representándolas por medio de estrellas.
Producto con marca: incluye un espacio reservado para mostrar la marca del producto y otro para su precio.
Producto con precio: incluye un espacio reservado para mostrar la descripción del producto y otro para su precio.

Bloque_de_productos_personalizados_en_contenido_web_-_5.png

10. Usa el editor para personalizar los estilos de la plantilla seleccionada.

  

El editor de la plantilla permite tanto dar estilo como añadir elementos al componente. Podrás modificar, por ejemplo, la tipografía, tamaño o colores de los textos o añadir imágenes.

Bloque_de_productos_personalizados_en_contenido_web_-_10.png

11. (Opcional) Haz clic en   (Editar código HTML), para personalizar por medio de código tu componente, si fuera necesario para tu diseño.

Bloque_de_productos_personalizados_en_contenido_web_-_11.png

 

2.3. (Opcional) Creación de nuevas variables dinámicas

(En este apartado se van a definir nuevas variables a utilizar en el carrusel, en caso de que desees añadir nuevas).

  

Cuando el contenido web se incluya en un workflow, se establecerá la vinculación entre los datos del flujo y las variables del contenido por medio de un nodo "Enviar contenido web". Si quieres saber más sobre este tipo de nodos, haz clic aquí.

12. En el editor, haz clic en el lugar del contenido donde quieres añadir la variable.

13. Haz clic en el botón Variables.

Bloque_de_productos_personalizados_en_contenido_web_-_12_boton.png

14. En Identificador de variable, escribe un nombre para tu variable.

 

El identificador de variable no puede incluir espacios y sólo puede contener letras, números y los símbolos de guion ( - ) y barra baja ( _ ).

Bloque_de_productos_personalizados_en_contenido_web_-_12.png

 

En nuestro ejemplo, se ha llamado a la variable "descripcion", no lleva tilde al ser un carácter no permitido.

15. Haz clic en  Aceptar.

  

Al crear la variable, el editor le añade las llaves dobles que la distinguen.

Bloque_de_productos_personalizados_en_contenido_web_-_13.png

16. Repite los pasos 12 a 15 por cada variable que quieras añadir.

  

Para eliminar una variable, selecciónala en el editor, incluyendo las llaves que la rodean, y pulsa la tecla suprimir de tu teclado.

 

2.4. Configuración de la estructura

(En este apartado se van a definir la cantidad de productos a mostrar).

17. En Estructura, define la cantidad de productos que deseas que se muestren en el contenido, en función de su tipología:

  • Componente de tipo estático: indica las filas y columnas de tu bloque de productos, tanto para escritorio como para móvil.
  

La cantidad de productos visibles dependerá de las filas y columnas que establezcas, y puede ser distinta si el contacto hace la visita desde un ordenador ("Elementos visibles en escritorio") o desde un dispositivo móvil ("Elementos visibles en móvil").

 

En nuestro ejemplo, se han seleccionado 2 filas y 3 columnas en escritorio, por lo que mostraran 6 productos cuando el contacto haga la visita desde un ordenador. 
Si el usuario navega desde móvil, el bloque, en cambio, mostrará 2 artículos, uno en cada fila.

Bloque_de_productos_personalizados_en_contenido_web_-_6.png

  • Componente de tipo carrusel: Indica la cantidad de productos que mostrará a la vez tu bloque, tanto para dispositivos móviles cómo para escritorio, y establece el tiempo de rotación en segundos.
  

Para desactivar la rotación automática, establece el tiempo en 0 segundos. El contacto seguirá pudiendo navegar entre los artículos por medio de las flechas de desplazamiento.

Bloque_de_productos_personalizados_en_contenido_web_-_7.png

18. (Opcional para componentes de tipo estático) Desmarca la casilla "Mostrar filas incompletas" para que los productos se visualicen sólo cuando hay suficientes artículos para mostrar en todas las columnas de una fila.

 

En nuestro ejemplo, si desmarcamos la casilla "Mostrar filas incompletas", el contenido de la primera fila sólo se mostrará si se reciben los datos de al menos 3 productos. El contenido de la segunda fila se visualizará si hay datos de al menos 6 artículos.

 

2.5. (Opcional) Configuración de márgenes, fondo y opciones avanzadas

(En este apartado se van a determinar los últimos aspectos visuales del contenido).

19. En Disposición, define los márgenes internos del componente, si fuera necesario para tu diseño.

20. En Fondo, cambia el color de fondo y su grado de transparencia, si fuera necesario para tu diseño.

21. En Avanzados, haz clic en  Introduce clases para asignar al contenido clases HTML, si quieres aplicar a tu contenido estilos CSS creados en tu web o en componentes de tipo HTML.

Bloque_de_productos_personalizados_en_contenido_web_-_8.png

22. Sólo para componente de tipo Carrusel. Haz clic en   Maximizar editor para modificar el código y personalizar las flechas de desplazamiento de tu carrusel, si fuera necesario para tu diseño.

 

Las flechas de desplazamiento se editan por separado en "HTML de flecha izquierda" y "HTML de flecha derecha".

Bloque_de_productos_personalizados_en_contenido_web_-_9.png

 

PASO 3. Previsualiza el diseño de tu bloque de productos personalizado

 

Ten en cuenta que las nuevas variables que hayas creado no están aún vinculadas a ningún dato de los productos, por lo que se previsualizarán como texto (placeholder).

23. Haz clic en  Previsualizar.

Bloque_de_productos_personalizados_en_contenido_web_-_14.png

24. Haz clic en  (Vista en escritorio) y revisa que el diseño en ordenador sea el adecuado para tu estrategia.

  

La vista por defecto del previsualizador corresponde a la de ordenador.

Bloque_de_productos_personalizados_en_contenido_web_-_15.png

25. Haz clic en  Vista en móvil y revisa que el diseño en dispositivos móviles es el adecuado para tu estrategia.

Bloque_de_productos_personalizados_en_contenido_web_-_16.png

Bloque_de_productos_personalizados_en_contenido_web_-_17.png

26. Haz clic en  Cerrar previsualización.

27. (Opcional) Haz las modificaciones necesarias, repitiendo los pasos y puntos anteriores que correspondan, para que el diseño sea el adecuado a tu estrategia.

28. En el editor, haz clic en   Guardar.

 

 

 

 ¡Éxito!
Tu bloque de productos personalizado en un contenido web ya está listo.


¡Sigue aprendiendo!

Para aprovechar todo el potencial de tu cuenta en Connectif, te recomendamos continuar con los siguientes artículos:

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 0 de 0