Wix Hilfe-Center
    Start
  1. Deine Website erstellen
  2. Funktionen für Fortgeschrittene
  3. Wix Blocks
  4. Tutorials
    5. Wix Blocks Tutorial: Ein Countdown-Widget erstellen

Wix Blocks Tutorial: Ein Countdown-Widget erstellen

20 Min. Lesezeit
Wix Blocks steht allen Nutzern von Wix Studio zur Verfügung. Um Zugriff auf Blocks zu erhalten, musst du Wix Studio beitreten.
Dieses Tutorial zeigt dir, wie du ein Countdown-Widget erstellst, das bis zu einem bestimmten Datum herunter zählt. Es enthält auch ein Registrierungs-Widget, mit dem sich Website-Besucher anmelden können und am Tag vor deiner Veranstaltung eine E-Mail-Benachrichtigung erhalten. Du erfährst auch, wie du dein Countdown-Widget auf einer Website installierst und lernst außerdem alle Hauptfunktionen von Blocks kennen.
Countdown-Widget

Was das Template beinhaltet

Um deine Arbeit einfacher zu machen, haben wir eine Vorlage erstellt, damit du sofort loslegen kannst.

Das Template enthält:
  • Ein Countdown-Widget. Vervollständige das Design und programmiere die Funktionen und Eigenschaften.
  • Ein Registrierungs-Widget, das du fertigstellen und zu deinem Countdown-Widget hinzufügen musst.
  • Einige öffentliche Dienstprogramme, mit denen du die Funktionalität deines Widgets implementieren kannst.
  • Backend-Code, mit dem du die Funktionen deiner E-Mail-Benachrichtigung implementieren kannst.

Lade das Template

Schritt 1 | Das Design deines Widgets fertigstellen

Um dieses Widget zu erstellen, beginne mit diesem Template und bearbeite es in deinem Konto von Wix. Das Template ist noch noch nicht vollständig, damit du lernen kannst, wie du Elemente zu deinem Widget hinzufügst.
Das Widget ist mit einem Raster versehen, sodass du Elemente einfach ausrichten und platzieren kannst.

  1. Öffne die Vorlage.
  2. Klicke unter Widgets und Designauf Countdown.
  3. Klicke in der oberen Leiste auf Elemente hinzufügen Add icon.
  4. Wähle Text aus. Ziehe eine Titelbox im 48px-Format in dein Widget.
  5. Klicke auf Text bearbeiten und ändere den Text zu SS.
  6. Ändere mit dem Inspektor die Textfarbe zu Weiß und zentriere den Text.
  7. Wähle das Textfeld aus und verschiebe es mit move elements icon in das Quadrat über der Beschriftung SEKUNDEN.
  8. Ändere die Größe mit stretch icon.

Erfahre mehr über die Gestaltung deines Widgets

Schritt 2 | API-Eigenschaften (Properties) deines Widgets hinzufügen und definieren

Du kannst eine API für dein Widget definieren (Artikel zurzeit nur auf Englisch verfügbar), sodass der Ersteller der Website, der das Widget installiert, über Code mit ihm interagieren kann. Die API kann Eigenschaften (Properties), Ereignisse und exportierte Funktionen enthalten.

Dieses Widget verwendet zwei Eigenschaften (Properties):
  • endDate: Definiert das Enddatum, an dem der Countdown Null erreicht. Mithilfe dieser Eigenschaft (Property) können Website-Ersteller das Enddatum ändern, sodass das Widget für ihre Website angepasst werden kann.
  • emailId: Legt die E-Mail-Nachricht fest, die an Benutzer gesendet wird, wenn sie sich für eine Benachrichtigung anmelden.

Erfahre mehr über Eigenschaften (Properties) von API-Widgets (Artikel zurzeit nur auf Englisch verfügbar)

Deinen Widget-Elementen eine ID geben

Zuerst musst du den Elementen deines Widgets eine ID geben, damit du im Code auf sie verweisen kannst.
  1. Klicke auf das Textfeld.
  2. Gib dem Textfeld im Bereich Eigenschaften & Ereignisse properties icon eine ID. In diesem Beispiel ist die ID secondsTxt.Beachte, dass den anderen Elementen bereits IDs gegeben wurden.

