Ruhetage mit Java-Script in Bestellformular anzeigen

Heute schauen wir uns an, wie wir in Java-Script den Wochentag ermitteln können, um je nach Wochentag einen Hinweis anzeigen zu lassen.

Unser imaginärer Pizza-Dienst hat Dienstag und Mittwoch Ruhetag. Daher soll in unserem Bestellformular automatisch ein Hinweis an diesen Wochentagen erscheinen.

Wie können wir dies in Java-Script umsetzen? Anschließend schauen wir uns an, wie wir das Ganze in DA-BestellFormular integrieren können.

Umsetzung mit Java-Script

Für den Hinweis verwenden wir SweetAlerts. Dies erlaubt es uns ein fluffiges Popup ohne viel Aufwand zu erzeugen.

Der Code

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
    function wochentag() {
        var jetzt = new Date();

        // Ermitteln des Wochentags, das Ergebnis
        // 0 = Sonntag
        // 1 = Montag
        // ...
        // 6 = Sonntag
        var aktTag = jetzt.getDay();

        // hier überprüfen wir, welchen Wochentag wir haben, an 2 
        //oder (||) 3 blenden wir den Hinweis ein.
        if (aktTag == 2 || aktTag == 3) {
          anzeigeRuheTag();
        }
    }

    function anzeigeRuheTag() {
        swal('Heute ist Ruhetag', 'Dienstag und Mittwoch haben wir leider Ruhetag.'
          , 'info',  { button: 'OK',});
    }
</script>

Gehen wir die Sache durch. Zuerst binden wir das Script ein:

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

Wer will kann das Script auch herunterladen und lokal einbinden. Anschließend ermitteln wir in der “wochentag”-Funktion den aktuellen Tag der Woche. Die Zählung beginnt bei 0, was den Sonntag darstellt. Anschließend überprüfen wir den Wochentag. In unserem Beispiel wollen wir Dienstag (2) und Mittwoch (3) den Hinweis einblenden. Für andere Tage muss diese Zeile angepasst werden.

Damit unsere Funktion aufgerufen wird, rufen wir die “wochentag”-Funktion nach dem Laden der Seite automatisch auf:

<body onLoad="wochentag();">

Anschließend wird an diesen Tagen der Hinweis eingeblendet. Der Text kann an folgender Stelle abgeändert werden:

swal('Heute ist Ruhetag', 'Dienstag und Mittwoch haben wir leider Ruhetag.'
          , 'info',  { button: 'OK',});

Hier können Sie die Überschrift, den Text und die Beschriftung des Buttons festlegen.


Einbindung in DA-BestellFormular

Kommen wir nun zur Einbindung in DA-BestellFormular. Damit erreichen wir, dass bei jeder Änderung und bei jedem Export der Code mit exportiert wird.

Dazu öffnen wir die “Erweiterten Einstellungen” unter Einstellungen. Hier klicken wir auf “Kopf- und Fußcode” und fügen den Code hier ein.

Eine kleine Sache muss nun noch in das Template eingefügt werden. Dazu wechseln wir in den Reiter mit dem Template, in welches wir exportieren wollen. Im Beispiel verwenden wir das W3.CSS-Template und passen dieses an.

Hier müssen wir den Aufruf unserer neuen Funktion noch in den Body-Tag einfügen.

Der gesamte Code kann hier ausprobiert werden.

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.