Insertar un inline en VTEX IO

Connectif permite mostrar contenidos web personalizados en VTEX IO con cambios mínimos en el código y la estructura de tu eCommerce.

En este artículo, aprenderás cómo insertar contenido de Connectif mediante un inline en tu VTEX IO.

  

Tiempo de implementación: 15 minutos.
Dificultad: Media
¿Cuándo utilizarlo?: Cuando quieras incluir contenido (estático o dinámico) en VTEX IO.

  

Para poder usar contenido web inline de Connectif en VTEX IO, es imprescindible hacerlo mediante el componente de Connectif específicamente diseñado y desarrollado para el sistema de temas de VTEX IO.

En esta guía de VTEX podrás consultar cómo personalizar un tema: VTEX Store Theme.

 

PASO 1. Insertar el componente en el código

(En este apartado se coloca el componente en el lugar adecuado a la estrategia para mostrar el contenido).

1. En el archivo "manifest.json" del tema utilizado en tu VTEX IO, añade como dependencia la app de Connectif con una versión 1 o superior.

Insertar_un_inline_en_VTEX_IO_-_1.png

2. Coloca la definición del bloque en la posición deseada del código.

 

En nuestro ejemplo, se ha insertado el componente en la home del eCommerce.

Insertar_un_inline_en_VTEX_IO_-_2.png

"store.home": {
"blocks": [
"list-context.image-list#demo",
/* You can make references to blocks defined in other files.
* For example, `flex-layout.row#deals` is defined in the `deals.json` file. */
"__fold__.experimentalLazyAssets",
"flex-layout.row#deals",
"connectif#test-connectif-block",
"rich-text#shelf-title",
"flex-layout.row#shelf",
"info-card#home",
"rich-text#question",
"rich-text#link",
"newsletter"
]
}


3. Añade las propiedades necesarias para identificar el bloque creado.

 

En nuestro ejemplo, se han definido 2 propiedades para el componente:

"classId": Añade el texto especificado como clase al contenedor creado por el componente.
"elementId": Añade el texto especificado como identificador al contenedor creado por el componente.

Insertar_un_inline_en_VTEX_IO_-_3.png

"connectif#test-connectif-block": {
    "props": {
    "classId": "test-connectif-block",
    "elementId": "test-connectif-block-elem-id"
    }
  }
  

No es necesario hacer uso de ambas propiedades, será suficiente con completar una de ellas para obtener el selector necesario en Connectif.

4. (Opcional) Repite los puntos 2 y 3 por cada lugar distinto en la estructura de tu web en la que quieras mostrar un contenido.

 

Para un correcto funcionamiento, cada componente adicional debe tener asignado un identificador diferente que lo distinga.

 

PASO 2. Mostrar el contenido en la web

5. Crea un workflow para mostrar el inline. Recuerda que, como mínimo, deberás hacer uso de un nodo "Enviar contenido web" y configurarlo con la propiedad creada en el punto 3 como selector.

  

Para crear una estrategia que muestre un contenido embebido en VTEX IO, puedes seguir las instrucciones del artículo Insertar un inline en tu eCommerce.

Insertar_un_inline_en_VTEX_IO_-_4.png

 

 
 

 ¡Éxito!
Has llegado al final de la lección.

 


¡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