Definiere die Properties „endDate“ und „emailId“

  1. Klicke in der API auf Neue Eigenschaft hinzufügen properties icon.
  2. Gib den Namen der Eigenschaft ein, endDate.
  3. Wähle den Typ der Eigenschaft, in diesem Fall Datum und Uhrzeit (das Datum wird im US-Format dd/mm/yyyy angezeigt).
  4. Wähle einen Standardwert. (Der Ersteller der Website kann diesen Wert bei der Installation deines Widgets im Editor ändern).
  5. Fahre mit der Maus über Eigenschaften und klicke auf das add icon-Symbol, das nun erscheint.
  6. Erstelle eine weitere Eigenschaft (Property) für die Trigger-E-Mail und nenne sie emailId. Das ist eine Eigenschaft (Property) vom Typ Text ohne Standardwert.

Schritt 3 | Code hinzufügen, damit dein Widget funktioniert


Damit dein Widget herunter zählt, musst du eine Funktion im Code erstellen, die die verbleibende Zeit bis zum Enddatum berechnet. Um dies zu erreichen, enthält dein Template bereits einige vorinstallierte Dienstprogramme im Bereich Öffentlich & Backend public and backend icon .

Blocks verwendet eine neue globale Variable, $widget, und die Eigenschaft (Property), $widget.props, die alle Eigenschaften enthält, die du für dein Widget definiert hast.

Blocks verwendet auch Velo-Autovervollständigung, um dir das Code schreiben zu erleichtern.

Erfahre mehr über die Widget-API (Artikel zurzeit nur auf Englisch verfügbar)

Deine Dienstprogramme importieren

  1. Klicke auf das Menü von Öffentlich & Backend .
  2. Wähle unter Öffentlich die Option dateUtils.jsaus. Dadurch wird die Datei in der Codenansicht geöffnet.

Den Code ändern, um deine neue Funktion zu berücksichtigen

Erstelle die Funktion updateTime(), damit dein Countdown-Widget den Zähler aktualisiert. Deine neue Funktion sollte wie folgt aussehen:

1$widget.onPropsChanged(function () { }); function updateTime() { const {days, hours, minutes, seconds} = getRemainingTime (new Date($widget.props.endDate)); $w('#daysTxt').text = days.toString(); $w('#hoursTxt').text = hours.toString(); $w('#minutesTxt').text = minutes.toString(); $w('#secondsTxt').text = seconds.toString(); }

Du musst auch ein Intervall festlegen, in dem das Widget die verbleibende Zeit aktualisiert.
Füge dazu den folgenden Code zu deiner Funktion onReady() hinzu. Dadurch wird das Widget jede Sekunde aktualisiert.

1$w.onReady(function () { updateTime(); if (wixWindow.viewMode !== "Editor") { setInterval(updateTime, 1000); } });
Zeitbedingung bearbeiten
Der Velo-Code wird nur ausgeführt, wenn du auf Vorschau klickst oder wenn du die Live-Website öffnest. Der Blocks-Code onReady wird auch während der Bearbeitung ausgeführt, sodass du ihn in Aktion sehen kannst, während du im Editor arbeitest. Aufgrund dieser Bedingungen wird dein Countdown-Widget während der Bearbeitungszeit nicht heruntergezählt.

Eine Vorschau deines Widgets ansehen und seine API-Eigenschaften (Properties) testen

Jetzt kannst du eine Vorschau deines Widgets und seiner API-Eigenschaften anzeigen.

  1. Klicke auf Vorschau. Dein Widget sollte jede Sekunde bis zum Enddatum herunterzählen.
  2. Klicke auf API-Eigenschaften testen. Es wird ein Panel mit dem Standardwert angezeigt, den du zuvor festgelegt hast.
  3. Ändere das Datum, um zu prüfen, ob das Widget reagiert und bis zum neuen Datum heruntergezählt wird.

Schritt 4 | Ein benutzerdefiniertes Panel erstellen und programmieren

Du kannst ein individuelles Einstellungs-Panel erstellen, damit Website-Ersteller die Einstellungen deines Widgets ändern können, wenn sie es auf einer Website installieren. In diesem Beispiel ermöglicht es das Panel für die benutzerdefinierten Einstellungen dem Ersteller der Website, das Enddatum zu ändern und eine E-Mail-ID zu definieren, die bestimmt, welche E-Mail an Benutzer gesendet wird, wenn sie sich registrieren, um Benachrichtigungen zu erhalten.

Erfahre mehr über Panels (Artikel zurzeit nur auf Englisch verfügbar)

Ein benutzerdefiniertes Panel erstellen

  1. Klicke in der oberen Leiste auf den Tab Panels.
  2. Klicke auf Panel erstellen.
  3. Gib deinem Panel einen Namen In diesem Beispiel „Meine Einstellungen“.
  4. Klicke auf Panel erstellen.
  5. Klicke auf + Element hinzufügen.
  6. Wähle Texteingabe. Dies gilt für das Enddatum.
  7. Klicke auf Eigenschaften & Ereignisse propeties icon . Gib deiner Texteingabe eine ID - endDateInput.
  8. Wähle das Textelement aus und klicke auf Einstellungen.
  9. Füge „Enddatum“ in das Feld Feldname hinzu.
  10. Lösche den Text im Feld Standardtext.
  11. Lege den Platzhaltertext auf „Enddatum“ fest.
  12. Füge eine Abschnitts-Trennlinie hinzu.
  13. Klicke auf Einstellungen. Füge im Feld Abschnittstitel einen Titel hinzu. In diesem Beispiel „Trigger-E-Mail“.
  14. Füge eine weitere Texteingabe hinzu:Gib deiner Texteingabe eine ID - emailIdInput.
  15. Wähle das Textelement aus und klicke auf Einstellungen.
  16. Füge im Feld Feldname den Namen „E-Mail-ID“ hinzu.
  17. Lösche den Text im Feld Standardtext.
  18. Lege den Platzhaltertext auf „E-Mail-ID“ fest.
Die Gestaltung deines individuellen Panels ist abgeschlossen. Jetzt kannst du es implementieren, indem du Code hinzufügst.

Code zu deinem individuellen Panel hinzufügen


Du möchtest, dass dein individuelles Panel das aktuelle Enddatum und die E-Mail-ID anzeigt, wenn es geladen wird. Der Ersteller der Website verwendet das Panel, um diese Werte zu ändern. Daher musst du Code zum Panel hinzufügen, damit dein Widget aktualisiert wird, wenn sich diese Eingaben ändern.

Erfahre mehr über das Hinzufügen von Code zu deinen individuellen Panels (Artikel zurzeit nur auf Englisch verfügbar)

Damit Panel-Elemente mit deinem Widget interagieren und Aktionen im Editor ausführen können, kannst du das Velo-Modul wix-widget in deinem Code verwenden.

Um die Widget-API zu verwenden, importiere wixWidget aus dem Modul wix-widget.

Füge den folgenden Code vor der Funktion onReady() ein.

1importiere wixWidget von 'wix-widget';

Du möchtest, dass dein Widget aktualisiert wird, wenn sich die Werte ändern, daher musst du ein onChange-Ereignis hinzufügen. Zusätzlich musst du async zu deiner Funktion onReady () hinzufügen, da du einige asynchrone Funktionen verwenden wirst.

Deine onReady()-Funktion sollte wie folgt aussehen:

1$w.onReady(async function () { const { endDate, emailId } = await wixWidget.getProps(); $w('#endDateInput').value = endDate; $w('#emailIdInput').value = emailId; $w('#endDateInput').onChange(e => { wixWidget.setProps({ endDate: e.target.value }); }); $w('#emailIdInput').onChange(e => { wixWidget.setProps({ emailId: e.target.value }); }); });
Klicke auf Ausführen run iconoder Vorschau, um deinen Code zu überprüfen

