Le configurazioni sono le proprietà del tema e possono essere create seguendo poche semplici regole ed utilizzate in ogni file del tema.
Per gestire le configurazioni, si utilizza il file config.html che si trova nella cartella Config.
/backoffice/filesystem/edit/your-theme-folder/config/config.html
L'impostazione dei valori si effettua nell'area dedicata:
/backoffice/filesystem/configure/your-theme-folder/config/config.json
Possiamo creare vari tipi di configurazioni:
- testo
- colore
- select semplilci
- select navigation
- gallery
- textarea e ckeditor
Per creare una nuova configurazione è sufficiente creare il corrispondente campo di input direttamente in HTML e assegnare un name a piacere. (Il name deve essere univoco).
Ad ogni configurazione creata, nello specifico campo, va aggiunta la classe config.
L'accesso alle configurazioni create si hanno in qualunque file, tramite la sintassi:
{{ theme.configuration_name }}
dove configuration_name è il nome scelto per la configurazione.
Testo
Esempio di utilizzo dentro HTML:
Frase di benvenuto
{{theme.welcome_text}}
Esempio di utilizzo dentro CSS:
Pixel testo h1
h1 {font-size: {{theme.h1_text_size}}px; }
Colore
Per creare una configurazione colore inserire un campo input text con classe color:
Colore h1
h1 {font-size: {{theme.h1_text_size}}px; color: {{theme.h1_color_size}} }
In questo modo, in automatico verrà generato un tool per la selezione del colore:
Select
Scelta tra più opzioni:
Visualizzazione di default dei prodotti nello shop Griglia Lista
In questo caso possiamo utilizzare la configurazione nell'html:
{% if theme.shop_view == 'list' %}
{% elseif theme.shop_view == 'grid' %}
{% endif %}
Navigation
Aggiungere la classe form-navigation ad una select senza opzioni per visualizzare l'elenco dei menu navigation disponibili:
Menu principale
Il valore delle option sarà l'id che poi servirà per la rappresentazione dei menu nel template
{% set nav = getNavigation({{theme.main_menu}}) %}
Gallery
Inserire un normale campo input di testo a cui aggiungere la classe "form-gallery".
Cliccando sul campo input si aprirà una finestra che permetterà di inserire un'immagine o per selezionarne una già presente.
Il valore memorizzato sarà l'url dell'immagine che potrà essere utilizzato direttamente nell'HTML o nel CSS:
Sfondo body Logo
body {background-image: url({{theme.body_background_image}});}
Textarea e ckeditor
Per ottenere dei campi di testo, si utilizzano textarea (per testo plain) oppure editor piu avanzati, aggiungendo la classe ckeditor alla textarea:
Messaggio benvenuto Messaggio di benvenuto con HTML
Commenti