Smart Element

E gli smart element?

Lo smart element è una struttura, un box o un full width nel quale sono presenti gli elementi di base, come l’immagine, il testo, il pulsante e simili. La caratteristica principale degli smart element è che il loro contenuto (immagine, testo, pulsante, ecc.) non si imposta nell’editor, ma viene copiato direttamente dal sito web o negozio online.

Bisogna impostare il contenuto con il titolo del prodotto, l’immagine, il prezzo, la descrizione, ecc. solo la prima volta, successivamente basta inserire il collegamento (URL) alla pagina web dalla quale verranno copiati i dati.

Con questo strumento, riuscirai a creare 3 schede prodotto più velocemente, risparmiando molto tempo, perché dovrai inserire solo 3 diversi collegamenti – il resto verrà fatto dal sistema!


Ma vediamo tutti i vantaggi dello smart element con un esempio.

Come creare uno smart box per una scheda prodotto

Per il negozio online MUDANDSNOW hai deciso di creare una scheda prodotto che contiene 6 elementi, e cioè l’immagine, il nome del prodotto, il prezzo precedente e quello nuovo.

  1. Innanzitutto devi aggiungere nell’editor una struttura con tre colonne (box).
  2. Inserisci poi nel primo box gli elementi di cui hai bisogno (immagine, due elementi di testo e un pulsante) – per costruire così lo «scheletro» della scheda prodotto.

  1. Scegli il box con gli elementi (clicca sul simbolo blu in alto a destra, dove c’è scritto “Box“), nell’editor a destra seleziona la scheda “Dati” e clicca sul pulsante “Inizia” per attivare le caratteristiche degli Smart element.

 

Appare l’editor, nel quale puoi:

  • Configurare tutte le regole per ottenere i valori – regole che verranno poi usate tramite le variabili negli elementi desiderati all’interno della tua newsletter. Utilizza la scheda «Configurazione»;
  • Esaminare e adattare manualmente (se desideri) i valori ottenuti delle variabili configurate dal sito web nella scheda «Aspetto».

 

  1. Continua aggiungendo le variabili.

Una volta attivata la caratteristica smart per uno degli elementi, verrà creata come predefinita una variabile URL (che non è possibile cancellare).

 

Cliccando sull’icona per aggiungere le variabili (pulsante +) farai apparire la lista di quelle più popolari relative ai Prodotti o al Blog.

 

Visto che vuoi creare una scheda con l’immagine, il nome dell’articolo, il prezzo precedente e quello nuovo, dovrai aggiungere (dalla sezione Prodotto) le seguenti variabili:

  • Immagine
  • Nome
  • Prezzo

 

Hai quindi bisogno di  tre variabili.

Per creare una nuova variabile scegli l’ultima opzione – Variabile.

 

Una volta creata la nuova variabile dovrai contrassegnarla e darle un nome.

 

Inserisci quindi il tag della variabile (p.es. p_image, e il nome della variabile (p.es. Immagine).

 

 

 

Dopodichè avrai bisogno della variabile per il nome dl prodotto. Inserisci quindi il tag della variabile (p.es. p_name, e il nome della variabile (p.es. Product name).

 

Ora hai bisogno dell’ultima variabile per il prezzo – scegli nuovamente l’ultima opzione (Variabile) e aggiungile un tag (p.es p_price), e il nome (p.es. Price).

 

 

  1. Andiamo avanti con la configurazione delle variabili.

È necessario configurare le regole per ottenere i valori delle variabili che hai aggiunto e utilizzarle nel tuo smart element.

Per poterlo fare vai alla sezione Regole di corrispondenza, composta da due schede:

  • Interne – Qui vengono determinate le regole (selettore CSS), dove vengono utilizzati i valori già ottenuti delle variabili nel tuo smart element della newsletter.
  • Esterne – Qui invece vengono determinate le regole (selettore CSS), dalle quali si ottengono i valori delle variabili dal sito web o negozio online.

 

Le regole per ogni scheda vengono configurate tramite il meccanismo di ricerca standard degli elementi HTML tramite i selettori CSS e attributi. Per saperne di più clicca qui.

 

Vediamo in dettaglio come impostare ogni variabile del nostro esempio.

 

1. Variabile URL

Questa variabile appartiene al campo «Pagina dinamica», disattivato come predefinito.

 

Se la pagina web, dalla quale desideri ottenere i valori per le varabili degli smart element, è una pagina dinamica (viene caricata solo tramite JavaScript) – clicca questo campo per attivarlo. Una volta attivato diventerà di colore blu.

 

 Per saperne di più su che cos’è una pagina dinamica, clicca qui o sull’icona con il punto di domanda nell’editor.

 

Visto che hai bisogno del collegamento alla pagina web o al negozio online nello smart element, nella scheda «Regole interne» precisa che il valore della variabile è impostato per tutti gli elementi:

Selettore CSS dell’elemento 1: a

Attributo: href

 

Per la variabile URL l’opzione «Regole esterne» non è disponibile, perché il collegamento alla pagina web è la fonte per ottenere i dati.

 

2. Variabile per l’Immagine del prodotto

Continuiamo con la regola per ottenere i valori per l’immagine del prodotto.

  1. Comincia con la Regola esterna.

Per ottenere i valori di cui hai bisogno, vai prima sulla pagina web dove si trova il prodotto.

Posiziona il mouse sull’immagine, clicca con il tasto destro e scegli «Ispeziona elemento» (o in certi browser «Controlla» / «Inspect»).


Si apre una console nella quale si trova il selettore CSS con gli attributi.

 

In questo caso la regola per ottenere l’immagine è:

Selettore CSS dell’elemento 1: #cloud_zoom img

Attributo: src

  

*Se il collegamento non è assoluto (cioè non comincia con «http://…»), ma è relativo (comincia con «/…»), quando come variabile viene aggiunta anche l’immagine, dovrai aggiungere anche il modificatore.

 

  • Clicca sul pulsante + Aggiungi modificatore.
  • Nel campo Modificatore 1 aggiungi il simbolo ^
  • Nel campo Sostituzione inserisci la pagina web iniziale del negozio (p.es. https://mudandsnow.com).
  • Indica anche che si tratta di una Sostituzione globale.

 

Ora hai impostato le Regole esterne per ottenere l’immagine da un indirizzo web.

 

  1. Continua con la Regola interna.

Nella scheda Regola interna determina:

Selettore CSS dell’elemento 1: #cloud_zoom

Attributo: src

 

Grazie a questa regola il valore ottenuto dell’immagine verrà utilizzato per l’attributo “src”, che si trova nell’elemento “Immagine”.

 

3. Variabile per il Nome del prodotto

Andiamo avanti con la regola per ottenere i valori per il Nome del prodotto.

  1. Regola esterna

Per ottenere il valore di cui hai bisogno, vai nuovamente alla pagina web dove si trova questo prodotto.

Posiziona il mouse sul nome del prodotto, clicca con il tasto destro e scegli «Ispeziona elemento» (o in certi browser «Controlla» / «Inspect»).

 

Si apre una console nella quale si trova il selettore CSS con gli attributi.

 

In questo caso la Regola esterna per ottenere il nome del prodotto è:

Selettore CSS: .product-name

Attributo: (lascia il campo vuoto)

 

Ora hai impostato le Regole esterne per ottenere il Nome/titolo dal sito web.

 

  1. Continua con la Regola interna.

Nella scheda Regole interne determina:

Selettore CSS dell’elemento 1: #product-name

Attributo: (lascia il campo vuoto)

 

4. Variabile per il Prezzo del prodotto

Proseguiamo con la regola per ottenere i valori per il Prezzo del prodotto.

  1. Regola esterna

Per ottenere i valori di cui hai bisogno, devi andare nuovamente alla pagina web dove si trova il prodotto.

Posiziona il mouse sul prezzo del prodotto, clicca con il tasto destro e scegli «Ispeziona elemento» (o in certi browser «Controlla» / «Inspect»).

  

Si apre una console nella quale si trova il selettore CSS con gli attributi.

In questo caso la regola per ottenere il prezzo è:

Selettore CSS: .price

Attributo: (lascia il campo vuoto)

 

Ora hai impostato le Regole esterne per ottenere il Prezzo dal sito web.

 

  1. Continua con la Regola interna.

Nella scheda Regole interne determina:

Selettore CSS dell’elemento 1: #price-box

Attributo: (lascia il campo vuoto)

 

Mettere in ordine gli elementi

Ora che hai impostato tutte le regole per poter ottenere i dati dal sito web, è tempo di mettere in ordine gli elementi nella tua scheda prodotto.

Imposta quindi i margini, l’allineamento, il colore, le dimensioni, il tipo di testo e tutti gli altri elementi.

Aggiungere i selettori CSS dell’elemento nel codice HTML

A tutti gli elementi che userai nella tua scheda prodotto, hai aggiunto le Regole interne corrispondenti.

Perciò bisogna aggiungere nel codice HTML della tua scheda prodotto i selettori CSS dell’elemento che hai determinato nel passaggio precedente.

  • Se il selettore CSS dell’elemento è preceduto dal simbolo del cancelletto (#), allora inserisci direttamente la scritta id.
  • Se invece prima del selettore CSS dell’elemento hai inserito il punto (.), devi aggiungere al tuo codice la scritta class.

 

Segnala quindi il tuo Smart box e in alto scegli Editor del codice HTML.

  

 Codice HTML con i tuoi elementi:

 

Codice HTML con i selettori CSS dell’elemento aggiunti:

Aggiungere il collegamento al prodotto

Una volta aggiunti i selettori CSS degli elementi per le regole interne corrispondenti, puoi cominciare ad aggiungere il collegamento al prodotto.

 

Una volta aggiunto il collegamento, tutti i dati desiderati verranno scaricati con l’aiuto dei selettori CSS e degli attributi.

 

Per finire, elabora il design della tua scheda prodotto ed ecco che è già pronta all’uso.

 

Altre schede prodotto

Una volta pronta la tua scheda prodotto, crearne delle altre è facilisimo:

  • Seleziona il tuo Smart box
  • Scegli l’opzione Copia
  • Trascina l’elemento copiato nel box accanto
  • Clicca sullo Smart box
  • Nell’editor sulla destra inserisci il collegamento ad un altro prodotto
  • Aspetta qualche minuto per permettere al sistema di ottenere i nuovi valori

 

Elabora il design della nuova scheda ed eccola pronta.

 

Una volta pronta la struttura con le tue tre schede prodotto, la cosa migliore sarebbe salvare la struttura che potrai utilizzare ed adattare successivamente per qualsiasi newsletter.