Schritt 5 | Widget konfigurieren

Nun, da dein Panel entworfen und gecodet ist, musst du dein Widget so konfigurieren, dass dein Panel mit einem der Aktionsleistenbuttons deines Widgets verbunden wird.

Auf dem Tab Konfigurationen kannst du festlegen, wie sich dein Widget verhält, wenn ein Website-Ersteller es auf einer Website installiert und anpasst. Du kannst deinem Widget und seinen Elementen Namen geben, sodass für die Ersteller deiner Website klar ist, was dein Widget macht. Du kannst auch Änderungen an den schwebenden Aktionsleisten vornehmen, die in den Editoren angezeigt werden, wenn die Website-Ersteller Elemente in deinem Widget auswählen.

Erfahre mehr über Konfigurationen

Dein individuelles Panel zur schwebenden Aktionsleiste deines Widgets hinzufügen

  1. Klicke in der oberen Leiste auf Konfiguration.
  2. Wähle dein Countdown-Widget aus. Eine schwebende Aktionsleiste wird angezeigt.
  3. Klicke auf Einstellungen.
  4. Klicke auf Aktionsbutton-Einstellungen settings icon. Das Panel für die Einstellungen der Hauptaktionen wird angezeigt.
  5. Wähle aus dem Aufklappmenü Meine Einstellungen, um dein individuelles Panel auszuwählen.

Schritt 6 | Ein zweites (inneres) Widget hinzufügen und die Registrierungslogik implementieren

Das Template enthält ein zweites Widget namens Registrierung. Du findest diese unter Widgets und Design.

Wenn du auf Ebenen klickst, kannst du sehen, dass sie als Multistatus-Box mit drei Status erstellt wurde. Das Template hat einen Button mit der Bezeichnung Registrieren, der sich zu Einreichen ändert, wenn der Besucher darauf klickt. Es gibt auch ein Feld, in das Website-Besucher ihre E-Mail-Adresse eintragen können. Eine Dankesnachricht wird angezeigt, wenn sich ein Website-Besucher registriert hat.

Dieses Widget enthält auch eine Designvoreinstellung, die für die Mobile-Ansicht verwendet werden kann.

Erfahre mehr über Design-Presets (Artikel zurzeit nur auf Englisch verfügbar)

Dein Registrierungs-Widget zum Countdown-Widget hinzufügen

Im nächsten Schritt kannst du dein Registrierungs-Widget zu deinem ersten Widget, dem Countdown-Widget, hinzufügen. In Blocks kannst du viele verschiedene Widgets erstellen und sie zu anderen Widgets hinzufügen.

Erfahre mehr über die Arbeit mit Widgets in Widgets
  1. Wähle im Tab Design dein Countdown-Widget aus.
  2. Klicke auf Weitere Optionen more options und wähle Widget hinzufügen aus.
  3. Wähle Registrierung. Dein inneres Widget erscheint in der Mitte deines Countdown-Widgets.
  4. Ziehe dein inneres Widget, um es an den unteren Abschnitt deines Countdown-Widgets anzupassen.
  5. Ändere unter Eigenschaften & Ereignisse die Registrierung propeties icon.
Eine andere Möglichkeit, Widgets hinzuzufügen
Du kannst auch ein inneres Widget hinzufügen, indem du auf das  add button -Zeichen und anschließend auf das Menü „ Elemente hinzufügen“.Wähle MEINE WIDGETS aus und ziehe das Widget, das du hinzufügen möchtest, in das erste Widget.

Die Registrierungslogik im Code des Haupt-Widgets implementieren

Du implementierst den Code für die Nutzerregistrierung im Haupt-Widget (Countdown) mit dem vorinstallierten Dienstprogramm contactUtils.js. Dieses Dienstprogramm verwendet die API von wix-crm, um deinen Kontakt mit deiner Sammlung zu verbinden.

Dieser Code leitet die Informationen zu deiner Sammlung weiter. Er verwendet das Dienstprogramm, das du später beim Erstellen einer Sammlung verwenden wirst. Du kannst getSubscriptionsCollectionName() im Code sehen.

  1. Erstelle eine neue asynchrone Funktion.
  2. Nenne sie onSubmit. Die Funktion verwendet das Dienstprogramm zum Erstellen von Kontakten.

Dein Code sollte so aussehen:

1 async function onSubmit({ email }) { const contact = await createContact(email); wixData.insert(getSubscriptionsCollectionName(), { endDate: new Date($widget.props.endDate), emailId: $widget.props.emailId, contactId: contact.contactId }); }
2

Für das onSubmit-Ereignis anmelden

Füge in deinem onReady(), nach deiner Funktion updateTime() den folgenden Code hinzu:

1$w('#registration').onSubmit(onSubmit);
Backend-Code ist bereits enthalten
Der Backend-Code ist bereits in deinem Template in Blocks implementiert. Er enthält eine Exportfunktion, notification(), die die vorinstallierten Dienstprogramme verwendet. Sie überprüft die verbleibende Zeit, löst die E-Mail aus und aktualisiert die Sammlung. Du musst den Code im Editor aufrufen, wie unten in Schritt 10 erklärt.

Schritt 7 | Deine App erstellen und einen Namespace hinzufügen

Jetzt bist du bereit, deine App zum ersten Mal zu erstellen. Dein erster Build ist ein Major-Build. Später, wenn du an deiner App arbeitest, kannst du auswählen, ob du einen Minor (Nebenversion)- oder einen Major-Build erstellen möchtest. Eine Nebenversion wird automatisch auf allen Websites aktualisiert, auf denen sie erscheint. Du musst nur die Seite aktualisieren. Wenn du einen Major-Build erstellst, muss ein Website-Ersteller deine App manuell aktualisieren. Im Editor wird ein Punkt neben dem Namen des Panels „Installierte Apps“ angezeigt, damit Website-Ersteller wissen, dass eine neue Version verfügbar ist.

Erfahre mehr über Versionen bei Blocks (Artikel zurzeit nur auf Englisch verfügbar)

Wenn du zum ersten Mal auf Blocks klickst, wirst du aufgefordert, deiner App einen Namespace zu geben. Dieser Namespace wird verwendet, um im Velo-Code in den Editoren und im Code der App in Blocks auf deine Sammlung zu verweisen.

Erfahre mehr über den App-Namespace (Artikel zurzeit nur auf Englisch verfügbar)

Dein erster Build

  1. Klicke auf Build.
  2. Gib einen Namespace für deine App ein und klicke auf Weiter.
  3. Wähle Hauptversion und klicke auf Build.
  4. Du erhältst eine Meldung, dass Version 1.0 erstellt ist. Klicke auf Okay, um mit der Arbeit an deiner App fortzufahren.

Schritt 8 | Eine Sammlung zu deinem Widget hinzufügen

Jetzt musst du eine Sammlung erstellen, um alle Registrierungen zu speichern. Sammlungen in Blocks sind leere Platzhalter, die du in Blocks entwirfst und mit Daten gefüllt werden, sobald die App auf einer Website installiert ist. Erfahre mehr über Sammlungen in Blocks

Das Template hat ein vorinstalliertes Dienstprogramm mit dem Namen getSubscriptionsCollectionName(). Du findest es unter Public & Backend im Ordner collectionUtils.js. Das Dienstprogramm erstellt den vollständigen Namen der Sammlung, damit du nicht jedes Mal deinen vollständigen App-Namespace hinzufügen musst, wenn du im Code darauf verweist.

Das Dienstprogramm deiner Sammlung konfigurieren

  1. Klicke unter Öffentlich & Backend auf collectionUtils.js.
  2. Füge den Namespace deiner App hinzu.
Dein Code mit deinem eigenen Namespace sollte wie folgt aussehen:
1
2const NAMESPACE = '@mywixaccount/my-app-namespace'; export function getSubscriptionsCollectionName() { return `${NAMESPACE}/subscriptions`; }

