Erweiterungen des Themas (Themenerweiterungen)

Was sind Theme-Erweiterungen?

Theme-Erweiterungen (Extensions) sind zusätzliche Felder, die Ihr Theme unter anderem für Produkte, Kategorien, Landingpages, statische Seiten und Blogbeiträge bereitstellt. Die Felder werden vom Theme-Entwickler definiert, und als Shop-Betreiber füllst du sie direkt im Admin-Bereich aus, z. B. auf der Bearbeitungsseite des Produkts.

Typische Beispiele sind ein Feld für eine YouTube-Video-ID, ein Badge mit Text und Farbe oder eine Liste von Funktionen mit Titel, Beschreibung und Symbol. Die Felder werden im Admin-Bereich automatisch unter dem Abschnitt „Erweiterungen“ Ihres Themes angezeigt , und die von Ihnen eingegebenen Daten werden vom Theme verwendet, um zusätzliche Inhalte im Webshop anzuzeigen.

Für Shop-Betreiber: So nutzen Sie die Erweiterungen

Wenn du ein Produkt bearbeitest, findest du die Erweiterungen in einem Akkordeon-Bereich namens „Erweiterungen aus deinem Theme“. Klicke auf den Bereich, um ihn zu erweitern. Hier siehst du die vom Theme definierten Felder, gruppiert nach Kategorie (z. B. „Video-Einstellungen“, „Badge-Einstellungen“ usw.).

Füllen Sie die Felder nach Bedarf aus. Einige Felder sind einfache Textfelder, andere sind Farbwähler, Bild-Uploads oder Kontrollkästchen. Jedes Feld hat in der Regel einen Titel und gegebenenfalls eine Beschreibung, die erklärt, wozu es dient.

Wenn Sie das Produkt speichern, werden die Erweiterungsdaten gespeichert, und das Theme nutzt diese, um den entsprechenden Inhalt im Webshop anzuzeigen. Beispielsweise führt eine eingegebene YouTube-ID in der Regel dazu, dass auf der Produktseite ein Videoplayer angezeigt wird.

Unterstützte Feldtypen

Theme-Erweiterungen unterstützen eine Vielzahl von Feldtypen:

• text – Ein einfaches Textfeld für kurze Werte (z. B. eine Video-ID oder einen Badge-Text).
• richtext – Ein HTML-Editor mit Formatierungsoptionen für längere Texte mit Fettdruck, Kursivschrift, Links usw.
• longtext – Ein großes Textfeld (Textarea) für längere Texte ohne HTML-Formatierung.
• number – Ein Zahlenfeld für numerische Werte.
• bool – Ein Kontrollkästchen für Ja/Nein-Werte (z. B. „Badge anzeigen“ oder „Nur Abholung“).
• color – Ein Farbwähler zur visuellen Auswahl von Farben (z. B. Hintergrundfarbe für ein Abzeichen).
• list – Ein Dropdown-Menü mit vordefinierten Auswahlmöglichkeiten.
• multi – Mehrere Kontrollkästchen, um mehrere Optionen gleichzeitig auszuwählen.
• image – Hochladen eines einzelnen Bildes.
• images – Hochladen mehrerer Bilder (z. B. einer Galerie).
• date – Ein Datumswähler.
• datetime – Ein Datums- und Zeitauswahlfeld.
• repeater – Wiederholungsfelder, die es ermöglichen, eine dynamische Anzahl von Feldgruppen hinzuzufügen (siehe separaten Abschnitt weiter unten).

Für Theme-Entwickler: Definition von Erweiterungsfeldern

Erweiterungsfelder werden in JSON-Dateien im Ordner „extensions/“ des Themes definiert. Die Datei ist nach dem Objekttyp benannt, für den die Felder gelten:

• extensions/product.json – Produkte
• extensions/category.json – Kategorien
• extensions/landing_page.json – Landingpages
• extensions/static_page.json – Statische Seiten
• extensions/blog_post.json – Blogbeiträge

Die JSON-Datei ist ein Array aus Gruppen, wobei jede Gruppe einen Namen und eine Liste von Feldern enthält. Hier ein Beispiel:

[
  {
    "name": "Video-Einstellungen",
    "fields": [
      {
        "title": "YouTube-ID",
        "description": "Gib die YouTube-Video-ID ein",
        "id": "youtube_id",
        "type": "text"
      }
    ]
  },
  {
    "name": "Badge",
    "fields": [
      {
        "title": "Badge – Text",
        "id": "badge",
        "type": "text"
      },
      {
        "title": "Badge – Hintergrundfarbe",
        "id": "badge-bg",
        "type": "color",
        "default_value": "#fef3c7"
      },
      {
        "title": "Badge – Textfarbe",
        "id": "badge-color",
        "type": "color",
        "default_value": "#92400e"
      }
    ]
  }
]

Jedes Feld unterstützt folgende Eigenschaften:

• id (erforderlich) – Eindeutige ID, wird zum Abrufen des Werts in Vorlagen verwendet.
• title (erforderlich) – Bezeichnung, die im Admin-Bereich angezeigt wird.
• type (erforderlich) – Der Feldtyp (siehe Liste oben).
• description – Hilfetext, der unter dem Feld angezeigt wird.
• placeholder – Platzhaltertext im Eingabefeld.
• default / default_value – Standardwert.
• options – Auswahlmöglichkeiten für die Feldtypen „List“ und „Multi“ (Objekt mit Schlüssel-Wert-Paaren).

Für Theme-Entwickler: Verwendung von Erweiterungsdaten in Templates

In Smarty-Vorlagen werden Erweiterungsdaten mit der Methode getExtensionValue('feld_id') abgerufen. Die Methode ist für Produkte, Kategorien, Landingpages, statische Seiten und Blogbeiträge verfügbar.

Einfacher Textwert:

<{$product->getExtensionValue('youtube_id')}>

Bedingte Anzeige (bool):

<{if $product->getExtensionValue('show_badge')}>
    <span style="background:<{$product->getExtensionValue('badge-bg')}>; color:<{$product->getExtensionValue('badge-color')}>">
        <{$product->getExtensionValue('badge')|escape}>
    </span>
<{/if}>

Einzelnes Bild:

<{if $img = $product->getExtensionValue('img')}>
    <img src="<{$img->getSrc(400, 400, 'fit')}>">
<{/if}>

Mehrere Bilder (Galerie):

<{foreach $product->getExtensionValue('gallery') as $image}>
    <img src="<{$image->getSrc(200, 200, 'box')}>">
<{/foreach}>

Datum mit Formatierung:

<{$product->getExtensionValue('release_date')|date_format:'%d/%m/%Y'}>

Wiederholungsfelder (Repeater)

Repeater-Felder ermöglichen es, eine dynamische Anzahl von Feldgruppen hinzuzufügen. Dies ist beispielsweise nützlich für eine Liste von Funktionen, Spezifikationen oder Vorteilen eines Produkts, wobei jedes Element einen eigenen Titel, eine eigene Beschreibung und gegebenenfalls ein Symbol haben kann.

JSON-Definition eines Repeater-Feldes:

{
  "title": "Funktionen",
  "id": "features",
  "type": "repeater",
  "field_title": "Funktion",
  "description": "Funktionen zum Produkt hinzufügen",
  "fields": [
    { "id": "title", "type": "text", "title": "Titel", "placeholder": "Beispiel: Wasserdicht" },
    { "id": "description", "type": "longtext", "title": "Beschreibung" },
    { "id": "icon", "type": "image", "title": "Symbol" }
  ]
}

Repeater-Felder verfügen über folgende zusätzliche Eigenschaften:

• fields – Ein Array von Unterfeldern (unterstützt text, richtext, longtext, number und image).
• field_title – Der Titel, der für jedes Element im Admin-Bereich angezeigt wird (z. B. „Feature“).

Im Admin-Bereich werden Repeater-Felder als Karten angezeigt, die per Drag-and-Drop hinzugefügt, gelöscht und verschoben werden können. Als Shop-Betreiber klickst du auf die Schaltfläche „Hinzufügen“, um ein neues Element zu erstellen, und füllst die Unterfelder aus.

Verwendung von Repeater-Daten in Vorlagen:

<{foreach $product->getExtensionValue('features') as $feature}>
    <h3><{$feature.title|escape}></h3>
    <p><{$feature.description|escape|nl2br}></p>
    <{if $feature.icon}>
        <img src="<{$feature.icon->getSrc(64, 64, 'fit')}>">
    <{/if}>
<{/foreach}>

Erweiterungen für andere Objekttypen

Erweiterungen funktionieren nicht nur bei Produkten. Das Theme kann Erweiterungsfelder für mehrere Objekttypen definieren. Die Methode getExtensionValue() ist für alle unterstützten Objekte verfügbar:

• Kategorien – Werden in extensions/category.json definiert. Verwendung: $category->getExtensionValue('felt_id')
• Landingpages – Werden in extensions/landing_page.json definiert. Verwendung: $landing_page->getExtensionValue('felt_id')
• Statische Seiten – Werden in „extensions/static_page.json“ definiert. Verwendung: $page->getExtensionValue('felt_id')
• Blogbeiträge – Werden in extensions/blog_post.json definiert. Verwendung: $blog_post->getExtensionValue('felt_id')

Die JSON-Struktur und die Feldtypen sind für alle Objekttypen identisch.

AJAX-Filterung mit Erweiterungsfeldern

Produkte können über AJAX-Filterung nach Erweiterungswerten gefiltert werden. Dies ermöglicht es, Filter im Webshop auf der Grundlage themenspezifischer Felder zu erstellen.

Die Syntax verwendet „extension.“ als Präfix in den URL-Parametern:

?extension.youtube_id=abc123
?extension.show_badge=1

Dies ermöglicht es Theme-Entwicklern, erweiterte Filterfunktionen zu erstellen, die genau auf die Anforderungen des jeweiligen Webshops zugeschnitten sind.

Haben Sie Fragen zu Theme-Erweiterungen? Kontaktieren Sie uns unter support@shoporama.dk.