TYPO3/Use custom themes/de

From Aimeos documentation

< TYPO3‎ | Use custom themes

<languages/>


Das Standard Layout ist schön aber Sie werden früher oder später Ihr eigenes verwenden wollen. Ein template besteht aus einer CSS-Datei , mehreren Javascript -Dateien sowie Bildern und Referenzen (Pfade) dieser Dateien.Hier finden mehr Informationen zu über Layout und Template in der developers Kapitel.

Aimeos 2.x

Seit der Version 2.0 wurde die Template-Layout-Gestaltung vereinfacht und der CSS und JS-Code in separaten Dateien gespeichert. Das Standard-Theme mit dem Namen "Eleganz ", eine sehr hochwertiges Layout. Das alte ist nach wie vor als "klassische" zur Verfügung. Die aktuelle TypoScript -Setup, welches darin enthalten ist, sieht wie folgt aus :

  1. page.includeCSS.aimeos-common = EXT:aimeos/Resources/Public/Themes/elegance/common.css
  2. page.includeCSS.aimeos = EXT:aimeos/Resources/Public/Themes/elegance/aimeos.css
  3.  
  4. page.includeJSFooterlibs.jquery = http://code.jquery.com/jquery-1.11.1.min.js
  5. page.includeJSFooterlibs.jquery.external = 1
  6. page.includeJSFooterlibs.jquery-migrate = http://code.jquery.com/jquery-migrate-1.2.1.min.js
  7. page.includeJSFooterlibs.jquery-migrate.external = 1
  8. page.includeJSFooterlibs.jquery-ui = EXT:aimeos/Resources/Public/Themes/jquery-ui.custom.min.js
  9.  
  10. page.includeJSFooter.aimeos = EXT:aimeos/Resources/Public/Themes/aimeos.js
  11. page.includeJSFooter.aimeos-detail = EXT:aimeos/Resources/Public/Themes/aimeos-detail.js
  12. page.includeJSFooter.aimeos-theme = EXT:aimeos/Resources/Public/Themes/elegance/aimeos.js

Zur Beschleunigung des Ergebnisses für den Benutzer wird die jQuery und jQuery-Bibliothek Migration aus dem jQuery CDN vom Browser abgerufen

Die aimeos-detail.js Datei ist nur für die Produktdetailseite erforderlich. Um die Menge an Code, der vom Browser auf der ersten Seite Anfrage abgerufen werden muss, zu reduzieren, können Sie die "aimeos-Detail" JS Konfigurationsoption mit unset

page.includeJSFooter.aimeos-detail >

im TypoScript Setup-Abschnitt setzen und die Zeile nur auf der Detailseite behalten. </ div>

Aimeos 1.x

CSS und Javascript -Dateien über TypoScript einbinden:

  1. page.includeCSS.tx_aimeos =  EXT:aimeos/Resources/Public/html/classic/css/arcavias.css
  2. page.includeJSFooterlibs.jquery = EXT:aimeos/Resources/Public/html/classic/js/jquery.min.js
  3. page.includeJSFooterlibs.jquery-migrate = EXT:aimeos/Resources/Public/html/classic/js/jquery-migrate.js
  4. page.includeJSFooterlibs.jquery-ui = EXT:aimeos/Resources/Public/html/classic/js/jquery-ui.custom.min.js
  5. page.includeJSFooter.tx_aimeos = EXT:aimeos/Resources/Public/html/classic/js/arcavias.js
  6. page.includeJSFooter.tx_aimeos_detail = EXT:aimeos/Resources/Public/html/classic/js/arcavias-detail.js

Die separate Konfiguration für die Arcavias-detail.js steht ab Aimeos1.4 zur Verfügung.

Benutzen eigener Dateien

Sie können z.B. eine oder mehrere dieser Dateien mithilfe von TypoScript, ersetzen.

  1. page.includeCSS.tx_aimeos =  fileadmin/template/css/arcavias.css
  2. page.includeJSFooterlibs.jquery = fileadmin/template/js/jquery.min.js

Bitte stellen Sie sicher, dass die TypoScript-Anweisungen ausgeführt werden, nachdem der Aimeos setup.txt eingebunden ist, so dass sie wirklich die Inhalte aus dieser Datei überschreiben können! Nach dem Import der page tree from the .t3d file, die Aimeos setup.txt ist in der "Shop" Seite enthalten.Um die CSS-Datei zum Beispiel zu überschreiben, müssen Sie die obigen Ausführungen im Setup- Bereich dieser Seite stehen. Eine Aufnahme dieser Anweisungen in den Root-Seite hätte keine Wirkung.

Wenn Sie nur das Layout ein wenig verändern wollen, verwenden Sie eine separate CSS- Datei, die Stile, die von der arcavias.css stammen enthalten sollte. Sie können Ihre Datei per TypoScript hinzufügen, aber nach der page.includeCSS.tx_aimeos TypoScript-Anweisung muss enthalten sein, damit es nach dem arcavias.css-Datei enthalten ist:

  1. page.includeCSS.myproject =  fileadmin/template/css/myfile.css

Die Bilder -Verzeichnis müssen anders konfiguriert werden. Zuerst müssen Sie die Basis-URL für die neuen Vorlagendateien festlegen:

  1. plugin.tx_aimeos.settings.client.html.common.template.baseurl = fileadmin/template

Dann können Sie Ihre eigenen Kopien diesen Dateien in das Verzeichnis "/fileadmin/template" hinzuzufügen.

Fügen Sie keinen Schrägstrich hinzu (/) am Ende des Konfigurationswertes