Components Overview

SFRA Extensions

The SFRA extensions are included in the int_dqe_sfra cartridge and provide integration with Salesforce B2C Commerce Cloud's SFRA framework.

These extensions improve the user experience by enabling the following features:

• Address Suggestions: available on checkout shipping and billing address forms, and integrated into address forms under My Account.
• Address Validation: validates submitted addresses across all forms.
• Email Validation: automatically validates email fields on forms where an email address is required.
• Phone Validation: verifies phone number inputs across forms containing phone fields.

All validation operations rely on the DQE configuration and setup within Business Manager, including the corresponding site preferences and DQE code validation mappings.

Impacted Pages in SFCC SFRA

The solution affects the following pages and forms:

Home Page

• Subscription Block: validates email input.

Login Page

• Create Account tab: validates email and phone inputs.
• Forgot Your Password popup: validates email input.
• Check Order block: validates email input.

Contact Us Page

• Contact Us form: validates email input.

Checkout Pages

• Guest User form: validates email, address, and phone inputs.
• Shipping form: validates address and phone inputs.
• Billing form: validates address, phone, and email inputs.

Account Pages

• Add/Edit Address forms: validate address fields.
• Profile Edit form: validates email and phone inputs.

Middleware

The DQE middleware enhances SFRA controllers by integrating DQE-specific configuration details. It passes validation and suggestion settings to the pipeline dictionary (pdict) object for use in the application.

File Location

The middleware file is located at:

cartridges/int_dqe_sfra/cartridge/scripts/middleware/dqe.js

Functionality

The middleware adds a property object, dqeConfigs, to the pdict object. This property contains DQE-related configuration details derived from the current site preferences setup.

These details include:

• addressSuggestionsEnabled: indicates whether address suggestions are enabled.
• dqeAddressCompleteEnabled: specifies whether DQE address completion is enabled.
• addressValidationEnabled: indicates whether address validation is active.
• phoneEnabled: specifies whether phone number validation is enabled.
• emailEnabled: indicates whether email validation is enabled.
• addressValidationMode: defines the configured address validation mode.

Example of usage:

Templates

Example of template changes for shippingAddress.isml:

Client-Side JavaScript

The SFRA client-side JavaScript extension includes logic for displaying address suggestions and validating email and phone fields through AJAX requests to the appropriate DQE controllers.