Hide/show elements based on a user paid plans

rayredmond1878 · July 30, 2021, 6:43pm

I want elements to hide/show depending on a users paid plan level. If user is not logged in or only has the free access to the site then element #text104 will just be a short line of the paragraph I want users to see. I have shared the whole page code to see if there is any conflicts across the whole code.

// API Reference: Introduction - Velo API Reference - Wix.com
// “Hello, World!” Example: Velo Learning Center

import wixUsers from ‘wix-users’ ;
import wixData from ‘wix-data’ ;
import wixLocation from ‘wix-location’ ;

$w . onReady ( () => {
if ( wixUsers . currentUser . loggedIn ) {

} else {
$w ( “#videoPlayer1” ). hide ();
$w ( “#text113” ). show ();
$w ( “#text104” ). text = $w ( “#text104” ). text . slice ( 0 , 50 );
}
} );

export function btnfavourite_click ( event ) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// Add your code for this event here:
if ( wixUsers . currentUser . loggedIn === true ){

let $item = $w . at ( event . context );

}
} else {
let $item = $w . at ( event . context );
$item ( “#favMsg” ). text = “Please login first!” ;
$item ( “#favMsg” ). expand ();
}

}

export function text113_click ( event ) {
let $item = $w . at ( event . context );
wixLocation . to ( “https://www.triplegoddessyoga.com/plans-pricing” );
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// Add your code for this event here:
}

export function repeater1_itemReady ( $item1 , itemData1 , index1 ) {
if ( wixUsers . currentUser . loggedIn ) {
wixUsers . currentUser . getPricingPlans ()
. then (( pricingPlans ) => {
if ( pricingPlans . length > 0 ){
$item1 ( “#videoPlayer1” ). show ();
$item1 ( “#text113” ). hide ();
if ( itemData1 . url !== “” ){
$item1 ( “#videoPlayer1” ). src = itemData1 . url ;
}
} else {

$item1 ( “#videoPlayer1” ). hide ();
$item1 ( “#text113” ). show ();
let paragraph = itemData1 . description ;
var shortText = paragraph . slice ( 0 , 50 );
$item1 ( “#text104” ). text = shortText + ’ …’ ;
}
let currentPlan = pricingPlans [ pricingPlans . length - 1 ];
let planName = currentPlan . name ;
// let qprice = currentPlan.price;
//let benefits = currentPlan.benefits;
//let sdate = currentPlan.startDate;
let eDate = currentPlan . expiryDate ;
});
wixData . query ( “Favourite” )
. eq ( “userId” , wixUsers . currentUser . id )
. find ()
. then ( ( results ) => {
if ( results . items . length > 0 ) {
let firstItem = results . items [ 0 ]; //see item below
results . items . forEach ( function ( item , i ){
let classid = item . classId ;
//console.log("Class=> "+classid);
$w ( “#repeater1” ). forEachItem (( $item , itemData , index ) => {
let currentText = $item ( “#classID” ). text ;

if ( currentText === classid ){
$item ( “#btnfavourite” ). style . backgroundColor = “red” ;
}
});
});
} else {
// handle case where no matching items found
}
} )
. catch ( ( err ) => {
let errorMsg = err ;
$w ( “#favMsg” ). text = “” + errorMsg + “” ;
$w ( “#favMsg” ). expand ();
} );
} else {
$item1 ( “#videoPlayer1” ). hide ();
$item1 ( “#text113” ). show ();
let paragraph = itemData1 . description ;
var shortText = paragraph . slice ( 0 , 50 );
$item1 ( “#text104” ). text = shortText + ’ …’ ;
}
}

anon72313111 · July 31, 2021, 7:12am

Hi there

Use the getPricingPlans( ) method to determine the current plan of the user, then act accordingly, it’s that simple.

import wixUsers from 'wix-users';

const user = wixUsers.currentUser;

wixUsers.currentUser.getPricingPlans().then(plans => {
    const premium = 'Premium'; // The paid plan that users must have
    const free = 'Free Plan'; // The free plan that users must have
    
    user.plans = {
        premium: false,
        free: false
    };
    
    for (const plan of plans) {
        if (plan.name.toLowerCase() === premium.toLowerCase()) {
            user.plans.premium = true;
            break;
        }
        
        if (plan.name.toLowerCase() === free.toLowerCase()) {
            user.plans.free = true;
            break;
        }
    }
    
    // Check user plans and show the suitable elements
    if (user.plans.premium) {
        // Show the elements meant for paid members.
    }
    
    if (user.plans.free) {
        // Show the content for members who have the free plan
    }
})

Hope this helps~!
Ahmad

rayredmond1878 · July 31, 2021, 7:16am

@ahmadnasriya thanks, the name of the plan I want to provide more content to is called exclusive members. Where you have premium do I just replace it with Exclusive Members.

rayredmond1878 · July 31, 2021, 7:16am

@ahmadnasriya thanks, the name of the plan I want to provide more content to is called exclusive members. Where you have premium do I just replace it with Exclusive Members.

anon72313111 · July 31, 2021, 7:23am

@rayredmond1878 Yes, this was just an example, and you can replace the isPremium property with hasPlan . You’re free to adapt the code as you want.

anon72313111 · July 31, 2021, 7:25am

@rayredmond1878 I’ve updated my answer so the plan name is not case sensitive now.

rayredmond1878 · July 31, 2021, 11:27am

Thanks - but I want a specific plan to access certain elements. I have free plan and exclusive members.

If i replace Premium with Exclusive members will this reveal the elements for Exclusive members and hide it from free plan members?

anon72313111 · July 31, 2021, 11:48am

You need to check what plan the user have with if statements, then decide what to do.

I’ve updated my answer above to include a free plan as well.

rayredmond1878 · July 31, 2021, 5:08pm

Thanks this is working, I just need to adapt this code. I want “#text104” to appear as a few lines of text and not the full lot until the user is logged in

let paragraph = itemData1 . description ;
var shortText = paragraph . slice ( 0 , 50 );
$item1 ( “#text104” ). text = shortText + ’ …’ ;

joshua53197 · August 5, 2021, 1:39pm

@ahmadnasriya I added your code to my page to expand buttons for adding new team members to a team. Each level of pricing plan allows the addition of 4 team members. Functionality is working great, but when trying to expand the buttons using this code, I keep getting an error whenever I have a user.plans : ’ Property ‘plans’ does not exist on type ‘User’.

Any suggestions on what I am missing?

anon72313111 · August 6, 2021, 1:38pm

@joshua53197 That’s because I’ve added the plans property to the user constant manually, I’m pretty much sure that you haven’t copied the following code

user.plans = {
    premium:false,
    free:false
};

Replace the plans object’s properties with your own plans that you want to check against.

joshua53197 · August 6, 2021, 4:15pm

@ahmadnasriya Gotcha. Thank you!

anon72313111 · August 6, 2021, 7:26pm

@joshua53197

Let me know if it worked for you.

joshua53197 · August 7, 2021, 4:15pm

@ahmadnasriya I was able to get it working, but ended up going in a slightly different direction, as I have a lot going on in regards to this page. With 13 levels of membership, and one of the levels being members that have to be added without cost as part of the original Team Membership cost, along with giving the initial user with a paid pricing plan the ability to sign up new members and attach the free pricing plan to their account giving them access to the courses, and being able to manage and adapt those members into teams that work together to complete projects, so I separated the calls into individual OnReady’s.

import wixData from ‘wix-data’ ;
import wixUsers from ‘wix-users’ ;

const user = wixUsers . currentUser ;

let userId = user . id ; // “r5cme-6fem-485j-djre-4844c49”
let isLoggedIn = user . loggedIn ; //true

user . getEmail ()
. then ( ( email ) => {
let userEmail = email ; // “user@something.com”
} );

user . getRoles ()
. then ( ( roles ) => {
let firstRole = roles [ 0 ];
let roleName = firstRole . name ; // “Role Name”
let roleDescription = firstRole . description ; // “Role Description”
} );

user . getPricingPlans ()
. then ( ( pricingPlans ) => {
let firstPlan = pricingPlans [ 0 ];
const planName = firstPlan . name ;
let startDate = firstPlan . startDate ;
let expiryDate = firstPlan . expiryDate ;

let fadeOptions = {
“duration” : 3000 ,
“delay” : 5000 ,
“direction” : “top”
};

//Filtering for Pricing Plans - Only show team management options according to Pricing Plans
$w . onReady (()=> {
if ( planName === “1 Team” ) {
$w ( ‘#buttonTeam1’ ). expand ();
}
});

$w . onReady (()=> {
if ( planName === “2 Teams” ) {
$w ( ‘#buttonTeam1’ ). expand ();
$w ( ‘#buttonTeam2’ ). expand ();
}
});

$w . onReady (()=> {
if ( planName === “3 Teams” ) {
$w ( ‘#buttonTeam1’ ). expand ();
$w ( ‘#buttonTeam2’ ). expand ();
$w ( ‘#buttonTeam3’ ). expand ();
}
});

$w . onReady (()=> {
if ( planName === “4 Teams” ) {
$w ( ‘#buttonTeam1’ ). expand ();
$w ( ‘#buttonTeam2’ ). expand ();
$w ( ‘#buttonTeam3’ ). expand ();
$w ( ‘#buttonTeam4’ ). expand ();
}
});

$w . onReady (()=> {
if ( planName === “5 Teams” ) {
$w ( ‘#buttonTeam1’ ). expand ();
$w ( ‘#buttonTeam2’ ). expand ();
$w ( ‘#buttonTeam3’ ). expand ();
$w ( ‘#buttonTeam4’ ). expand ();
$w ( ‘#buttonTeam5’ ). expand ();
}
});

$w . onReady (()=> {
if ( planName === “6 Teams” ) {
$w ( ‘#buttonTeam1’ ). expand ();
$w ( ‘#buttonTeam2’ ). expand ();
$w ( ‘#buttonTeam3’ ). expand ();
$w ( ‘#buttonTeam4’ ). expand ();
$w ( ‘#buttonTeam5’ ). expand ();
$w ( ‘#buttonTeam6’ ). expand ();
}
});

$w . onReady (()=> {
if ( planName === “7 Teams” ) {
$w ( ‘#buttonTeam1’ ). expand ();
$w ( ‘#buttonTeam2’ ). expand ();
$w ( ‘#buttonTeam3’ ). expand ();
$w ( ‘#buttonTeam4’ ). expand ();
$w ( ‘#buttonTeam5’ ). expand ();
$w ( ‘#buttonTeam6’ ). expand ();
$w ( ‘#buttonTeam7’ ). expand ();
}
});

$w . onReady (()=> {
if ( planName === “8 Teams” ) {
$w ( ‘#buttonTeam1’ ). expand ();
$w ( ‘#buttonTeam2’ ). expand ();
$w ( ‘#buttonTeam3’ ). expand ();
$w ( ‘#buttonTeam4’ ). expand ();
$w ( ‘#buttonTeam5’ ). expand ();
$w ( ‘#buttonTeam6’ ). expand ();
$w ( ‘#buttonTeam7’ ). expand ();
$w ( ‘#buttonTeam8’ ). expand ();
}
});

$w . onReady (()=> {
if ( planName === “9 Teams” ) {
$w ( ‘#buttonTeam1’ ). expand ();
$w ( ‘#buttonTeam2’ ). expand ();
$w ( ‘#buttonTeam3’ ). expand ();
$w ( ‘#buttonTeam4’ ). expand ();
$w ( ‘#buttonTeam5’ ). expand ();
$w ( ‘#buttonTeam6’ ). expand ();
$w ( ‘#buttonTeam7’ ). expand ();
$w ( ‘#buttonTeam8’ ). expand ();
$w ( ‘#buttonTeam9’ ). expand ();
}
});

$w . onReady (()=> {
if ( planName === “10 Teams” ) {
$w ( ‘#buttonTeam1’ ). expand ();
$w ( ‘#buttonTeam2’ ). expand ();
$w ( ‘#buttonTeam3’ ). expand ();
$w ( ‘#buttonTeam4’ ). expand ();
$w ( ‘#buttonTeam5’ ). expand ();
$w ( ‘#buttonTeam6’ ). expand ();
$w ( ‘#buttonTeam7’ ). expand ();
$w ( ‘#buttonTeam8’ ). expand ();
$w ( ‘#buttonTeam9’ ). expand ();
$w ( ‘#buttonTeam10’ ). expand ();
}
});

$w . onReady (()=> {
if ( planName === “11 Teams” ) {
$w ( ‘#buttonTeam1’ ). expand ();
$w ( ‘#buttonTeam2’ ). expand ();
$w ( ‘#buttonTeam3’ ). expand ();
$w ( ‘#buttonTeam4’ ). expand ();
$w ( ‘#buttonTeam5’ ). expand ();
$w ( ‘#buttonTeam6’ ). expand ();
$w ( ‘#buttonTeam7’ ). expand ();
$w ( ‘#buttonTeam8’ ). expand ();
$w ( ‘#buttonTeam9’ ). expand ();
$w ( ‘#buttonTeam10’ ). expand ();
$w ( ‘#buttonTeam11’ ). expand ();
}
});

$w . onReady (()=> {
if ( planName === “12 Teams” ) {
$w ( ‘#buttonTeam1’ ). expand ();
$w ( ‘#buttonTeam2’ ). expand ();
$w ( ‘#buttonTeam3’ ). expand ();
$w ( ‘#buttonTeam4’ ). expand ();
$w ( ‘#buttonTeam5’ ). expand ();
$w ( ‘#buttonTeam6’ ). expand ();
$w ( ‘#buttonTeam7’ ). expand ();
$w ( ‘#buttonTeam8’ ). expand ();
$w ( ‘#buttonTeam9’ ). expand ();
$w ( ‘#buttonTeam10’ ). expand ();
$w ( ‘#buttonTeam11’ ). expand ();
$w ( ‘#buttonTeam12’ ). expand ();
}
});

$w . onReady (()=> {
if ( planName === “Add Team Member” ) {
$w ( ‘#boxNoAccess’ ). expand ();
$w ( ‘#boxManageTeam’ ). collapse ();
}
});

//filter for ownership - so only students added by the currently logged in user appear in the datasets
$w . onReady (()=> {
$w ( “#dataset1” ). onReady (() => {
$w ( “#dataset1” ). setFilter ( wixData . filter ()
. eq ( “ownerId” , userId )
);
});
});

There is another 300 (give or take) lines of code running the registration (hence the additional calls on user information at the top), allowing the registration to send to 2 datasets at the same time including the private members data, to filter the data into team overviews and team management for each of the up to 12 teams (max 4 individual accounts each) individually, to have a section which covers the majority of the screen as a loading gif and message which collapses away after the page loads, and of course to run all the collapsing and expanding overlapping sections, iFrames and buttons to make this page run like an app. It was a fun build. Now teachers can add ‘x’ number of students, create their accounts for them efficiently, and organize them into teams all on one page, while maintaining exclusive ownership and manageability of their accounts.

Topic		Replies	Views
Hide/show elements based on a user paid plans (three plans Prestige, premium and free plan) Ask the community code , wix-stores , wix-bookings , wix-members-area , wix-pricing-plans-backend	1	19	November 13, 2024
Hide/show elements based on a user paid plans Ask the community code , question	5	356	January 8, 2024
Elements show only for Paid Plans Ask the community code , question	8	882	July 5, 2022
Need code to show/hide element for paidPlan members Ask the community code , wix-members-area , question	5	747	July 5, 2020
Abonemment Show and Hide Elements Ask the community code , question	1	83	January 12, 2023

Hide/show elements based on a user paid plans

Related topics