Variabili personalizzate
In aggiunta alle variabili predefinite, potete definire delle vostre variabili il cui valore potrà essere impostato nel gestionale senza dover intervenire sul codice sorgente del template.
Le variabili personalizzate si definiscono nel file editor.json, nella cartella del template, e avranno un nome univoco da voi scelto, un tipo ( ad esempio checkbox, text ecc.. ), una etichetta e delle note che serviranno per costruire l'interfaccia nel gestionale tramite la quale cambiarne il valore. Oltre a queste proprietà ne sono presenti altre che variano in base al tipo assegnato alla variabile.
Esempio
Vogliamo un modo semplice per poter mostrare o nascondere le promozioni sulla home page del negozio ogni volta che si desidera.
Definire la variabile
Nel file editor.json si potrà ad esempio definire una nuova variabile chiamata showPromotions di tipo checkbox con valore predefinito true e con una etichetta in inglese e in italiano:
"variables": [
…
{
"name" : "showPromotions",
"type" : "checkbox",
"label" : {
"en" : "Display promotions on the home page",
"it" : "Mostra le promozioni sulla home page"
},
"default" : true
},
…
]
Impostarne un valore
L'interfaccia nel gestionale si costruisce da sola in base alle variabili personalizzate che sono state definite. Quindi nel gestionale se ne potrà impostare un valore e cambiarlo ogni volta che si desidera:
Usarla nel template
Nel template la si potrà usare, in questo esempio solamente sulla home page, nel seguente modo:
<!-- .if editor.showPromotions -->
<!-- .show promotions -->
...
<!-- .end -->
<!-- .end if -->
Quindi le pagine del sito potranno cambiare di consegunza al valore impostato nel gestionale.
Si noti che il nome di una variabile personalizzata, quando usato nel template, deve essere sempre preceduto da "editor." perché si possa distinguere dalle variabili predefinite.
Campi
I seguenti sono i campi che si possono utilizzare nel definire una variabile personalizzata nel file editor.json.
| Campo | Descrizione |
|---|---|
"name" |
Nome. Non devono essere presenti più variabili con lo stesso nome. Il nome è case insensitive, ad esempio "welcome" e "Welcome" sono considerati lo stesso nome |
"type" |
Tipo. Può essere "text", "textarea", "checkbox", "radio", "select" o "image"
|
"label" |
Etichetta con la traduzione per ogni lingua del gestionale. Viene mostrata nel gestionale per descrivere brevemente il campo |
"description" |
Descrizione della variabile. Viene mostrata nel gestionale |
"placeholder" |
Placeholder. Se la variabile è multi lingua allora dovrebbe essere presente la traduzione per ogni lingua del sito |
"isMultiLanguage" |
Indica se i valori variano in base alla lingua del sito |
"groups" |
Gruppi di opzioni. Usato solo per il tipo "select" ed è facoltativo. Nel campo "group" nelle opzioni è possibile indicare l'indice del gruppo in cui mostare l'opzione |
"options" |
Opzioni possibili. Richiesto per i tipi "radio" e "select"
|
"default" |
Valore di default. Non è significativo se "isMultiLanguage" è uguale a true. Per le variabili "radio" e "select" se presente deve essere uguale al valore di una delle opzioni. Per le variabili "image" se presente è l'indirizzo dell'immagine nella forma "https://www.domain.com/image.jpg" o "/image.jpg" se l'immagine è nella cartella del template |
Tipi di variabili personalizzate
I seguenti sono tipi delle variabile personalizzate con i possibili campi per ogni tipo e in colore grigio i campi facoltativi.
text
editor.json
"variables" : [ … {
"name" : "welcome",
"type" : "text",
"label" : {
"en" : "Welcome message",
"it" : "Messaggio di benvenuto"
},
"description" : {
"en" : "Welcome message to show when the customer is logged",
"it" : "Messaggio di benvenuto da mostare quanto il cliente è loggato"
},
"placeholder" : {
"en" : "Welcome",
"it" : "Benvenuto",
"es" : "Bienvenido"
},
"isMultiLanguage" : true,
"default" : ""
}, … ],
textarea
editor.json
"variables" : [ … {
"name" : "welcome",
"type" : "textarea",
"label" : {
"en" : "Welcome message",
"it" : "Messaggio di benvenuto"
},
"description" : {
"en" : "Welcome message to show when the customer is logged",
"it" : "Messaggio di benvenuto da mostare quanto il cliente è loggato"
},
"placeholder" : "Benvenuto",
"isMultiLanguage" : false,
"default" : "Benvenuto sul nostro sito"
}, … ],
checkbox
editor.json
"variables" : [ … {
"name" : "showPromotions",
"type" : "checkbox",
"label" : {
"en" : "Display promotions on the home page",
"it" : "Mostra le promozioni sulla home page"
},
"description" : {
"en" : "Indicates whatever display the promotions on the home page",
"it" : "Indica se mostrare le promozioni sulla home page"
},
"default" : true
}, … ],
radio
editor.json
"variables" : [ … {
"name" : "align",
"type" : "radio",
"label" : {
"en" : "Image align",
"it" : "Allineamento immagine"
},
"description" : {
"en" : "Choose whether to align the images to the left, center or to the right",
"it" : "Scegliere se allineare le immagini a sinistra, al centro o a destra"
},
"options" : [ {
"label" : {
"en" : "Left",
"it" : "Sinistra"
},
"value" : "left"
}, … ],
"default" : "left"
}, … ],
select
editor.json
"variables" : [ … {
"name" : "color",
"type" : "select",
"label" : {
"en" : "Color",
"it" : "Colore"
},
"description" : {
"en" : "Color of page title",
"it" : "Colore del titolo della pagina"
},
"groups" : [ {
"label" : {
"en" : "Reds",
"it" : "Rossi"
}
}, … ],
"options" : [ {
"label" : {
"en" : "Tomato",
"it" : "Pomodoro"
},
"value" : "#FF6347",
"group" : 0
}, … ],
"default" : "#FF6347"
}, … ],
image
editor.json
"variables" : [ … {
"name" : "showPromotions",
"type" : "image",
"label" : {
"en" : "Credit card logos",
"it" : "Loghi carte di credito"
},
"description" : {
"en" : "Image for credit cart logos",
"it" : "Immagine per i loghi delle carte di credito"
},
"default" : "/images/credit-cards.png"
}, … ],