Centro Assistenza TeamSystem Commerce

Benvenuto,
cerca tra le guide e trova ciò di cui hai bisogno.

Creare ed utilizzare le configurazioni

Segui

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:

<label class="control-label"> Frase di benvenuto </label>
<input type="text" name="welcome_text" value="" class="form-control config" />

<span>{{theme.welcome_text}}</span>

Esempio di utilizzo dentro CSS:

<label class="control-label"> Pixel testo h1 </label>
<input type="text" name="h1_text_size" value="" class="form-control config" /> 

h1 {font-size: {{theme.h1_text_size}}px; }

 

 

Colore

Per creare una configurazione colore inserire un campo input text con classe color:

<label class="control-label"> Colore h1 </label>
<input type="text" name="h1_text_color" value="" class="form-control config color" />

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:

color

 

Select

Scelta tra più opzioni:

<label class="control-label"> Visualizzazione di default dei prodotti nello shop</label>
<select name="shop_view" class="config form-control">
  <option value="grid"> Griglia </option>
  <option value="list"> Lista </option>
</select>

In questo caso possiamo utilizzare la configurazione nell'html:

{% if theme.shop_view == 'list' %}
   <div class="item-list"><!-- item row content --></div>
{% elseif  theme.shop_view == 'grid' %}
   <div class="item-grid"><!-- item cell content --></div>
{% endif %}

 

Navigation

Aggiungere la classe form-navigation ad una select senza opzioni per visualizzare l'elenco dei menu navigation disponibili:

<label class="control-label"> Menu principale </label>
<select name="main_menu" class="config form-control form-navigation"></select>

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:

<label class="control-label"> Sfondo body </label>
<input type="text" name="body_background_image" value="" class="form-control config form-gallery" />
<label class="control-label"> Logo </label>
<input type="text" name="logo" value="" class="form-control config form-gallery" />
<!-- css -->
body {background-image: url({{theme.body_background_image}});}

<!-- html -->
<img src="{{theme.logo}}">

gallery

 

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:

<label> Messaggio benvenuto </label>
<textarea name="welcome_message" class="form-control config"></textarea>
<label> Messaggio di benvenuto con HTML </label>
<textarea name="welcome_advanced_text" class="form-control config ckeditor"></textarea>
Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 0 su 0

Commenti

Non aspettare, inizia subito a vendere con TeamSystem Commerce

Provalo gratuitamente

it