Commerce Account renderings

Abstract

Overview of the Commerce Account group, which contains renderings for account authentication and management.

You can add Commerce Account renderings to your storefront to enable account and profile management. This topic describes the renderings accessible from the Commerce Account section in the Toolbox.

You use the Address Editor rendering to enable the customer to add a new address, edit an existing address, or delete an address from the address book.

With the Storefront Branded theme applied, it looks like this:

AddressEditor.png

Note

In the Experience Editor, fields and buttons in the rendering are disabled.

On the live storefront, the Set as primary address checkbox is automatically selected for the first address that is entered. If another address is subsequently marked as the primary one, the check mark is removed from the first address. Only one address can be the primary address.

Configuration

In the Control Properties dialog box, in the Address Editor section, you can configure the following property for the Address Editor rendering.

Property

Use

Account Management Page Link

Configure the link to which you want to redirect customers after they click Cancel or Save changes.

You use the Address List rendering to display the customer's shipping and billing addresses. For example, this rendering is used on the Account Management page in the Storefront site template.

When you add the rendering in the Experience Editor with the Storefront Branded theme applied, it is displayed with placeholder data:

AddressBook.png

On the live storefront, the Address List rendering displays addresses that have been registered for the customer. If there are no addresses, a message is displayed to indicate that the address book is empty.

When the customer clicks an address in the list or clicks the Add a new address link, the Address Editor page is displayed.

Configuration

In the Control Properties dialog box, in the Address List section, you can configure the following properties for the Address List rendering.

Property

Use

Add New Address Link

Configure the link to redirect to, when an address or Add a new addressAdd a new address link is clicked.

Show Address List Header

Configure whether to show the header or not.

Number of Addresses to Show

Configure the maximum number of addresses displayed in the list.

Note

In the Content Editor, go to Account Management Configuration item (/sitecore/Commerce/Commerce Control Panel/Storefront Settings/Storefronts/<site>/Account Management Configuration) to configure the maximum number of addresses that a customer can register.

You use the Change Password rendering to enable customers to change their password.

In the Experience Editor, the Change Password rendering looks like this:

ChangePassword.png

When the customer clicks Save changes, the system validates that the content of the Current password is correct, and that the contents of the New password and Repeat password fields match.

When the content passes validation, the system updates the password and redirects the customer to a new page or displays a message confirming that the password has been changed.

Configuration

In the Control Properties dialog box, in the Change Password section, you can configure the following properties for the Change Password rendering.

Property

Use

Save Changes Redirect Link

Configure the link to which you want to redirect customers after they click Save changes.

Cancel Redirect Link

Configure the link to which you want to redirect customers after they click Cancel.

You use the Forgot Password rendering to enable the customer to specify a new password.

In the Experience Editor, the Forgot Password rendering looks like this:

64B160A53B9640869A4F563932AFA081.png

When the customer submits an email address, the system verifies that the email address is in the system. If the email address is recognized, a message is displayed and the system sends an email message to the email address, including a random password and a link to the Change Password page on the website.

If the email address is not recognized, nothing happens. For security reasons, no message is displayed.

Note

To change the email message that is sent to the customer when they report a forgotten password, click the Forgot Password rendering and, on the Forgot Password toolbar, click Add or change the associated content, Edit the related item.

You use the Login rendering to insert a login form on your website. When customers who have registered an account return to the site, they use the login form to gain access to their account.

The Toolbox contains two Login renderings:

  • A Login rendering in the Security group – used on a webpage to authenticate contacts or customers.

  • A Login rendering in the Commerce Account group – also used on a webpage to authenticate contacts or customers but it has additional functionality. You must use this rendering when you make a website that is integrated with the Commerce Engine to ensure that the login is authenticated in the commerce system.

In the Experience Editor, fields and buttons in the rendering remain disabled, and the Login form cannot be submitted. With the Storefront Branded theme applied, it looks like this:

Login.png

On the live storefront, while the page is loading, the Login form is disabled. Once the page is fully loaded, the form is enabled.

The customer is required to fill in both the Email Address and Password fields on the form. When the customer submits the form, Sitecore validates the following:

  • There is content in all fields

  • The email address format is correct.

    Note

    You can edit the regular expression used for email format validation in the Commerce Control Panel, in the Email Configuration item (/sitecore/Commerce/Commerce Control Panel/Storefront Settings/Storefronts/Storefront/Email Configuration)

If any of the validations fail, an error message is displayed for each of the empty or incorrect fields, for example:

ValidationFail.png

Login form submission

When the customer clicks Sign in, the system validates the fields. The button is disabled to avoid multiple clicks and the button label changes to Authenticating…. If there are no validation errors, the form is submitted to the server.

Valid login information

If the email address and password match with a valid account in the system, the customer is redirected to a specified URL. If the Top Bar Links rendering is used on the site, the Sign in link is changed to Sign out.

Invalid login information

If the email address and password do not match with a valid account in the system, a message is sent to the Message Context, which serves as a communication broker between components. If the Message Summary component is on the page, it will pick up the message from the Messaging Service and display it. It might look like this, for example:

46BEC1A25E494556BBF018D0338A6D7B.png

You use the Profile Editor rendering to enable the customer to edit their profile, which consists of the following information:

  • First name

  • Last name

  • Telephone number

  • Email address

B09D427B0A1E4CB19812259A350925DD.png

When the customer clicks Save Changes, the system validates that the contents of the Email address and Repeat email address fields match. The system also validates that the email address format conforms to the email address regular expression in the Commerce Control Panel.

When the content passes validation:

  • The Sitecore user (.NET membership provider) is updated with the data.

  • The contact information in xDB is updated.

  • The corresponding user profile in the Commerce Engine is updated.

The system redirects the customer to a different URL or displays a message confirming that the changes have been saved.

Configuration

In the Control Properties, in the Profile Editor section, you can configure the following properties for the Profile Editor rendering.

Property

Use

Save Changes Redirect Link

Configure the link to which you want to redirect customers after they have click Save changes.

Cancel Redirect Link

Configure the link to which you want to redirect customers after they have click Cancel.

You use the Profile View rendering to display the email address for the current customer account. In the Experience Editor, the rendering contains placeholder data for the email address. When you insert the rendering in the Experience Editor with a basic custom theme applied, it looks like this:

C3C67FAA67664F62A9218B00648F87CB.png

The email address and the edit link are both links to the same URL. This will typically be a page with the Profile Editor rendering, where the customer can edit profile information.

Configuration

In the Control Properties dialog box. The following configuration properties are available in the Profile View section of the dialog box.

Property

Use

Profile Edit Link

Edit the link used for the email address and the Edit link. This is typically a page with the Profile Editor rendering.

Show Profile View Header

Show or hide the account profile header.

You use the Registration rendering to insert a registration form on your website. If a customer visits your website and does not already have an account, they use the registration form to create a new account. The system registers the new account and then automatically logs the customer in for the current session. When the account is created, the User Account Created goal is triggered in the Experience Platform.

In the Experience Editor, with the basic custom theme applied, it looks like this:

Registration.png

In the Experience Editor, fields and buttons in the rendering are disabled, and the registration form cannot be submitted.

On the live storefront, while the page is loading, the registration form is disabled. Once the page is fully loaded, the form is enabled.

The customer is required to fill in all fields on the registration form. When the customer submits the form, Sitecore validates the following:

  • There is content in all fields.

  • The email address format is correct.

    Note

    You can edit the regular expression used for email format validation in the Commerce Control Panel, in the Email Configuration item (/sitecore/Commerce/Commerce Control Panel/Storefront Settings/Storefronts/Storefront/Email Configuration)

  • The password is at least 6 characters long.

  • The content of the Password and Confirm Password fields is identical.

If any of the validations fail, an error message is displayed for each of the empty or incorrect fields, for example:

CustomerValidation.png

Registration form submission

When the customer clicks Create new account, the system validates the fields. The button is disabled to avoid multiple clicks and the button label changes to Registering…. If there are no validation errors, the form is submitted to the server.

Valid registration information

If the email address provided for registration does not exist in the system, the customer is added to the system and logged in automatically. As part of the login process, the customer is redirected to the Account Management page.

Invalid registration information

If the email address provided for registration already exists in the system, and if the Message Summary component is on the page, the Message Summary displays an error message.

Note

Some messages that appear in the message summary are system messages, which you can configure in the Commerce Control Panel, in the Storefront Settings/Commerce Terms/System Messages folder.