# Auto-Complete und Validierung

### Einführung

Mit der App für die automatische Vervollständigung und Validierung von Benutzerdaten für Shopware können Sie die Zahl der Kundenanmeldungen erhöhen und die Qualität der erfassten Kundendaten verbessern.

<figure><img src="https://premsoft.de/wp-content/uploads/2022/07/AEV_example-1024x300.png" alt="" height="218" width="744"><figcaption></figcaption></figure>

Dank des intelligenten und dynamischen App-Designs müssen neue Kunden das Formular nicht mehr manuell ausfüllen, was den Anmeldeprozess erheblich vereinfacht.

Darüber hinaus sorgen die bereitgestellten Validierungskontrollen dafür, dass die erfassten Informationen viel genauer sind, was bedeutet, dass später keine Änderungen erforderlich sind und keine Probleme beim Erreichen der Kunden nach dem Verkauf auftreten

### Voraussetzungen

Die App kann nur in einer selbstverwalteten Shopware-Umgebung mit mindestens Version 6.2.0 installiert werden.

#### Generieren und Konfigurieren von Google API-Schlüsseln <a href="#google-api-keys" id="google-api-keys"></a>

Für die App sind zwei Google-API-Schlüssel (sowie ein Google-Konto) erforderlich, da es zwei Google-Dienste in Anspruch nimmt.

* Der **erste API-Schlüssel** ist für die automatische Vervollständigung der Adressdaten erforderlich und muss mit der **Domain Ihres Shops** verschlüsselt werden.
* Der **zweite API-Schlüssel** wird für die Adress-Existenzprüfung benötigt und muss mit der **IP-Adresse Ihres Shops** geschützt werden.

Befolgen Sie diese Schritte, um die Google-API-Schlüssel zu generieren und zu konfigurieren:

