Hiding Elements from Non-Members

Ask the community
, ,
1

I am creating a website that offers sporting bet tips, however i have different levels of members who i want to only be able to access certain content based on the membership they have. I know you can stop certain members viewing pages, however I want everyone to be able to access each page but to only be able to view specific elements.

For example, if someone with the cheapest membership views my football betting page, i want some of the elements to be blurred out so they can’t see them unless they upgrade to a better package.

First of all is this possible and if so how? I am learning all the time but this is confusing me.

2

Hello

you can do that by checking the users role or id on page load and add if statement to show and hide based of the member.
check this documentation: WixRouterUser - Velo API Reference - Wix.com

Best
Massa

3

Thanks for the reply, do you have any example code as not quite sure how to write it.

4

Hello

Here’s some steps to follow:

  1. elements hidden on load.

  2. inside on ready function get the user id.

  3. query you members based of this id and check his member ship.

  4. if the user is with upgraded membership sow elements.

Here’s a code snippet to guide you through the past steps :

import wixData from 'wix-data';
import wixUsers from 'wix-users';
$w.onReady(async function () {

 let user = wixUsers.currentUser;
 let isLoggedIn = user.loggedIn;

 let userRole = user.role;
 let userId = user.id
 let results = await wixData.query("membershipsCollection").eq("_id", userId).find()
 
 let membership = results.items[0].membershipFieldKey;
 
 if (membership === 'upgraded') {
        $w(#element).show()
    }
});

Best of Luck !
Massa

5

Hi Massa, i get this warning over the await comand :Parsing error: Can not use keyword ‘await’ outside an async function. can you let me know?