1. Centro assistenza
  2. Integra il tuo Negozio
  3. Integrare per modulo o app
  4. VTEX IO

Insert inline content in VTEX IO

Creato
Aggiornato
Segui

Connectif permette di mostrare contenuti web personalizzati in VTEX IO con modifiche minime al codice e alla struttura del tuo eCommerce.

In questo articolo, imparerai come inserire contenuti di Connectif tramite un inline nel tuo VTEX IO.

  

Tempo di implementazione: 15 minuti.
Difficoltà: Media
Quando utilizzarlo?: Quando vuoi includere contenuti (statici o dinamici) in VTEX IO.

  

Per poter utilizzare contenuti web inline di Connectif in VTEX IO, è essenziale farlo attraverso il componente di Connectif specificamente progettato e sviluppato per il sistema di temi di VTEX IO.

In questa guida di VTEX puoi consultare come personalizzare un tema: VTEX Store Theme.

 

PASSO 1. Inserire il componente nel codice

(In questa sezione il componente viene posizionato nel punto giusto della strategia per mostrare il contenuto).

1. Nel file "manifest.json" del tema utilizzato in VTEX IO, aggiungi come dipendenza l'app di Connectif con una versione 1 o superiore.

Inserire_un_inline_in_VTEX_IO_-_1.png

2. Posiziona la definizione del blocco nella posizione desiderata del codice.

 

Nel nostro esempio, il componente è stato inserito nella home dell'eCommerce.

Inserire_un_inline_in_VTEX_IO_-_2.png

"store.home": {
"blocks": [
"list-context.image-list#demo",
/* Puoi fare riferimento a blocchi definiti in altri file.
* Ad esempio, `flex-layout.row#deals` è definito nel file `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. Aggiungi le proprietà necessarie per identificare il blocco creato.

 

Nel nostro esempio, sono state definite 2 proprietà per il componente:

— "classId": Aggiunge il testo specificato come classe al contenitore creato dal componente.
— "elementId": Aggiunge il testo specificato come identificatore al contenitore creato dal componente.

Inserire_un_inline_in_VTEX_IO_-_3.png

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

Non è necessario utilizzare entrambe le proprietà, è sufficiente completarne una per ottenere il selettore necessario in Connectif.

4. (Opzionale) Ripeti i punti 2 e 3 per ogni posizione diversa nella struttura del tuo sito web in cui desideri mostrare un contenuto.

 

Per un corretto funzionamento, ogni componente aggiuntivo deve avere un identificatore diverso che lo distingua.

 

PASSO 2. Mostrare il contenuto sul sito web

5. Crea un workflow per mostrare l'inline. Ricorda che, come minimo, dovrai utilizzare un nodo "Inviare contenuto web" e configurarlo con la proprietà creata al punto 3 come selettore.

  

Per creare una strategia che mostri un contenuto incorporato in VTEX IO, puoi seguire le istruzioni dell'articolo Inserire un inline nel tuo eCommerce.

Inserire_un_inline_in_VTEX_IO_-_4.png

 

 
 

 Successo!
Hai completato la lezione.

 

Continua a imparare!

Per sfruttare al massimo il potenziale del tuo account su Connectif, ti consigliamo di proseguire con i seguenti articoli: