SFRA Extensions

The SFRA extensions are included in the int_dqe_sfra cartridge, providing seamless integration with Salesforce B2C Commerce Cloud's SFRA framework. These extensions enhance user experience by enabling the following functionalities:

Key Features:

• Address Suggestions:
  • Available on checkout shipping and billing address forms.
  • 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 the Business Manager, including corresponding site preferences and DQE code validation mappings.

Impacted Pages in SFCC SFRA

Here is a list of pages and forms affected by the solution:

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: Validates address fields.
• Profile Edit Form: Validates email and phone inputs.

Middleware

The DQE middleware is designed to enhance any SFRA controller by integrating DQE-specific configuration details. This middleware ensures that necessary validation and suggestion settings are seamlessly passed 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 if address suggestions are enabled.
• dqeAddressCompleteEnabled: Specifies whether DQE address completion is enabled.
• addressValidationEnabled: Indicates if address validation is active.
• phoneEnabled: Specifies if phone number validation is enabled.
• emailEnabled: Indicates if email validation is enabled.
• addressValidationMode: Defines the mode of address validation configured.

Example of usage:

Templates

Example of template changes for shippingAddress.isml:

Client side JS

Extension of client side js logic for SFRA includes logic for displaying address suggestion and validation of email and phone with ajax request to appropriate DQE controllers.