Feature/qucosa relaunch

[Jeggle-s]

Qucosa Relaunch 2021

In dieser README soll eine Übersicht aller neuen Inhaltselemente des Qucosa-TYPO3-Projekts geboten werden. Zusätzlich soll die überarbeitete Projektstruktur erläutert werden.

Hinzugefügte Extension

Zur Erstellung der Templates und besseren Strukturierung, wurden die folgenden Extensions hinzugefügt:
fluidtypo3/vhs
Wird verwendet, um zusätzliche Viewhleper zu verwenden, die Fluid von Haus aus nicht mitbringt.
gridelementsteam/gridelements
Dient zu besseren Strukturierung des Backends, sodass ineinander verschachtelte Elemente für den Redakteur besser zu pflegen sind.
ichhabrecht/content-defender
Für Backen- und Gridlayouts dient diese Extension dazu um u.a. nur bestimmte Inhaltselemente in einem Layout zu erlauben oder die Anzahl an erlaubten Inhaltselementen zu beschränken.
xima-media/xm_tools
Bietet verschiedene nützliche Tools. Aktuell wird der Flexform-Dataprocessor verwendet um Flexform im Frontend einfacher auslesen zu können

Allgemeines

Alle Dateien bzgl. MUSICONN und FIDMOVE wurden nicht angepasst und sind noch im Projekt vorhanden.

Templates und Partials

Templates und Partials für einzelne Mandanten wurden entfernt. Alle Mandanten teilen sich nun die exakt gleichen Templates und die gleichen Assets. Die Konfiguration bestimmter Eigenschaften kann jetzt über voneinander getrennte TypoScript Dateien erreicht werden. Alle Mandanten teilen sich allerdings eine Basis-Konfiguration (Common-Ordner).

Das Tracking-Script, welches zuvor als Partial hinterlegt wurde, wird jetzt über das TypoScript des entsprechenden Mandanten im Header eingebunden.

Anlegen von Mandanten

Wenn ein neuer Mandant angelegt wird oder ein bestehender bearbeitet wird, muss lediglich die Konfiguration im Root hinzugefügt werden. Die unterschiedlichen Farben und Logos werden ebenfalls über TypoScript bestimmt. Die Farbe wird durch eine CSS-Klasse gesetzt, welche am HTML-Tag mittels config.htmlTag_stdWrap.cObject.value = <CSS-Klasse> hinzugefügt werden kann. Für das Logo steht die Datei lib.logo.typoscript bereit. Beispielinhalt:

lib.logo {  
    stdWrap.typolink.ATagParams = class="qsa_logo qsa_logo__tu-chemnitz"  
  stdWrap.typolink.title = Startseite  
  10 {  
        file = EXT:slub_web_qucosa/Resources/Public/Images/img/logo/Logo_TU_Chemnitz.svg  
  altText = Logo der TU Chemnitz  
  }  
}

Übersetzungen

Die Übersetzungsdateien wurden erweitert und es kamen neue hinzu. Aktuell sind noch nicht alle Übersetzungen hinterlegt. Diese sollen vor Übergabe entsprechend vervollständigt werden.

Gridelements (Container)

Viele der neu hinzugefügten Inhaltselemente können nur innerhalb eines Containers verwendet werden. Folgende Container gibt es aktuell:

• Akkordeon: Hier können mehrere Akkordeon Elemente hinzugefügt werden um diese thematisch zu gruppieren.
• Mehrere Akkordeons: Dieser Container ist hilfreich, wenn mehrere Akkordeons auf einer Seite (z.B. FAQ) verwendet werden sollen. Hier werden im Header (über allen Akkordeons) zusätzlich noch Sprungmarken gesetzt.
• Karussell: Container für Karussell-Elemente. Es können unbegrenzt viele Elemente hinzugefügt werden.
• Header Teaser mit Icons: Im Hero-Bereich der Startseite können Teaser für Unterseiten angelegt werden. Die Ausprägung mit Icons zeigt hat keinen Hintergrund und ist daher ein eigener Container.
• Header Teaser ohne Icons: Gleicher Verhalten wie der Teaser mit Icons nur, dass die Ausprägung ein wenig anders aussieht.
• Logo Teaser: Container für Logo-Teaser-Eelemente im Footer der Seite. Es können maximal drei dieser Elemente hinzugefügt werden

