Mautic bietet ein großes Repertoire an Möglichkeiten, mit dem potentiellen Kunden auch auf der Website zu interagieren. Die wohl bekannteste und weitverbreitetste ist das sogenannte „Focus Item” – z.B. in Form einer Notification, die sich animiert ins Fenster bewegt.
Leider lassen sich Focus Items im Mautic Standard-Baukasten nur sehr spärlich individualisieren: Individuelle Layout-Änderungen können in dem Editor nur im HTML vorgenommen werden – der Albtraum eines jeden Redakteurs.
Die elegante Lösung für eine individuelle Focus Item-Optik: Den im Mautic hinterlegten Style “hart” für die ganze Mautic Instanz ändern. So lassen sich die Focus Items an das Website-Design anpassen und werden dann standardmäßig in dieser Variante angelegt, wenn der Redakteur ein Focus Item erstellt.
Verantwortlich für das Aussehen der verschiedene Focus Item Styles sind verschiedene php-Dateien, die man in folgendem Verzeichnis findet:
„plugins/MauticFocusBundle/Views/Builder”. Dort liegen einige allgemeine Style-Dateien, die für jedes Focus Item genutzt werden, sowie vier Ordner für die einzelnen Typen: Bar, Modal, Notification und Page.
Durch Anpassungen der php-Dateien in den jeweiligen Ordnern können Veränderungen an den Default Styles der Focus Items vorgenommen werden.
Hier ein anschauliches Beispiel:
Die Aufgabenstellung: Es soll eine Anpassung am Focus Item Style „Notification” vorgenommen werden. Es gibt noch eine kleine Besonderheit: Der Style „Notification” bedient sich dem HTML vom „Modal” Style. Daher müssen die Änderungen im Ordner Modal sowie im Ordner Notification vorgenommen werden.
Als Erstes muss man im Ordner Modal die Datei “index.html.php” bearbeiten und in diesem Fall ein Logo als Bild hinzufügen. Die Hintergrundfarbe des Focus Items soll über die Primary-Farbe im Mautic-Builder gesteuert werden – damit das funktioniert, fügt man dem div mit der Klasse „mautic-focus” folgende Style-Angabe hinzu:
style="background-color: #<?php echo $props['colors']['primary']; ?>;"
Über die „$props” Variable kann z.B. auf die im Focus Item hinterlegten Farben und Inhalte zugegriffen werden.
Als Zweites bearbeitet man im Ordner Notification die Datei “style.less.php” und fügt das Styling per CSS-Angaben für den Text und den Button hinzu. Jetzt müssen nur noch im Mautic-Builder die Farben angepasst werden und schon ist das Focus Item fertig.
Hier ein Vorher-Nachher-Vergleich am Beispiel:
Ohne individuelles Styling:
Mit individuellem Styling:
Achtung: Aktuell gibt es keinen „updatefesten” Weg, d.h. die bearbeiteten Dateien der Focus Items werden durch jedes Mautic-Update überschrieben! Sie müssen also unbedingt gesichert und nach dem Update wieder in den entsprechenden Verzeichnissen abgelegt werden. Nicht optimal, aber bei uns durch einen kleinen Automatismus gelöst - und der Nutzen rechtfertigt diese Unschönheit bzw. den Aufwand.