Template - Restaurant -2-
Responsive Einstellungen
Wir erweitern dein bestehendes Template so, dass es sich wie eine echte Restaurant-Website verhält:
✔ Handy nutzbar
✔ Burger Menü
✔ feste Navigation beim Scrollen
✔ ohne Framework (kein Bootstrap — IHK mag das)
Das lernen Sie jetzt
- Mobile First Anpassung
- CSS Media Queries
- DOM Manipulation
- Event Handling
- Sticky Header ohne Framework
- Joomla Modulsteuerung
Richtiger Speicherort (dein Projekt) Alle Styles gehören hierhin:
C:\xampp\htdocs\restaurant6\templates\restaurant_ihk\css\style.css
Das ist deine Haupt-Stylesheet Datei → wird in index.php geladen
1. Viewport aktivieren (sonst ist alles sinnlos)
Datei:C:\xampp\htdocs\restaurant6\templates\restaurant_ihk\index.php
Im <head> unter charset einfügen:<meta name="viewport" content="width=device-width, initial-scale=1.0">
2. Burger Menü HTML einbauen
Im Header ersetzen:
Suche:
<header class="kopf">
<div class="logo">
<jdoc:include type="modules" name="logo" />
</div>
<nav class="navigation">
<jdoc:include type="modules" name="menue" />
</nav>
</header>
Ersetzen durch:
<header class="kopf" id="kopf">
<div class="kopfzeile">
<div class="logo">
<jdoc:include type="modules" name="logo" />
</div>
<div class="burger" id="burger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<nav class="navigation" id="navigation">
<jdoc:include type="modules" name="menue" />
</nav>
</header>
3. JavaScript einbinden
In index.php vor </body> einfügen:
4. JavaScript schreiben (Menü + Sticky)
Datei:C:\xampp\htdocs\restaurant6\templates\restaurant_ihk\js\script.js
// Burger Menü
const burger = document.getElementById("burger");
const nav = document.getElementById("navigation");
burger.addEventListener("click", function(){
nav.classList.toggle("aktiv");
burger.classList.toggle("offen");
});
// Sticky Navigation
window.addEventListener("scroll", function(){
const kopf = document.getElementById("kopf");
if(window.scrollY > 80){
kopf.classList.add("fixiert");
}else{
kopf.classList.remove("fixiert");
}
});
5a. CSS - Header Layout
Datei:
C:\xampp\htdocs\restaurant6\templates\restaurant_ihk\css\style.css
Ganz unten anhängen:
Header Layout
.kopfzeile{
display:flex;
justify-content:space-between;
align-items:center;
}
.navigation ul{
list-style:none;
margin:0;
padding:0;
display:flex;
}
.navigation li{
margin:10px;
}
5b. CSS - Burger Button
.burger{
width:30px;
cursor:pointer;
display:none;
}
.burger span{
display:block;
height:4px;
background:white;
margin:6px 0;
transition:0.3s;
}
5c. CSS - Sticky Navigation
position:fixed;
top:0;
left:0;
width:100%;
z-index:999;
}
6. Mobile Layout (der wichtige Teil)
.hauptbereich{
flex-direction:column;
}
.inhalt{
width:100%;
}
.seite{
width:100%;
}
/* Burger anzeigen */
.burger{
display:block;
}
/* Menü verstecken */
.navigation{
display:none;
background:var(--hauptfarbe);
padding:20px;
}
.navigation ul{
flex-direction:column;
}
/* Menü sichtbar wenn aktiv */
.navigation.aktiv{
display:block;
}
.hero{
padding:40px;
font-size:18px;
}
}
7. Desktop Verhalten korrigieren
(sonst bleibt Menü offen nach Resize)
.navigation{
display:block !important;
}
}
8. Test (wichtig)
Browser öffnen:
http://localhost/restaurant6
Dann:
F12 → Gerätesymbol → iPhone auswählen
Prüfen:
- Menü verschwindet
- Burger erscheint
- Klick öffnet Menü
- Scrollen → Kopf bleibt oben
- Layout untereinander
Wenn das funktioniert → alles ok
KÜCHENBESTELLUNGEN
Funktionsprinzip (wichtig verstehen)
- Bestellung wird in Datenbank gespeichert (JoomShopping macht das schon)
- Küche öffnet eine Seite
- JavaScript fragt regelmäßig Joomla: → „Gibt es neue Bestellungen?“
- Joomla antwortet mit JSON
- Anzeige aktualisiert sich live
Das lernen Sie jetzt
- Joomla AJAX API
- Eigenes Plugin
- JSON Verarbeitung
- Live Datenanzeige
- Soft-Realtime System
9. Küchen-Anzeige Seite erstellen
Backend: Menüs → Hauptmenü → Neuer Menüpunkt
Typ: Einzelner Beitrag
Titel:Küche Live
Alias:kueche-live
Beitrag erstellen:Inhalte → Beiträge → Neu
Titel: Küchenmonitor
Inhalt (nur Platzhalter):<div id="bestellungen">Warte auf Bestellungen...</div>
10. Joomla AJAX Schnittstelle erstellen
Wir nutzen die offizielle Joomla Schnittstelle: /index.php?option=com_ajax
Dazu brauchen wir ein Plugin.
11. Plugin Ordner erstellen
Pfad:C:\xampp\htdocs\restaurant6\plugins\ajax\kueche\
Dateien:kueche.php
kueche.xml
11a kueche.xml
C:\xampp\htdocs\restaurant6\plugins\ajax\kueche\kueche.xml
11b kueche.php (holt Bestellungen aus DB)
C:\xampp\htdocs\restaurant6\plugins\ajax\kueche\kueche.php
12. Plugin installieren
Ordner zippen:plugins\ajax\kueche
Backend:System → Installieren → Erweiterungen
Dann aktivieren:System → Plugins → AJAX - kueche → Aktiviert
13. JavaScript für Live-Anzeige
Datei:C:\xampp\htdocs\restaurant6\templates\restaurant_ihk\js\script.js
unten anhängen:
// Küchenmonitor
function ladeBestellungen(){
fetch("/restaurant6/index.php?option=com_ajax&plugin=kueche&format=json")
.then(response => response.json())
.then(data => {
let html = "<h2>Aktuelle Bestellungen</h2>";
data.data.forEach(function(order){
html += `
<div class="bestellung">
Bestellung #${order.nummer}<br>
Zeit: ${order.zeit}<br>
Status: ${order.status}
</div>
`;
});
document.getElementById("bestellungen").innerHTML = html;
});
}
// alle 5 Sekunden aktualisieren
setInterval(ladeBestellungen, 5000);
// sofort laden
if(document.getElementById("bestellungen")){
ladeBestellungen();
}
14. Anzeige formatieren
style.css anhängen:
background:white;
border-left:8px solid var(--akzentfarbe);
padding:15px;
margin:10px 0;
font-size:20px;
}
15. Test
Browser:http://localhost/restaurant6/kueche-live
Dann zweite Seite öffnen:http://localhost/restaurant6/online-bestellung
Neue Bestellung ausführen.
👉 Nach spätestens 5 Sekunden erscheint sie automatisch in der Küche.
16. Bestellungen nach Status einfärben
JoomShopping speichert den Status als Zahl in der Datenbank:
Tabelle:#__jshopping_orders
Feld:order_status
Typische Werte:
| Nummer | Bedeutung |
|---|---|
| 1 | neu |
| 2 | bezahlt |
| 3 | in Bearbeitung |
| 4 | versendet |
| 5 | erledigt |
Wir verwenden:
| Anzeige Küche | DB Status |
|---|---|
| neu | 1 |
| in arbeit | 3 |
| fertig | 5 |
17. Plugin erweitern (Status übersetzen)
Datei bearbeiten:C:\xampp\htdocs\restaurant6\plugins\ajax\kueche\kueche.php
komplette foreach ersetzen:
foreach($orders as $order){
$statusText = "unbekannt";
$statusKlasse = "status-unbekannt";
if($order['order_status'] == 1){
$statusText = "neu";
$statusKlasse = "status-neu";
}
if($order['order_status'] == 3){
$statusText = "in arbeit";
$statusKlasse = "status-arbeit";
}
if($order['order_status'] == 5){
$statusText = "fertig";
$statusKlasse = "status-fertig";
}
$ausgabe[] = [
"nummer" => $order['order_id'],
"zeit" => $order['order_date'],
"status" => $statusText,
"klasse" => $statusKlasse
] ;
}
18. JavaScript anpassen (Klasse verwenden)
Datei:C:\xampp\htdocs\restaurant6\templates\restaurant_ihk\js\script.js
Im Küchenbereich HTML Ausgabe ersetzen:
data.data.forEach(function(order){
html += `
<div class="bestellung ${order.klasse}">
Bestellung #${order.nummer}<br>
Zeit: ${order.zeit}<br>
Status: ${order.status}
</div>
`;
});
19. Farben definieren
Datei:
C:\xampp\htdocs\restaurant6\templates\restaurant_ihk\css\style.css
Ganz unten anhängen:
/* Statusfarben Küche */
.status-neu{
background:rot;
color:white;
}
.status-arbeit{
background:gelb;
color:black;
}
.status-fertig{
background:gruen;
color:white;
}
20. Testablauf (realistisch)
Backend:Komponenten → JoomShopping → Bestellungen
Status ändern:
1 → neu → Seite zeigt rot
3 → in arbeit → wird gelb
5 → fertig → wird grün
Ohne Aktualisieren der Seite.