Erweiterungen des Themas (Themenerweiterungen)

Was sind Themenerweiterungen?

Theme-Erweiterungen sind zusätzliche Felder, die Ihr Theme unter anderem auf Produkten, Kategorien, Landing Pages, statischen Seiten und Blogbeiträgen zur Verfügung stellt. Der Theme-Entwickler definiert die Felder, und als Shop-Betreiber füllen Sie sie direkt in der Verwaltung aus, zum Beispiel auf der Produktbearbeitungsseite.

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

Für Shop-Besitzer: So verwenden Sie die Erweiterungen

Wenn Sie ein Produkt bearbeiten, finden Sie die Erweiterungen in einem Akkordeon-Abschnitt mit dem Namen Extensions (Erweiterungen) in Ihrem Theme. Klicken Sie auf den Abschnitt, um ihn zu erweitern. Hier sehen Sie die Felder, die das Thema definiert hat, gruppiert nach Kategorien (z. B. "Videoeinstellungen", "Abzeicheneinstellungen" usw.).

Füllen Sie die Felder nach Bedarf aus. Bei einigen Feldern handelt es sich um einfache Textfelder, bei anderen um Farbwähler, Bilduploads oder Kontrollkästchen. Jedes Feld hat in der Regel einen Titel und möglicherweise eine Beschreibung, die erklärt, wofür es verwendet wird.

Wenn Sie das Produkt speichern, werden die Erweiterungsdaten gespeichert und das Thema verwendet sie, um den entsprechenden Inhalt im Webshop anzuzeigen. Eine ausgefüllte YouTube-ID zeigt zum Beispiel einen Videoplayer auf der Produktseite an.

Unterstützte Feldtypen

Themenerweiterungen unterstützen eine breite Palette von Feldtypen:

• text - Ein einfaches Textfeld für kurze Werte (z. B. eine Video-ID oder ein Text für ein Abzeichen).
• richtext - Ein HTML-Editor mit Formatierungsoptionen für längere Texte mit Fett- und Kursivdruck, 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. "Abzeichen 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 Optionen.
• multi - Mehrere Kontrollkästchen, um mehrere Optionen gleichzeitig auszuwählen.
• image - Hochladen eines einzelnen Bildes.
• images - Hochladen mehrerer Bilder (z. B. für eine Galerie).
• date - Ein Datumsauswahlfeld.
• datetime - Eine Auswahlmöglichkeit für Datum und Uhrzeit.
• repeater - Repeater-Felder, mit denen Sie eine dynamische Anzahl von Feldgruppen hinzufügen können (siehe separater Abschnitt unten).

Für Themenentwickler: Definieren von Erweiterungsfeldern

Erweiterungsfelder werden in JSON-Dateien im Ordner extensions/ des Themas definiert. Die Datei ist nach der Art des Objekts benannt, auf das sich die Felder beziehen:

• extensions/product.json - Produkte
• extensions/category.json - Kategorien
• extensions/landing_page.json - Landingpages
• extensions/static_page.json - Statische Seiten
• extensions/blog_post.json - Blog-Beiträge

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

[ { "name": "Video Settings", "fields": [ { "title": "YouTube Id", "description": "Enter YouTube Video ID", "id": "youtube_id", "type": "text" } ] }, { "name": "Badge", "fields": [ { "title": "Badge - Text", "id": "badge", "type": "text" }, { "title": "Abzeichen - Hintergrundfarbe", "id": "badge-bg", "type": "color", "default_value": "#fef3c7" }, { "title": "Abzeichen - Textfarbe", "id": "badge-color", "type": "color", "default_value": "#92400e" } ] }

Jedes Feld unterstützt diese Eigenschaften:

• id (erforderlich) - Eindeutige ID, die verwendet wird, um den Wert in Vorlagen abzurufen.
• title (erforderlich) - In der Verwaltung angezeigte Bezeichnung.
• type (erforderlich) - Der Feldtyp (siehe Liste oben).
• description - Hilfetext, der unterhalb des Feldes angezeigt wird.
• placeholder - Platzhaltertext im Eingabefeld.
• default / default_value - Standardwert.
• options - Optionen für Listen- und Multitypen (Objekt mit Schlüssel/Wert-Paaren).

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

In Smarty-Vorlagen werden Erweiterungsdaten mit der Methode getExtensionValue('field_id') abgerufen. Die Methode ist für Produkte, Kategorien, Landing Pages, 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}

Einfaches Bild:

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

Weitere 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'}>

Wiederholte Felder (Repeater)

Mit Repeater-Feldern können Sie eine dynamische Anzahl von Gruppen von Feldern hinzufügen. Dies ist nützlich für eine Liste von Merkmalen, Spezifikationen oder Vorteilen eines Produkts, wobei jedes Element seinen eigenen Titel, seine eigene Beschreibung und möglicherweise ein Symbol haben kann.

JSON-Definition eines Repeater-Feldes:

{ "title": "Features", "id": "features", "type": "repeater", "field_title": "Feature", "description": "Add features to product", "fields": [ { "id": "title", "type": "text", "title": "Titel", "placeholder": "Ex: Wasserdicht" }, { "id": "description", "type": "longtext", "title": "Beschreibung" }, { "id": "icon", "type": "image", "title": "Icon" } ] }

Wiederholerfelder haben diese zusätzlichen Eigenschaften:

• fields - Ein Array von Unterfeldern (unterstützt Text, Richtext, Langtext, Zahl und Bild).
• field_title - Der Titel, der für jedes Element in der Verwaltung angezeigt wird (z. B. "Feature").

In der Verwaltung werden Wiederholfelder als Karten angezeigt, die per Drag-and-Drop hinzugefügt, gelöscht und verschoben werden können. Als Shop-Betreiber klicken Sie auf die Schaltfläche "Hinzufügen", um ein neues Element anzulegen und die Unterfelder auszufüllen.

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 für Produkte. Das Thema kann Erweiterungsfelder für mehrere Objekttypen definieren. Die Methode getExtensionValue() ist für alle unterstützten Objekte verfügbar:

• Kategorien - Definiert in extensions/category.json. Verwendung: $category->getExtensionValue('field_id')
• Landing Pages - Definiert in extensions/landing_page.json. Verwendung: $landing_page->getExtensionValue('field_id')
• Statische Seiten - Definiert in extensions/static_page.json. Verwendung: $page->getExtensionValue('field_id')
• Blog-Beiträge - Definiert in extensions/blog_post.json. Verwendung: $blog_post->getExtensionValue('field_id')

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

AJAX-Filterung mit Erweiterungsfeldern

Produkte können durch AJAX-Filterung nach Erweiterungswerten gefiltert werden. Dies ermöglicht es Ihnen, Filter im Webshop auf der Grundlage von themenspezifischen Feldern zu erstellen.

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

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

Auf diese Weise können Theme-Entwickler erweiterte Filterfunktionen erstellen, die auf die Bedürfnisse des jeweiligen eCommerce-Shops zugeschnitten sind.

Haben Sie Fragen zu Themenerweiterungen? Kontaktieren Sie uns unter support@shoporama.dk.