Deine Sammlung erstellen

  1. Klicke auf Datenbanken
  2. Klicke auf + Kategorie erstellen
  3. Gib deiner Sammlung einen aussagekräftigen Namen. In diesem Beispiel Subscriptions (Abonnements).
  4. Klicke auf Erstellen.

Felder zu deiner Sammlung hinzufügen

  1. Klicke auf  add button um ein Feld zu deiner Sammlung hinzuzufügen.
  2. Wähle aus dem Aufklappmenü Feldtyp die Option Datum aus.
  3. Gib endDate in das Feld Feldname ein. Personen können sich bis zum letzten Datum noch anmelden.
  4. Klicke auf Speichern.
  5. Füge nun ein Feld für Texttyp hinzu und nenne es emailId für die Trigger-E-Mail.
  6. Füge ein weiteres Feld für Text hinzu und nenne es contactId. Hier werden die Kontaktdaten der registrierten Benutzer gespeichert.
  7. Erstelle nun ein Feld vom Typ Boolean und nenne es notification. Dadurch werden Abonnenten nur einmal benachrichtigt.

Berechtigungen für deine Sammlung einrichten

Du möchtest, dass jeder Website-Besucher durch ein Abonnement Inhalte zu deiner Sammlung hinzufügen kann.

  1. Klicke im Datenbanken more options icon auf Weitere Optionen für deine Sammlung.
  2. Wähle Berechtigungen & Datenschutz.
  3. Wähle das Aufklappmenü Kann Inhalte hinzufügen.
  4. Wähle Jeder.
  5. Klicke auf Speichern.

Schritt 9 | Deine App auf einer Website im Editor von Wix installieren

Du kannst dein Widget in jedem Editor installieren. Im folgenden Beispiel wird der Wix Editor verwendet. Bevor du deine App installierst, musst du deine App ein zweites Mal erstellen. Dies wird ein Hauptversion (Major Build), da du eine Sammlung erstellt hast.
  1. Nachdem du die App erstellt hast, öffne die Website.
  2. Klicke auf Apps hinzufügen  add apps icon.
  3. Klicke auf Eigene Apps. Eine Liste all deiner Apps wird angezeigt.
  4. Wähle deine App aus der Liste Verfügbare Apps aus.
  5. Klicke auf App installieren.
  6. Klicke auf Elemente hinzufügen add elements icon.
  7. Wähle Meine Widgets aus.
  8. Doppelklicke auf dein Widget, um es zu deiner Website hinzuzufügen.

Dein Widget ist stufenlos flexibel und du kannst seine Elemente auswählen, sodass du das Widget an deine Website anpassen kannst. Du kannst auch die Einstellungen öffnen und das Standardenddatum ändern.

E-Mail-ID festlegen

Nutzer können sich für eine E-Mail-Benachrichtigung registrieren. Du musst die E-Mail erstellen, die gesendet wird, und eine ID dafür erhalten, damit die Widget-API identifizieren kann, welche E-Mail gesendet werden muss.
  1. Öffne in der oberen Leiste Meine Verwaltung über das Website-Menü.
  2. Öffne Trigger-E-Mails in den Entwickler-Tools.
  3. Klicke auf Loslegen.
  4. Gib einen Betreff ein.
  5. Gestalte die E-Mail mit den Editor-Tools.
  6. Klicke auf Speichern & veröffentlichen.
  7. Füge die Absenderangaben, den Namen des Absenders sowie die Antwort-E-Mail-Adresse hinzu und klicke auf Speichern.
  8. Klicke auf Alles klar.
  9. Klicke erneut auf Speichern & veröffentlichen. Du erhältst einen generierten Identifikationscode, der zu der E-Mail verlinkt, die du so gestaltet hast, dass sie an jeden gesendet wird, der sich registriert.
  10. Gib diesen Code in deinem individuellen Panel in das Feld E-Mail-ID ein.

Backend-Code im Editor von Wix verwenden, um Abonnenten zu benachrichtigen

Backend-Code ist mit deiner App in Blocks enthalten, aber du musst die Benachrichtigung im Editor aufrufen.

Benachrichtigungsfunktion aufrufen

  1. Klicke im Editor von Wix unter Backend im Ordner Öffentlich & Backend auf + Neues Webmodul.
  2. Nenn es backend.jsw.
  3. Importiere im Code-Abschnitt deiner Website unter backend.jsw die Backend-Funktion.

Dein Code sollte so aussehen:

1import { notify } 'myWixId/my-application-name-backend';

Erstelle nun die Exportfunktion invokeNotify in backend.jsw im Codeabschnitt deiner Website.

Dein Code sollte so aussehen:

1export function invokeNotify() { return notify (); }
Jetzt musst du einen geplanten Job (Scheduled-Jobs) erstellen.

  1. Klicke auf Hinzufügen add icon in Backend
  2. Klicke auf Scheduled-Jobs hinzufügen settings icon (geplanten Job hinzufügen)Füge den folgenden Code unter Jobs.config im Code-Abschnitt deiner Website hinzu. In diesem Beispiel wird die Benachrichtigungsfunktion 10 Minuten nach jeder vollen Stunde aufgerufen.

Dein Code sollte so aussehen:
1{ "jobs": [{ "functionLocation": "/backend.jsw", "functionName": "invokeNotify", "description": "", "executionConfig": { "cronExpression": "10 * * * *" } }] }

Schritt 10 | App testen

Jetzt kannst du deine App testen.

  1. Veröffentliche deine Website.
  2. Registriere dich, um eine E-Mail-Benachrichtigung zu erhalten.
  3. Gehe zurück zum Editor und überprüfe deine Sammlung.
  4. Es gibt einen neuen Abonnenten. Wenn die E-Mail-Benachrichtigung gesendet wird, siehst du auch ein Häkchen im Feld Benachrichtigt.
Deine Trigger-E-Mails überprüfen
Du kannst auch in deiner Website-Verwaltung unter den Entwickler-Tools unter Trigger-E-Mails nachsehen, ob die E-Mail gesendet wurde.

War das hilfreich?

|

In diesem Artikel

  • Was das Template beinhaltet
  • Schritt 1 | Das Design deines Widgets fertigstellen
  • Schritt 2 | API-Eigenschaften (Properties) deines Widgets hinzufügen und definieren
  • Deinen Widget-Elementen eine ID geben
  • Definiere die Properties „endDate“ und „emailId“
  • Schritt 3 | Code hinzufügen, damit dein Widget funktioniert
  • Deine Dienstprogramme importieren
  • Den Code ändern, um deine neue Funktion zu berücksichtigen
  • Eine Vorschau deines Widgets ansehen und seine API-Eigenschaften (Properties) testen
  • Schritt 4 | Ein benutzerdefiniertes Panel erstellen und programmieren
  • Ein benutzerdefiniertes Panel erstellen
  • Code zu deinem individuellen Panel hinzufügen
  • Schritt 5 | Widget konfigurieren
  • Dein individuelles Panel zur schwebenden Aktionsleiste deines Widgets hinzufügen
  • Schritt 6 | Ein zweites (inneres) Widget hinzufügen und die Registrierungslogik implementieren
  • Dein Registrierungs-Widget zum Countdown-Widget hinzufügen
  • Die Registrierungslogik im Code des Haupt-Widgets implementieren
  • Für das onSubmit-Ereignis anmelden
  • Schritt 7 | Deine App erstellen und einen Namespace hinzufügen
  • Dein erster Build
  • Schritt 8 | Eine Sammlung zu deinem Widget hinzufügen
  • Das Dienstprogramm deiner Sammlung konfigurieren
  • Deine Sammlung erstellen
  • Felder zu deiner Sammlung hinzufügen
  • Berechtigungen für deine Sammlung einrichten
  • Schritt 9 | Deine App auf einer Website im Editor von Wix installieren
  • E-Mail-ID festlegen
  • Backend-Code im Editor von Wix verwenden, um Abonnenten zu benachrichtigen
  • Benachrichtigungsfunktion aufrufen
  • Schritt 10 | App testen