Startseite > Template- und Themeprogrammierung > Theme-Einstellungen

Theme-Einstellungen

Um dem Shopbetreiber eine einfache Möglichkeit zum Ändern der Einstellungen des Themes an die Hand zu geben,
gibt es die Möglichkeit im settings-Verzeichnis eine settings_schema.json anzulegen um die Einstellungen in der settings_data.json innerhalb des KEY "current" über das globale Objekt settings zur Verfügung zu stellen.

<code-block>
 -- settings
    >-- settings_schema.json
    >-- settings_data.json
</code-block>

Unterschied settings_data / settings_schema:

settings_data.json enthält die Daten, die in oSM vom Shop-Betreiber in den Einstellungen des Themes konfiguriert wurden, als flache Struktur.
Hierbei werden die IDs innerhalb der settings_schema.json als KEY verwendet

<code-block>{
  "current": {
    "cart_add_redirect": false,
    "link_domain" : "http://.....",
      .....
 }
}</code-block>


Die settings_schema.json enthält die Konfiguration, welche und wie der Shop-Betreiber diese Daten einstellen kann bzw. zu Gesicht bekommt.
Hierbei kann der Theme-Programmierer bestimmte Widgets definieren, die dem Shopbetreiber in oSM zur Verfügung gestellt werden um bestimmte Einstellungen des Themes zu ändern.
Nachfolgend sollen hier die Einstellungen aufgelistet werden, die in der settings_schema.json angegeben werden können.

Dabei ist zu beachten, dass die settings_schema.json als ein Array von Objekten definiert werden muss.
Ein Objekt muss dabei in der obersten Ebene mindestens einen KEY "name" besitzen.

<code-block>
[{
 "name": "",
 .....
},{
 "name": "",
 .....
}]
</code-block>

 

Theme Informationen

Um dem Shopbetreiber einige Theme Metadaten (wie z.B. Theme-Name, Dokumentations-URL, Autor, Email, ...) anzuzeigen,
ist ein Objekt mit dem folgenden KEY/VALUE erforderlich:

"name": "theme_info"

Damit wird das Objekt als Theme-Information kenntlich gemacht und folgende KEYs können in diesem Objekt definiert werden:

  • theme_name
  • theme_author
  • theme_version
  • theme_documentation_url
  • theme_support_email

Dieses Objekt ist optional und kann dem Shopbetreiber Meta-Information über das Theme bereitstellen, falls der Theme-Programmierer dies möchte.

Beispiel:

<code-block>[{
    "name"                   : "theme_info",
    "theme_name"             : "Default Theme",
    "theme_author"           : "orbiz",
    "theme_version"          : "1.0.0",
    "theme_documentation_url": "https:\/\/orbiz.com",
    "theme_support_email"    : "thememanager@email.com"
 }]</code-block>

Gruppen

Um die einzelnen Einstellungen in Gruppen zu untergliedern ist es erfoderlich in der obersten Ebene ein Objekt mit einem "name" - KEY anzulegen.
Als VALUE sollte nun die Gruppenbezeichnung als String eingetragen werden.

In dem Objekt sollte ein "settings" - KEY vorhanden sein, der als VALUE ein Array von Objekten enthält.
In diesem Array werden nun die einzelnen Widgets und die Struktur/Sortierung definiert, die diese Gruppe enthält.

Optional: Gruppen-Icon
Optional kann ein "icon"- KEY mit einem VALUE von einer font-awesome-Bezeichnung oder einer Data-URI hinterlegt werden.
Falls kein "icon"-KEY verwendet wird, wird ein passendes Default-font-awesome-Icon hinzugefügt.
Möchte man diesen Fallback unterbinden, so kann als "icon"-VALUE ein Leerstring ("") angegeben werden.
Genauere Infos siehe weiter unten in der Attributs-Beschreibung

Optional: osm sprachabhängiger Gruppenname
Optional kann auch ein osm sprachabhängiger Gruppenname hinterlegt werden.
Dieser wird verwendet, wenn der osm-Benutzer sich mit Deutsch oder Englisch als osm-Sprache einloggt. Damit kann eine Gruppe - je nach oSM Sprache - angedruckt werden.
Hierbei muss lediglich ein zusätzliches Attribut: name_en oder name_de mit dem jeweiligen Gruppentext in dieser Sprache hinterlegt werden.
Wird der KEY nicht gefunden, wird der default KEY name herangezogen.
Es wird empfohlen den KEY name in Englisch zu verfassen und einen zusätzlichen KEY name_de für Deutsch zu hinterlegen.
Folgender Vorteil: Falls jemals eine neue Sprache für oSM hinzukäme, würde es auf jedenfall einen Fallback nach Englisch geben.

Optional: PDF-View
Die folgenden optionalen PDF-View Attribute können der Gruppe hinzugefügt werden und bewirken beim Betreten der Gruppe (Klick)
ein Wechsel in die PDF-Ansicht (Auftrags-PDF, Rechungs-PDF, ...), bzw. in die Web-Ansicht, falls nichts konfiguriert ist (default) oder false angegeben wird.

  • pdf_view  [Otional] : true -> Wechselt in die PDF-Ansicht
  • pdf_type [Optional] : [PDF-Type-ID] - Wechselt in das jeweilige PDF (Auftrag, Rechung, Lieferung, ... -PDF)
    Mögliche PDF-Type-ID-Werte:
    • 1: Auftrags-PDF
    • 2: Lieferungs-PDF
    • 3: Rechungs-PDF
    • 4: Gutschrift-PDF
    • 100: Stornobeleg (Rechnung)
    • 100: Stornobeleg (Gutschrift)

Beispiel einer Gruppe "Global settings", die eine Widget "Selectionbox" enthält, die drei Werte zur Auswahl anbietet:

<code-block>[{
  "name"    : "Global settings",
  "name_de" : "Globale Einstellungen"
  "settings": [{
    "type"   : "select",
    "id"     : "products_per_page",
    "label"  : "Products per page",
    "default": 12,
    "options": [
      { "value": 8,  "label": "8 products" },
      { "value": 12, "label": "12 products"},
      { "value": 16, "label": "16 products"}
    ]
  }]
}]</code-block>

Beispiel von Gruppen:

<code-block>[{
   "name" : "Search",
   "name_de" : "Suche",
   "settings": [{
   .....
   }]
},{
   "name" : "FavIcon",
   "settings": [{
   .....
   }]
},{
   "name" : "Logo",
   "settings": [{
   .....
   }]
},{
   "name" : "Social Media",
   "name_de" : "Soziale Medien",
   "settings": [{
   .....
   }]
}]</code-block>

Output in oSM:

Sub-Gruppen

Innerhalb einer Gruppe können die Widgets noch einmal mit einer umrandeten Box mit einer Überschrift gruppiert werden.

Dies erfolg durch eine einfache Konfigurations-Struktur (type: "header") und wird durch den nächsten "Header" getrennt.

Optional: Gruppen-Icon
Optional kann ein "icon"- KEY mit einem VALUE von einer font-awesome-Bezeichnung oder einer Data-URI hinterlegt werden.
Falls kein "icon"-KEY verwendet wird, wird ein passendes Default-font-awesome-Icon hinzugefügt.
Möchte man diesen Fallback unterbinden, so kann als "icon"-VALUE ein Leerstring ("") angegeben werden.
Genauere Infos siehe weiter unten in der Attributs-Beschreibung

Optional: osm sprachabhängiger Subgruppenname
Optional kann auch ein osm sprachabhängiger Subgruppenname hinterlegt werden.
Dieser wird verwendet, wenn der osm-Benutzer sich mit Deutsch oder Englisch als osm-Sprache einloggt. Damit kann eine Gruppe - je nach oSM Sprache - angedruckt werden.
Hierbei muss lediglich ein zusätzliches Attribut: content_en oder content_de mit dem jeweiligen Subgruppentext in dieser Sprache hinterlegt werden.
Wird der KEY nicht gefunden, wird der default KEY content herangezogen.
Es wird empfohlen den KEY content in Englisch zu verfassen und einen zusätzlichen KEY content_de für Deutsch zu hinterlegen.
Folgender Vorteil: Falls jemals eine neue Sprache für oSM hinzukäme, würde es auf jedenfall einen Fallback nach Englisch geben.

Optional: PDF-View
Die folgenden optionalen PDF-View Attribute können der Sub-Gruppe hinzugefügt werden und bewirken beim Ausklappen der Sub-Gruppe
ein Wechsel in die PDF-Ansicht (Auftrags-PDF, Rechungs-PDF, ...), bzw. in die Web-Ansicht, falls nichts konfiguriert ist (default) oder false angegeben wird.

  • pdf_view  [Otional] : true -> Wechselt in die PDF-Ansicht
  • pdf_type [Optional] : [PDF-Type-ID] - Wechselt in das jeweilige PDF (Auftrag, Rechung, Lieferung, ... -PDF)
    Mögliche PDF-Type-ID-Werte:
    • 1: Auftrags-PDF
    • 2: Lieferungs-PDF
    • 3: Rechungs-PDF
    • 4: Gutschrift-PDF
    • 100: Stornobeleg (Rechnung)
    • 100: Stornobeleg (Gutschrift)

<code-block>{
    "type"     : "header",
    "content": "Default-Layout",
    "content_de": "Standard-Layout"
},{
 .......
}</code-block>

Output in oSM:

Attribute

Um einzlene Widgets zu erzeugen, sollten die nachfolgende KEYs innerhalb eines Objekts im settings-Array berücksichtigt werden:

  • type  [Pflicht] : Widget Typ
  • id [Pflicht] : Eindeutige Kennung.
    Wird im liquid-template innerhalb von settings verwendet.
  • label [Pflicht] : Bezeichner/Feld-Label für das Widget Feld
    • [Optional] kann auch ein osm sprachabhängiges Label hinterlegt werden.
      label_de bzw. label_en:
      Dieser wird verwendet, wenn der osm-Benutzer sich mit Deutsch oder Englisch als osm-Sprache einloggt.
      Damit kann ein Label - je nach oSM Sprache - angedruckt werden.
      Wird der KEY nicht gefunden, wird der default KEY label herangezogen.
      Es wird empfohlen den KEY label in Englisch zu verfassen und einen zusätzlichen KEY label_de für Deutsch zu hinterlegen.
      Folgender Vorteil: Falls jemals eine neue Sprache für oSM hinzukäme, würde es auf jedenfall einen Fallback nach Englisch geben.
  • default [Optional] : Standard-Wert für dieses Feld, falls keine Änderung durchgeführt wird.
  • info [Optional] : Tooltip-Info-Icon wird hinter dem Label angezeigt. Bei einem "mouse-over" wird der Text eingeblendet.
    Ein Beispiel kann unter Textfeld eingesehen werden
    • [Optional] kann auch ein osm sprachabhängiger Info-Text hinterlegt werden.
      info_de bzw. info_en:
      Dieser wird verwendet, wenn der osm-Benutzer sich mit Deutsch oder Englisch als osm-Sprache einloggt.
      Damit kann ein Info-Text - je nach oSM Sprache - angedruckt werden.
      Wird der KEY nicht gefunden, wird der der default KEY info herangezogen.
      Es wird empfohlen den KEY info in Englisch zu verfassen und einen zusätzlichen KEY info_de für Deutsch zu hinterlegen.
      Folgender Vorteil: Falls jemals eine neue Sprache für oSM hinzukäme, würde es auf jedenfall einen Fallback nach Englisch geben.
  • icon [Optional] : Es kann ein Icon auf allen Ebenen zu einem Label hinzugefügt werden.
    z.B. Gruppe, Sub-Gruppe, Widget-Label, Selectionbox-Values, ...
    Falls kein "icon" in den Gruppen/Sub-Gruppen hinterlegt ist, wird ein default-font-awesome Icon verwendet.
    Um diesen Fallback zu unterdrücken kann ein Leerstring ("") dem icon-Attribut zugewiesen werden.
    Der Icon-Value kann entweder eine

 

