In aggiunta alle variabili globali, potete definire delle vostre variabili il cui valore potrà essere impostato nel gestionale senza dover intervenire sul codice sorgente del template. Le chiamiamo "variabili" ma nel template sono definite come campi di una struttura accessibile tramite la varibile editor. Maggiori dettagli a seguire.
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.
Vogliamo un modo semplice per poter mostrare o nascondere le promozioni sulla home page del negozio ogni volta che si desidera.
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
},
…
]
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:
Nel template la si potrà usare nel seguente modo:
{% if editor.ShowPromotions %}
{% for promotion in promotions %}
...
{% end for %}
{% end if %}
Quindi le pagine del sito potranno cambiare di consegunza al valore impostato nel gestionale.
Il nome di una variabile personalizzata deve avere la prima lettera maiscola altrimenti non ci si potrà accedere dal template. Siccome nel template è propriamente definita come campo di una struttura, per accederci bisogna far precedere il nome con "editor.".
I seguenti sono i campi che si possono utilizzare nel definire una variabile personalizzata nel file editor.json.
| Campo | Descrizione |
|---|---|
"name" |
Nome. Deve iniziare con una lettera maiuscola e non devono essere presenti più variabili con 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 |
I seguenti sono tipi delle variabile personalizzate con i possibili campi per ogni tipo e in colore grigio i campi facoltativi.
texteditor.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" : ""
}, … ],
textareaeditor.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"
}, … ],
checkboxeditor.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
}, … ],
radioeditor.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"
}, … ],
selecteditor.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"
}, … ],
imageeditor.json"variables" : [ … {
"name" : "CreditCardLogos",
"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"
}, … ],