Extensions SFRA
Les extensions SFRA sont incluses dans la cartouche int_dqe_sfra et permettent l'intégration avec le framework SFRA de Salesforce B2C Commerce Cloud.
Ces extensions améliorent l'expérience utilisateur en activant les fonctionnalités suivantes :
- Suggestions d'adresse : disponibles sur les formulaires d'adresse de livraison et de facturation lors du checkout, et intégrées aux formulaires d'adresse dans Mon compte.
- Validation d'adresse : valide les adresses soumises sur l'ensemble des formulaires.
- Validation d'e-mail : valide automatiquement les champs e-mail sur les formulaires où une adresse e-mail est requise.
- Validation de téléphone : vérifie les numéros de téléphone saisis sur les formulaires contenant des champs téléphone.
Toutes les opérations de validation reposent sur la configuration DQE définie dans Business Manager, y compris les préférences de site correspondantes et les mappings de codes de validation DQE.
Pages impactées dans SFCC SFRA
La solution impacte les pages et formulaires suivants :
Page d'accueil
- Bloc d'inscription à la newsletter : valide la saisie de l'e-mail.
Page de connexion
- Onglet Créer un compte : valide la saisie de l'e-mail et du téléphone.
- Fenêtre Mot de passe oublié : valide la saisie de l'e-mail.
- Bloc Suivre ma commande : valide la saisie de l'e-mail.
Page Contactez-nous
- Formulaire de contact : valide la saisie de l'e-mail.
Pages de checkout
- Formulaire Utilisateur invité : valide la saisie de l'e-mail, de l'adresse et du téléphone.
- Formulaire de livraison : valide la saisie de l'adresse et du téléphone.
- Formulaire de facturation : valide la saisie de l'adresse, du téléphone et de l'e-mail.
Pages de compte
- Formulaires d'ajout/modification d'adresse : valident les champs d'adresse.
- Formulaire de modification du profil : valide la saisie de l'e-mail et du téléphone.
| Contrôleur | Nœud de départ | Description |
|---|---|---|
Account.js |
EditProfile |
Étend l'objet dictionnaire de pipeline (pdict) avec les informations de configuration DQE nécessaires au bon rendu des gabarits. |
Address.js |
AddAddress, EditAddress
|
Étend l'objet dictionnaire de pipeline (pdict) avec les informations de configuration DQE nécessaires au bon rendu des gabarits. |
Address.js |
SaveAddress |
Étendu pour effectuer la validation d'adresse avec DQE lorsque cela est applicable, selon la configuration actuelle. |
Checkout.js |
Begin |
Étend l'objet dictionnaire de pipeline (pdict) avec les informations de configuration DQE nécessaires au bon rendu des gabarits. |
CheckoutServices.js |
SubmitPayment |
Étendu pour effectuer la validation de l'adresse de facturation avec DQE lorsque cela est applicable, selon la configuration actuelle. |
CheckoutShippingServices.js |
SubmitShipping |
Étendu pour effectuer la validation de l'adresse de livraison avec DQE lorsque cela est applicable, selon la configuration actuelle. |
ContactUs.js |
Landing |
Étend l'objet dictionnaire de pipeline (pdict) avec les informations de configuration DQE nécessaires au bon rendu des gabarits. |
DQE.js |
ValidateEmail, ValidatePhone, AddressSuggestions, CompleteAddress
|
Nouveau contrôleur qui implémente les points de terminaison pour les appels AJAX utilisés sur le storefront. |
Home.js |
Show |
Étend l'objet dictionnaire de pipeline (pdict) avec les informations de configuration DQE nécessaires au bon rendu des gabarits. |
Login.js |
Show |
Étend l'objet dictionnaire de pipeline (pdict) avec les informations de configuration DQE nécessaires au bon rendu des gabarits. |
Middleware
Le middleware DQE enrichit les contrôleurs SFRA en intégrant les informations de configuration spécifiques à DQE. Il transmet les paramètres de validation et de suggestion à l'objet dictionnaire de pipeline (pdict) pour une utilisation dans l'application.
Emplacement du fichier
Le fichier middleware se trouve à l'emplacement suivant :
cartridges/int_dqe_sfra/cartridge/scripts/middleware/dqe.js
Fonctionnalité
Le middleware ajoute un objet de propriété, dqeConfigs, à l'objet pdict. Cette propriété contient les informations de configuration liées à DQE, dérivées de la configuration actuelle des préférences de site.
Ces informations comprennent :
-
addressSuggestionsEnabled: indique si les suggestions d'adresse sont activées. -
dqeAddressCompleteEnabled: précise si la complétion d'adresse DQE est activée. -
addressValidationEnabled: indique si la validation d'adresse est active. -
phoneEnabled: précise si la validation du numéro de téléphone est activée. -
emailEnabled: indique si la validation de l'e-mail est activée. -
addressValidationMode: définit le mode de validation d'adresse configuré.
Exemple d'utilisation :
Gabarits
| Gabarit | Description |
|---|---|
account/components/registerForm.isml |
Ajout de classes et d'attributs pour la logique de validation des e-mails et des téléphones. |
account/editProfileForm.isml |
Ajout de classes et d'attributs pour la logique de validation des e-mails et des téléphones. |
checkout/customer/customerCard.isml |
Ajout de classes et d'attributs pour la logique de validation des e-mails. |
account/components/trackOrderForm.isml |
Ajout de classes et d'attributs pour la logique de validation des e-mails. |
account/password/passwordResetForm.isml |
Ajout de classes et d'attributs pour la logique de validation des e-mails. |
home/homePage.isml |
Ajout de classes et d'attributs pour la logique de validation des e-mails. |
contactUs/contactUs.isml |
Ajout de classes et d'attributs pour la logique de validation des e-mails. |
checkout/shipping/shippingAddress.isml |
Ajout d'éléments, de classes personnalisées et d'attributs pour la logique de suggestions d'adresse, de validation d'adresse et de validation du téléphone. Sur la base de la structure du gabarit SFRA, il est étendu séparément pour les locales suivantes : default, en_GB, fr_FR, it_IT et ja_JP. |
checkout/billing/billingAddress.isml |
Ajout d'éléments, de classes personnalisées et d'attributs pour les suggestions et la validation d'adresse. Sur la base de la structure du gabarit SFRA, il est étendu séparément pour les locales suivantes : default, en_GB, fr_FR, it_IT et ja_JP. |
checkout/billing/billing.isml |
Ajout de classes et d'attributs pour la logique de validation du téléphone. |
account/addressForm.isml |
Ajout d'éléments, de classes personnalisées et d'attributs pour la logique de suggestions d'adresse, de validation d'adresse et de validation du téléphone. Sur la base de la structure du gabarit SFRA, il est étendu séparément pour les locales suivantes : default, en_GB, fr_FR, it_IT et ja_JP. |
Exemple de modifications de gabarit pour shippingAddress.isml :
JavaScript côté client
L'extension JavaScript côté client de SFRA inclut la logique permettant d'afficher les suggestions d'adresse et de valider les champs e-mail et téléphone via des requêtes AJAX vers les contrôleurs DQE appropriés.
| Fichier | Description |
|---|---|
js/dqe/dqeAddress.js, js/dqe/dqeEmail.js, js/dqe/dqePhone.js, js/dqe/dqeFieldValidation.js, js/dqe/index.js
|
Toute la nouvelle logique spécifique à DQE se trouve dans le dossier
|
/js/login.js |
Étend la logique de la page de connexion avec la validation DQE des e-mails et des téléphones. |
/js/profile.js |
Étend la logique de la page de modification du profil avec la validation DQE des e-mails et des téléphones. |
/js/contactUs.js |
Étend la logique de la page Contactez-nous avec la validation DQE des e-mails. |
/js/checkout.js |
Étend la logique de la page de checkout avec la logique d'adresse DQE, la validation du téléphone et la validation de l'e-mail. |
/js/addressBook.js |
Étend la logique de la page d'adresses de Mon compte avec la logique d'adresse DQE. |
/js/addressBook/addressBook.js |
Étend la logique d'enregistrement des adresses de Mon compte avec la validation d'adresse DQE et l'affichage du résultat de validation. |
/js/checkout/checkout.js |
Étend la logique d'adresse du formulaire de facturation avec la validation d'adresse DQE et l'affichage du résultat de validation. |
/js/checkout/shipping.js |
Étend la logique d'adresse du formulaire de livraison avec la validation d'adresse DQE et l'affichage du résultat de validation. |
Associé à