Ascend

Ascend is a complete marketing and customer management suite that lets you engage with your customers and acquire more audience by providing SEO tools and social and marketing integrations.

It offers features such as live chat with site visitors, creating and sending branded invoices to request payment for your products and services, email marketing, automated responses to site actions and much more!

Content Manager

Manage your site more efficiently by creating and storing content in collections using the Content Manager. Connect your collections to various elements in the Editor to display content on your site or receive form submissions.

How do I add the Content Manager?addContentManager

Collections

Content collections are where you store your site’s content. This may be content you create or content you capture from your site visitors or both. The content is stored in a grid layout made up of items (rows) and fields (columns).

When creating a new collection, you can choose a preset collection or start from scratch. You’ll also need to set permissions for the collection. These permissions define who can access it, which determines what you can do with it.

Creating a collection to store members information

Easily manage your site’s content by creating a content collection. Here, you can store large amounts of content, including content you create or content submitted by site visitors. You can display this content by connecting your collection to a site element like a repeater.

Steps to create a content collection

  1. Go to the Content Manager in your Editor and click the Content Manager icon on the left of the Editor.

  2. Click Create New Collection.

  3. Enter a name for your collection.

  4. Click the What’s this content collection for? drop-down and select permissionpermission.

  5. Click the Also create the necessary pages… toggle to enable or disable the dynamic pages that go with this collection.

  6. Click Create Collection.

Creating a custom login page

In our example, we have a dedicated page for members to use for logging into the site. However, you can add the contents of this page to any page or even show them on all pages.

Note: Because we have a dedicated login page, we’ll be adding the code below to the page using the code panel. If you’re showing the elements on all pages, you need to add the code below to masterPage.js, which you can find in the Global (Site) section of the Velo sidebar.

The design of our login page is very simple. It contains two buttons. The first button is used for either logging in or logging out, depending on whether the current user is already logged in or not. The second button is used to navigate to a member’s profile page. It is only shown for users who are already logged in.

Code

The code on our login page consists of four parts:

  • Imports for the APIs used in the rest of the code
  • An onReady event handler for setting up the page when it loads
  • A login button onClick event handler for either of the following:
    • Logging in a user and possibly creating a new item in the Members collection if it is a first-time login
    • Logging out a user who is already logged in
  • A profile button onClick event handler for letting members navigate to their profile pages.

We use the following APIs:

  • wix-users: To information about the current user and to log users in and out.
  • wix-data: To query and insert into the Members collection.
  • wix-location: To navigate to other pages.

Our importing code looks like this:

Press + to interact
import wixUsers from 'wix-users';
import wixData from 'wix-data';
import wixLocation from 'wix-location';

When the login page loads, we want to set up our buttons.

  • If the user is logged in, we want the login button’s label to be Logout. We also want to show the My Profile button.
  • If the user is not logged in, we want the login button’s label to be Login. We don’t want the My Profile button to show.

The onReady() code looks like this:

Press + to interact
$w.onReady( () => {
  if(wixUsers.currentUser.loggedIn) {
    $w("#loginButton").label = "Logout";
    $w("#profileButton").show();
  } else {
    $w("#loginButton").label = "Login";
    $w("#profileButton").hide();
  }
} );

Most of the logic in our page is contained in the onClick event handler of the login button.

In the event handler, we want to do a few things:

  • If a user is logged in and clicks on the button:
    • Log the user out.
    • Change the button’s label to Login.
    • Hide the My Profile button.
  • If the user is logged out and clicks the button:
    • Prompt the user to log in.
    • Query the Members collection to see if an item for the current user exists.
      • If there is no item for the current user, create one.
    • Change the button’s label to Logout.
    • Show the My Profile button.

We add an event handler by selecting the login button, and we use the Properties panel to add a handler for the onClick event.

Then we add the event handler code, which looks like this:

Press + to interact
export function loginButton_click(event) { 
  // user is logged in
  if(wixUsers.currentUser.loggedIn) {
    // log the user out
    wixUsers.logout()
    // update buttons accordingly
    $w("#loginButton").label = "Login";
    $w("#profileButton").hide();
  }
  // user is logged out
  else {
    let userId;
    let userEmail;
  
    // prompt the user to log in 
    wixUsers.promptLogin( {"mode": "login"} )
      .then( (user) => {
        userId = user.id;
        return user.getEmail();
      } )
      .then( (email) => {
        // check if there is an item for the user in the collection
        userEmail = email;
        return wixData.query("Members")
          .eq("_id", userId)
          .find();
      } )
      .then( (results) => {
        // if an item for the user is not found
        if (results.items.length === 0) {
          // create an item
          const toInsert = {
            "_id": userId,
            "email": userEmail
          };
          // add the item to the collection
          wixData.insert("Members", toInsert)
            .catch( (err) => {
              console.log(err);
            } );
        }
        // update buttons accordingly
        $w("#loginButton").label = "Logout";
        $w("#profileButton").show();
      } )
      .catch( (err) => {
        console.log(err);
      } );
  }
}

When the profile button is clicked, we use an event handler to send members to their personal profile page.

We add an event handler by selecting the profile button, and we use the Properties & Events panel to add a handler for the onClick event.

Then we add the event handler code, which looks like this:

Press + to interact
export function profileButton_click(event) {
  wixLocation.to(`/Members/${wixUsers.currentUser.id}`); 
}

API list

The following APIs are used in the code in this article. To learn more, see the API Reference.

  • wix-users: Gets information about the current user and logs users in and out.
  • wix-data: For querying and inserting into collections.
  • wix-location: For navigation.

Creating a dynamic profile page

The data for the dynamic profile page is created when a user first logs in to your site. Users can view and update their personal profiles at any time.

Note: The functionality for logging users in and out of your site only fully works when viewing your published site. You will not be able to fully test your member profile pages in preview mode.

To create our member profile pages, we build:

  • A members collection
  • A profile page
  • An update page
  • A login page

We assume that you are familiar with the following concepts:

  • Database collections
  • Collection permissions
  • Page permissions
  • Dynamic item pages
  • Dataset Modes
  • Data Binding

Members Collection

We begin by creating a collection named Members, which is where we store all of the member data. Each item in the collection is another member.

Because we want to restrict access to members so they can view and update their own items, we set the permissions for the Members collection to Custom Use and choose the following:

  • Who can read content from this collection? - Site member author
  • Who can create content for this collection? - Site member
  • Who can update content from this collection? - Site member author
  • Who can delete content from this collection? - Admin

The collection can contain whatever member data you want. In this example, we use the following fields:

Field Name Field Key Type
Title title Text
First Name firstName Text
Last Name lastName Text
Email email Text
Phone phone Text
About about Text

Profile Page

Next, we create a page to display user profiles. It is a dynamic item page connected to the Members collection. Because we are creating a dynamic item page, we need to choose a field to add to the URL that uniquely identifies each member. Here we use each member’s automatically generated IDs to uniquely identify them.

The URL looks like this:

Because we’re only using this page to display data, we set the dynamic dataset’s mode to read-only.

We also set the page’s permissions to Members Only using the Permissions tab of the Page Settings so that only users who are logged in can reach the page. The page itself is designed with elements for displaying the information in a user’s profile. In our example, that means text elements that are connected through the page’s dynamic dataset to the fields in the Members collection.

Finally, we add a button element. When we create the update page, we will connect the link of the button to navigate to the update page for the current user.

When members check their profile pages, they will see something like this:

Creating a dynamic update profile page

The update page is very similar to the profile page. It is also a dynamic item page connected to the Members collection. It also uses the members’ IDs as the unique identifying field. However, because we can’t have two pages with the same URL on our site, we add Update to the URL so it looks like this:

Because we’re displaying data on this page and allowing users to edit their data, we set the dynamic dataset’s mode to Read & Write.

Once again, we set the page’s permissions to Members Only using the Permissions tab of the Page Settings so that only users who are logged in can reach the page.

This time the page is designed with elements for displaying and editing the information in a user’s profile. In our example, we’ll use a dropdown element, some text input elements, and a text box element. All these elements are connected through the page’s dynamic dataset to the fields in the Members collection.

Finally, we add a button element for submitting edited data. We connect the submit button using the Connect to Data button as follows:

When members see their update pages, they will see something like this:

Now that we’ve created the update page, we can return to the profile page to link the update button.

We connect the update button using the Connect to Data button as follows: