Hi Lewis:
Ok I think the way forward for you is to combine a couple of things.
The paid plans functionality relies on you identifying which of your pages are allowed to be accessed by members based on their membership level. I’ll address this for you below in a moment.
Secondly, the functionality that you want, e.g. show call to action, sign up, return to accessible videos should be straight forward to accomplish.
First let me address the paid plan s which I think you may already be familiar with so here is a refresher for any other users finding this post.
Paid plans are reliant on the underlying members functionality. When you configure a paid plan you are essentially establishing a role for your site member. The roles are in terms of the paid for access, in your case UNLIMITED, UNLIMITED YEAR, 1 MONTH FREE TRIAL. There are several different plans that you can configure based on this Wix Article:
Once you have your paid plans you need to create the site pages that you want to tie to the paid plans. This is described here:
So this describes the way to create the pages and limit access. Now the next challenge is how to create a user experience that follows the call to action flow you have outlined.
Here we need to do a few of things:
- We need to determine if the page visitor is logged into our site or not. If they are not then we need to show your home page with the call to action options.
- If the user is logged in AND the user is a paid or trial member then we need to show the members page allowing access to the members only content.
- If the user is logged in and doesn’t have a valid membership, i.e. the their previous membership has expired OR you allow access to non paying member for certain pages to tease them into a trial or purchase, then you want to show the call to action page again.
OK So this is accomplished very easily using the wix-users API. When you access a page you can load the current state of the user who has loaded the page. You can then determine very easily what the classification of the user is and what page the need to be able to load. Here is the code you can add to your home page:
import wixUsers from 'wix-users';
// Execute the loginActions after member plan purchase or login
wixUsers.onLogin(loginActions);
$w.onReady(() => {
if (wixUsers.currentUser.loggedIn) {
// execute loginActions() if page is reloaded and user is logged in.
loginActions();
}
});
function loginActions() {
// Get the member pricing plan information
wixUsers.currentUser.getPricingPlans()
.then((planList) => {
// We have one or more plans. So the user is logged in
// & is a member
// Check to see if they have a valid current plan
if (currentPlanIsValid(planList)) {
showMemberServicesPage();
} else {
showCallToActionPage();
}
})
.catch((error) => {
// If we get an error then either the user is not logged in or
// they don't have a plan.
// console.log(error.message); // Uncomment this to see the error message
showCallToActionPage();
});
}
So this is the basic outline of how we check the member privileges. In this example we will only explore a simple membership model where there is one and only one active membership per user. This may need to be adapted based on how sophisticated you need your site to be.
For this example we assume that there is only one plan in the list. So we will assume that the first record in the planList is the one we need to examine. So our currentPlanIsValid() function will look like this:
function currentPlanIsValid(planList) {
let result = false; // Assume we don't have a valid plan
// Check to see if we have data to examine
let planListLength = planList.length;
if (planListLength && planListLength > 0) {
// We have something to check. Get the first plan record
let lastActiveRecord = planList[0];
let expirationDate = Date.parse(lastActiveRecord.expiryDate);
let today = Date.now();
// If today's date is less than (earlier) than
// the expiryDate then
if (today < expirationDate) {
// the membership is valid
result = true;
}
}
// Return the result of our assessment
return result;
}
Ok now we are on the last leg of our solution!
We have two more functions to write. One that shows the members only options and one that shows the call to action options, showMemberServicesPage() and showCallToActionPage() respectively.
There are many different options here. You can use two containers or strips or repeaters on the same page each of which is either collapsed or expanded base upon the options you want to show. Depending on how many services and calls to action you have maintaining this could be a challenge. Another option would be to have separate pages, each of which is loaded once the membership state is known. You could also have a pop up lightBox that loads instead of a new page.
Here are two options for our show page functions.
Option 1:
First, we will assume there are two strips on the page and we will name them memberServicesStrip and callToActionStrip. When you create a strip it defaults to a name like ‘#strip1’. You can rename a strip using the element property panel
This makes our job of expanding and collapsing strips easy:
function showMemberServicesPage() {
// Collapse the call to action strip
$w('#callToActionStrip').collapse();
// Expand memberServices Strip
$w('#memberServicesStrip').expand();
}
function showCallToActionPage() {
// Expand the call to action strip
$w('#callToActionStrip').expand();
// Collapse memberServices Strip
$w('#memberServicesStrip').collapse();
}
=============================================================================
Option 2:
This option uses the wix-location API to load a new page if we need to. With this option we need to include the wix-location API on our page:
import wixLocation from 'wix-location';
Once we have done this we can redirect the page if it isn’t the one we want. To use this solution you need to have the same currentPlanIsValid() check on both the Members Only page AND the Call To Action page. The main difference being that the page load directive will only be needed if the loaded page is not the one you want.
For example, the user loads the default home page. This page is the Call To Action page. As the page loads it checks the membership. If the membership is not valid than the page completes loading. If the membership is valid then, before the page completes loading and becomes visible, it redirects to a Members Only page. The Members Only page as it loads checks to see if the membership. if the membership check passes then the page is loaded otherwise the user is redirected to the default home page.
We can use the wix-location API to check which page is loaded to simplify the code and the check. In the snippet below I will assume that our home page is https://www.myHomePage.example.
function showMemberServicesPage() {
// Are we on the home page
if (wixLocation.baseUrl === 'https://www.myHomePage.example') {
// We need to load the member services page
wixLocation.to('/memberservices');
}
}
function showCallToActionPage() {
// Are we NOT on the home page
if (wixLocation.baseUrl !== 'https://www.myHomePage.example') {
// We need to load the home page
wixLocation.to('/');
}
}
Cheers
Steve
