SFRA-Erweiterungen
Die SFRA-Erweiterungen sind in der Cartridge int_dqe_sfra enthalten und bieten Integration mit dem SFRA-Framework von Salesforce B2C Commerce Cloud.
Diese Erweiterungen verbessern die Benutzererfahrung durch folgende Funktionen:
- Adressvorschläge: verfügbar in den Checkout-Formularen für Liefer- und Rechnungsadresse sowie in die Adressformulare unter My Account integriert.
- Adressvalidierung: validiert übermittelte Adressen in allen Formularen.
- E-Mail-Validierung: validiert automatisch E-Mail-Felder in Formularen, in denen eine E-Mail-Adresse erforderlich ist.
- Telefonvalidierung: überprüft Telefonnummer-Eingaben in Formularen mit Telefonfeldern.
Alle Validierungsvorgänge basieren auf der DQE-Konfiguration und den Einstellungen im Business Manager, einschließlich der entsprechenden Site-Einstellungen und DQE-Codevalidierungszuordnungen.
Betroffene Seiten in SFCC SFRA
Die Lösung wirkt sich auf folgende Seiten und Formulare aus:
Startseite
- Subscription Block: validiert E-Mail-Eingaben.
Login-Seite
- Tab „Create Account": validiert E-Mail- und Telefoneingaben.
- Popup „Forgot Your Password": validiert E-Mail-Eingaben.
- Block „Check Order": validiert E-Mail-Eingaben.
Kontaktseite
- Kontaktformular: validiert E-Mail-Eingaben.
Checkout-Seiten
- Gastformular: validiert E-Mail-, Adress- und Telefoneingaben.
- Lieferformular: validiert Adress- und Telefoneingaben.
- Rechnungsformular: validiert Adress-, Telefon- und E-Mail-Eingaben.
Kontoseiten
- Formulare „Add/Edit Address": validieren Adressfelder.
- Formular „Profile Edit": validiert E-Mail- und Telefoneingaben.
| Controller | Startknoten | Beschreibung |
|---|---|---|
Account.js |
EditProfile |
Erweitert das Pipeline-Dictionary-Objekt (pdict) um DQE-Konfigurationsdetails für die korrekte Template-Darstellung. |
Address.js |
AddAddress, EditAddress
|
Erweitert das Pipeline-Dictionary-Objekt (pdict) um DQE-Konfigurationsdetails für die korrekte Template-Darstellung. |
Address.js |
SaveAddress |
Erweitert, um bei Bedarf, je nach aktueller Konfiguration, eine Adressvalidierung mit DQE durchzuführen. |
Checkout.js |
Begin |
Erweitert das Pipeline-Dictionary-Objekt (pdict) um DQE-Konfigurationsdetails für die korrekte Template-Darstellung. |
CheckoutServices.js |
SubmitPayment |
Erweitert, um bei Bedarf, je nach aktueller Konfiguration, eine Validierung der Rechnungsadresse mit DQE durchzuführen. |
CheckoutShippingServices.js |
SubmitShipping |
Erweitert, um bei Bedarf, je nach aktueller Konfiguration, eine Validierung der Lieferadresse mit DQE durchzuführen. |
ContactUs.js |
Landing |
Erweitert das Pipeline-Dictionary-Objekt (pdict) um DQE-Konfigurationsdetails für die korrekte Template-Darstellung. |
DQE.js |
ValidateEmail, ValidatePhone, AddressSuggestions, CompleteAddress
|
Neuer Controller, der Endpunkte für die im Storefront verwendeten AJAX-Aufrufe implementiert. |
Home.js |
Show |
Erweitert das Pipeline-Dictionary-Objekt (pdict) um DQE-Konfigurationsdetails für die korrekte Template-Darstellung. |
Login.js |
Show |
Erweitert das Pipeline-Dictionary-Objekt (pdict) um DQE-Konfigurationsdetails für die korrekte Template-Darstellung. |
Middleware
Die DQE-Middleware erweitert SFRA-Controller durch die Integration DQE-spezifischer Konfigurationsdetails. Sie übergibt Validierungs- und Vorschlagseinstellungen an das Pipeline-Dictionary-Objekt (pdict) zur Verwendung in der Anwendung.
Speicherort der Datei
Die Middleware-Datei befindet sich unter:
cartridges/int_dqe_sfra/cartridge/scripts/middleware/dqe.js
Funktionsweise
Die Middleware fügt dem pdict-Objekt ein Eigenschaftsobjekt dqeConfigs hinzu. Diese Eigenschaft enthält DQE-bezogene Konfigurationsdetails, die aus den aktuellen Site-Einstellungen abgeleitet werden.
Diese Details umfassen:
-
addressSuggestionsEnabled: gibt an, ob Adressvorschläge aktiviert sind. -
dqeAddressCompleteEnabled: legt fest, ob die DQE-Adressvervollständigung aktiviert ist. -
addressValidationEnabled: gibt an, ob die Adressvalidierung aktiv ist. -
phoneEnabled: legt fest, ob die Telefonnummernvalidierung aktiviert ist. -
emailEnabled: gibt an, ob die E-Mail-Validierung aktiviert ist. -
addressValidationMode: definiert den konfigurierten Adressvalidierungsmodus.
Anwendungsbeispiel:
Templates
| Template | Beschreibung |
|---|---|
account/components/registerForm.isml |
Klassen und Attribute für die E-Mail- und Telefonvalidierungslogik hinzugefügt. |
account/editProfileForm.isml |
Klassen und Attribute für die E-Mail- und Telefonvalidierungslogik hinzugefügt. |
checkout/customer/customerCard.isml |
Klassen und Attribute für die E-Mail-Validierungslogik hinzugefügt. |
account/components/trackOrderForm.isml |
Klassen und Attribute für die E-Mail-Validierungslogik hinzugefügt. |
account/password/passwordResetForm.isml |
Klassen und Attribute für die E-Mail-Validierungslogik hinzugefügt. |
home/homePage.isml |
Klassen und Attribute für die E-Mail-Validierungslogik hinzugefügt. |
contactUs/contactUs.isml |
Klassen und Attribute für die E-Mail-Validierungslogik hinzugefügt. |
checkout/shipping/shippingAddress.isml |
Elemente, benutzerdefinierte Klassen und Attribute für Adressvorschläge, Adressvalidierung und Telefonvalidierungslogik hinzugefügt. Basierend auf der SFRA-Template-Struktur wird es separat für folgende Locales erweitert: default, en_GB, fr_FR, it_IT und ja_JP. |
checkout/billing/billingAddress.isml |
Elemente, benutzerdefinierte Klassen und Attribute für Adressvorschläge und -validierung hinzugefügt. Basierend auf der SFRA-Template-Struktur wird es separat für folgende Locales erweitert: default, en_GB, fr_FR, it_IT und ja_JP. |
checkout/billing/billing.isml |
Klassen und Attribute für die Telefonvalidierungslogik hinzugefügt. |
account/addressForm.isml |
Elemente, benutzerdefinierte Klassen und Attribute für Adressvorschläge, Adressvalidierung und Telefonvalidierungslogik hinzugefügt. Basierend auf der SFRA-Template-Struktur wird es separat für folgende Locales erweitert: default, en_GB, fr_FR, it_IT und ja_JP. |
Beispiel für Template-Änderungen bei shippingAddress.isml:
Client-seitiges JavaScript
Die clientseitige JavaScript-Erweiterung von SFRA enthält Logik zur Anzeige von Adressvorschlägen und zur Validierung von E-Mail- und Telefonfeldern über AJAX-Anfragen an die entsprechenden DQE-Controller.
| Datei | Beschreibung |
|---|---|
js/dqe/dqeAddress.js, js/dqe/dqeEmail.js, js/dqe/dqePhone.js, js/dqe/dqeFieldValidation.js, js/dqe/index.js
|
Die gesamte neue DQE-spezifische Logik befindet sich im Ordner
|
/js/login.js |
Erweitert die Logik der Login-Seite um DQE-E-Mail- und Telefonvalidierung. |
/js/profile.js |
Erweitert die Logik der Seite „Profil bearbeiten" um DQE-E-Mail- und Telefonvalidierung. |
/js/contactUs.js |
Erweitert die Logik der Kontaktseite um DQE-E-Mail-Validierung. |
/js/checkout.js |
Erweitert die Logik der Checkout-Seite um DQE-Adresslogik, Telefonvalidierung und E-Mail-Validierung. |
/js/addressBook.js |
Erweitert die Logik der Adressseite unter „My Account" um DQE-Adresslogik. |
/js/addressBook/addressBook.js |
Erweitert die Logik zum Speichern von Adressen unter „My Account" um DQE-Adressvalidierung und die Anzeige von Validierungsergebnissen. |
/js/checkout/checkout.js |
Erweitert die Adresslogik des Rechnungsformulars um DQE-Adressvalidierung und die Anzeige von Validierungsergebnissen. |
/js/checkout/shipping.js |
Erweitert die Adresslogik des Lieferformulars um DQE-Adressvalidierung und die Anzeige von Validierungsergebnissen. |
Verknüpfung mit