Die folgenden optionale PDF-View Attribute gelten für alle Widget-Typen und bewirken ein Wechsel in die PDF-Ansicht (Auftrags-PDF, Rechungs-PDF, ...):

  • pdf_view  [Otional] : true -> Wechselt bei Änderung des Widgets in die PDF-Ansicht und aktualisiert dort die Werte
  • pdf_type [Optional] : [PDF-Type-ID] - Wechselt in das jeweilige PDF (Auftrag, Rechung, Lieferung, ... -PDF) bei einer Änderung des Widgets.
    Mögliche PDF-Type-ID-Werte:
    • 1: Auftrags-PDF
    • 2: Lieferungs-PDF
    • 3: Rechungs-PDF
    • 4: Gutschrift-PDF
    • 100: Stornobeleg (Rechnung)
    • 100: Stornobeleg (Gutschrift)

Types

Folgende Widget-Typen werden unterstützt und können als "type" in einem Objekt definiert werden:

 

Textfeld ( "type": "text" )

Das Type "text" erzeugt ein einzeiliges Textfeld, in das beliebiger Text eingeben werden kann.

Folgende KEYs können optional in der JSON-Konfiguration hinzugefügt werden:

  • min [Optional] : Minimale Textlänge, die dieser Textfeld annehmen darf.
    Wird dieser Wert unterschritten wird das Feld rot markiert und der Wert wird nicht gespeichert.
    Falls ein Wert angegeben ist und dieser größer als 0 ist, wird das Textfeld zu einem Pflichtfeld und der Wert darin kann nicht entfernt werden.
    Falls nicht angegeben wird ein Wert von 0 verwendet.
  • max [Optional] : Maximale Textlänge, die dieser Textfeld annehmen darf.
    Wird dieser Wert überschritten wird das Feld rot markiert und der Wert wird nicht gespeichert.
    Falls nicht angegeben wird ein Wert "Unendlich" verwendet.

<code-block>{
  "type"    : "text",
  "id"      : "textfield",
  "label"   : "Text",
  "label_de": "Text",
  "default" : "ABC",
  "info"    : "<div>Tooltip Text<br/><b>HTML available</b></div>",
  "max"     : 100
}</code-block>

Widget-Output in oSM:

Verwendung im liquid-Template:
<code-block>
{{ settings.textfield }}
</code-block>

Output des Beispiels im liquid-Template:
<code-block>
ABC
</code-block>

Nummernfeld ( "type": "number" )

Das Type "number" erzeugt ein Nummernfeld, in das eine Zahl eingeben werden kann.

Folgende KEYs können optional in der JSON-Konfiguration hinzugefügt werden:

  • min [Optional] : Minimaler Nummernwert, die dieser Nummernfeld annehmen darf.
    Wird dieser Wert unterschritten wird das Feld rot markiert und der Wert wird nicht gespeichert.
    Falls ein Wert angegeben ist und dieser größer als 0 ist, wird das Textfeld zu einem Pflichtfeld und der Wert darin kann nicht entfernt werden.
    Falls nicht angegeben wird ein Wert von 0 verwendet.
  • max [Optional] : Maximaler Nummernwert, die dieser Nummernfeld annehmen darf.
    Wird dieser Wert überschritten wird das Feld rot markiert und der Wert wird nicht gespeichert.
    Falls nicht angegeben wird ein Wert "Unendlich" verwendet.
  • allow_decimal [Optional] : boolean (Default: false)
    Falls auf true können im Nummernfeld auch Dezimalzahlen eingegeben werden (default: 2 Dezimalstellen)
  • decimal_precision [Optional] : Number (Default: 2)
    Anzahl der Dezimalstellen für eine Nummernfeld (nur möglich, falls allow_decimal = true)

<code-block>{
  "type"    : "number",
  "id"      : "numberfield",
  "label"   : "Number",
  "label_de": "Nummer",
  "default" : "0",
  "info"    : "<div>Tooltip Text<br/><b>HTML available</b></div>",
  "max"     : 100
}</code-block>

Widget-Output in oSM:

Verwendung im liquid-Template:
<code-block>
{{ settings.numberfield }}
</code-block>

Output des Beispiels im liquid-Template:
<code-block>
0
</code-block>

Textblock ( "type": "textarea" )

Der Type "textarea" erzeugt ein mehrzeiliges Textfeld, in das beliebiger Text eingeben werden kann.

Folgende KEYs können optional in der JSON-Konfiguration hinzugefügt werden:

  • min [Optional] : Minimale Textlänge, die dieser Textfeld annehmen darf.
    Wird dieser Wert unterschritten wird das Feld rot markiert und der Wert wird nicht gespeichert.
    Falls ein Wert angegeben ist und dieser größer als 0 ist, wird das Textfeld zu einem Pflichtfeld und der Wert darin kann nicht entfernt werden.
    Falls nicht angegeben wird ein Wert von 0 verwendet.
  • max [Optional] : Maximale Textlänge, die dieser Textfeld annehmen darf.
    Wird dieser Wert überschritten wird das Feld rot markiert und der Wert wird nicht gespeichert.
    Falls nicht angegeben wird ein Wert "Unendlich" verwendet.

<code-block>{
  "type"    : "textarea",
  "id"      : "textarea",
  "label"   : "Textblock",
  "label_de": "Text",
  "default" : "ABC",
  "min"     : 0,
  "max"     : 1000
}</code-block>

Widget-Output in oSM:

Verwendung im liquid-Template:
<code-block>
{{ settings.textarea }}
</code-block>

Output des Beispiels im liquid-Template:
<code-block>
ABC
</code-block>

Radio Button ( "type": "radio" )

Der Type "radio" erzeugt ein ein oder mehrere Radio Buttons.
Man kann dabei nur eine Option auswählen.

Folgende KEYs können optional in der JSON-Konfiguration hinzugefügt werden:

  • columns [Optional] : Anzahl Spalten, in der die Radio-Buttons angezeigt werden (Default: 1)

Die Konfiguration für die Radio Buttons werden im KEY "options" als Objekt in einem Array angegeben.
Hierbei ist zu beachten, dass ein "options" - Objekt ein "value"- und ein "label" - KEY enthalten muss!

  • Der "value" - KEY entspricht dem Output im liquid-template,
  • Der "label" - KEY gibt die Bezeichnung des Radio Buttons im Widget in oSM an.
  • [Optional] kann auch ein osm sprachabhängiges Label hinterlegt werden.
    label_de bzw. label_en:
    Dieser wird verwendet, wenn der osm-Benutzer sich mit Deutsch oder Englisch als osm-Sprache einloggt.
    Damit kann ein Label - je nach oSM Sprache - angedruckt werden.
    Wird der KEY nicht gefunden, wird der default KEY label herangezogen.
    Es wird empfohlen den KEY label in Englisch zu verfassen und einen zusätzlichen KEY label_de für Deutsch zu hinterlegen.
    Folgender Vorteil: Falls jemals eine neue Sprache für oSM hinzukäme, würde es auf jedenfall einen Fallback nach Englisch geben.

Wichtiger Hinweis zu den Datentypen ("value"):
Der Datentyp in einem "options"-Objekt im VALUE des "value"-KEYs steht im Template als gleicher Datentyp zur Verfügung.
Im unteren Beispiel wurde jeweils ein String Datentyp als "value" in den "options" angegeben.
Im Template wird dies ebenfalls als String zur Verfügung gestellt.
Wird ein Integer/Number bzw. ein Boolean eingetragen ist der Datentyp im Template ebenfalls ein Integer/Number- bzw. ein Boolean- Datentyp.
Es sollte ebenfalls darauf geachtet werden, dass der "default"-VALUE der gleiche Datentyp wie in den einzelnen "option"-Objekten ist,
da sonst keine Default-Zuweisung erfolgen kann!

<code-block>{
  "type"    : "radio",
  "id"      : "nav_icon_style",
  "label"   : "Icon Navigation: Style",
  "label_de": "Icon Navigation: Style",
  "default" : "default-icons",
  "options" : [
       { "value": "default-icons", "label": "Default", "label_de": "Standard"},
       { "value": "light-icons"  , "label": "Light"  , "label_de": "Hell"    },
       { "value": "dark-icons"   , "label": "Dark"   , "label_de": "Dunkel"  }
   ]
}</code-block>

Widget-Output in oSM:

Verwendung im liquid-Template:
<code-block>
{{ settings.nav_icon_style }}
</code-block>

Output des Beispiels im liquid-Template:
<code-block>
default-icons
</code-block>

Checkbox ( "type": "checkbox" )

Der Type "checkbox" erzeugt eine Checkbox,
bei der nur zwei Werte (false oder true) ausgewählt werden können.

<code-block>{
         "type"    : "checkbox",
         "id"      : "show_searchfield",
         "default" : false,
         "label"   : "Show searchfield",
         "label_de": "Zeige Suchfeld"
}</code-block>

Widget-Output in oSM:

Verwendung im liquid-Template:
<code-block>
{{ settings.show_searchfield }}
</code-block>

Output des Beispiels im liquid-Template:
<code-block>
false
</code-block>

Selectionbox ( "type": "select" )

Der Type "select" erzeugt eine Selectionbox,
bei der ein Wert aus einer Liste ausgewählt werden kann.

Die Konfiguration für die Liste werden im KEY "options" als Objekt in einem Array angegeben.
Hierbei ist zu beachten, dass ein "options" - Objekt ein "value"- und ein "label" - KEY enthalten muss!

  • Der "value" - KEY entspricht dem Output im liquid-template,
  • Der "label" - KEY gibt die Bezeichnung in der Liste im Widget in oSM an.
  • [Optional] kann auch ein osm sprachabhängiges Label hinterlegt werden.
    label_de bzw. label_en:
    Dieser wird verwendet, wenn der osm-Benutzer sich mit Deutsch oder Englisch als osm-Sprache einloggt.
    Damit kann ein Label - je nach oSM Sprache - angedruckt werden.
    Wird der KEY nicht gefunden, wird der default KEY label herangezogen.
    Es wird empfohlen den KEY label in Englisch zu verfassen und einen zusätzlichen KEY label_de für Deutsch zu hinterlegen.
    Folgender Vorteil: Falls jemals eine neue Sprache für oSM hinzukäme, würde es auf jedenfall einen Fallback nach Englisch geben.

Wichtiger Hinweis zu den Datentypen ("value"):
Der Datentyp in einem "options"-Objekt im VALUE des "value"-KEYs steht im Template als gleicher Datentyp zur Verfügung.
Im unteren Beispiel wurde jeweils ein Integer/Number Datentyp als "value" in den "options" angegeben.
Im Template wird dies ebenfalls als Integer/Number zur Verfügung gestellt.
Wird ein String bzw. ein Boolean eingetragen ist der Datentyp im Template ebenfalls ein String bzw. ein Boolean Datentyp.
Es sollte ebenfalls darauf geachtet werden, dass der "default"-VALUE der gleiche Datentyp wie in den einzelnen "option"-Objekten ist,
da sonst keine Default-Zuweisung erfolgen kann!

Optional: Artikel-Merkmals-Felder bzw. Eigene Content Felder
Es ist möglich die Selectionbox automatisch mit den konfigurierten Artikel- oder Content-Feldern ("Eigene Felder") bestücken zu lassen.
Hierbei wird auf die Konfiguration in dem "Eigene Felder"-Manager zugegriffen.
Die Felder, die dort unter Artikel(-Merkmale) bzw. Content konfiguriert sind, werden als Selectionbox-Optionen ausgegeben.
Hierbei ist das label die verwendete "Feldbezeichnung" und der value die Template-Varibale des Feldes (z.B. "_string1").

  • product_attributes [Optional] : true
    Es werden alle konfigurierten Merkmals-Felder und Spezial-Artikel-Felder in die Selectionbox eingefügt.
    Per Default werden keine Multi-Enumeratoren hinzugefügt.
    Dies kann jedoch mit der Konfiguration multienum: true aktiviert werden, so dass auch Multi-Enumratoren zu der Liste hinzugefügt werden.
    Es gibt eine Einschränkung bei den konfigurierten Spezial-Felder.
    Es werden nur folgende Artikel-Spezial-Felder zurückgegeben: ColorEnum, SizeEnum, BrandEnum, DeliveryTimeEnum
  • content_attributes [Optional] : true
    Es werden alle konfigurierten eigenen Content-Felder in die Selectionbox eingefügt.
    Per Default werden keine Multi-Enumeratoren hinzugefügt.
    Dies kann jedoch mit der Konfiguration multienum: true aktiviert werden, so dass auch Multi-Enumratoren zu der Liste hinzugefügt werden.

