Inserir um inline no VTEX IO

Connectif permite exibir conteúdos da web personalizados no VTEX IO com alterações mínimas no código e na estrutura do seu eCommerce.

Neste artigo, você aprenderá como inserir conteúdo da Connectif através de um inline no seu VTEX IO.

  

Tempo de implementação: 15 minutos.
Dificuldade: Média
Quando usar: Quando você deseja incluir conteúdo (estático ou dinâmico) no VTEX IO.

  

Para poder usar conteúdo web inline da Connectif no VTEX IO, é essencial fazê-lo através do componente da Connectif especificamente projetado e desenvolvido para o sistema de temas do VTEX IO.

Neste guia da VTEX, você pode conferir como personalizar um tema: Tema da VTEX Store.

 

PASSO 1. Inserir o componente no código

(Nesta seção, coloca-se o componente no lugar adequado à estratégia para exibir o conteúdo).

1. No arquivo "manifest.json" do tema utilizado no seu VTEX IO, adicione a aplicação da Connectif como uma dependência com a versão 1 ou superior.

Inserir_um_inline_no_VTEX_IO_-_1.png

2. Coloque a definição do bloco na posição desejada do código.

 

Em nosso exemplo, o componente foi inserido na página inicial do eCommerce.

Inserir_um_inline_no_VTEX_IO_-_2.png

"store.home": {
"blocks": [
"list-context.image-list#demo",
/* Você pode fazer referências a blocos definidos em outros arquivos.
* Por exemplo, `flex-layout.row#deals` é definido no arquivo `deals.json`. */
"__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. Adicione as propriedades necessárias para identificar o bloco criado.

 

Em nosso exemplo, foram definidas 2 propriedades para o componente:

"classId": Adiciona o texto especificado como classe ao contêiner criado pelo componente.
"elementId": Adiciona o texto especificado como identificador ao contêiner criado pelo componente.

Inserir_um_inline_no_VTEX_IO_-_3.png

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

Não é necessário usar ambas as propriedades, será suficiente preencher uma delas para obter o seletor necessário na Connectif.

4. (Opcional) Repita os passos 2 e 3 para cada local diferente na estrutura do seu site em que deseja exibir um conteúdo.

 

Para um funcionamento correto, cada componente adicional deve ter um identificador diferente atribuído.

 

PASSO 2. Exibir o conteúdo na web

5. Crie um fluxo de trabalho para exibir o inline. Lembre-se de que, no mínimo, você deve usar um nó "Enviar conteúdo da web" e configurá-lo com a propriedade criada no ponto 3 como seletor.

  

Para criar uma estratégia que exiba um conteúdo embutido no VTEX IO, você pode seguir as instruções do artigo Inserir um inline no seu eCommerce.

Inserir_um_inline_no_VTEX_IO_-_4.png

 

 
 

 Sucesso!
Você chegou ao final da lição.

 


Continue aprendendo!

Para aproveitar todo o potencial da sua conta na Connectif, recomendamos continuar com os seguintes artigos:

Esse artigo foi útil?
Usuários que acharam isso útil: 0 de 0