Extensiones SFRA
Las extensiones SFRA se incluyen en el cartridge int_dqe_sfra y proporcionan integración con el framework SFRA de Salesforce B2C Commerce Cloud.
Estas extensiones mejoran la experiencia del usuario al habilitar las siguientes funciones:
- Address Suggestions: disponible en los formularios de dirección de envío y facturación del checkout, e integrada en los formularios de dirección de My Account.
- Address Validation: valida las direcciones enviadas en todos los formularios.
- Email Validation: valida automáticamente los campos de correo electrónico en los formularios donde se requiere una dirección de correo electrónico.
- Phone Validation: verifica los números de teléfono introducidos en los formularios que contienen campos de teléfono.
Todas las operaciones de validación dependen de la configuración de DQE definida en Business Manager, incluyendo las correspondientes site preferences y las asignaciones de validación de códigos de DQE.
Páginas afectadas en SFCC SFRA
La solución afecta a las siguientes páginas y formularios:
Página de inicio
- Subscription Block: valida la entrada de correo electrónico.
Página de inicio de sesión
- Create Account tab: valida las entradas de correo electrónico y teléfono.
- Forgot Your Password popup: valida la entrada de correo electrónico.
- Check Order block: valida la entrada de correo electrónico.
Página de contacto
- Contact Us form: valida la entrada de correo electrónico.
Páginas de checkout
- Guest User form: valida las entradas de correo electrónico, dirección y teléfono.
- Shipping form: valida las entradas de dirección y teléfono.
- Billing form: valida las entradas de dirección, teléfono y correo electrónico.
Páginas de cuenta
- Add/Edit Address forms: validan los campos de dirección.
- Profile Edit form: valida las entradas de correo electrónico y teléfono.
| Controller | Start node | Description |
|---|---|---|
Account.js |
EditProfile |
Extiende el objeto pipeline dictionary (pdict) con los detalles de configuración de DQE para una correcta representación de la plantilla. |
Address.js |
AddAddress, EditAddress
|
Extiende el objeto pipeline dictionary (pdict) con los detalles de configuración de DQE para una correcta representación de la plantilla. |
Address.js |
SaveAddress |
Extendido para realizar la validación de direcciones con DQE cuando corresponda, según la configuración actual. |
Checkout.js |
Begin |
Extiende el objeto pipeline dictionary (pdict) con los detalles de configuración de DQE para una correcta representación de la plantilla. |
CheckoutServices.js |
SubmitPayment |
Extendido para realizar la validación de la dirección de facturación con DQE cuando corresponda, según la configuración actual. |
CheckoutShippingServices.js |
SubmitShipping |
Extendido para realizar la validación de la dirección de envío con DQE cuando corresponda, según la configuración actual. |
ContactUs.js |
Landing |
Extiende el objeto pipeline dictionary (pdict) con los detalles de configuración de DQE para una correcta representación de la plantilla. |
DQE.js |
ValidateEmail, ValidatePhone, AddressSuggestions, CompleteAddress
|
Nuevo controlador que implementa los endpoints para las llamadas AJAX utilizadas en el storefront. |
Home.js |
Show |
Extiende el objeto pipeline dictionary (pdict) con los detalles de configuración de DQE para una correcta representación de la plantilla. |
Login.js |
Show |
Extiende el objeto pipeline dictionary (pdict) con los detalles de configuración de DQE para una correcta representación de la plantilla. |
Middleware
El middleware de DQE mejora los controladores de SFRA integrando detalles de configuración específicos de DQE. Pasa la configuración de validación y sugerencias al objeto pipeline dictionary (pdict) para su uso en la aplicación.
Ubicación del archivo
El archivo de middleware se encuentra en:
cartridges/int_dqe_sfra/cartridge/scripts/middleware/dqe.js
Funcionalidad
El middleware añade un objeto de propiedad, dqeConfigs, al objeto pdict. Esta propiedad contiene los detalles de configuración relacionados con DQE derivados de la configuración actual de las site preferences.
Estos detalles incluyen:
-
addressSuggestionsEnabled: indica si las sugerencias de direcciones están habilitadas. -
dqeAddressCompleteEnabled: especifica si la finalización de direcciones de DQE está habilitada. -
addressValidationEnabled: indica si la validación de direcciones está activa. -
phoneEnabled: especifica si la validación de números de teléfono está habilitada. -
emailEnabled: indica si la validación de correo electrónico está habilitada. -
addressValidationMode: define el modo de validación de direcciones configurado.
Ejemplo de uso:
Plantillas
| Template | Description |
|---|---|
account/components/registerForm.isml |
Se añadieron clases y atributos para la lógica de validación de correo electrónico y teléfono. |
account/editProfileForm.isml |
Se añadieron clases y atributos para la lógica de validación de correo electrónico y teléfono. |
checkout/customer/customerCard.isml |
Se añadieron clases y atributos para la lógica de validación de correo electrónico. |
account/components/trackOrderForm.isml |
Se añadieron clases y atributos para la lógica de validación de correo electrónico. |
account/password/passwordResetForm.isml |
Se añadieron clases y atributos para la lógica de validación de correo electrónico. |
home/homePage.isml |
Se añadieron clases y atributos para la lógica de validación de correo electrónico. |
contactUs/contactUs.isml |
Se añadieron clases y atributos para la lógica de validación de correo electrónico. |
checkout/shipping/shippingAddress.isml |
Se añadieron elementos, clases personalizadas y atributos para la lógica de sugerencias de direcciones, validación de direcciones y validación de teléfono. Basándose en la estructura de la plantilla SFRA, se extiende por separado para los siguientes locales: default, en_GB, fr_FR, it_IT y ja_JP. |
checkout/billing/billingAddress.isml |
Se añadieron elementos, clases personalizadas y atributos para las sugerencias y la validación de direcciones. Basándose en la estructura de la plantilla SFRA, se extiende por separado para los siguientes locales: default, en_GB, fr_FR, it_IT y ja_JP. |
checkout/billing/billing.isml |
Se añadieron clases y atributos para la lógica de validación de teléfono. |
account/addressForm.isml |
Se añadieron elementos, clases personalizadas y atributos para la lógica de sugerencias de direcciones, validación de direcciones y validación de teléfono. Basándose en la estructura de la plantilla SFRA, se extiende por separado para los siguientes locales: default, en_GB, fr_FR, it_IT y ja_JP. |
Ejemplo de cambios en la plantilla para shippingAddress.isml:
JavaScript del lado del cliente
La extensión de JavaScript del lado del cliente de SFRA incluye la lógica para mostrar sugerencias de direcciones y validar los campos de correo electrónico y teléfono mediante solicitudes AJAX a los controladores de DQE correspondientes.
| File | Description |
|---|---|
js/dqe/dqeAddress.js, js/dqe/dqeEmail.js, js/dqe/dqePhone.js, js/dqe/dqeFieldValidation.js, js/dqe/index.js
|
Toda la nueva lógica específica de DQE se encuentra en la carpeta
|
/js/login.js |
Extiende la lógica de la página de inicio de sesión con la validación de correo electrónico y teléfono de DQE. |
/js/profile.js |
Extiende la lógica de la página de edición de perfil con la validación de correo electrónico y teléfono de DQE. |
/js/contactUs.js |
Extiende la lógica de la página de contacto con la validación de correo electrónico de DQE. |
/js/checkout.js |
Extiende la lógica de la página de checkout con la lógica de dirección, la validación de teléfono y la validación de correo electrónico de DQE. |
/js/addressBook.js |
Extiende la lógica de la página de direcciones de My Account con la lógica de dirección de DQE. |
/js/addressBook/addressBook.js |
Extiende la lógica de guardado de direcciones de My Account con la validación de direcciones de DQE y la visualización del resultado de la validación. |
/js/checkout/checkout.js |
Extiende la lógica de dirección del formulario de facturación con la validación de direcciones de DQE y la visualización del resultado de la validación. |
/js/checkout/shipping.js |
Extiende la lógica de dirección del formulario de envío con la validación de direcciones de DQE y la visualización del resultado de la validación. |
Relacionada con