Wix Studio: Private Member Content Solutions

Understanding Private Member Content in Wix Studio

The Wix Studio platform offers robust capabilities for creating dynamic websites, including member-only areas. A common requirement for many site owners, particularly those running stores or subscription services, is the ability to create personalized content that is only visible to specific logged-in members. This article addresses a challenge raised in the Wix Studio community forum regarding the implementation of private, member-specific entries within a members area (Original Forum Post).

The user in the forum sought a solution where logged-in members could create entries (e.g., journal entries, project updates) and only see their own entries. They explored using Wix Studio's built-in Members Area and CMS (Content Management System) but encountered difficulties in linking CMS collection entries to the currently logged-in member without resorting to Velo code.

The Challenge: No-Code Limitations

The core issue lies in the limitations of Wix Studio's no-code environment when it comes to dynamically filtering CMS content based on the current user's identity. While Wix documentation may suggest certain possibilities, the forum user found it difficult to achieve the desired outcome without Velo.

Solution: Implementing with Velo

While a pure no-code solution might be elusive, Velo provides the necessary tools to achieve the desired functionality. Here's a breakdown of the steps involved:

Step 1: Setting up the CMS Collection

First, create a CMS collection to store the member-specific entries. This collection should include fields relevant to the content you want to store (e.g., 'title', 'description', 'date'). Crucially, it must include a field to store the member's ID. A text field named 'memberId' is suitable for this purpose.

Step 2: Capturing the Member ID

When a member creates a new entry, you need to capture their unique ID and store it in the 'memberId' field of the CMS collection. You can use the wix-members-frontend API to retrieve the current member's ID.

import { authentication } from '@wix/members-frontend';

async function getCurrentMemberId() {
  const sessi
  const member = await authentication.session.getMember(sessionToken);
  return member._id;
}

This code snippet retrieves the member's ID. You will need to adapt this within your form submission handler.

Step 3: Saving the Entry with the Member ID

When saving the new entry to the CMS collection, include the retrieved member ID in the 'memberId' field. This is typically done within the form's onSubmit event handler.

import wixData from 'wix-data';

async function saveEntry(title, description) {
  const memberId = await getCurrentMemberId();

  let toInsert = {
    "title": title,
    "description": description,
    "memberId": memberId
  };

  wixData.insert("myCollection", toInsert)
    .then( (results) => {
      let item = results;
      console.log(item);
    } )
    .catch( (err) => {
      let errorMsg = err;
      console.error(errorMsg);
    } );
}

Remember to replace "myCollection" with the actual ID of your CMS collection.

Step 4: Filtering Entries by Member ID

Finally, when displaying the entries in the member's area, filter the CMS collection to only show entries where the 'memberId' matches the current member's ID. Use wix-data.query for this purpose.

import wixData from 'wix-data';

async function displayMemberEntries() {
  const memberId = await getCurrentMemberId();

  wixData.query("myCollection")
    .eq("memberId", memberId)
    .find()
    .then( (results) => {
      if(results.items.length > 0) {
        // Display the entries
        console.log(results.items);
      } else {
        // No entries found for this member
        console.log("No entries found for this member.");
      }
    } )
    .catch( (err) => {
      let errorMsg = err;
      console.error(errorMsg);
    } );
}

Again, replace "myCollection" with your collection ID. This code fetches only the entries where the 'memberId' field matches the current user's ID.

Conclusion

While Wix Studio's no-code environment has limitations, Velo empowers you to create sophisticated member-specific content experiences. By leveraging the wix-members-frontend and wix-data APIs, you can effectively link CMS entries to logged-in members and ensure that they only see their own content. This approach provides a robust solution for creating personalized and engaging member areas within your Wix Studio site.

Wix Studio Members Area: Creating Private, User-Specific Content