Guida sviluppo temi

Benvenuto nella sezione dedicata
allo sviluppo dei temi Storeden.

I campi di configurazione

Segui

I campi di configurazione servono a definire, in base alle specifiche necessità, dei campi che consentono poi la configurazione del tema. 

I campi di configurazione possono essere molteplici: campi di testo, select, colore, ... ed inoltre possono essere multilingua (dove consentito) e in modalità "light" (al modificare del valore, la preview subisce un aggiornamento parziale). Vedi qui un riepilogo

Un campo di configurazione è così definito, di base, ma poi può avere specificità diverse a seconda del tipo:

  • type: tipo di campo che potrà configurare l'utente o chi sta costruendo il tema
  • id: id univoco all'interno di un gruppo
  • label: etichetta del campo
  • multilang: impostare il valore a "yes" per definire un campo multilingua, non inserire il campo in caso contrario. 
  • light: passando il valore a "no", per i campi che lo consentono (image, text) è possibile forzare il refresh della pagina di configurazione al modificarsi del valore del campo.   
  • options: campo utilizzato solo nel caso in cui si stia creando un campo di tipo "select". 
  • default: valore di default che il campo ha quando si caricano per la prima volta le configurazioni. Sarà necessario salvare affinché il valore di default sia applicato al template. E' un campo di tipo testo, tranne quando si è si fronte ad un campo multilingua, in tal caso sarà un array chiave-valore dove la chiave è il codice ISO della lingua e il valore un valore testuale. 

Vediamo nel dettaglio tutti i tipi di campi di configurazione che si possono creare e utilizzare. 

color

Schermata_2018-11-12_alle_16.29.12.png

Non può essere multilingua. 

{ 
"type" : "color",
"id" : "body_background",
"label" : "Background",
"default" : "#FFF"
}

Valore del campo:

{{ theme.settings.general.colors.body_background }}

Utilizzo nel file theme.style, va usata la funzione theme_value al posto della classica regola CSS. 

{{ theme_value(theme.settings.general.colors.body_background, "settings.general.colors.body_background") }}

Se il campo color è usato in un preset/widget, allora il suo valore deriva dalla variabile:

{{ vars.section.settings }} 

Andrà aggiunto lo style direttamente nel template HTML:

<style>
#section{{vars.section.id}} .heading{
color: {{ vars.section.settings.heading_color }};
}
</style>

yes_no

Schermata_2018-11-12_alle_16.28.46.png

Può essere multilingua. 

{ 
"type" : "yes_no",
"id" : "display_top_message",
"label" : "Display top message",
"default" : "yes",
"multilang" : "yes"
}

Questo campo consente di creare uno switch on/off. Quando selezionato, il valore del campo sarà "yes". 

Se il campo è definito in schema.json: 

Supponendo che questo campo si trovi nell'area Header, nel gruppo Top Message, il valore del campo è:

  • Se i campo non è multilingua: 
    {{ theme.settings.header.display_top_message }}
  • Multilingua, accesso tramite funzione attribute. L'ID del campo sarà seguito da _locale dove locale è la lingua corrente che si sta visualizzando.  
     {{ attribute(theme.settings.header, 'display_top_message_'~locale ) }}

Utilizzo nel template:

{% if attribute(theme.settings.header, 'display_top_message_'~locale ) == 'yes' %}

    ...

{% endif %}

Se il campo è definito in preset.json in un particolare widget, va utilizzato nel file HTML del widget corrispondente e il suo valore è all'interno di: 

{{ var.section.settings }}

pixel

Schermata_2018-11-12_alle_16.54.49.png

{
  "type" : "pixel",
"id" : "heading_font_size",
"label" : "Font size",
"default" : "20"
}

Utilizzo nel file theme.style come regola CSS: 

font-size: {{theme.settings.general.font.heading_font_size }}px;

In un preset/widget, andrà aggiunto lo style direttamente nel template HTML: 

<style>
#section{{vars.section.id}} .heading{
font-size: {{ vars.section.settings.heading_font_size }}px;
}
</style>

number

Viene utilizzato per campi numerici che non devono avere la proprietà light, e generalmente servono a comandare logiche sul template che richiedono il refresh totale della preview del tema. 

Ad esempio, può essere usato nei preset/widget per limitare il numero dei prodotti in primo piano da visualizzare. 

{
  "type" : "number",
"id" : "max_count",
"label" : "Max number of products",
"default" : "4"
}

Esempio di utilizzo in un preset: 

{{ items | slice(0, vars.section.settings.max_count) }}

text

 

textarea

 

editor

 

image

Questo campo consente:

  • l'upload di un file
  • la selezione di un file dalla gallery
  • oppure l'inserimento di un link ad un'immagine
  • la creazione automatica del campo ALT sulla base dell'id del campo immagine

Può essere multilingua, in questo caso il campo TITLE sarà a sua volta multilingua. 

Questo tipo di campo consente la definizione di un link. Non si utilizza un normale campo di testo in quanto:

  • il campo link consente la selezione tra prodotti, categorie, brand, pagine, url, ... 
  • il sistema crea in automatico i campi TITLE, ALT e TARGET sulla base dell'id del campo link 

Può essere multilingua, in questo caso il campo TITLE sarà a sua volta multilingua. 

category

Si tratta di una select compilata dal sistema con la lista delle categorie del negozio. Attenzione: non passare come valori di default ID di categorie, in quanto se il tema viene installato in un negozio diverso, verrà trovato un ID categoria inesistente generando un errore. Questo campo non è multilingua. 

brand

Si tratta di una select compilata dal sistema con la lista dei brand del negozio. Attenzione: non passare come valori di default ID di brand, in quanto se il tema viene installato in un negozio diverso, verrà trovato un ID brand inesistente generando un errore. Questo campo non è multilingua. 

filter

Questo campo serve a consentire la selezione di un filtro (creati in Ecommerce > Filtri) e successivamente di una sua opzione.

Il secondo campo, viene creato in automatico dal sistema in abbinamento all'ID del campo filter principale. 

Schermata_2018-11-12_alle_15.46.32.png

 

select

Questo type identifica una select semplice, in cui dovrete passare anche le opzioni. Può essere multilingua. 

{ 
"type" : "select",
"id" : "basic_font",
"label" : "Font style",
"default" : "Lato, sans serif",
"options" : [
{
"option" : "Raleway, sans-serif",
"label" : "Raleway"
},
{
"option" : "Fira Sans, sans-serif",
"label" : "Fira Sans"
}
...
]

}

navigation

Si tratta di un campo di configurazione necessario per collegare i menu al tema. I menu vanno prima creati in "Ecommerce > Gestione menu" e poi saranno visibili nelle configurazioni del tema per poter essere associati. Si tratta, di fatto, di un campo select a cui il sistema passerà automaticamente la lista dei menu creati nel negozio, se ce ne sono. 

{ 
"type" : "navigation",
"id" : "main_menu",
"label" : "Main menu",
"default" : {},
"multilang": "yes"
}

I menu non sono traducibili, quindi si consiglia di creare sempre questo tipo di campo come multilang, in modo che un utente possa impostare il menu per ciascuna lingua, dopo averli creati nel backoffice. 

 

 

 

 

 

 

 

 

 

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