Hier mein kleines Javascript-Shop-Skript, nur für den Contao-Formulargenerator ohne Erweiterungen.
Hinweis: das funktioniert logischerweise nur mit aktiviertem JavaScript und ist aufgrund der browserseitigen Verarbeitung nicht fälschungssicher (!), aber für einen vereinsinternen Minimal-Shop reicht es eventuell...
1. Der untenstehende Code muss auf jeder Shop-Seite eingebunden werden (ggf. HTML-Tag "<script>" bei den Einstellungen erlauben oder über Template einbinden), mehrere Shop-Seiten sind möglich da die Daten im localStorage zwischengespeichert werden
2. Auf jeder Shop-Seite muss
Code:
<div id="bestellliste"></div>
eingefügt werden. Hier wird dann der aktuelle Warenkorb ausgegeben.
3. Artikel können ganz normal in einem Textelement angelegt werden. Die Shop-Funktion wird hinzugefügt, indem der Artikel einen Link der Form "javascript:shop('Radiergummi',1.43);" bekommt für einen 1,43€ teuren Radiergummi. Damit das auch über den TinyMCE geht muss in system/config/tinyMCE.php "allow_script_urls: true," eingefügt werden, das Komma am Ende entfällt wenn es die letzte Anweisung ist.
4. Im Formular muss ein Platzhalter-Textarea angelegt werden, das dann mit den Angaben aus dem Shop befüllt wird. Dessen ID muss im untenstehenden Skript bei ctrl_XXX eingetragen werden.
Code:
<script>
// Erstellung des Objekts
function bestellung(name,preis,anzahl)
{
this.name = name;
this.preis = preis;
this.anzahl = anzahl;
}
function shop(artikel,preis)
{
var bestellmenge = 0;
if (localStorage.getItem("shop")== null)
{
// Falls noch überhaupt kein Eintrag vorhanden: Objekte erzeugen
var bestellliste = new Array();
bestellmenge = 1;
bestellliste.push(new bestellung(artikel,preis,bestellmenge));
} else
{
// Ansonsten: Bestellliste laden
var bestellliste = JSON.parse(localStorage.getItem("shop"));
// und dann überprüfen ob Artikel schon vorhanden
var i = bestellliste.length -1;
while (i >=0)
{
if (artikel==bestellliste[i].name)
{
// Artikel vorhanden, also einfach nur Anzahl erhöhen!
bestellmenge = bestellliste[i].anzahl + 1;
bestellliste[i].anzahl = bestellmenge;
}
i = i-1;
}
// Artikel nicht vorhanden = Bestellmenge immer noch 0, also neu anlegen
if (bestellmenge==0)
{
bestellmenge = 1;
bestellliste.push(new bestellung(artikel,preis,bestellmenge));
}
}
// Bestellliste abspeichern
localStorage.setItem("shop",JSON.stringify(bestellliste));
// zur Bestellliste springen
if (document.getElementById("bestellliste")) window.location.href = "{{link_url::{{page::alias}}}}#bestellliste";
shopupdate();
}
function shopupdate()
{
// Strings für die Ausgabe
var formular = "";
var tabelle = "<h3>Bestellliste</h3><table><tr><th>Anzahl</th><th>Artikel</th><th>Preis</th><th>Summe</th><th>Bearbeiten</th></tr>";
var gesamtpreis = 0;
// Update nur, wenn Schlüssel in localStorage nicht leer ist
if (localStorage.getItem("shop")!= null)
{
var bestellliste = JSON.parse(localStorage.getItem("shop"));
// Daten sammeln
var i = 0;
while (bestellliste.length > i)
{
// Ausgabe im versteckten Formular
formular = formular +"\n" + bestellliste[i].anzahl + "x "+bestellliste[i].name + " (Einzelpreis: "+bestellliste[i].preis+"€) = "+bestellliste[i].preis*bestellliste[i].anzahl + "€";
//Ausgabe in Tabelle
tabelle = tabelle + "<tr><td>"+bestellliste[i].anzahl + "x</td><td>"+bestellliste[i].name + "</td><td>"+bestellliste[i].preis+"€</td><td>"+bestellliste[i].preis*bestellliste[i].anzahl + "€</td><td><button onClick=\"pluseins("+i+")\" title=\"Anzahl ändern\">+1</button> <button onClick=\"minuseins("+i+")\" title=\"Anzahl ändern\">-1</button> <button onClick=\"artikelLoeschen("+i+")\" title=\"Artikel löschen\">löschen</button></td></tr>";
//Gesamtpreis erhöhen
gesamtpreis = gesamtpreis + bestellliste[i].preis*bestellliste[i].anzahl;
i = i+1;
}
}
//Gesamtpreis ergänzen
formular = formular +"\n=====\nGesamtpreis: " + gesamtpreis + "€";
tabelle = tabelle + "</table><p><b>Gesamtpreis: " + gesamtpreis + "€</b></p>";
// Ausgabe
if (document.getElementById("ctrl_XXX"))
{
document.getElementById("ctrl_XXX").innerHTML = formular;
document.getElementById("ctrl_XXX").style.display = "none";
}
if (document.getElementById("bestellliste")) document.getElementById("bestellliste").innerHTML = tabelle;
}
function artikelLoeschen(artikelnr)
{
if (localStorage.getItem("shop")!= null)
{
var bestellliste = JSON.parse(localStorage.getItem("shop"));
bestellliste.splice(artikelnr,1);
localStorage.setItem("shop",JSON.stringify(bestellliste));
shopupdate();
}
}
function pluseins(artikelnr)
{
if (localStorage.getItem("shop")!= null)
{
var bestellliste = JSON.parse(localStorage.getItem("shop"));
bestellliste[artikelnr].anzahl = bestellliste[artikelnr].anzahl +1;
localStorage.setItem("shop",JSON.stringify(bestellliste));
shopupdate();
}
}
function minuseins(artikelnr)
{
if (localStorage.getItem("shop")!= null)
{
var bestellliste = JSON.parse(localStorage.getItem("shop"));
if (bestellliste[artikelnr].anzahl>1)
{
bestellliste[artikelnr].anzahl = bestellliste[artikelnr].anzahl -1;
}
localStorage.setItem("shop",JSON.stringify(bestellliste));
shopupdate();
}
}
// Ereignisbehandlung initialisieren
window.addEventListener("load", function()
{
shopupdate();
});
</script>
Formular Inhalt berechnen vor Mail versand
Lesezeichen