Un preset è un insieme di configurazioni che definiscono un widget del tema, che è possibile inserire nelle pagine, togliere e spostare e per il quale esiste un corrispondente template .html che ne definisce la struttura. Spesso, ai preset seguono stili CSS o script inseriti in theme.style e script.js
Un preset può quindi rappresentare un insieme di elementi per comporre una gallery, un banner, un paragrafo di testo, ... le possibilità sono vastissime.
I preset/sezioni più comuni sono:
I preset vengono aggiunti alle pagine in sequenza. L'utente può aggiungere quanti preset desidera e spostarli tramite drag&drop.
Per chiarire esattamente cosa sia un preset, supponiamo che nel nostro tema vogliamo rendere disponibile una sezione traducibile in più lingue, con titolo, testo e immagine. La prima cosa da fare è l'aggiunta della definizione del preset al file preset.json, all'interno della voce "presets". Il preset avrà due sottosezioni, una con i testi e una con l'immagine.
"presets":{ ... add your preset here ... }
L'id del nostro preset deve essere univoco all'interno dell'array "presets".
"paragraph":{
"group":"Content",
"label":"Paragraph and image",
"icon":"fa-align-left",
"available" : [],
"settings":[
....
]
}
La chiave "group" serve a raggruppare le sezioni per "argomento", non c'è un elenco predefinito, e arbitrario.
"label" e il nome del preset, quello che vedrà l'utente quando aggiunge o configura la sezione.
"icon" è l'icona di riferimento "available" e una lista di pagine in cui la sezione e attivabile. Se la lista è vuota, è attivabile in tutte le pagine, altrimenti solo in quelle specificate nella lista, ad esempio: ["homepage", "shop"] indica una sezione visibile solo in homepage e nello shop.
"settings" sarà la lista di configurazioni che compongono la sezione. Questo produrrà una nuova sezione nel gruppo Content, quando l'utente clicca su "+ Aggiungi nuova sezione":
Nel nostro caso, vogliamo definire due sotto-gruppi di configurazioni, e procediamo quindi come segue:
Primo sotto-gruppo: titolo (text), testo (editor), link (link), button label (text)
{
"label":"Content",
"fields":[
{
"type":"text",
"id":"title",
"label":"Title",
"multilang":"yes",
"default":{
"it_IT":"Titolo paragrafo",
"en_US":"Paragraph's title",
"es_ES" : "Titulo del parrafo",
"de_DE" : "Absatztitel",
"fr_FR" : "Titre du paragraphe"
}
},
{
"type":"editor",
"id":"content",
"label":"Content",
"multilang":"yes",
"default":
{
....
}
},
{
"type":"link",
"id":"link",
"label":"Link",
"multilang":"yes",
"default": {}
},
{
"type":"text",
"id":"button_label",
"label":"Button link label",
"multilang":"yes",
"default": {
"it_IT":"Leggi tutto",
"en_US":"Read more",
"es_ES" : "Lee mas",
"de_DE" : "Weiterlesen",
"fr_FR" : "Lire tous"
}
}
]
}
Secondo sotto-gruppo: Show image (yes_no), image (image), image alignment (select)
{
"label":"Image",
"fields":[
{
"type":"yes_no",
"id":"image_view",
"label":"Show image",
"multilang":"no",
"default": "yes"
},
{
"type":"image",
"id":"image",
"label":"Image",
"multilang":"no",
"info" : "This image has free sizes",
"default": ""
},
{
"type":"select",
"id":"image_alignment",
"label":"Alignment",
"multilang":"no",
"default": "left",
"options": [
{
"option" : "left",
"label" : "Align to the left"
},
{
"option" : "right",
"label" : "Align to the right"
}
]
}
]
}
Il risultato: due sotto gruppi con i campi configurabili all'interno:
Per poter utilizzare il template e aggiungere la sezione nel sito, è necessario entrare nella sezione modifica html/css del vostro tema, e aggiungere un nuovo template .html. Il nome del file deve essere:
template_[id_del_template].html
Creeremo quindi il file template_paragraph.html
La prima cosa da fare in questo file è definire il contenitore del widget in questo modo:
id="section_{{vars.section.id}}_paragraph"> .... your template content ...
La variable vars.section contiene tutte le impostazioni della sezione creata dall'utente, istanza per istanza.
- vars.sections.settings: tutte le configurazioni, da usare allo stesso modo di theme.settings.general.colors.basic_text_color
- vars.sections.id: l'id dell'istanza della sezione (ogni utente puo inserire quante istanze vuole per ogni sezione)
- vars.layout: solitamente e definito dalla pagina "contenitore" e può essere vuoto (per fullscreen) o "container" (centrato). Può in alternativa essere sostituita utilizzando le configurazioni della sezione (vedere come esempio il preset image_slider )
Per capire meglio, aprire homepage.html, notare come vengono incluse le sezioni:
{% set page_sections = attribute(theme_sections, 'homepage')%} {% for section in page_sections %} {% set vars = { 'section': section, 'layout' : 'container' } %} {% include section.template with vars %} {% endfor %}
Una sola lista di sezione può essere inserita in una pagina.
Tornando al file template_paragraph.html, non ci resta che utilizzare i campi di configurazione, come visto nella sezione precedete, e creare il contenuto.
Il contenuto sarà sempre quello dell'istanza corrente della sezione.
Ad esempio, riportiamo il titolo e il testo del contenuto:
data-editor="{{vars.section.data_editor}}_title_{{locale}}"> {{attribute(vars.section.settings, 'title_'~locale)}}{{attribute(vars.section.settings, 'content_'~locale)|raw}}
Attenzione, l'attributo data-editor è fondamentale per poter utilizzare i campi di tipo "light" nei widget, in quando il sistema deve recuperare il puntamento delle modifiche.
Per i campi multilingua, si utilizza sempre la funzione attribute(array, key), e in questo caso l'array di partenza sarà sempre vars.section.settings cioè i valori salvati per l'istanza della sezione corrente.
Il preset del tema configurato in quel modo produce paragrafi di questo tipo: con/senza immagine, immagine a destra o sinistra.
Commenti