Neue Inhaltselemente

Es wurden neue Inhaltselement für Redakteure hinzugefügt.

Hero-Teaser mit und ohne Icons

Im Hero-Bereich auf der Startseite (Suche) stehen zwei Inhaltselemente zur Verfügung, welche als Teaser für Unterseiten genutzt werden können. Bei der Variante mit Icons sind aktuell einige Icons statisch hinterlegt, können durch Entwickler allerdings beliebig erweitert werden. Hier ist es wichtig, dass die Icons im Projekt (Frontend) auch zur Verfügung stehen.
Die Inhalte müssen per Hand gepflegt werden, da es aktuell nicht möglich ist die Teaser zu generieren. Es müssen min. 2 Teaser angelegt werden. Maximal können 4 Teaser hinzugefügt werden!

Logo Element

Im Footer auf der Startseite ist es möglich einen Logo-Teaser mit Verlinkung zu erstellen. Maximal können hier drei Logos mit einer kurzen Beschreibung hinterlegt werden.

Flip-Card Element

Das Flipcard Element besteht aus einem Icon, einer Überschrift und einem Beschreibungstext. Die Icons sind festgelegt, können aber wie im Hero-Teaser jederzeit durch einen Entwickler angepasst werden. Die Anzahl der hinterlegbaren Elemente ist nicht begrenzt. Das Flip-Card Element kann nur im Flipcard-Container (Gridelement) verwendet werden.

Akkordeon-Element

Einfaches Textelement ohne Bilder, welches nur im Akkordeon-Container verwendet werden kann. Der RTE inkl. allen zugelassen Formatierungen ist aktiviert.

Text Element

Ebenfalls ein Textelement mit RTE, welches alleinstehend auf Inhaltsseiten verwendet werden kann.

Sidebar-Bild

Im Backend-Layout mit Sidebar kann im Sidebar-Header ein Bild hinterlegt werden. Es kann max. 1 Bild verwendet werden. Das öffnen in der Modalbox bedarf keiner weiteren Konfiguration.

Sidebar Linkliste

Dieses Element ist ebenfalls nur im BE-Layout mit einer Sidebar verfügbar. Hier können Links als Aufzählung hinterlegt werden.

Sidebar Teaser

Teaser in der Sidebar mit Button und einem kurzen Beschreibungstext.

Neue Backend Layouts

• Default: Dieses Layout hat einen Header und einen Content-Bereich. Wird aktuell auf der Startseite für die HeroTeaser verwendet.
• Eine Inhaltsspalte: Default Layout nur ohne extra Header-Bereich. Dieses Layout kann bspw. für Inhaltsseiten verwendet werden.
• Inhalt mit Sidebar: Das Layout hat einen primären Inhaltsbereich neben welchem eine Sidebar mit Header und Content vorhanden ist. Darunter befindet sich zusätzlich noch der Footer der Inhaltsseite, welcher sich über die gesamte Breite der Seite zieht.

Eingabeassistent

Im Prototypen ist der Eingabeassistent als Modal umgesetzt. Die aktuelle Umsetzung im TYPO3 (qucosa.de) sieht allerdings vor, dass eine neue Seite geladen wird. Daher unterscheidet sich der Prototyp und die Version im TYPO3 aktuell. Wenn der Eingabeassistent aufgerufen wird muss eine Publikationsart aktuell im neuen Tab geöffnet werden (to be fixed). Es sind alle Formularelemente angepasst wurden. An einem Formularelement ist zusätzlich das Attribut data-showinsummary hinzugekommen. Dieses ist dafür zuständig, welche Elemente auf der Seite der Zusammenfassung (letzter Schritt) gezeigt werden soll. Derzeit ist dies bei allen Elementen auf false gesetzt und kann somit individuell angepasst werden.

Derzeit fehlt noch das hinzufügen von Inputs (bis auf Dateiuploads). Da wäre eine Absprache nötig inwieweit die aktuelle Umsetzung auf qucosa.de verwendet werden kann oder wir alles über JavaScript machen.