Skip to content

Commit 444d6f2

Browse files
authored
Update member-portal.md
1 parent 4b48c6f commit 444d6f2

File tree

1 file changed

+25
-23
lines changed

1 file changed

+25
-23
lines changed

15/umbraco-commerce/how-to-guides/member-portal.md

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,60 +4,60 @@ description: Learn how to build a members portal in Umbraco Commerce.
44

55
# Building a Members Portal
66

7-
A members portal is a private area of your website where customers can log in to access their order history, manage their account details, and view personalized content. In this guide, we will show you how to build a members portal in Umbraco Commerce.
7+
A members portal is a private area of your website where customers can access their order history, manage their account details, and view personalized content. This guide will show you how to build a members portal in Umbraco Commerce.
88

99
## Setting Up the Members
1010

11-
The first step in building a members portal is to create a member type for your customers. This member type will define the properties that customers can have, such as their name, email address, and password.
11+
The first step in building a members portal is to create a Member Type for your customers. This Member Type will define the properties that customers can have, such as their name, email address, and password.
1212

1313
### Creating a Member Group
1414

1515
1. Navigate to the **Members** section of the backoffice.
16-
2. Next to the **Member Groups** heading in the navigation, click the **+** button to create a new member type.
17-
3. Enter a name for the member group, such as `Customer`.
16+
2. Click the **+** button next to the **Member Groups** heading in the navigation to create a new Member Type.
17+
3. Enter a name for the Member Group, such as `Customer`.
1818

1919
![Customer Member Group](images/member-portal/customer-member-group.png)
2020

21-
4. Click the **Save** button to create the member group.
21+
4. Click the **Save** button to create the Member Group.
2222

2323
### Assigning Members to the Customer Member Group
2424

2525
1. Navigate to the **Members** section of the backoffice.
2626
2. Click on the **Members** tab in the navigation.
27-
3. Click on the member you want to assign to the `Customer` member group.
28-
4. In the **Member Group** property, select the `Customer` member group.
27+
3. Click on the Member you want to assign to the `Customer` Member Group.
28+
4. Select the `Customer` Member Group in the **Member Group** property.
2929

3030
![Example Customer](images/member-portal/customer-assign-member-group.png)
3131

32-
5. Click the **Save** button to assign the member to the `Customer` member group.
32+
5. Click the **Save** button to assign the Member to the `Customer` Member Group.
3333

34-
## Setting Up the Members Area
34+
## Setting Up the Member Area
3535

3636
The next step in building a members portal is to create the pages and templates that will make up the members area of your website.
3737

3838
### Document Type Setup
3939

4040
1. Navigate to the **Settings** section of the backoffice.
41-
2. Create two new document types: `Customer Portal` and `Login`.
41+
2. Create two new Document Types: `Customer Portal` and `Login`.
4242

4343
![Customer Portal Document Types](images/member-portal/document-types.png)
4444

45-
3. Update your site root document type to include the `Customer Portal` and `Login` document types as a child.
45+
3. Update your site root Document Type to include the `Customer Portal` and `Login` Document Types as child-pages.
4646

4747
![Allowed Children Configuration](images/member-portal/allowed-children.png)
4848

4949
### Content Setup
5050

5151
1. Navigate to the **Content** section of the backoffice.
52-
2. Create a new page using the `Customer Portal` document type and name it `Customer Portal`.
53-
3. Create a new page using the `Login` document type and name it `Login`.
52+
2. Create a new page using the `Customer Portal` Document Type and name it `Customer Portal`.
53+
3. Create a new page using the `Login` Document Type and name it `Login`.
5454

5555
![Customer Portal Content Structure](images/member-portal/content-structure.png)
5656

5757
4. Expand the context menu for the `Customer Portal` node by clicking the three dots.
5858
5. Click on the **Public Access** option.
59-
6. In the **Public Access** dialog, choose the **Group based protection** option and click **Next**.
60-
7. Select the `Customer` member group for the group option.
59+
6. Choose the **Group based protection** option in the **Public Access** dialog and select **Next**.
60+
7. Select the `Customer` Member Group for the group option.
6161
8. Select the `Login` node for the login and error page options.
6262

6363
![Public Access Configuration](images/member-portal/public-access.png)
@@ -66,7 +66,7 @@ The next step in building a members portal is to create the pages and templates
6666

6767
## Implementing a Member Login
6868

69-
In order to access the members portal, customers will need to log in. We will create a login form that will allow customers to enter their username and password to access the portal.
69+
To access the members portal, customers need to log in. Through the following steps a login form allowing customers to enter their username and password to access the portal is created.
7070

7171
1. Open the `Login.cshtml` template file.
7272
2. Add the following code to create a login form:
@@ -96,13 +96,13 @@ In order to access the members portal, customers will need to log in. We will cr
9696
The `UmbLoginController` class comes pre-installed with Umbraco and handles the login process for you, so you don't need to create a custom controller.
9797
{% endhint %}
9898

99-
On the frontend, customers will be able to enter their username and password and click the **Login** button to access the members portal.
99+
On the frontend, customers can enter their username and password and click the **Login** button to access the members portal.
100100

101101
![Login Page](images/member-portal/login-page.png)
102102

103103
## Displaying Member Order History
104104

105-
Now that members can log in, we'll update the `Customer Portal` page to display the order history for the logged-in member.
105+
Now that members can log in, update the `Customer Portal` page to display the order history for the logged-in member.
106106

107107
1. Open the `CustomerPortal.cshtml` template file.
108108
2. Add the following code to display the order history:
@@ -152,7 +152,7 @@ The `Customer Portal` page will now display a table of the member's order histor
152152

153153
### Assigning Orders to a Customer
154154

155-
The order history will display all orders that have been finalized for the logged-in member. Orders that are created whilst the member is logged in will automatically be associated with the member. If you wish to assign an order to a member at any point, you can also use the API method:
155+
The order history will display all orders that have been finalized for the logged-in member. Orders created whilst the member is logged in will automatically be associated with the member. If you wish to assign an order to a member at any point, you can use the API method:
156156

157157
```csharp
158158
writableOrder.AssignToCustomer(member.Key.ToString());
@@ -181,18 +181,20 @@ In your site header, add the following code to display the member login status:
181181
}
182182
}
183183
```
184+
184185
![Logged Out Status](images/member-portal/logged-out.png)
185186

186187
![Logged In Status](images/member-portal/logged-in.png)
187188

188189
### Registering a Member
189190

190-
To allow customers to register as members, you can create a registration form that will allow customers to enter their name, email address, and password.
191+
To allow customers to register as members, you can create a registration form allowing customers to enter their name, email address, and password.
191192

192-
Implement a registration document type and page in the same way as the login page. Then, open the `Register.cshtml` template file and add the following code to create a registration form:
193+
1. Implement a registration Document Type and page in the same way as the login page.
194+
2. Open the `Register.cshtml` template file and add the following code to create a registration form:
193195

194196
```csharp
195-
@using (Html.BeginUmbracoForm<UmbRegisterController>("HandleRegisterMember", new { RedirectUrl = "/customer-poratl", UsernameIsEmail = true }))
197+
@using (Html.BeginUmbracoForm<UmbRegisterController>("HandleRegisterMember", new { RedirectUrl = "/customer-portal", UsernameIsEmail = true }))
196198
{
197199
<div asp-validation-summary="ModelOnly"></div>
198200

@@ -228,6 +230,6 @@ Implement a registration document type and page in the same way as the login pag
228230
The `UmbRegisterController` class comes pre-installed with Umbraco and handles the login process for you, so you don't need to create a custom controller.
229231
{% endhint %}
230232

231-
On the frontend, customers will be able to enter their name, email address, and password to register as a member.
233+
On the frontend, customers can enter their name, email address, and password to register as a member.
232234

233235
![Register Page](images/member-portal/register-page.png)

0 commit comments

Comments
 (0)