Guida sviluppo temi

Benvenuto nella sezione dedicata
allo sviluppo dei temi Storeden.

Creare e modificare i widget: preset.json

Segui

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: 

Schermata 2017-04-07 alle 17.20.47

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": 

Schermata 2017-04-07 alle 17.03.37

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: 

Schermata 2017-04-07 alle 17.06.16

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:

<section class="section template_paragraph" 
id="section_{{vars.section.id}}_paragraph">          <div class="{{vars.layout}}"> .... your template content ...          </div> </section>

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:

<div id="section-container">
    {% set page_sections = attribute(theme_sections, 'homepage')%}
    {% for section in page_sections  %}
        {% set vars = { 'section': section, 'layout' : 'container' } %}
        {% include section.template with vars %}
    {% endfor %}
</div>

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:

<div data-editor="{{vars.section.data_editor}}_title_{{locale}}">
    {{attribute(vars.section.settings, 'title_'~locale)}}
</div>
<div data-editor="{{vars.section.data_editor}}_content_{{locale}}">
    {{attribute(vars.section.settings, 'content_'~locale)|raw}}
</div>

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. 

Schermata 2017-04-07 alle 17.23.20

Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 0 su 0

Commenti

Questa è una guida per gli sviluppatori

Se hai bisogno di aiuto per configurare il tuo tema

Visita questa sezione
Powered by Zendesk