Commerce Account renderings

Abstract

The Commerce Account group 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 following renderings in the Commerce Account group in the SXA toolbox:

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:

511B2CC7E94C4E38985325CDAEB099CE.png

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

The Registration rendering on the live storefront

While the page is loading on the storefront, the registration form is disabled. Once the page is fully loaded, the form is enabled.

Field validation

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:

DF14AB0C51C540E797388B8575D0134C.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.

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

The SXA 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 basic custom theme applied, it looks like this:

2258B99F2A7244C3977620BF2D62F245.png

The Login rendering on the live storefront

While the page is loading on the storefront, the Login form is disabled. Once the page is fully loaded, the form is enabled.

Field validation

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:

557D842E6BFC4E008B02BD8326959591.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 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 SXA Storefront template.

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

409D3045BC2F4769B7D73C6853B9FED0.png

Configuration

In the associated content item, in the Number of Addresses to Show field, you can configure the maximum number of addresses displayed in the list.

In the Show Address List Header field, you can configure whether to show the header or not.

In the Add New Address Link field you can configure the link to redirect to, when an address or Add a new address link is clicked.

C66F0CD410414FC78F71343D1FDAC4D5.png

The Address List rendering on the live storefront

On the live storefront, the Address List rendering displays addresses that have been registered for the customer.

Note

In the Account Management Configuration item (in /sitecore/Commerce/Commerce Control Panel/Storefront Settings/Storefronts/Storefront/Account Management Configuration), you can configure the maximum number of addresses that a customer can register.

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.

The Address Editor rendering enables the customer to add a new address, edit an existing address, or delete an address from the address book.

With a basic custom theme applied, it looks like this:

4C708FD475CF492781A48AD3A29C48FB.png

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

Configuration

In the Control Properties dialog for the rendering, in the Account Management Page Link field, you can configure the link to redirect to after the customer has clicked either Cancel or Save changes.

7C1D6514D167497B8A2C4B1E9774A407.png

The Address Editor rendering 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 checkmark is removed from the first address. Only one address can be the primary address.

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 for the rendering, you can edit the link used for the email address and the Edit link. This will typically be to a page with the Profile Editor rendering.

You can also configure whether the rendering displays the Account profile header.

5EAC6F0EFD374ECF9CD79BF3353598DA.png

The Profile Editor rendering enables 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 dialog for the rendering, you can configure a link to redirect the customer after they click Save changes. You can also configure a link to redirect the customer after they click Cancel.

868743BD01844727BE9F53D8A5860F81.png

The Change Password rendering looks like this in the Experience Editor:

A2B81925B0904D049F37C7CCCA1AECF3.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 for the rendering, you can configure a link to redirect the customer after they click Save changes. You can also configure a link to redirect the customer after they click Cancel.

EC011BFBA7F340FF8BE33597A5AF0DCA.png

The Forgot Password rendering looks like this in the Experience Editor:

64B160A53B9640869A4F563932AFA081.png

When the customer submits an email address, the system checks for the email in the system.

If the email is recognized, a message is displayed and the system sends an email 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.

Configuration

In the associated data item, you can configure the email message that is sent to the customer when they report a forgotten password.