Joomla System Messages umschreiben

neoman666 · 12. Mai 2023

Hi,

ich suche einen Weg, um die Joomla eigenen System Messages Boxen umzuschreiben. Dabei möchte ich die HTML-Struktur selbst anpassen. So wie ich das bis jetzt analysieren konnte, wird die HTML-Struktur in einer Javascript-Datei von Joomla generiert. Das müsste nach meinen Recherchen die Datei media/system/js/core.min.js oder die Datei media/system/js/messages(-es5).min.js sein. Kann aber auch sein ich täusche mich und es wurde inzwischen etwas geändert.

Wie kann ich nun am besten die Messages-Boxen anpassen?

MfG neoman

astrid · 13. Mai 2023

Hilft dir Override der Nachrichtenboxen von Formularen ?

Re:Later · 13. Mai 2023

Nur so zum Einstieg = rumprobierens.

- Wenn man nur PHP-generierte, also ohne AJAX/JS, generierte ALert-Boxen dingsen will, kann man zum Einstieg in einem Override des messages.php - Layouts, die Zeile mit dem <noscript> deaktivieren und vielleicht auch mal die Web Asset Manager am Anfang deaktivieren. Dann kommt pures HTML raus.

I- n Joomla 4 sind die zugehörigen JS-Funktionen saberer abgetrennt und man muss mit der core gar nichts mehr machen. In Zeiten von Web Asset Manager und Override-Möglichkeiten in der joomla.asset.json, würde ich da ansetzen.

- Die messages.js in den Template-Assets-Ordner/js/ kopieren. Erst mal noch nicht die min!

- In der joomla.asset.json des Templates den Override zusätzlich mit rein (beachte das geänderte "uri"):

Code

{
    "name": "messages",
    "type": "script",
    "uri": "messages.js",
    "attributes": {
        "type": "module"
    },
    "dependencies": [
        "messages-legacy"
    ]
}

Alles anzeigen

Dann kann man direkt in der Datei mal sein Glück versuchen.

neoman666 · 15. Mai 2023

Zitat von Re:Later
I- n Joomla 4 sind die zugehörigen JS-Funktionen saberer abgetrennt und man muss mit der core gar nichts mehr machen. In Zeiten von Web Asset Manager und Override-Möglichkeiten in der joomla.asset.json, würde ich da ansetzen.

- Die messages.js in den Template-Assets-Ordner/js/ kopieren. Erst mal noch nicht die min!
- In der joomla.asset.json des Templates den Override zusätzlich mit rein (beachte das geänderte "uri"):
Code
{
    "name": "messages",
    "type": "script",
    "uri": "messages.js",
    "attributes": {
        "type": "module"
    },
    "dependencies": [
        "messages-legacy"
    ]
}
Alles anzeigen

Das hat erstmal prinzipiell funktioniert. Somit kann ich wenigstens die messages.js overriden. Nun hänge ich aber in der messages.js fest, da ich von js nicht so viel plan habe.

Folgende Struktur ezeugt Joomla:

Code

<joomla-alert type="danger" close-text="Schließen" dismiss="true" style="animation-name: joomla-alert-fade-in;" role="alert">
    <button type="button" class="joomla-alert--close" aria-label="Schließen"><span aria-hidden="true">×</span></button>
    <div class="alert-heading">
        <span class="error"></span><span class="visually-hidden">Fehler</span>
    </div>
    <div class="alert-wrapper">
        <div class="alert-message">
            Das Formular kann nicht abgeschickt werden, da ihm die erforderlichen Daten fehlen.<br>Bitte die markierten Felder korrigieren und erneut versuchen.
        </div>
    </div>
</joomla-alert>

Alles anzeigen

Da ich ein auf Bootstrap 5 basierendes Template nutze, würde ich folgende Struktur benötigen.

Code

<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <span class="fw-semibold">Danger alert:</span> Dismiss me by clicking the close button on the right.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Wie also müsste die messages.js aussehen, damit ich die neue Struktur bekomme?

Re:Later · 15. Mai 2023

Das ist jetzt ein bisschen viel verlangt Unter Joomla 3 war mir das damals gelungen. Da war allerdings Ansatz Alert-Uraltbootstrap auf BS 4, später dann 5 zu bringen. Unter Joomla 4 hatte ich dann gar keine Lust mehr

Aber, ich habe ja auch die layouts\joomla\system\message.php erwähnt, die überschreibbar ist; also man kann einen Override im Template anlegen. Vielleicht reicht das ja in deinem eigenen Template für deine Zwecke?

Wenn du die Zeile

Code

$msgOutput = '<noscript>' . $msgOutput . '</noscript>';

deaktivierst, siehst du, dass AUCH das puristische HTML rauskommt PLUS dem, was das JS zusätzlich daraus macht. Also jeweils 2 Alerts.

Und dann für's erste diese Zeilen deaktivierst:

Code

 $document->getWebAssetManager()
    ->useStyle('webcomponent.joomla-alert')
    ->useScript('messages');

um das JS zu unterbinden.

Keine Ahnung.

Letztlich kann man doch aber auch sehr viel mit CSS machen, wenn einem die Joomla-Optik nicht gefällt. Ein gutes Negativbeispiel sind meine ALert-Boxen

neoman666 · 16. Mai 2023

Leider reicht mir der Override der message.php nicht aus, da ich auch die HTML-Struktur der message-Boxen etwas anpassen muss. Also muss ich zwangsläufig in die messages.js rein. Ein guter Anfang wäre schon mal, wenn ich das

Code

<joomla-alert

in einen div umwandeln könnte, so z.B.

Code

<div class="alert alert-danger"

In der messages.js gibt es die Zeile

Code

const messagesBox = document.createElement('joomla-alert');

Ersetze ich das 'joomla-alert' durch 'div', funktioniert mein Vorgaben schon zur Hälfte. Schönheitsfehler ist, das nach der Umbenennung der Close-Button nicht mehr funktioniert bzw. ganz verschwunden ist.

Ich weiß dass das komplexe Javascript-Funktionen sind und man das nicht mal so schnell hier mit ein paar Beiträge lösen kann, aber einen Versuch war es dennoch wert. Ansonsten muss ich halt nach einer anderen Lösung suchen.