Beide Optionen sind nicht gleichzeitig möglich. Falls beide Konfigurationen eingestellt wurden, hat product_attributes den Vorrang.
Wird eine der Optinen aktiviert, benötigt man nicht zwingend die "options"-Struktur.
Ist die "options"-Struktur zusammen mit einer von den beiden Einstellungen aktiv, wird am Ende der Selectionbox die konfigurierte "options"-Struktur hinzugefügt.

<code-block>{
      "type"    : "select",
      "id"      : "column_layout",
      "label"   : "Column layout",
      "label_de": "Spalten Layout"
      "default" : 2,
      "options" : [
         { "value": 1, "label": "1-column",  "label_de": "1-spaltig", "icon": "fa-address-book"},
         { "value": 2, "label": "2-columns", "label_de": "2-spaltig", "icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="},
         { "value": 3, "label": "3-columns", "label_de": "3-spaltig"},
         { "value": 4, "label": "4-columns", "label_de": "4-spaltig"}
      ]
}</code-block>

Widget-Output in oSM:

Hinweis zu dem KEY "icon":
Im ersten Selectionbox-Wert ("1-column") wird ein Icon ("fa-address-book"-Icon) aus der font-awesome-Biblothek neben dem "label" angezeigt.
Im zweiten Selectionbox-Wert ("2-columns") wird ein Icon (ein roter Punkt) mit Hilfe der data-URI-Kodierung neben dem "label" angezeigt:

 

Verwendung im liquid-Template:
<code-block>
{{ settings.column_layout }}
</code-block>

Output des Beispiels im liquid-Template:
<code-block>
2
</code-block>

Schieberegler ( "type": "range" )

Der Type "range" erzeugt einen Schieberegler, mit dem man eine Zahl mit vorgelegtem Min/Max-Wert und einer Schrittweite einstellen kann.
Es kann optional eine Einheit mit konfiguriert werde (z.B. px, em, ...), die jedoch nur für die Widget-Anzeige von Bedeutung ist.

Es kommen folgende KEYs in der JSON-Konfiguration hinzu:

  • min [Optional] : Minimaler Wert, der eingestellt werden kann
    Falls nicht angegeben wird ein Wert von 0 verwendet.
  • max [Optional] : Maximaler Wert, der eingestellt werden kann
    Falls nicht angegeben wird ein Wert von 1 verwendet.
  • step [Optional] : Schrittweite, mit der dieser Wert eingestellt werden kann (von Minimal-Wert ausgehend).
    Falls nicht angegeben wird eine Schrittweite von 0.1 verwendet.
  • unit [Optional] : Einheits-Anzeige. Dieser String wird dem Wert im Widget angehängt und dient lediglich als zusätzliche Information für den Wert.
    Er findet keinerlei Verwendung im template oder der settings_data.json
  • unit_multiplicator [Optional] : Multiplikator für die Anzeige im Widget. Dieser Wert wird mit dem tatsächlichen Wert multipliziert.
    Das Ergebnis wird lediglich in der Anzeige des Widgets verwendet um die Werte-Ansicht eventuell anzupassen.
    Der Wert findet keinerlei Verwendung im template oder der settings_data.json
    Ein Szenario wäre, wenn eine Transparenz-Einstellung über einen Schieberegler dargestellt werden soll. Diese Einstellung hat ein Wertebereich von 0.0 bis 1.0
    Für die Anzeige soll aber ein prozentualer Wert von 0 bis 100 % angezeigt werden. Es kann nun ein Multiplikator von 100 eingestellt werden um im Widget die Anzeige in Prozent darzustellen. In Wirklichkeit ist aber ein Wert von 0.0 bis 1.0 in die settings_data geschrieben worden

<code-block>{
   "type"    : "range",
   "id"      : "font_opacity",
   "label"   : "Font opacity",
   "label_de": "Schrift Deckkraft"
   "default" : 0.9,
   "min"     : 0, 
   "max"     : 1, 
   "step"    : 0.1,
   "unit"    : "%",
   "unit_multiplicator": 100
}</code-block>

Widget-Output in oSM:

Verwendung im liquid-Template:
<code-block>
{{ settings.font_opacity }}
</code-block>

Output des Beispiels im liquid-Template:
<code-block>
0.9
</code-block>

Farb-Picker ( "type": "color" )

Der Type "color" erzeugt ein Farb-Picker-Feld, mit dem man eine beliebige Farbe auswählen kann.
Hierbei ist es entscheidend, wie der Farbwert im "default"-VALUE angegeben wird.

Wird der Farbwert als HEX- ,RGB oder HSL-Wert angegeben, kann im Farb-Picker kein Alpha-Kanal eingestellt werden bzw. hat keinen Einfluss.
Wenn ein RGBA- oder ein HSLA-Farbwert angegeben wurde kann auch der Alpha-Kanal eingestellt werden.
Somit kann man Einfluss nehmen, ob der Alphakanal angewendet werden soll oder nicht.

<code-block>{
   "type"    : "color",
   "id"      : "background_color",
   "label"   : "Background color",
   "label_de": "Hintergrund Farbe"
   "default" : "#ffffff"
}</code-block>

Widget-Output in oSM:

Verwendung im liquid-Template:
<code-block>
{{ settings.background_color }}
</code-block>

Output des Beispiels im liquid-Template:
<code-block>
#ffffff
</code-block>

Interne URL ( "type": "url" )

Der Type "url" erzeugt ein Feld und ein Button, bei dem man eine Resource (Artikel, Seite, Content) auswählen kann, von der die URL übernommen wird.
Ist der Shop ein mehrsprachiger Shop, so werden bei der Resourcenauswahl alle zur Verfügung stehenden URLs in allen Sprachen zur Auswahl angeboten.

Standardmäßig wird neben dem "Auswahl"-Button auch ein "Entfernen"-Button angezeigt, um die ausgewählte URL zu löschen.
Dieser Button kann mit Hilfe der Konfiguration  "removable": false  ausgeblendet werden, um zwingend eine URL erfassen zu lassen.

Es kommt somit folgender optionaler KEY in der JSON-Konfiguration hinzu:

  • removable [Optional] : false (Default: true)
    Der "Entfernen"-Button wird ausgeblendet. Ein komplettes Entfernen der URL ist somit nicht möglich.

<code-block>{
  "type"     : "url",
  "id"       : "urllink",
  "label"    : "URL Link",
  "label_de" : "URL Link"
  "removable": false,
  "default"  : "/link/"
}</code-block>

Widget-Output in oSM:

Verwendung im liquid-Template:
<code-block>
{{ settings.urllink }}
</code-block>

Output des Beispiels im liquid-Template:
<code-block>
/pizza/
</code-block>

Content-Media Picker ( "type": "contentmedia_picker" )

Der Type "contentmedia_picker" erzeugt ein Bild-Picker, mit dem man aus dem Content-Media Bereich ein Bild auswählen kann.

Höhe/Breite/AspectRatio eines Bildes
Optional kann die Breite, Höhe und AspectRatio des Bildes mit gespeichert werden.
Hierbei muss der KEY / VALUE : "extract_dimension": true in die Konfiguration eingetragen werden.

Dabei werden in der settings_data.json drei zusätzliche Felder angelegt, die dem folgenden Schema entsprechen:

  • ["contentmedia_picker".id]_width : [Breite des Bildes (Integer)]
  • ["contentmedia_picker".id]_height : [Höhe des Bildes (Integer)]
  • ["contentmedia_picker".id]_aspectratio : [AspectRatio des Bildes (Float)]

DataURI(Base64) String eines Bildes
Optional kann der DataURI-String des Bildes anstatt der Dateipfad gespeichert werden.
Hierbei muss der KEY / VALUE : "dataURI": true in die Konfiguration eingetragen werden.
Beispiel siehe: assetmedia_picker

Min/Max Dateigröße
Optional kann ein min und/oder max Wert in Bytes angegeben werden, der angibt, wie groß (Dateigröße in Bytes) ein ausgewähltes Bild mindestens/maximal sein kann/darf.
Falls der Wert unter/über-schritten wird, wird eine Warnmeldung angezeigt, dass dieses Bild nicht ausgewählt werden kann, weil es zu klein/groß ist (Mit Angabe von aktueller Dateigröße und minimale/maximal erlaubte Dateigröße.)

  • min [Optional] : Minimale Dateigröße (in Bytes), die ein Bild haben muss.
    Falls nicht angegeben, findet keine Prüfung nach der minimalen Dateigröße statt.
  • max [Optional] : Maximale Dateigröße (in Bytes), die ein Bild haben muss.
    Falls nicht angegeben, findet keine Prüfung nach der maximalen Dateigröße statt.

Einschränkungen auf Bild-Dateiendungen
Optional kann der Picker auf bestimmte Bild-Dateiendungen eingeschränkt werden, um z.B. nur ".gif"-Bilder zu picken bzw. hochzuladen.
Dies wird über den KEY image_types realisiert. Als Value kann ein String mit Bild-Dateieindungen angegeben werden, mit einem ";" (Semikolon) als Trenner.
z.B. "jpg;gif" erlaubt nur das Picken von JPG- und Gif-Bildern.
Erlaubte Dateiendungen im String für ein Bild sind: jpg, gif, png, ico, svg
Dies ist auch die Default-Einstellung, falls kein image_types - KEY angegeben wurde.

<code-block>{
   "type"     : "contentmedia_picker",
   "id"       : "logo",
   "label"    : "Logo",
   "label_de" : "Logo"
   "extract_dimension": true,
   "image_types": "jpg;png;gif",
   "max"  : 512000
}</code-block>

Widget-Output in oSM:

Erlaubt das Picken eines Bildes vom Typ: "jpg", "png", und "gif" mit einer maximalen Größe von 512KB.

Verwendung im liquid-Template:
<code-block>
{{ settings.logo | content_media_url:'large' }}
{{ settings.logo_width }}
{{ settings.logo_height }}
{{ settings.logo_aspectratio }}
</code-block>

Output des Beispiels im liquid-Template:
<code-block>
[BILD-SRC wird angezeigt]
[BILD-Breite wird ausgegeben]
[BILD-Höhe wird ausgegeben]
[BILD-AspectRatio wird ausgegeben]
</code-block>

Asset-Media Picker ( "type": "assetmedia_picker" )

Der Type "assetmedia_picker" erzeugt ein Bild-Picker, mit dem man aus dem Asset-Media Bereich ein Bild auswählen kann.

Höhe/Breite/AspectRatio eines Bildes
Optional kann die Breite, Höhe und AspectRatio des Bildes mit gespeichert werden.
Hierbei muss der KEY / VALUE : "extract_dimension": true in die Konfiguration eingetragen werden.

Dabei werden in der settings_data.json drei zusätzliche Felder angelegt, die dem folgenden Schema entsprechen:

  • ["assetmedia_picker".id]_width : [Breite des Bildes (Integer)]
  • ["assetmedia_picker".id]_height : [Höhe des Bildes (Integer)]
  • ["assetmedia_picker".id]_aspectratio : [AspectRatio des Bildes (Float)]

DataURI(Base64) String eines Bildes
Optional kann der DataURI-String des Bildes anstatt der Dateipfad gespeichert werden.
Hierbei muss der KEY / VALUE : "dataURI": true in die Konfiguration eingetragen werden.

Min/Max Dateigröße
Optional kann ein min- und/oder max-Wert in Bytes angegeben werden, der angibt, wie groß (Dateigröße in Bytes) ein ausgewähltes Bild mindestens/maximal sein kann/darf.
Falls der Wert unter/über-schritten wird, wird eine Warnmeldung angezeigt, dass dieses Bild nicht ausgewählt werden kann, weil es zu klein/groß ist (Mit Angabe von aktueller Dateigröße und minimale/maximal erlaubte Dateigröße.)

  • min [Optional] : Minimale Dateigröße (in Bytes), die ein Bild haben muss.
    Falls nicht angegeben, findet keine Prüfung nach der minimalen Dateigröße statt.
  • max [Optional] : Maximale Dateigröße (in Bytes), die ein Bild haben muss.
    Falls nicht angegeben, findet keine Prüfung nach der maximalen Dateigröße statt.

Einschränkungen auf Bild-Dateiendungen
Optional kann der Picker auf bestimmte Bild-Dateiendungen eingeschränkt werden, um z.B. nur ".gif"-Bilder zu picken bzw. hochzuladen.
Dies wird über den KEY image_types realisiert. Als Value kann ein String mit Bild-Dateieindungen angegeben werden, mit einem ";" (Semikolon) als Trenner.
z.B. "jpg;gif" erlaubt nur das Picken von JPG- und Gif-Bildern.
Erlaubte Dateiendungen im String für ein Bild sind: jpg, gif, png, ico, svg
Dies ist auch die Default-Einstellung, falls kein image_types - KEY angegeben wurde.

<code-block>{
   "type"     : "assetmedia_picker",
   "id"       : "logo",
   "label"    : "Logo",
   "label_de" : "Logo"
   "extract_dimension": true, 
   "dataURI": true,
   "image_types": "png",
   "max"   : 512000
}</code-block>

Widget-Output in oSM:

Erlaubt das Picken eines Bildes vom Typ: "png" mit einer maximalen Größe von 512KB.

Verwendung im liquid-Template:
<code-block>
{{ settings.logo }}
{{ settings.logo_width }}
{{ settings.logo_height }}
{{ settings.logo_aspectratio }}
</code-block>

Output des Beispiels im liquid-Template:
<code-block>
[BILD-base64-String wird angezeigt]
[BILD-Breite wird ausgegeben]
[BILD-Höhe wird ausgegeben]
[BILD-AspectRatio wird ausgegeben]
</code-block>

Artikel (ID) ( "type": "article" )

Der Type "article" erzeugt ein Feld und ein Button, bei dem man einen Artikel auswählen kann, von der die Artikel ID übernommen wird.
Es können nur Artikel ausgewählt werden, die den gleichen Shopaspekt zugeordnet haben, wie das aktuell bearbeitete Theme.

Standardmäßig wird neben dem "Auswahl"-Button auch ein "Entfernen"-Button angezeigt, um die ausgewählte Artikel ID zu löschen.
Dieser Button kann mit Hilfe der Konfiguration  "removable": false  ausgeblendet werden, um zwingend eine Artikel ID erfassen zu lassen.

Dem Artikelpicker kann optional drei weitere Konfigurationen mitgegeben werden um das Auswählen von Artikeln einzuschränken:

  • disable_variant: true (Varianten können nicht ausgewählt werden)
  • disable_main: true (Hauptartikel können nicht ausgewählt werden)
  • disable_normal: true (Normale Artikel können nicht ausgewählt werden)

Es kommen somit folgende optionale KEYs in der JSON-Konfiguration hinzu:

  • removable [Optional] : false (Default: true)
    Der "Entfernen"-Button wird ausgeblendet. Ein komplettes Entfernen der Artikel ID ist somit nicht möglich.
  • disable_variant [Optional] : true (Default: false)
    Falls auf true können im Artikelpicker keine Artikel-Varianten ausgewählt werden.
  • disable_main [Optional] : true (Default: false)
    Falls auf true können im Artikelpicker keine Hauptartikel ausgewählt werden.
  • disable_normal [Optional] : true (Default: false)
    Falls auf true können im Artikelpicker keine "Normale" Artikel (Artikel ohne Varintenstruktur) ausgewählt werden.

<code-block>{
  "type"           : "product",
  "label"          : "Top product",
  "label_de"       : "Top Artikel",
  "id"             : "top_product",
  "disable_variant": true,
  "disable_normal" : true,
  "default"        : 96250
}</code-block>

Widget-Output in oSM:

Bei der Auswahl "Select product..." können bei dieser Konfiguration im Artikelpicker nur Hauptartikel IDs ausgewählt werden,
keine Variantenartikel oder "Normale" Artikel.

Verwendung im liquid-Template:
<code-block>
{{ settings.top_product }}
</code-block>

Output des Beispiels im liquid-Template:
<code-block>
96250
</code-block>

Seite (ID) ( "type": "page" )

Der Type "page" erzeugt ein Feld und ein Button, bei dem man eine Seite auswählen kann, von der die Seiten ID übernommen wird.
Es können nur Seiten ausgewählt werden, die den gleichen Shopaspekt zugeordnet haben, wie das aktuell bearbeitete Theme.

Bei diesem Widget ist zwingend eine weiter Konfiguration nötig: page_type: ["productlist" ODER "contentlist"]

Diese Konfiguration gibt an, ob man

  • Artikellisten bzw. Artikelalias-Seiten auswählen kann ("productlist")
  • oder aber Contentlisten bzw. Contentalias-Seiten aus dem Picker auswählen kann ("contentlist")

Standardmäßig wird neben dem "Auswahl"-Button auch ein "Entfernen"-Button angezeigt, um die ausgewählte Seiten ID zu löschen.
Dieser Button kann mit Hilfe der Konfiguration  "removable": false  ausgeblendet werden, um zwingend eine Seiten ID erfassen zu lassen.

Es kommen somit folgende KEYs in der JSON-Konfiguration hinzu:

  • page_type [Pflicht] : "productlist" ODER "contentlist"
    Gibt an, welche Seitentypen aus dem Seitenbaum ausgewählt werden können.
    Artikellisten/Artikelalias-Seiten ("productlist")
    oder Contentlisten/Contentalias-Seiten ("contentlist")
  • removable [Optional] : false (Default: true)
    Der "Entfernen"-Button wird ausgeblendet. Ein komplettes Entfernen der Seiten ID ist somit nicht möglich.