1. Melden Sie sich bei der [Google Konsole](https://console.cloud.google.com/) an. Wenn Sie noch kein Google-Konto haben, [erstellen Sie zunächst eines](https://support.google.com/accounts/answer/27441?hl=en).
2. Wählen Sie ein Projekt aus.\
   \&#xNAN;*Wenn Sie noch kein Projekt erstellt haben, klicken Sie auf **Mein erstes Projekt** und dann auf **NEUES PROJEKT.** Geben Sie einen Namen für Ihr Projekt ein und klicken Sie auf **ERSTELLEN**.*
3. Klicken Sie im Projekt-Dashboard auf das Navigationsmenü oben links, wählen Sie dann **APIs & Dienste** und anschließend **Anmeldedaten**.
4. Wählen Sie **Anmeldedaten erstellen > API-Schlüssel** , um den **ersten API-Schlüssel** zu erstellen.
5. Click **Restrict Key** and then **HTTP referrers.** Enter your shop domain in the format: **\*.shopdomain.de**, then click **SAVE**.
6. Klicken Sie im Projekt-Dashboard auf das Navigationsmenü oben links, wählen Sie dann **APIs & Dienste** und anschließend **Anmeldeinformationen**.
7. Wählen Sie **Anmeldedaten erstellen > API-Schlüssel**, um den **zweiten API-Schlüssel** zu erstellen.
8. Klicken Sie auf **Schlüssel einschränken** und dann auf **IP-Adressen**. Geben Sie die **IP-Adresse Ihres Shops** ein und klicken Sie dann auf **SPEICHERN**.

**Notieren Sie sich Ihre beiden API-Schlüssel, einschließlich des jeweiligen Schlüssels, da Sie sie später benötigen werden. Sie können jederzeit zur Google-Konsole zurückkehren, um Ihre API-Schlüssel zu verwalten oder abzurufen.**

{% hint style="info" %}
Unsere Erweiterung nutzt die **Geocoding API**, die **Maps JavaScript API** und die **Places API**. Sie könnten somit den API Schlüssel, bei Bedarf, auf diese drei APIs einschränken.
{% endhint %}

#### Google API-Abrechnung aktivieren

Einige der für die App erforderlichen Google-APIs sind kostenpflichtig, daher müssen Sie die Abrechnung für Ihr Konto aktivieren, bevor Sie sie nutzen können.

Folgen Sie diesen Schritten:

1. Melden Sie sich bei der [Google Konsole](https://console.cloud.google.com/) an.
2. Wählen Sie aus der Projektliste das Projekt aus, das Sie verwenden möchten.
3. Rufen Sie das Menü auf der linken Seite auf und wählen Sie **Billing**.
4. Klicken Sie auf **Abrechnung aktivieren**. Hinweis: Wenn die Rechnungsstellung bereits aktiviert ist, ist diese Option nicht verfügbar.
5. Wenn Sie noch kein Rechnungskonto haben, erstellen Sie eines.
6. Wählen Sie Ihren Standort, füllen Sie das Formular aus und klicken Sie dann auf **Senden** und aktivieren Sie die Rechnungsstellung.

#### Aktivieren Sie die erforderlichen APIs für Ihr Google API-Projekt

Durch die Aktivierung einer Google-API wird diese mit dem aktuellen Projekt verknüpft, es werden Überwachungsseiten hinzugefügt und die Abrechnung für diese API wird aktiviert (sofern die Abrechnung für das Projekt aktiviert ist).

So aktivieren Sie eine API für Ihr Projekt:

1. Melden Sie sich bei der [Google Konsole](https://console.cloud.google.com/) an.
2. Wählen Sie aus der Projektliste das Projekt aus, das Sie verwenden möchten.
3. Wenn die Seite APIs & Dienste nicht bereits geöffnet ist, öffnen Sie das Menü auf der linken Seite und wählen Sie **APIs & Dienste** und dann **Bibliothek**.
4. Wählen Sie die folgenden APIs aus: **Maps**, **Places** und **Geocoding**.
5. Klicken Sie auf **AKTIVIEREN**.

### Einrichtung

Installieren Sie die App durch **Erweiterungen** > **Meine Erweiterungen**. Nach der Installation konfigurieren Sie die App, indem Sie **Meine Erweiterungen** > **AutoComplete und Validierung für Benutzerdaten** > **Konfiguration** wählen.

Geben Sie einen **Verkaufskanal** an, für den die App aktiviert werden soll. Die Standardeinstellung ist Alle Verkaufskanäle.

### Allgemeine Eigenschaften

Die optionale Einstellung **Auto-Complete Validierung auf Länder beschränken** ermöglicht es Ihnen, die Adressüberprüfung auf bestimmte Länder oder geografische Regionen zu begrenzen. Dies kann nützlich sein, wenn Sie in Ländern tätig sind, in denen Google nur über begrenzte Adressdaten verfügt.

Verwenden Sie das Mehrfachauswahlfeld, um nur die Länder auszuwählen, für die Sie die Adressvalidierung anwenden möchten.

Klicken Sie auf **Speichern**, um Ihre Änderungen zu speichern

### API-Zugangsdaten

Stellen Sie sicher, dass Sie zuerst Ihre Google API-Schlüssel generiert und konfiguriert haben, wie unter [Generieren und Konfigurieren von Google API-Schlüsseln](#google-api-keys).

1. Kopieren Sie den ersten Schlüssel und fügen Sie ihn in das Feld **Google API Key 1** ein.
2. Kopieren Sie den zweiten Schlüssel und fügen Sie ihn in das Feld **Google API Key 2** ein.
3. Klicken Sie auf **Speichern**, um Ihre Änderungen zu speichern.

**Dieser Schritt ist obligatorisch. Ohne gültige Google-API-Schlüssel funktioniert die App nicht korrekt.**

### Eigenschaften der automatischen Vervollständigung

Mit den Eigenschaften der Autovervollständigung können Sie steuern, inwieweit die Felder automatisch mit Informationen gefüllt werden, wenn der Benutzer das Formular ausfüllt.

| **Einstellung**                                                | **Typ**            | **Beschreibung**                                                                                                                                                     |
| -------------------------------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Sprache                                                        | Freie Texteingabe  | Legt die Sprache der App fest. Geben Sie ein Länderkürzel ein, z.B. EN für Englisch, DE für Deutsch, IT für Italienisch, usw.                                        |
| <p>Anzahl Vorschläge für Autocomplete Strasse <br></p>         | Numerische Eingabe | Legt die Anzahl der vorgeschlagenen Straßennamen fest, die auf der Grundlage der Benutzereingabe unter dem Feld „Straße“ angezeigt werden.                           |
| Plz, Ort, Land immer neu befüllen                              | KippSch.           | Aktivieren Sie diese Einstellung, um Felder automatisch zu aktualisieren, wenn neue Informationen vom Benutzer eingegeben werden.                                    |
| Ort vorschlagen                                                | KippSch.           | Aktivieren Sie diese Einstellung, um auf der Grundlage der vom Benutzer eingegebenen Informationen automatisch eine Stadt vorzuschlagen.                             |
| Automatische Großschreibung Anfangsbuchstaben                  | KippSch.           | Aktivieren Sie diese Einstellung, um automatisch den ersten Buchstaben der vom Benutzer in Felder wie den Straßennamen eingegebenen Informationen groß zu schreiben. |
| Korrektur Großschreibung Anfangsbuchstabe Strasse deaktivieren | KippSch.           | Aktivieren Sie diese Option, um die automatische Großschreibung für den ersten Buchstaben der Straße zu deaktivieren.                                                |
| Korrektur Großschreibung Anfangsbuchstabe Ort deaktivieren     | KippSch.           | Aktivieren Sie diese Option, um die automatische Großschreibung für den ersten Buchstaben der Stadt zu deaktivieren.                                                 |
| Standard Land                                                  | Dropdown-Menü      | Wählen Sie das Standardland aus dem Dropdown-Menü. Der Benutzer kann dies außer Kraft setzen, indem er ein anderes Land auswählt.                                    |

### Validierung Einstellungen

Mit den Überprüfungseigenschaften können Sie steuern, inwieweit die Überprüfung auf Felder angewendet wird, in die der Benutzer seine Informationen eingibt.

| **Einstellung**                                              | **Typ**           | **Beschreibung**                                                                                                                                                                                                       |
| ------------------------------------------------------------ | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Telefonnummer validieren                                     | KippSch.          | Aktivieren Sie diese Einstellung, um automatisch das Format der Telefonnummer zu überprüfen, um sicherzustellen, dass sie eine Vorwahl hat und die richtige Länge.                                                     |
| Telefonnumernvalidierung Regex                               | Freie Texteingabe | Geben Sie hier einen benutzerdefinierten Regex-Wert für die benutzerdefinierte Telefonnummernüberprüfung ein (die obige Einstellung muss aktiviert sein, damit dies angewendet werden kann).                           |
| Button bei Fehler deaktivieren                               | Toggle            | Aktivieren Sie diese Einstellung, um die Schaltfläche **Weiter** zudeaktivieren, wenn das Formular Validierungsfehler enthält.                                                                                         |
| Neupositionieren Land, PLZ, Strasse                          | KippSch.          | Um die Reihenfolge der Felder zu ändern, wählen Sie eine der verfügbaren Optionen aus dem Dropdown-Menü. Die Standardoption mit dem Land an erster Stelle wird empfohlen, da dies zu einer höheren Anmeldequote führt. |
| Hausnummerneingabe validieren                                | Toggle            | Aktivieren Sie diese Einstellung, um automatisch zu prüfen, ob die vom Benutzer eingegebene Straßennummer für diese Straße gültig ist.                                                                                 |
| Mindestlänge der Straße bevor die Hausnummernprüfung startet | Freie Texteingabe | Geben Sie hier einen numerischen Wert für die Anzahl der Zeichen ein, die der Benutzer eingeben muss, bevor die Überprüfung der Straßennummer beginnt.                                                                 |
| Adressenexistenz prüfen                                      | KippSch.          | Aktivieren Sie diese Einstellung, um automatisch zu prüfen, ob die vom Benutzer eingegebene Adresse gültig ist (z.B. ob sie existiert).                                                                                |
| Passwortstärke anzeigen                                      | KippSch.          | Aktivieren Sie diese Einstellung, um eine Anzeige unter dem Passwortfeld einzublenden, die dem Benutzer zeigt, wie „stark“ (sicher) das Passwort ist.                                                                  |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.premsoft.de/plugins/auto-complete-und-validierung.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
