[4.5] Theme Management im OXID eShop ab 4.5.0

Theme-Management im OXID eShop ab 4.5.0

Ab OXID eShop 4.5.0 sind die Theme-Einstellungen aus derconfig.inc.php ins Admin-Backend verlegt (Stammdaten -> Grundeinstellungen -> Themes), wo eine Liste aller verfügbaren Themes, deren Beschreibung, Vorschaubild und der jeweiligen Einstellungen zu finden ist. Diese Metadaten werden aus dem betreffenden Theme-Verzeichnis eingelesen, dazu gleich mehr.

Um ein Theme zu verwenden, einfach den entsprechenden Listeneintrag wählen und unten rechts auf „Aktivieren“ klicken.

800px-EShopBackendThemes

Die Struktur der Theme-Verzeichnisse mit den Templates, Sprachdateien, Bildern und Scripten wurde nicht verändert. Allerdings ist mit der 4.5 der Aufbau des Templates geändert worden. Das ist allerdings nicht Gegenstand dieses Tutorials.

Theme Meta-Daten

Azure Theme Dateien

Vorschaubild: out/azure/theme.jpg

Info-Texte: out/azure/theme.php

Es genügt diese beiden Dateien mit den individuellen Daten eines eigenen Themes in das Verzeichnis /out/mein_theme/ zu legen, um dieses in der Liste im Backend zu sehen. Dabei muss die Theme-id dem Namen des Ordners entsprechen, in dem das Theme liegt.
ACHTUNG – ab 4.7.x folgende Änderung:
Die theme.php muss in das Verzeichnis /application/views/mein_theme/ gelegt werden, dort sind auch alle individuellen Templatedateien abzulegen (in der selben Ordnerstruktur wie Azure). Ins Verzeichnis /out/mein_theme/ legt man das theme.jpg sowie die Verzeichnisse /img und /src mit den benötigten Dateien.

Individuelle Themes

Um ein individuelles Theme zu erstellen bei dem lediglich einzelne Dateien verändert sind, genügt es auf das Eltern-Theme zu verweisen (parentTheme) ohne eine eigene id zu vergeben. Der Theme-Titel und die Beschreibung sind anzupassen. Wichtig ist außerdem die Angabe, auf welche Version des Eltern-Themes dies Abwandlung basiert (parentVersions).

Solch ein Theme-Kind kann nur aktiviert werden, wenn das Eltern-Theme vorhanden ist und dessen Version mit den angegebenen Versionen übereinstimmt.

Ein solches Theme verwendet alle Template-Dateien und Einstellungsoptionen vom Eltern-Theme. Nur die Dateien, die auch im Verzeichnis des abgewandelten Themes liegen, werden vorrangig verwendet. Wenn also zum Beispiel die Produktansicht verändert wurde und das entsprechende Template details.tpl im Kinder-Verzeichnis liegt, dann wird dieses verwendet und nicht das Original aus dem Eltern-Verzeichnis

Bei einem auftretenden Fehler kann das Kinder-Theme nicht aktiviert werden, statt dem „Aktivieren“-Button wird eine Fehlermeldung gezeigt.

800px-Theme_error_no_parent

Script zum Kopieren ausschließlich veränderter Template-Dateien

Normalerweise ist es beim Entwickeln eines Templates meistens leichter direkt in einer vollständigen Kopie eines Templates zu arbeiten. Aggrosoft hat deshalb ein Script entwickelt, das nachdem die Template-Arbeiten abgeschlossen sind, automatisch nur die geänderten Dateien extrahiert und in einem extra Ordner ablegt – dieser Ordner kann dann als sCustomTheme gesetzt werden.

Die Verwendung ist einfach, geändertes und original Template wählen (es muss eine unveränderte Version des Templates auf dem Server liegen), Zielordner eingeben und Start drücken.

Danke an Aggrosoft für die Bereitstellung des Scripts; Forenthread:http://www.oxid-esales.com/forum/showthread.php?p=70414

Theme-spezifische Einstellungen

OXID eShop Themes sind immer abhängig von verschiedenen Parameter-Einstellungen, die im Backend gesetzt werden. Mit Entwicklung des neuen Azure-Templates wurden die Theme-spezifischen Einstellungen eingeführt.

Ab OXID eShop 4.5.0 ist es Theme-Entwicklern somit möglich, eigene Einstellungsoptionen ohne Änderungen der Backend-Templates zu ergänzen.

Diese Optionen werden in der existierenden Datenbank-Tabelle oxconfig gespeichert, in der Spalte oxmodule mit dem Wert „theme:azure“ gekennzeichnet. Zusätzliche Anzeige-Parameter haben eine eigene Tabelle „oxconfigdisplay“, in der die Einstellungen von Sortierung, Gruppierung und Drop-Down-Werten festgelegt werden. Die Sprachbausteine für die Theme-Einstellungen müssen in Sprach-Dateien mit dem Namen theme_options.php hinterlegt werden.

Einige spezifische Einstellungen werden im eShop Sourcecode verwendet, um korrekte Bildgrößen zu generieren oder Seitenzahlen zu berechnen. Es wird empfohlen, diese vom Azure-Theme zu kopieren (nach „theme:azure“ in den SQL-inserts in setup/sql/database.sql suchen).

Beispiel

Eine neue Theme-spezifische Einstellungsoption zu Azure hinzufügen: „Header-Slogan anzeigen/nicht anzeigen“

1. Option zur Tabelle oxconfig hinzufügen

Spalte Wert Beschreibung
OXID azure.blShowSlogan.1 einzigartige id
OXSHOPID 1 shop id (in der Regel 1 – außer ggf. bei EE-Shops)
OXMODULE theme:azure theme:{theme id = Verzeichnis-Name}
OXVARNAME blShowSlogan Options-Name
OXVARTYPE bool Options-Typ (‚bool‘,’str‘,’arr‘,’aarr‘)
OXVARVALUE Options-Wert, leer lassen, wird durch speichern im Backend gesetzt

SQL ausführen zum Eintragen der Werte:

2. Anzeige-Optionen festlegen in Tabelle oxconfigdisplay

Spalte Wert Beschreibung
OXID azure.blShowSlogan.1 einzigartige id
OXCFGMODULE theme:azure theme:{theme id = Verzeichnis-Name}
OXCFGVARNAME blShowSlogan Options-Name
OXGROUPING display Options Anzeige-Gruppe
OXVARCONSTRAINT festgelegte Werte, für Drop-Down-Auswahl
OXPOS 0 Position innerhalb der Anzeige-Gruppe

Die Anzeige der Option im Backend richtet sich nach dem Typ, welcher in oxconfig.OXVARTYPE festgelegt wurde.

Type Display html element
str Texteingabe
bool Auswahlfeld
arr Textfeld
aarr Textfeld

Vordefinierte Werte für eine Drop-Down-Auswahl legt man in oxconfigdisplay.OXVARCONSTRAINT fest:

Vorgabe Display input
0|1 Drop-Down mit Werten 0 und 1
a|b|c Drop-Down mit Werten a, b und c

Eigene Optionsgruppen werden automatisch erzeugt, wenn in oxconfigdisplay.OXGROUPING ein Name angegeben ist und die Übersezung zu theme_options.php hinzugefügt wurde (nach folgendem Muster: ‚SHOP_THEME_GROUP_meinegruppe‘).

SQL ausführen zum Eintragen der Werte:

3. Übersetzung hinzufügen in out/azure/[en|de]/theme_options.php

4. Slogan mit Prüfung der Options-Einstellung in Template out/azure/tpl/layout/header.tpl einbauen

/tmp leeren und Service -> Tools -> Views aktualisieren

Im Backend ist die neue Option zu sehen, im Frontend bei angehaktem Kontrollkästchen der Slogan:

800px-EShopBackendWithNewOption

800px-EShopFrontendWithSlogan

Ein eigenständiges Theme „klonen“

Um ein eigenes Theme mit allen Config-Möglichkeiten unabhängig vom Eltern – Theme zu erhalten, muss man alle Dateien des Ausgangs-Theme in einen neuen Ordner kopieren ( /meinTheme) und dann das passende Script ausführen (natürlich vorher mit den eigenen Werten/Pfaden angepasst):

Template-Struktur

Verzeichnisbaum /tpl

tpl
├── custom
├── email
│   ├── html
│   │   ├── footer.tpl
│   │   ├── forgotpwd.tpl
│   │   ├── header.tpl
│   │   ├── invite.tpl
│   │   ├── newsletteroptin.tpl
│   │   ├── order_cust.tpl
│   │   ├── order_owner.tpl
│   │   ├── owner_reminder.tpl
│   │   ├── pricealarm_owner.tpl
│   │   ├── register.tpl
│   │   ├── senddownloadlinks.tpl
│   │   ├── sendednow.tpl
│   │   ├── suggest.tpl
│   │   └── wishlist.tpl
│   └── plain
│       ├── forgotpwd.tpl
│       ├── invite.tpl
│       ├── newsletteroptin.tpl
│       ├── order_cust.tpl
│       ├── order_owner.tpl
│       ├── pricealarm_owner.tpl
│       ├── register.tpl
│       ├── senddownloadlinks.tpl
│       ├── sendednow.tpl
│       ├── suggest.tpl
│       └── wishlist.tpl
├── form
│   ├── account_newsletter.tpl
│   ├── contact.tpl
│   ├── fieldset
│   │   ├── order_newsletter.tpl
│   │   ├── order_remark.tpl
│   │   ├── salutation.tpl
│   │   ├── state.tpl
│   │   ├── user_account.tpl
│   │   ├── user_billing.tpl
│   │   ├── user_email.tpl
│   │   ├── user_noaccount.tpl
│   │   └── user_shipping.tpl
│   ├── forgotpwd_change_pwd.tpl
│   ├── forgotpwd_email.tpl
│   ├── formparams.tpl
│   ├── guestbook.tpl
│   ├── login_account.tpl
│   ├── login.tpl
│   ├── newsletter.tpl
│   ├── pricealarm.tpl
│   ├── privatesales
│   │   ├── accept_terms.tpl
│   │   ├── basketexcl.tpl
│   │   └── invite.tpl
│   ├── recommendation_add.tpl
│   ├── recommendation_edit.tpl
│   ├── register.tpl
│   ├── suggest.tpl
│   ├── user_checkout_change.tpl
│   ├── user_checkout_noregistration.tpl
│   ├── user_checkout_registration.tpl
│   ├── user_password.tpl
│   ├── user.tpl
│   ├── wishlist_publish.tpl
│   ├── wishlist_search.tpl
│   └── wishlist_suggest.tpl
├── layout
│   ├── base.tpl
│   ├── footer.tpl
│   ├── header.tpl
│   ├── page.tpl
│   ├── popup.tpl
│   └── sidebar.tpl
├── message
│   ├── err_404.tpl
│   ├── errors.tpl
│   ├── error.tpl
│   ├── err_setup.tpl
│   ├── err_unknown.tpl
│   ├── exception.tpl
│   ├── inputvalidation.tpl
│   ├── notice.tpl
│   ├── success.tpl
│   └── user_blocked.tpl
├── page
│   ├── account
│   │   ├── dashboard.tpl
│   │   ├── downloads.tpl
│   │   ├── forgotpwd.tpl
│   │   ├── inc
│   │   │   ├── account_menu.tpl
│   │   │   └── file_attributes.tpl
│   │   ├── login.tpl
│   │   ├── newsletter.tpl
│   │   ├── noticelist.tpl
│   │   ├── order.tpl
│   │   ├── password.tpl
│   │   ├── recommendationadd.tpl
│   │   ├── recommendationedit.tpl
│   │   ├── recommendationlist.tpl
│   │   ├── register_confirm.tpl
│   │   ├── register_success.tpl
│   │   ├── register.tpl
│   │   ├── user.tpl
│   │   └── wishlist.tpl
│   ├── checkout
│   │   ├── basket.tpl
│   │   ├── inc
│   │   │   ├── basketcontents.tpl
│   │   │   ├── options.tpl
│   │   │   ├── payment_other.tpl
│   │   │   ├── payment_oxidcashondel.tpl
│   │   │   ├── payment_oxidcreditcard.tpl
│   │   │   ├── payment_oxiddebitnote.tpl
│   │   │   ├── steps.tpl
│   │   │   ├── trustedshops.tpl
│   │   │   └── wrapping.tpl
│   │   ├── order.tpl
│   │   ├── payment.tpl
│   │   ├── thankyou.tpl
│   │   └── user.tpl
│   ├── compare
│   │   ├── compare.tpl
│   │   └── inc
│   │       └── compareitem.tpl
│   ├── details
│   │   ├── ajax
│   │   │   ├── fullproductinfo.tpl
│   │   │   └── productmain.tpl
│   │   ├── details.tpl
│   │   └── inc
│   │       ├── attributes.tpl
│   │       ├── compare_links.tpl
│   │       ├── deliverytime.tpl
│   │       ├── editTags.tpl
│   │       ├── fullproductinfo.tpl
│   │       ├── media.tpl
│   │       ├── morepics.tpl
│   │       ├── priceinfo.tpl
│   │       ├── productmain.tpl
│   │       ├── related_products.tpl
│   │       ├── tabs.tpl
│   │       ├── tags.tpl
│   │       └── zoompopup.tpl
│   ├── guestbook
│   │   └── guestbook.tpl
│   ├── info
│   │   ├── contact.tpl
│   │   ├── content_plain.tpl
│   │   ├── content.tpl
│   │   ├── links.tpl
│   │   ├── newsletter.tpl
│   │   ├── news.tpl
│   │   └── suggest.tpl
│   ├── list
│   │   ├── list.tpl
│   │   └── morecategories.tpl
│   ├── privatesales
│   │   ├── invite.tpl
│   │   └── login.tpl
│   ├── recommendations
│   │   ├── inc
│   │   │   └── list.tpl
│   │   └── recommlist.tpl
│   ├── review
│   │   ├── review_login.tpl
│   │   └── review.tpl
│   ├── search
│   │   └── search.tpl
│   ├── shop
│   │   ├── mallstart.tpl
│   │   └── start.tpl
│   ├── tags
│   │   └── tags.tpl
│   └── wishlist
│       └── wishlist.tpl
├── rdfa
│   ├── content
│   │   ├── content.tpl
│   │   └── inc
│   │       ├── business_entity.tpl
│   │       ├── delivery_charge.tpl
│   │       └── payment_charge.tpl
│   ├── details
│   │   ├── details.tpl
│   │   └── inc
│   │       ├── delivery.tpl
│   │       ├── object.tpl
│   │       ├── payment.tpl
│   │       └── price.tpl
│   └── rdfa.tpl
└── widget
├── address
│   ├── billing_address.tpl
│   └── shipping_address.tpl
├── breadcrumb.tpl
├── dynscript.tpl
├── facebook
│   ├── comments.tpl
│   ├── connect.tpl
│   ├── enable.tpl
│   ├── facepile.tpl
│   ├── init.tpl
│   ├── invite.tpl
│   ├── like.tpl
│   └── share.tpl
├── footer
│   ├── categorieslist.tpl
│   ├── info.tpl
│   ├── manufacturers.tpl
│   ├── newsletter.tpl
│   ├── services.tpl
│   └── vendors.tpl
├── header
│   ├── currencies.tpl
│   ├── languages.tpl
│   ├── loginbox.tpl
│   ├── search.tpl
│   ├── servicebox.tpl
│   └── topcategories.tpl
├── locator
│   ├── attributes.tpl
│   ├── itemsperpage.tpl
│   ├── listdisplaytype.tpl
│   ├── listlocator.tpl
│   ├── paging.tpl
│   └── sort.tpl
├── manufacturersslider.tpl
├── minibasket
│   ├── countdown.tpl
│   ├── minibasketmodal.tpl
│   ├── minibasket.tpl
│   └── newbasketitemmsg.tpl
├── product
│   ├── bargainitems.tpl
│   ├── boxproducts.tpl
│   ├── compare_links.tpl
│   ├── listitem_grid.tpl
│   ├── listitem_infogrid.tpl
│   ├── listitem_line.tpl
│   ├── list.tpl
│   └── selectbox.tpl
├── promoslider.tpl
├── reviews
│   ├── rating.tpl
│   └── reviews.tpl
├── rss.tpl
├── shoplupe
│   └── ratings.tpl
├── sidebar
│   ├── adminbanner.tpl
│   ├── categoriestree.tpl
│   ├── news.tpl
│   ├── partners.tpl
│   ├── recommendation.tpl
│   └── tags.tpl
└── trustedshops
├── info.tpl
└── ratings.tpl

Änderungen in der Struktur vom Theme „Basic“

Mit der Version 4.5 wurde das bisher alleinige Theme „Basic“ ein wenig in der Struktur verändert. Dabei gab es sowohl Änderungen der Pfadstruktur, wie auch einige Änderungen in den Dateinamen. Hat man nun ein modifiziertes Theme auf Basis von Basic, muss man dies an die neue Struktur anpassen.
https://www.oxid-esales.com/de/support-services/dokumentation-und-hilfe/archiv-oxid-eshop/design-anpassen/templates/template-struktur-des-themes-basic-ab-450.html  

Wer nun nicht die Update-App aus den Cumulative-Patches verwenden möchte, kann dies mit diesem kleinen Batchscript erledigen. Dabei werden die alten Dateien in die neue Ordernstruktur verschoben und ggf. umbenannt. Sollten in den Templates Links enthalten sein, so muss man die ebenfalls selbst noch anpassen.

Vielen Dank an KristianH (D3) für das bereitstellen der Batch-Datei!

copy+paste  – speichern als ‚basic45templateschubser.bat‘

 

0.00 avg. rating (0% score) - 0 votes
0 Kommentare

Dein Kommentar

Want to join the discussion?
Feel free to contribute!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *