Catalog mit Frontend-Editing und Workflow erstellen

Aus Contao Community Documentation

betrifft
TYPOlight Version ab 2.8
Contao Version ab 2.9
Extensions Catalog ab 2.0beta1

Kurzbeschreibung

Hier geht es darum, wie man Items im Frontend erstellen und bearbeiten kann. Anhand eines Immobilienkataloges wird auch noch die Einrichtung eines Workflows vorgestellt. Zum Schluss soll es dem Besucher der Seite noch möglich sein Kontakt zu dem Seitenbetreiber aufzunehmen (mithilfe eines Formulars bei dem Item). Hier bei dem Beispiel werden exemplarisch zwei Arten von Immobilien angelegt (Haus zum Kaufen und Hotelzimmer). Bei diesem Beispiel ist die Backend-Ansicht von den Items nicht wirklich wichtig und wurde auch vernachlässigt, da alle Items über das Frontend verwaltet werden.

Benötigte Erweiterungen

  • catalog
    • backend_filterwiz
    • backend_tabletree
    • DC_DynamicTable
    • taxonomy
  • catalogitemuseridfield (für den Workflow wichtig, da damit die Items dem User zugewiesen werden)
  • catalog_mailer

Voraussetzungen für das Tutorial

  • wie ein Katalog erstellt wird sollte von anderen Tutorials klar sein und man sollte die Beschreibung der einzelnen Felder gelesen haben.
  • Erstellung von Taxonomie
  • der Umgang mit Contao sollte bekannt sein
    • Seitenstruktur bearbeiten
    • Module anlegen
    • Templates bearbeiten
    • Mitgliederbereich einrichten (für 2 Gruppen:Makler und Makler-Admins)

Erstellen der Grundlagen im Backend

Erstellung von neuen Seiten in der Seitenstruktur

  • Startseite (Hier wird catalogfeatured eingesetzt)
    • Immobilien Liste (Filter und Liste der Immobilien)
      • Immobilien Details (die Detailseite von einem Item)
  • Geschützer Bereich
    • Immobilien Anlegen (Für normale Makler)
      • Haus zum kaufen Liste
        • Haus zum kaufen anlegen / bearbeiten
      • Hotelzimmer Liste
        • Hotelzimmer anlegen / bearbeiten
    • Immobilien Anlegen Administration (Für Makler-Admins)
      • Haus zum kaufen Liste
        • Haus zum kaufen anlegen / bearbeiten
      • Hotelzimmer Liste
        • Hotelzimmer anlegen / bearbeiten

Cat Sitestructure

Taxonomie (Bedingung)

Die Taxonomien sind für die Kategorien und für die Gebiete der Items

Man erstellt sich zuerst die Kategorien und die Optionen. Wobei man hier wie bei einem Baum Verschachtelungen vornimmt:

  • Immobilien
    • Immo Art
      • Haus
        • Miethaus
        • Ferienhaus
        • Haus zum kaufen
      • Hotel
        • Hotelzimmer
    • Immo Gebiete
      • Bizerte
      • Jendouba
      • Beja
      • etc.

Das Ergebniss sollte ungefähr so aussehen wie auf diesem Bild:

Cat Taxonomy

Erstellen von einem Katalog mit Feldtypen

Neuer Katalog

Zuerst erstellt man mit einem Klick auf Neuer Katalog einen neuen Katalog und stellt den wie folgt ein:

  • Name von dem Katalog angeben
  • einen Tabellennamen angeben (die Tabelle wird automatisch erzeugt). Bitte keine Tabellen mit tl_* anlgegen, da diese dann von Contao immer als zu löschen vorgemerkt werden beim aktualisieren der Datenbank.
  • Alias und Felder veröffentlichen kann erst später angegeben werden, wenn diese Felder vorhanden sind.
  • Sprung zur Seite: Angabe der Detailansicht
  • Suche - Suchbar -> aktivieren (keine Bedingung angeben)
  • Alle weiteren Einstellungen werden erst später vorgenommen.

Cat erstellen Bild1

Cat erstellen Bild2

Felder definieren für den Katalog Merkzettel

Es werden folgende Felder angelegt (Einstellungen die nicht vorgenommen werden, sind nicht aufgelistet):

Cat Felder erstellen

Cat Neues Feld

Feldtypen für die Items
Bezeichnung Spaltenname Typ Einstellungen
Titel immo_titel text
  • Sichtbar in der Backend-Listen-Ansicht
  • Sortierungs-Dropdown aktivieren
    • Sortier-Modus -> Gruppieren anhand der ersten zwei Buschstaben und absteigend
    • Backend-Suche aktivieren
  • Pflichtfeld
  • Gruppen für Frontend-Bearbeitung
    • Beide Gruppen auswählen
Alias immo_alias_auto alias * Alias-Titel-Feld -> Titel
  • Gruppen für Frontend-Bearbeitung
    • Beide Gruppen auswählen
Benutzer ID userid Frontend-Benutzer
Art immo_art Auswahl
  • Pflichtfeld
  • Tabelle für Optionen -> tl_taxonomy
  • Option Spaltenwert -> name
  • Option Sortierspalte -> name
  • Sichtbar in der Backend-Listen-Ansicht
  • Die Optinsauswahl individualisieren
    • Auswahl der Stamm-Einträge -> Immo Art
    • Modus für Unter-Auswahl -> Zeigen Sie die Kindelemente von ausgewählten Einträgen ausgeklappt an.'
    • Filter des Elternelements -> leer lassen
  • Gruppen für Frontend-Bearbeitung
    • Beide Gruppen auswählen
Umgebungsbeschreibung immo_umgebung langtext
  • HTML erlauben
  • Rich Text
  • TinyMCE-Editor-Template -> tinyMCE
  • Gruppen für Frontend-Bearbeitung
    • Beide Gruppen auswählen
Bild immo_bild file
  • Sichtbar in der Backend-Listen-Ansicht -> aktivieren
  • Beschriftungsgruppe beginnen -> aktivieren
    • Titel der Beschriftung -> Produktbild
  • Format Einstellungen
    • Als Bildfeld mit Miniaturansicht erstellen
    • Bildbreite und -höhe -> 200 / 100 / Exaktes Format
    • Links als Dateidownload oder Bilder-Lightbox erstellen -> aktivieren
  • Gruppen für Frontend-Bearbeitung
    • Beide Gruppen auswählen
Bildergalerie immo_bildergalerie file
  • Mehrfach-Auswahl
  • Anordnung nach Dateiname (aufsteigend)
  • Format Einstellungen
    • Als Bildfeld mit Miniaturansicht erstellen
    • Bildbreite und -höhe -> 200 / 100 / Exaktes Format
    • Links als Dateidownload oder Bilder-Lightbox erstellen -> aktivieren
  • Gruppen für Frontend-Bearbeitung
    • Beide Gruppen auswählen
Veröffentlichen immo_veroeffentlichen checkbox
  • Sichtbar in der Backend-Listen-Ansicht
  • Beschriftungsgruppe beginnen -> aktivieren
    • Titel der Beschriftung -> Online
    • Backend-Filter aktivieren
  • Gruppen für Frontend-Bearbeitung
    • Beide Gruppen auswählen
Online immo_online checkbox
  • Sichtbar in der Backend-Listen-Ansicht
  • Beschriftungsgruppe beginnen -> aktivieren
    • Titel der Beschriftung -> Online
    • Backend-Filter aktivieren
  • Gruppen für Frontend-Bearbeitung
    • Makler-Admin
Hervorheben immo_besonders checkbox
  • Sichtbar in der Backend-Listen-Ansicht
  • Beschriftungsgruppe beginnen -> aktivieren
    • Titel der Beschriftung -> Online
    • Backend-Filter aktivieren
  • Gruppen für Frontend-Bearbeitung
    • Makler-Admin
Immobilie entfernen immo_delete checkbox
  • Sichtbar in der Backend-Listen-Ansicht
  • Beschriftungsgruppe beginnen -> aktivieren
    • Titel der Beschriftung -> Online
    • Backend-Filter aktivieren
  • Gruppen für Frontend-Bearbeitung
    • Beide Gruppen auswählen

Erklärung

  • Natürlich sind hier noch viel mehr Felder und Feldtypen angelegt. Diese paar sollten aber reichen um das prinzip zu verdeutlichen.
    • Jede Art hat da ihre eigenen Felder (z.B. ist die Grundstücksfläche für Hotelzimmer nicht wichtig und wird daher dann später nicht mit ausgegeben)
  • Bild und die Galerie sind getrennt, damit später in der Listenansicht ein bestimmtes Bild ausgegeben werden kann.
  • Die Checkboxen Veröffentlichen, Online, Hervorheben und Immobilien entfernen sind besonders wichtig für die Verwaltung der Immobilien.
    • Nur Makler-Admins bekommen später die Möglichekeit Immobilien online zu stellen (Online) und diese auf der Startseite anzuzeiben (Hervorheben)

die Katalog Einstellungen noch einmal überarbeiten

Da jetzt die Feldtypen definiert wurden, kann man im Katalog selbst noch weiter Einstellungen vornehmen:

  • Alias-Feld -> Alias
  • Feld veröffentlichen -> NICHTS hier nicht angeben, da die Makler im Frontend sonst ihre Items nicht sehen können!
  • Meta-Title-Feld -> Titel
  • Meta-Beschreibungs-Feld -> Umgebungsbeschreibung
  • Zeichenkette des Titels formatieren -> {{immo_titel}} - {{immo_gebiet}} - {{immo_art}}<br /> {{immo_bild::w=100&h=80}}

Einstellen von ein paar Items (Produkten)

Nun können ein paar Immobilien erstellt werden. Zu beachten ist: diese Immobilien gehören erst einmal keinem Mitglied. Erst wenn ein Mitglied das Item bearbeitet und speichert ist es ihm Zugeordnet!

Cat new item1

Cat new item2

Die nötigen Module

Katalog-Filter

Damit die Benutzer und die Mitglieder das angezeigt bekommen was sie wollen, sollte man mit einem Filter die Immobilien Einschränkbar machen. Damit auch alle die passende Einstellung haben bei der Weiterleitungsseite muss man dieses Modul 3 mal anlegen und jeweils zur passenden Seite mit der Liste weiterleiten (eins anlegen und kopieren erleichtert einem die arbeit enorm *g*)

Einstellungen:

  • Modul-Konfiguration -> Katalog -> Immobilien (den gerade eben erstellen Katalog auswählen)
  • Weiterleitungsseite -> Immobilien Liste (je nachdem für welche Gruppe der Filter gerade erstellt wird)
  • Benützen Sie Filterkonditionen des Listers auf der selben Seite -> aktivieren (dadurch sind nur die Filter aktiv, die auch passende Immobilien beinhalten)
  • Filter pro Abschnitt aktivieren
    • Gebiet -> Auswahlmenü
    • Art -> Auswahlmenü
  • Such-Filter
    • Suchbox aktivieren -> aktivieren
    • Kopfzeile suchen -> Suche (h3)
    • Suchfelder
      • Alle Felder die man durchsuchbar haben möchte ankreuzen (z.B. Titel, Gebiet, Art, Umgebungsbeschreibung)
  • Filter-Layout -> filter_default

Katalog-Liste

Nun muss man mehrere Listenmodule anlegen. Einmal eine Liste für die Besucher. Dort sind alle Immobilien vorhanden, die online sind. Für die Makler und Makler-Admins muss man nun für jede Art eine passende Liste erstellen. Bei 5 verschiedenen Arten sind das also 5 Listen für Makler, 5 Listen für Makler-Admins. Zusammengenommen also 11 Listen. Das ganze kann man sicher auch mittels PHP und MySQL etwas zusammenfassen. Hier geht es jedoch darum, das Prinzip aufzuzeigen und jedem zu ermöglichen so einen Katalog ohne viel Programmierkenntisse anzulegen.

Einstellungen:

  • Modul-Konfiguration -> Katalog -> Immobilien (den gerade eben erstellen Katalog auswählen)
  • Weiterleitungsseite -> Immobilien Details
  • Sichtbare Felder (in diesem Beispiel):
    • Titel
    • Gebiet
    • Bild
    • Art
  • Standard-Link überschreiben (normalerweise wird ein Links 'Details' erzeugt. Ich möchte hier aber den Titel und das Bild verlinkt haben)
    • Titel
    • Bild
  • Feld-Filter
    • Suchfelder
      • nach Bedarf anklicken
    • Abfrage-Modus -> Alle Treffer (AND) - so werden nur die Immobilien angezeigt, die der Region, der Art und der Suche entsprechen!
    • Tags-Modus -> Alle Treffer (AND) - so werden nur die Immobilien angezeigt, die der Region, der Art und der Suche entsprechen!
  • Bedingung Je nach Liste etwas anders:
    • Liste für Besucher der Seite: immo_online=1 and immo_freigeben=1 and immo_delete!='1' Das bedeutet -> Zeige alle Items, die online sind, die freigegeben sind und die nicht Entfernt sind (also als solche Markiert)
    • Liste für Makler immo_art='136' and immo_delete!='1' AND (userid={{user::id}} OR userid=0) Das bedeutet -> Zeige alle Items der Art 136 (ID der Taxonomie 'Haus zum kaufen'), und nicht Entfernt wo die UserID gleich der eigenen oder keiner ist (alle Items von dem Mitglied und Items die noch keinem zugeordnet sind)
    • Liste für Makler-Admin immo_art='136' and immo_delete!='1' Das bedeutet -> Zeige alle Items der Art 136 (ID der Taxonomie 'Haus zum kaufen'), und nicht Entfernt sind an. Hier wird nicht die UserID abgefangen! Dadurch können Makler-Admins alle Immobilien sehen.
    • Elemente pro Seite -> 6
  • Template-Einstellungen
    • Katalog-Layout -> catalog_simple
    • Katalog-Template -> mod_cataloglist

Katalog-Leser

Hiervon gibt es nur ein Modul. Die Makler und Makler-Admins bekommen das Modul Katalog-Edit. Die Ausgabe der verschiedenen Arten und deren besonderheit regel ich über das Teplate mit einer extra if-Abfrage (lasse also nur die Felder anzeigen, die überhaupt einen Inhalt haben).

  • Modul-Konfiguration -> Katalog -> Immobilien (den gerade eben erstellen Katalog auswählen)
  • Sichtbare Felder (in diesem Beispiel):
    • Titel
    • Gebiet
    • Art
    • Umgebungsbeschreibung
  • Template-Einstellungen
    • Katalog-Layout -> catalog_full
    • Katalog-Template -> mod_catalogreader

Katalog-Featured

Hiermit werden die hervorgehobenen Items auf der Startseite dargestellt.

  • Modul-Konfiguration -> Katalog -> Immobilien (den gerade eben erstellen Katalog auswählen)
  • Weiterleitungsseite -> Immobilien Details
  • Sichtbare Felder (in diesem Beispiel):
    • Titel
    • Gebiet
    • Bild
    • Art
  • Standard-Link überschreiben (normalerweise wird ein Links 'Details' erzeugt. Ich möchte hier aber den Titel und das Bild verlinkt haben)
    • Titel
    • Bild
  • Feld-Filter
    • Abfrage-Modus -> Alle Treffer (AND) - so werden nur die Immobilien angezeigt, die der Region, der Art und der Suche entsprechen!
    • Tags-Modus -> Alle Treffer (AND) - so werden nur die Immobilien angezeigt, die der Region, der Art und der Suche entsprechen!
  • Bedingung
    • immo_online=1 and immo_besonders and immo_delete!='1' Das bedeutet, das hier nur Immobilien angezeigt werden, die Online, besonders und nicht Entfernt sind.
  • Template-Einstellungen
    • Katalog-Layout -> catalog_simple
    • Katalog-Template -> mod_catalogfeatured

Katalog-Related

Hiermit werden ähnliche Immobilien auf der Detailseite einer Immobilie angezeigt. Übereinstimmen muss in diesem Beispiel nur das Gebiet. Bei vielen Items sollte die Liste hier weiter eingeschränkt werden (Sinnvoll wäre zum Beispiel die Art der Immobilie)

  • Modul-Konfiguration -> Katalog -> Immobilien (den gerade eben erstellen Katalog auswählen)
  • Weiterleitungsseite -> Immobilien Details
  • Sichtbare Felder (in diesem Beispiel):
    • Titel
    • Gebiet
    • Bild
    • Art
  • Standard-Link überschreiben (normalerweise wird ein Links 'Details' erzeugt. Ich möchte hier aber den Titel und das Bild verlinkt haben)
    • Titel
    • Bild
  • Feld-Filter
    • Betroffene Felder, die übereinstimmen müssen -> Gebiet
    • Anzahl der Tags die zusammengehöhren müssen -> 0 (macht nur sinn bei mehreren. Dann werden nur Items angezeigt, die zum Beispiel 2 Gleiche Felder haben bei der Angabe von 2)
    • Bedingung -> immo_online=1 and immo_delete!='1' Das bedeutet, das hier nur Immobilien angezeigt werden, die Online und nicht Entfernt sind.
    • Anzahl der Einträge -> 5
  • Template-Einstellungen
    • Katalog-Layout -> catalog_simple
    • Katalog-Template -> mod_catalogrelated

Katalog-Edit

Achtung.png Achtung: Hier muss auf das passende Template geachtet werden -> catalog_edit.tpl sonst kommt eine Fehlermeldung in der Art 'No valid Item ID'


Hier sind wieder mehrere Module nötig.

Für Makler in jeder Art eins -> 5

Für Makler-Admins -> 5

(für jede Art, da die sich ja wie oben genannt in den Feldern unterscheiden)

Felder die einen Standardwert bekommen dürfen nicht bearbeitet werden können!

Außerdem lasse ich das Alias Feld nicht bearbeiten, damit da keine unschönen Aliase generiert werden.

Einstellungen für Makler:

  • Modul-Konfiguration -> Katalog -> Immobilien (den gerade eben erstellen Katalog auswählen)
  • Weiterleitungsseite -> Immobilien Details
  • Bearbeitbare Felder (in diesem Beispiel):
    • Titel
    • Gebiet
    • Art
    • Bild
    • Bildergalerie
    • Umgebungsbeschreibung
    • Veröffentlichen
    • Immobilie entfernen
    • Benutzer id [userid:useridfield] (Nur dadurch wird die ID des Maklers erfasst. Wird aber nicht im Frontend angezeigt)
  • Weiterleitungsseite -> auf die jeweilige Liste (Makler oder Makler-Admin)
  • Sicherheitsabfrage deaktivieren (da die Seiten ja nur von Mitgliedern benutzt werden können. Ist bei öffenltich Zugänglichen Catalog-Edit-Modulen nicht zu empfehlen!)
  • Auf Standardwerte beschränken
    • Eingeschränkte Felder -> aktivieren
      • Art
      • Online
    • Standardwerte für eingeschränkte Felder
    • Art -> Haus zum kaufen oder Hotelzimmer (kommt auf das Modul an welches man gerade anlegt)
    • Online -> nein

Einstellungen für Makler-Admins:

  • Modul-Konfiguration -> Katalog -> Immobilien (den gerade eben erstellen Katalog auswählen)
  • Weiterleitungsseite -> Immobilien Details
  • Bearbeitbare Felder (in diesem Beispiel):
    • Titel
    • Gebiet
    • Art
    • Bild
    • Bildergalerie
    • Umgebungsbeschreibung
    • Veröffentlichen
    • Immobilie entfernen
    • Online
    • Hervorheben
  • Weiterleitungsseite -> auf die jeweilige Liste (Makler oder Makler-Admin)
  • Sicherheitsabfrage deaktivieren (da die Seiten ja nur von Mitgliedern benutzt werden können. Ist bei öffenltich Zugänglichen Catalog-Edit-Modulen nicht zu empfehlen!)
  • Auf Standardwerte beschränken
    • Eingeschränkte Felder -> aktivieren
      • Art
      • Online
    • Standardwerte für eingeschränkte Felder
    • Art -> Haus zum kaufen oder Hotelzimmer (kommt auf das Modul an welches man gerade anlegt)

Mit diesen unterschiedlich eingestellten Katalog-Edit Modulen erreichen wir den Workflow:

Makler können eine Immobilie bearbeiten und neu anlegen. Die Immobilie können Makler aber nicht online stellen oder hervorheben. Beim Bearbeiten wird durch den Standardwert Online=nein die Immobilie offline gestellt.

Makler-Admins können Immobilien bearbeiten und neu anlegen. Die Immobilien können von Makler-Admins online gestellt werden und hervorgehoben werden (diese können ja die Felder sehen und bearbieten, die dafür zuständig sind).

Cat Module

Die Module in Artikeln den passenden Seiten zuordnen

Nun müssen die Module noch auf die jeweils passende Seite gebracht werden:

  • Startseite -> Catalog-Featured
    • Immobilien Liste -> Catalog-Filter und Catalog Liste (für Besucher!)
      • Immobilien Details -> Catalog-Leser
  • Geschützer Bereich
    • Immobilien Anlegen -> mit Navigation für die Unterseiten (Für Makler und Makler-Admins)
      • Haus zum kaufen Liste -> Catalog-Liste mit Verweis auf Catalog-Edit
        • Haus zum kaufen anlegen / bearbeiten -> Catalog-Edit
      • Hotelzimmer Liste -> Catalog-Liste mit Verweis auf Catalog-Edit
        • Hotelzimmer anlegen / bearbeiten -> Catalog-Edit
    • Immobilien Anlegen Administration -> mit Navigation für Unterseiten (Für Makler-Admins)
      • Haus zum kaufen Liste -> Catalog-Liste mit Verweis auf Catalog-Edit
        • Haus zum kaufen anlegen / bearbeiten -> Catalog-Edit
      • Hotelzimmer Liste -> Catalog-Liste mit Verweis auf Catalog-Edit
        • Hotelzimmer anlegen / bearbeiten -> Catalog-Edit

Ich kann nur aus eigener Erfahrung sprechen: Spätestens jetzt ist man froh, wenn man eine Eindeutige Benennung der Module vorgenommen hat! Hier muss man mit vielen ähnlichen Modulen arbeiten und da ist es auf dauer sehr mühselig, wenn man nicht auf den 1. Blick erkennen kann was es ist. Ich selber benenne die Module daher zum Beispiel so: 'Katalog - Makler - Edit - Haus zum kaufen' Dadurch ist die automatische Sortierung im Backend außreichend gut. Man sieht was für ein Modul es ist (Katalog) für welche Gruppe es ist (Makler) was genau es machen soll (Edit) und für welchen Bereich es gedacht und eingestellt ist (Haus zum kaufen).

Templates

Tutorial zum Anpassen der Templates : Catalog Templates anpassen

Fehlermeldungen / FAQ

tinyFrontend.php TinyMCE konfiguration

Cannot find rich text editor configuration file "tinyFrontend.php". You can copy system/config/tinyMCE.php to this name

Einfach die tinyMCE.php in /system/config/ kopieren und in tinyFrontend.php umbenennen. Dann kann diese Datei nach Wunsch angepasst werden und ist Vorlage für den WYSIWIG Editor im Frontend-Editing.


--MacKP 14:52, 18. Mai 2010 (UTC)

Ansichten
Meine Werkzeuge

Contao Community Documentation

Ich überlege gerade warum Contao Developer einen Hangout mit Bildübertragung machen... abgesehen von TheTril sind wir da alle relativ hässliche Typen wo Audio deutlich reichen würde. *g*

Leo Unglaub
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge