Akkordeon-Layout für Themeneinstellungen in Shoporama

Was ist ein Akkordeon-Layout?

Wenn ein Shoporama-Thema viele Themenoptionen hat, kann das klassische Kartenlayout mit Seitenleiste schnell unübersichtlich werden. Das Akkordeon-Layout löst dieses Problem, indem es alle Abschnitte in faltbaren Panels organisiert, die einzeln geöffnet und geschlossen werden können. Das verschafft dem Shop-Betreiber einen sauberen und konzentrierten Überblick - selbst bei mehr als 15 Rubriken.

Das Montana-Theme - Shoporamas neuestes CSS-basiertes Tailwind-Theme - verwendet das Akkordeon-Layout mit ganzen 16 Abschnitten und ist das perfekte Beispiel dafür, wie es in der Praxis funktioniert.

Akkordeon vs. klassisches Layout

Es gibt zwei Layout-Optionen für die Themeneinstellungen in Shoporama:

• Klassisches Layout - Zweispaltiges Layout (9+3 Spalten) mit Bootstrap-Karten und einer Seitenleiste mit Scroll-Spy-Navigation. Geeignet für Themes mit wenigen Abschnitten.
• Akkordeon-Layout - Zentriertes einspaltiges Layout mit ausklappbaren Bereichen, Suchfunktion und localStorage. Ideal für Themes mit vielen Abschnitten und Feldern.

So aktivieren Sie das Akkordeon-Layout

Sie müssen lediglich "accordion": true in die Datei theme_settings.json Ihres Themes eintragen. Die Datei befindet sich im Stammverzeichnis Ihres Themes.

{ "info": "Mein Thema", "accordion": true, "settings": [ ... ] }

Ohne diese Zeile - oder mit "accordion": false - wird automatisch das klassische Kartenlayout verwendet.

Eigenschaften des Akkordeon-Layouts

Das Akkordeon-Layout verfügt über eine Reihe von Funktionen, die das Navigieren in den Themeneinstellungen erleichtern:

• Aufklappbare Abschnitte - Jeder Abschnitt kann mit einem Klick geöffnet und geschlossen werden. Chevron-Symbole zeigen deutlich an, ob der Abschnitt geöffnet oder geschlossen ist.
• Suchfunktion - Ein Suchfeld am oberen Rand filtert Abschnitte und Felder in Echtzeit. Übereinstimmender Text wird hervorgehoben und nur relevante Abschnitte werden angezeigt.
• Speichert den Status - Welche Bereiche offen/geschlossen sind, wird in localStorage gespeichert, so dass der Shop-Betreiber beim nächsten Besuch nicht wieder von vorne anfangen muss.
• Zentriertes Layout - Der Inhalt wird in einer einzigen Spalte (col-lg-10) angezeigt, wodurch mehr Platz für die einzelnen Felder zur Verfügung steht und die Navigation in der Seitenleiste überflüssig wird.

Die Struktur von theme_settings.json

Die Datei theme_settings.json definiert die gesamte Struktur der Themeneinstellungen. Hier ist ein komplettes Beispiel, inspiriert durch das Montana-Theme:

{ "info": "Montana", "accordion": true, "features": [ "Tailwind CSS-basiertes responsive Design", "Vollständig anpassbare Farben, Logo und Favicon", "USP-Leiste mit anpassbaren Icons im Header"], "settings": [ { "path": "general", "name": "General", "description": "Zahlungs- und Versandmethoden und Lieferzeiten.", "fields": [ { "path": "payment_methods", "name": "Payment methods", "description": "Comma separated list, eg: dankort,visa,mastercard", "type": "string"}, { "path": "shipping_time_in_stock", "name": "Lieferzeit (auf Lager)", "description": "Ex: 1-3 Werktage", "type": "string"} ] }, { "path": "theme", "name": "Theme & Colours", "description": "Farben, Logo und Favicon für Ihren Shop.", "fields": [ { "path": "primary", "name": "Primary colour", "description": "Used for text, headings and dark elements.", "type": "color", "default_value": "#111827"}, { "path": "action", "name": "Action colour", "description": "Used for buttons, links and CTA elements.", "type": "color", "default_value": "#2563eb"}, { "path": "background", "name": "Hintergrundfarbe", "description": "Seitenhintergrundfarbe.", "type": "color", "default_value": "#ffffff"} ] }, { "path": "value_propositions", "name": "USP\u0027s", "description": "Bis zu 4 Kurzmitteilungen im Header.", "fields": [ { "path": "text_1", "name": "USP #1 - Text", "type": "string"}, { "path": "icon_1", "name": "USP #1 - Icon", "type": "list", "values": [ { "value": "", "name": "(None)" }, { "value": "truck", "name": "Truck" }, { "value": "check", "name": "Tick" }, { "value": "star", "name": "Star" } ] } ], { "path": "shipping_alert", "name": "Shipping alert", "description": "Bestellen Sie vor .  14 und wir versenden heute.", "fields": [ { "path": "enable", "name": "Enable", "type": "bool"}, { "path": "time", "name": "Closing time", "description": "Zeitpunkt des letzten Versands, z.B. 14:00", "type": "string"}, { "path": "days", "name": "Versandtage", "description": "Wochentagsnummern: 1=Man, 7=Sun.  Bsp: 1,2,3,4,5", "type": "string"} ] }, { "path": "product", "name": "Product page", "description": "Stock, variants, tabs etc.", "fields": [ { "path": "show_sku", "name": "Artikelnummer (SKU) anzeigen", "type": "bool"}, { "path": "show_stock_count", "name": "Lagerbestand anzeigen", "description": "Die genaue Anzahl auf Lager anzeigen.", "type": "bool"}, { "path": "enable_omnibus_price", "name": "Vorpreis gemäß Omnibus-Richtlinie anzeigen ", "description": "Vorpreis gemäß Omnibus-Richtlinie anzeigen  Omnibus-Richtlinie", "description": "Zeigt den niedrigsten Preis der letzten 30 Tage als Vorpreis an.", "type": "bool"} ] }, { "path": "newsletter", "name": "Newsletter", "description": "Anmeldeformular in der Fußzeile.", "fields": [ { "path": "enable", "name": "Newsletter anzeigen", "type": "bool"}, { "path": "title", "name": "Überschrift", "description": "Standard:  Abonnieren Sie unseren Newsletter", "type": "string"}, { "path": "lead", "name": "Body", "type": "text"} ] }, { "path": "custom_code", "name": "Custom JavaScript", "description": "Fügen Sie benutzerdefinierten JavaScript-Code hinzu.", "fields": [ { { "path": "js", "name": "Custom JavaScript", "description": "Am Ende der Seite einfügen.", "type": "text"} ] }

Verfügbare Feldtypen

Jedes Feld in einem Abschnitt wird mit einer Typeigenschaft definiert. Hier sind die verfügbaren Feldtypen:

• string - Einfaches Textfeld. Für kurze Werte wie Zahlungsarten, URLs oder Lieferzeiten.
• bool - Kontrollkästchen (an/aus). Erscheint als beschriftetes Kontrollkästchen. Der Wert wird als 0 oder 1 gespeichert.
• color - Farbwähler mit Hex-Eingabe. Unterstützt default_value mit einer Reset-Schaltfläche.
• text - Großes Textfeld (Textarea). Für längere Texte, Haftungsausschlüsse oder JavaScript-Code.
• wysiwyg - Rich-Text-Editor. Für formatierte HTML-Inhalte mit WYSIWYG-Bearbeitung.
• image - Bild-Upload. Zeigt das hochgeladene Bild an und bietet die Möglichkeit, es zu löschen.
• list - Dropdown-Menü. Benötigt ein Werte-Array mit Objekten, die einen Wert und einen Namen haben.

Wie man Themeneinstellungen in Smarty-Vorlagen verwendet

Die Einstellungen werden in Ihren Smarty-Vorlagen über die Methode $webshop->getThemeSetting() abgerufen. Der erste Parameter ist der Pfad des Abschnitts, der zweite Parameter ist der Pfad des Feldes:

<!-- Holen Sie sich einen Farbwert--><{$primary = $webshop->getThemeSetting('theme', 'primary')}><!-- Verwenden Sie den Wert in Inline-CSS --> <divstyle="color: <{$primary}>">Header</div><!-- Überprüfe einen Booleschen Wert--> <{if $webshop->getThemeSetting('product', 'show_sku')}><span>Produkt: <{$product->getSku()}></span><{/if}><!-- Ein Bild holen (gibt ein Image-Objekt zurück)--><{$og_image = $webshop->getThemeSetting('open_graph', 'image')}><{if $og_image && is_object($og_image)}><meta property="and:image" content="<{$og_image->getSrc(1200, 630, 'fit')}>"><{/if}>

Tipps für eine gute Struktur

Hier sind einige Empfehlungen, um das Layout des Akkordeons optimal zu nutzen:

• Logisch gruppieren - Gruppieren Sie zusammengehörige Felder im selben Abschnitt. Zum Beispiel alle Farben unter "Thema & Farben" und alle Checkout-Optionen unter "Checkout".
• Schreiben Sie gute Beschreibungen - Sowohl Abschnitte als auch Felder haben eine Beschreibungseigenschaft. Verwenden Sie diese, um zu erklären, was die Einstellung bewirkt, und geben Sie Beispiele.
• Verwenden Sie default_value für Farben - Farbfelder unterstützen default_value, was dem Shop-Betreiber einen Reset-Button gibt, mit dem er jederzeit zur Standardfarbe zurückkehren kann.
• Halten Sie Pfadnamen kurz und englisch - Verwenden Sie für Pfadfelder(z.B. shipping_alert, product_card) snake_case und englische Namen. Benutzerfreundliche Namen gehören in das Namensfeld.
• Verwenden Sie einen Listentyp für begrenzte Auswahlmöglichkeiten - Anstatt den Shop-Betreiber aufzufordern, Symbolnamen einzugeben, geben Sie ihm ein Dropdown mit vordefinierten Optionen.

Zusammenfassend

Das Akkordeon-Layout ist der empfohlene Weg, um die Themenoptionen in neuen Shoporama-Themen zu organisieren - insbesondere, wenn das Thema mehr als eine Handvoll Abschnitte hat. Es bietet dem Shop-Betreiber einen besseren Überblick, eine schnellere Navigation über die Suche und speichert die Benutzereinstellungen zwischen den Sitzungen. Alles, was es braucht, ist eine einzige Zeile in Ihrer theme_settings.json.