<code-block>{
  "type"     : "page",
  "page_type": "productlist",
  "id"       : "topten_products",
  "label"    : "Top 10 products",
  "label_de" : "Top 10 Artikel",
  "default"  : 297
}</code-block>

Widget-Output in oSM:

Bei der Auswahl "Select page..." können bei dieser Konfiguration im Seitenpicker nur Artikellisten/Artikelalias-Seiten ausgewählt werden,
keine Contentlisten/Contentalias-Seiten.

Verwendung im liquid-Template:
<code-block>
{{ settings.topten_products }}
</code-block>

Output des Beispiels im liquid-Template:
<code-block>
297
</code-block>

Content (ID) ( "type": "content" )

Der Type "content" erzeugt ein Feld und ein Button, bei dem man einen Content auswählen kann, von der die Content ID übernommen wird.
Es können keine Paragraphen ausgewählt werden und nur Contents, die eine URL besitzen, können übernommen werden.
Außerdem können nur Contents ausgewählt werden, die den gleichen Shopaspekt zugeordnet haben, wie das aktuell bearbeitete Theme.

Standardmäßig wird neben dem "Auswahl"-Button auch ein "Entfernen"-Button angezeigt, um die ausgewählte Content ID zu löschen.
Dieser Button kann mit Hilfe der Konfiguration  "removable": false  ausgeblendet werden, um zwingend eine Content ID erfassen zu lassen.

Es kommt somit folgender optionaler KEY in der JSON-Konfiguration hinzu:

  • removable [Optional] : false (Default: true)
    Der "Entfernen"-Button wird ausgeblendet. Ein komplettes Entfernen der Content ID ist somit nicht möglich.

<code-block>{
  "type"    : "content",
  "id"      : "top_news",
  "label"   : "Top news",
  "label_de": "Top Meldungen",
  "default" : 123
}</code-block>

Widget-Output in oSM:

Verwendung im liquid-Template:
<code-block>
{{ settings.top_news }}
</code-block>

Output des Beispiels im liquid-Template:
<code-block>
123
</code-block>

Linklist (Template Handle) ( "type": "linklist" )

Der Type "linklist" erzeugt ein Feld und ein Button, bei dem man eine Linkliste oder einen Link auswählen kann, von dem der "Template Handle" übernommen wird.
Hinweis: Bei einem Link-Widget können nur Links ausgewählt werden, die einen "Template Handle" besitzen.
Außerdem können nur Linklisten ausgewählt werden, die den gleichen Shopaspekt zugeordnet haben, wie das aktuell bearbeitete Theme.

Bei diesem Widget ist zwingend eine weiter Konfiguration nötig: link_type: ["linklist" ODER "link"]

Diese Konfiguration gibt an, ob man

  • Eine Linkliste auswählen kann ("linklist")
  • oder aber einen Link mit einem gesetzten "Handle" (aus einer Linkliste) aus dem Picker auswählen kann ("link")

Eine Besonderheit bei dem "link_type": "link"
Um den "Template Handle" der Linkliste UND des Links zu erfassen wird in der settings_data.json ein zusätzliches Felder angelegt, das dem folgenden Schema entspricht:

  • ["linklist".id]_linklist_handle : "Template Handle" der ausgewählten Linkliste

Im Haupt-Value (["linklist".id]) in der settings_data.json wird je nach "link_type" der entsprechende "Template Handle" gespeichert:

  • falls link_type = linklist : "Template Handle" der Linkliste
  • falls link_type = link : "Template Handle" des Links

Optional kann bei einem "link_type": "link" der KEY "fix_linklist" mit einem "Template Handle" als VALUE angegeben werden.
Damit wird sichergestellt, dass ein Link nur aus einer bestimmten Linkliste ausgewählt werden kann.

Standardmäßig wird neben dem "Auswahl"-Button auch ein "Entfernen"-Button angezeigt, um den ausgewählten "Template Handle" zu löschen.
Dieser Button kann mit Hilfe der Konfiguration  "removable": false  ausgeblendet werden, um zwingend einen "Template Handle" erfassen zu lassen.

Es kommen somit folgende KEYs in der JSON-Konfiguration hinzu:

  • link_type [Pflicht] : "linklist" ODER "link"
    Gibt an, ob eine Linkliste oder ein Link ausgewählt werden kann.
    Linklisten-Picker, um eine Linkliste auszuwählen ("linklist")
    oder Link aus einer Linkliste ("link")
  • fix_linklist [Optional] : "Template handle" einer Linkliste
    Mit dieser Konfiguration kann bei einem "handle_type:link" eine vorausgewählte Linkliste erzwungen werden.
    Somit kann nur aus dieser Linkliste der Link ausgewählt werden.
  • removable [Optional] : false (Default: true)
    Der "Entfernen"-Button wird ausgeblendet. Ein komplettes Entfernen der Seiten ID ist somit nicht möglich.

<code-block>{
  "type"        : "linklist",
  "id"          : "main_slider",
  "label"       : "Main slider",
  "label_de"    : "Haupt Slider",
  "link_type"   : "link",
  "fix_linklist": "main"
}</code-block>

Widget-Output in oSM:

Verwendung im liquid-Template:
<code-block>
{{ settings.main_slider }}
{{ settings.main_slider_linklist_handle }}
{{ settings.main_slider_link_handle }}
</code-block>

Output des Beispiels im liquid-Template:
<code-block>
[Link-Template-Handle wird ausgegeben]
[Linklist-Template-Handle wird ausgegeben]
[Link-Template-Handle wird ausgegeben]
</code-block>

Informations-Feld ( "type": "paragraph" )

Der Type "paragraph" erzeugt ein Feld, das einen vorgegebenen Text andruckt.
Das Feld kann nicht bearbeitet werden und dient lediglich dazu, um weitere Informationen anzudrucken.

Es enthält nur die KEY's "type" und "content". Im "content"-VALUE kann html-Syntax verwendet werden

<code-block>{
  "type"      : "paragraph",
  "content"   : "<h2>Information</h2>",
  "content_de": "<h2>Information</h2>",
}</code-block>

Widget-Output in oSM: