======================================================================= === Anleitung: Modul „Infokarte mit Öffnungszeiten" (mod_infokarte) === ======================================================================= Diese Anleitung beschreibt die Installation und Konfiguration des Joomla-Moduls „Infokarte mit Öffnungszeiten". Das Modul zeigt eine Info-Karte mit Foto, Logo, Beschreibungstext, WhatsApp-/Routen-Buttons, Kontaktdaten und einer live aktualisierten Öffnungszeiten-Tabelle. Es lässt sich für jede Art von Unternehmen einsetzen. == 1. Voraussetzungen == * Joomla 5 oder 6 * Administrator-Zugang zum Backend * Die Datei `mod_infokarte-.zip` (z. B. `mod_infokarte-2.0.3.zip`) == 2. Installation == 1. Im Backend einloggen und zu System → Installieren → Erweiterungen gehen. 2. Im Reiter „Datei hochladen & installieren" die ZIP-Datei auswählen. 3. Auf „Hochladen & Installieren" klicken. 4. Erfolgsmeldung abwarten – das Modul „Infokarte mit Öffnungszeiten" ist jetzt installiert. Hinweis: Da es sich um ein reguläres Joomla-Modul handelt (kein Custom-HTML-Code), greift der globale Text-Filter von Joomla hier nicht. Es ist keine Sonderkonfiguration (Editor, Sourcerer o. Ä.) nötig. == 3. Modul anlegen und zuweisen == 1. Zu Inhalte → Website → Module gehen. 2. Auf „Neu" klicken. 3. Im Auswahlfenster „Infokarte mit Öffnungszeiten" auswählen. 4. Einen Titel vergeben (z. B. „Firmen-Infokarte" – erscheint ggf. je nach Template als Überschrift). 5. Unter „Position" die gewünschte Modulposition wählen (abhängig vom Template, z. B. `main-top` oder eine Position auf einer bestimmten Unterseite). 6. Unter dem Reiter „Zuweisung der Menüpunkte" festlegen, auf welchen Seiten das Modul erscheinen soll (z. B. nur auf der Startseite oder auf allen Seiten). 7. Die Inhalte im Reiter „Grundeinstellungen" ausfüllen (siehe Abschnitt 4). 8. Status auf „Veröffentlicht" setzen. 9. Speichern. Alternative Einbindung in einen Artikel oder eine Layout-Position: Mit dem Modul-Kürzel lässt sich die Infokarte auch direkt im Fließtext eines Artikels platzieren: {loadposition modulposition} (dabei `modulposition` durch die tatsächlich zugewiesene Position ersetzen). == 4. Felder im Backend ausfüllen == Beim Bearbeiten des Moduls gibt es die Reiter Grundeinstellungen und dort mehrere Themenblöcke: = 4.1 Inhalt = * Logo-Bild: Optional. Über den Medien-Browser auswählen. Erscheint oben links über dem Titel. Bleibt das Feld leer, wird der Bereich einfach nicht angezeigt. * Foto: Optional. Großes Bild links in der Karte (z. B. Ladengeschäft, Team, Produkt). Ohne Bild verschiebt sich der Inhalt automatisch auf die volle Breite. * Titel: Firmenname bzw. Überschrift der Karte. * Beschreibungstext: Kurzer Fließtext, der unter dem Titel erscheint. * Akzentfarbe: Über den Farbwähler einstellbar. Wird für den Akzentbalken vor dem Titel, die Hervorhebung von „Heute" in der Tabelle und die Häkchen der Hinweise verwendet. Der Status „Geöffnet"/„Geschlossen" hat eigene Farben (grün bzw. rot); ebenso wird die Zeile „Heute" rot, solange gerade geschlossen ist – ob ganztägig zu oder nur außerhalb der Uhrzeiten. * Hintergrundfarbe: Hintergrund der gesamten Karte. Standard: `#F0EFEC` (helles Beige). * Textfarbe: Grundfarbe für Titel, Beschreibung, Kontaktdaten und die Öffnungszeiten-Tabelle. Standard: `#1A1A1A` (fast Schwarz). Zusammenspiel der Farben: Aus Hintergrund- und Textfarbe leitet das Modul automatisch die abgestuften Töne ab – den etwas weicheren Beschreibungstext, die graue Countdown-Zeile („Öffnet in …"), die Trennlinie über den besonderen Öffnungszeiten sowie die Farbe des „Geöffnet"-Grüns. Auch die Kontakt-Icons und der Button „Anfahrt – Route" passen sich an: Der Button wird in der Textfarbe gefüllt und beschriftet in der Hintergrundfarbe. Man stellt also nur zwei Farben ein, der Rest bleibt automatisch stimmig. Dunkle Karte: Für ein dunkles Design einfach eine dunkle Hintergrundfarbe (z. B. `#14161A`) mit einer hellen Textfarbe (z. B. `#F2F2F0`) kombinieren. Der WhatsApp-Button behält bewusst sein Markengrün. = 4.2 Kontakt = * Telefonnummer (Anzeige): Wie die Nummer dargestellt wird, z. B. `030 - 12345678`. * Telefonnummer (für Anruf-Link): Nur Ziffern, ohne Leerzeichen/Bindestriche, z. B. `03012345678`. Wird für den Klick-zum-Anrufen-Link (`tel:`) verwendet. * WhatsApp-Nummer: Internationales Format ohne `+` oder Leerzeichen, z. B. `4915112345678`. Leer lassen, wenn kein WhatsApp-Button erscheinen soll. * E-Mail-Adresse: Für den `mailto:`-Link. * Adresse Zeile 1 / Zeile 2: Straße/Hausnummer und PLZ/Ort, werden untereinander dargestellt. * Routenziel für Google Maps: Adresse, die beim Klick auf „Anfahrt – Route" in Google Maps als Ziel geöffnet wird, z. B. `Musterstraße 1,12345 Musterstadt`. Leer lassen, wenn kein Routen-Button erscheinen soll. = 4.3 Buttons = Unter der Beschreibung erscheinen bis zu vier Buttons. Jeder hat im Reiter Buttons eine eigene Beschriftung und eine eigene Farbe. * WhatsApp: im Reiter Kontakt eine WhatsApp-Nummer eingetragen ist * Anfahrt – Route: im Reiter Kontakt ein Routenziel eingetragen ist * Anrufen: „Anrufen-Button anzeigen" auf Ja steht und eine Telefonnummer für den Anruf-Link hinterlegt ist * Termin buchen: ein Link für die Terminbuchung eingetragen ist Farben: Ein leeres Farbfeld bedeutet automatisch – der Button übernimmt dann die Textfarbe der Karte als Fläche und die Hintergrundfarbe als Schrift. Auf einer hellen Karte wird er also dunkel, auf einer dunklen Karte hell. Sobald eine Farbe gewählt ist, gilt diese; die Schrift im Button wird automatisch hell oder dunkel gesetzt – je nachdem, was auf der gewählten Fläche besser lesbar ist. Der WhatsApp-Button ist mit dem Markengrün `#25D366` vorbelegt. Anrufen: Der Button nutzt die bereits vorhandene Nummer aus „Telefonnummer (für Anruf-Link)" (Reiter Kontakt) – sie muss also nicht doppelt eingetragen werden. Auf dem Smartphone startet ein Klick direkt den Anruf. Termin buchen: Als Link lässt sich alles eintragen, was zur Terminvereinbarung führt – ein externes Buchungstool (`https://…`) oder eine eigene Unterseite der Website (z. B. `/termin` oder `index.php?Itemid=123`). Bleibt das Feld leer, erscheint kein Button. = 4.4 Öffnungszeiten = Ein Textfeld pro Wochentag. Format: Startzeit-Endzeit * Ein Zeitfenster: `09:00-17:00` * Mehrere Zeitfenster (z. B. mit Mittagspause), durch Komma getrennt: `09:00-13:00,14:30-18:00` * Geschlossen: Feld einfach leer lassen Beispiel für eine typische Woche: * Montag: `09:00-13:00,14:30-18:00` * Dienstag: `09:00-17:00` * Mittwoch: `09:00-13:00,14:30-18:00` * Donnerstag: `09:00-17:00` * Freitag: `09:00-13:00,14:30-18:30` * Samstag: (leer = geschlossen) * Sonntag: (leer = geschlossen) Die Uhrzeiten müssen im 24-Stunden-Format mit führender Null angegeben werden (`09:00`, nicht `9:00`). Abweichende Öffnungszeiten (Feiertage etc.) Im selben Reiter lassen sich einzelne Kalendertage abweichend belegen – ein Eintrag pro Zeile im Format `TT.MM.JJJJ=Zeiten`: 24.12.2026=13:00-16:00 25.12.2026=geschlossen 31.12.2026=09:00-13:00 Ein solcher Eintrag überschreibt für diesen Tag die reguläre Wochenregel – auch in der Status-Anzeige und im Countdown. Die kommenden Ausnahmen werden unter der Tabelle als „Besondere Öffnungszeiten" angezeigt. Hinweise Unter den Öffnungszeiten lassen sich kurze Hinweise anzeigen, jeder mit einem Häkchen in der Akzentfarbe – zum Beispiel: Durchgehend warme Küche Hunde willkommen Reservierung empfohlen Ein Hinweis pro Zeile, höchstens zehn. Leere Zeilen werden übersprungen, ein leeres Feld blendet den Bereich aus. Gedacht ist das für kurze Stichpunkte – lange Sätze gehören eher in den Beschreibungstext oben in der Karte. = 4.5 Erweitert = * Alternatives Layout: Falls zusätzliche Layout-Varianten installiert werden, hier auswählbar. Standardmäßig nicht nötig. * Modulklassen-Suffix: Für erfahrene Anwender: fügt der Karte eine zusätzliche CSS-Klasse hinzu, falls eigenes CSS ergänzt werden soll. Im Normalfall leer lassen. == 5. Live-Funktionen des Moduls == * Status-Anzeige: Zeigt automatisch „Geöffnet" oder „Geschlossen" an, inklusive Countdown (z. B. „Schließt in 45Min" bzw. „Öffnet in 2Std 15Min"). * „Heute"-Hervorhebung: Der aktuelle Wochentag wird in der Tabelle farblich hervorgehoben und mit „Heute:" statt dem Wochentagsnamen beschriftet. * Automatische Aktualisierung: Die Anzeige aktualisiert sich jede Minute von selbst – ganz ohne dass die Seite neu geladen werden muss. Auch der Tageswechsel um Mitternacht wird automatisch erkannt. * Kein Neuladen bei Tab-Wechsel nötig: Kehrt jemand nach längerer Zeit in den Browser-Tab zurück, aktualisiert sich der Status sofort, statt erst nach der nächsten Minute. == 6. Mehrfache Verwendung == Das Modul kann beliebig oft mit unterschiedlichen Inhalten angelegt werden (z. B. für mehrere Standorte oder Filialen). Jede Modulinstanz hat ihre eigenen, unabhängigen Einstellungen und beeinflusst keine andere Instanz. == 7. Häufige Fragen / Fehlerbehebung == Die Hinweise erscheinen nicht. → Das Feld „Hinweise" im Reiter Öffnungszeiten füllen, ein Stichpunkt pro Zeile. Ab dem elften Eintrag wird abgeschnitten. Das Bild wird nicht angezeigt. → Prüfen, ob im Feld „Foto" bzw. „Logo-Bild" tatsächlich ein Bild über den Medien-Browser ausgewählt wurde und der Pfad korrekt ist. Ein Button fehlt. → Jeder Button hängt an seinem Feld: WhatsApp-Nummer, Routenziel bzw. Terminlink. Ist das Feld leer, erscheint der Button bewusst nicht. Der Anrufen-Button braucht zusätzlich den Schalter „Anrufen-Button anzeigen" auf Ja. Der Button ist auf meinem Hintergrund kaum zu sehen. → Steht das Farbfeld auf automatisch, richtet sich der Button nach der Textfarbe und ist damit immer sichtbar. Wurde eine feste Farbe gewählt, sollte sie sich deutlich vom Kartenhintergrund abheben. Die Öffnungszeiten werden nicht richtig angezeigt. → Format prüfen: `HH:MM-HH:MM`, bei mehreren Zeitfenstern durch Komma trennen, keine Leerzeichen um den Bindestrich, führende Nullen verwenden (`09:00` statt `9:00`). Die Statusanzeige zeigt "Geschlossen" ohne "Öffnet in ..." an. → Das passiert, wenn für keinen Wochentag Öffnungszeiten hinterlegt sind. Mindestens ein Wochentag muss ein gültiges Zeitfenster haben. Der Text ist auf meinem Hintergrund schlecht lesbar. → Hintergrund- und Textfarbe sollten deutlich unterschiedlich hell sein. Faustregel: heller Hintergrund + sehr dunkler Text, oder dunkler Hintergrund + sehr heller Text. Mittlere Grautöne auf beiden Seiten führen zu blassem Text. Ich möchte die Schriftgrößen oder weitere Farben individuell anpassen. → Hintergrund- und Textfarbe lassen sich direkt im Backend einstellen (Abschnitt 4.1). Für alles Weitere lässt sich über das Feld „Modulklassen-Suffix" eine eigene CSS-Klasse ergänzen, die dann per zusätzlichem CSS (z. B. im Template) gestylt werden kann. Für tiefere Anpassungen kann die Datei `tmpl/default.php` im Modulverzeichnis direkt bearbeitet werden – besser über ein Template-Override unter `templates/DEIN_TEMPLATE/html/mod_infokarte/default.php`, das ein Update nicht überschreibt. == 8. Update auf eine neuere Version == Um eine aktualisierte Version des Moduls einzuspielen: 1. System → Installieren → Erweiterungen öffnen. 2. Die neue ZIP-Datei hochladen und installieren – Joomla erkennt automatisch, dass es sich um ein Update handelt, und ersetzt die vorhandenen Dateien. 3. Alle bereits gespeicherten Backend-Einstellungen (Texte, Bilder, Öffnungszeiten) bleiben dabei erhalten, da sie separat in der Datenbank gespeichert sind. == 9. Updates == Ab Version 1.8.0 meldet sich das Modul selbst, wenn eine neue Fassung vorliegt. Unter System → Aktualisieren → Erweiterungen erscheint sie dann in der Liste und lässt sich mit einem Klick einspielen; die gespeicherten Einstellungen bleiben dabei erhalten. Über „Änderungen anzeigen" ist vorher einsehbar, was die neue Version bringt. Einmalig nötig: Bei einer bereits bestehenden Installation kennt Joomla den Update-Server noch nicht. Die aktuelle ZIP muss daher ein letztes Mal von Hand über System → Installieren → Erweiterungen eingespielt werden. Alle späteren Updates laufen dann automatisch. Sollte eine neue Version nicht sofort erscheinen: Joomla merkt sich die Abfrage einige Stunden. Unter System → Aktualisieren → Erweiterungen → Optionen lässt sich der Zwischenspeicher leeren, danach „Aktualisierungen suchen". == 10. Versionen == * 2.0.3: Restzeit im Dativ und mit Leerzeichen: „Öffnet in 2 Tagen 6 Std" * 2.0.2: Update-Server liegt jetzt unter `module/infokarte/` * 2.0.1: Die Zeile „Heute" ist rot, solange gerade geschlossen ist * 2.0.0: Umbau auf die moderne Joomla-Modulstruktur; ab hier Joomla 5 und 6 * 1.8.2: Auch die Zeile „Heute" wird rot, wenn heute ganztägig geschlossen ist * 1.8.1: Status „Geschlossen" wird rot angezeigt * 1.8.0: Updates über den Server: neue Versionen erscheinen im Joomla-Backend * 1.7.1: Restzeit-Anzeige: „2Tage" statt „2Tag", keine leeren Einheiten mehr („1Tag" statt „1Tag 0Std") * 1.7.0: Kurze Hinweise unter den Öffnungszeiten; Karte nutzt ohne Foto die volle Breite * 1.6.1: Sicherheitsdurchsicht: Adressprüfung für Terminlink und Bildpfade korrigiert und verschärft, Ausgaben durchgängig gehärtet * 1.6.0: Vier Buttons mit je eigener Farbe und Beschriftung; neue Buttons „Anrufen" und „Termin buchen" * 1.5.0: Hintergrund- und Textfarbe im Backend einstellbar * 1.4.0: Abweichende Öffnungszeiten für einzelne Tage (Feiertage) Bei Rückfragen zur Konfiguration oder für Layout-Anpassungen kann der Code in `tmpl/default.php` (Darstellung), `src/Helper/InfokarteHelper.php` (Datenverarbeitung) und `mod_infokarte.xml` (Backend-Formularfelder) eingesehen werden.