How to create time-based content unlocking in Memberstack for a 52-week challenge series? Answered

February 16, 2023 20:43
14 comments

Hey guys,

Is there any option that can lock content based on date. We have something like 52 week challenge and we need to have one challenge per week unlocked on page. I was wondering of adding div with a link to challenge page over the card and then hide it with plan data attribute but not sure if that can be based on time.

Comments

14 comments

Alastair Budge
- February 16, 2023 22:35
if it’s locked to all members based on the date (i.e. everyone starts on the same date) then you should be able to do this via webflow CMS properties.

Or you want people to start the 52 week challenge at different dates?

0
Nemanja Vasilevski
- February 16, 2023 22:35
Ideally, when users mark previous course/challenge as completed we should start counter.

So it should be based on user.

Completed course id is added in member metaData on Membersteck.

0
Julian Galluzzo
- February 16, 2023 22:35
This should be possible with some custom code, just looking into it now

0
Nemanja Vasilevski
- February 16, 2023 22:35
Thank you Julian Galluzzo Additionally we can add date field and store it as a value in metaData on mark as complete form submit. But not sure if that is going to help.

0
Julian Galluzzo
- February 16, 2023 22:35
I was thinking this:
1. User clicks button
2. Script generates date 7d from when it was clicked
3. Stores in metadata
4. Items with attribute X are only available before that date
That's the high level, we will see how it goes though 😃
0
John Matias
- February 16, 2023 22:36
Interesting use case! Watching to see if I can learn something from this thread. 🍿

0
Ben Sabic
- February 16, 2023 22:36
John Matias I forgot the butter for my popcorn, can I borrow some?

0
Nemanja Vasilevski
- February 16, 2023 22:36
John Matias Ben Sabic it’s not that funny from my side 😃😃😃

Julian Galluzzo What would be best way to only update Date in metaData is there a way to do that.

Since I would like to avoid adding 50 dates for each course. One field would be enough if it’s possible just to update existing date. Then since I have completed courses as an array I can compare date with last item in array on a page load and remove url from locked courses.

0
Julian Galluzzo
- February 16, 2023 22:36
Nemanja Vasilevski I would think you should just generate a date 7 days from when the button is clicked - so it would be unique to each user, and each module

0
Nemanja Vasilevski
- February 16, 2023 22:36
Yep, I understand that part, but in order to add that date in memberstack I would need to generate new date on each modul. So I would have 50 dates per user. That’s why I wondering if there is a way just to update existing date each time user mark module as completed.

0
Julian Galluzzo
- February 16, 2023 22:36
I'm sure there's a way to update the date, but if it's the same field, I'm not sure how it would read that info to show the user which module they're on.. I would definitely just generate a new date for each one, it's not that much metadata in the bigger picture.

0

John Matias

February 16, 2023 22:36

Hey Nemanja Vasilevski I'm doing something a little similar... I'm using a button to record and set an expiration date on an item that I'm storing in the memberJSON. The item ID is added to an array and the expiration date for the item is +365 days from when they first click the button to play a video. However, I am using a CMS for each video item so that is how I am pulling the unque item ID to add to my array created in the memberJSON.

I'm not sure if this would be helpful but I'm happy to share the code snippet I ended up creating. I'd love to know more about what you end up doing too.

<!-- Memberstack Member Videos -->

<script>
const memberstack = window.$memberstackDom;

memberstack.getMemberJSON().then(async ({ data: memberJSON }) => {
  // Initialize vodVideos as an array
  let vodVideos;
  // Declare newMemberJSON and assign it the value of memberJSON
  let newMemberJSON = memberJSON || {};

  // If the newMemberJSON object does not have a property called "vodVideos", add it
  if (!newMemberJSON.hasOwnProperty("vodVideos")) {
    newMemberJSON["vodVideos"] = [];
  }
  // Assign vodVideos the value of the "vodVideos" property of newMemberJSON
  vodVideos = newMemberJSON["vodVideos"];
  
  const videoID = "{{wf {&quot;path&quot;:&quot;video-ecommerce-sku&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}";
  const index = vodVideos.findIndex(video => video.videoID === videoID);
  if (index !== -1 && vodVideos[index].hasOwnProperty("expirationDate")) {
    const expirationDate = new Date(vodVideos[index].expirationDate);
    const formattedExpirationDate = expirationDate.toLocaleDateString("en-US", {
      month: "long",
      day: "numeric",
      year: "numeric"
    });
    document.getElementById("expirationDate").innerHTML = "Rental expires on: " + formattedExpirationDate;
   
   //check to see if the video rental has expired and hide play buttons if true
   if(new Date() > expirationDate) {
      const btnPlay1 = document.getElementById("btnPlay1");
      if (btnPlay1) btnPlay1.style.display = "none";
      const btnPlay2 = document.getElementById("btnPlay2");
      if (btnPlay2) btnPlay2.style.display = "none";
      document.getElementById("expirationDate").innerHTML = "Your rental has expired.";
      }
    } else {
    document.getElementById("expirationDate").innerHTML = "Your rental expires in one year.";
  }

   // Add event listener for the "btnPlay1" button
  document.getElementById("btnPlay1").addEventListener("click", async function() {
    // Get the value of the videoID variable
    const videoID = "{{wf {&quot;path&quot;:&quot;video-ecommerce-sku&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}";

    // Find the index of the videoID in the vodVideos array
    const index = vodVideos.findIndex(video => video.videoID === videoID);
    // If the videoID is already in the array, increment the views count for that video
    if (index !== -1) {
      vodVideos[index].views++;
    } else {
      // If the videoID is not in the list, add it with a views count of 1
      const currentDate = new Date();
      const expirationDate = new Date();
      expirationDate.setDate(currentDate.getDate() + 365);
      vodVideos.push({
        videoID: videoID,
        views: 1,
        expirationDate: expirationDate
      });
      const formattedExpirationDate = expirationDate.toLocaleDateString("en-US", {
    		month: "long",
    		day: "numeric",
    		year: "numeric"
      });
      document.getElementById("expirationDate").innerHTML = "Rental expires on: " + formattedExpirationDate;
    }
          
    // Update the user's data in MemberStack with the updated newMemberJSON object
    await memberstack.updateMemberJSON({
      json: newMemberJSON
    });
    
    // Hide the element with the id "vodOverlay"
    document.getElementById("vodOverlay1").style.display = "none";
  });

  // Add event listener for the "btnPlay2" button
  document.getElementById("btnPlay2").addEventListener("click", async function() {
    // Get the value of the videoID variable
    const videoID = "{{CMS_UNIQUE_ITEM}}";

    // Find the index of the videoID in the vodVideos array
    const index = vodVideos.findIndex(video => video.videoID === videoID);
    // If the videoID is already in the array, increment the views count for that video
    if (index !== -1) {
      vodVideos[index].views++;
    } else {
      const currentDate = new Date();
      const expirationDate = new Date();
      expirationDate.setDate(currentDate.getDate() + 365);
      vodVideos.push({
        videoID: videoID,
        views: 1,
        expirationDate: expirationDate
      });
      const formattedExpirationDate = expirationDate.toLocaleDateString("en-US", {
    		month: "long",
    		day: "numeric",
    		year: "numeric"
      });
      document.getElementById("expirationDate").innerHTML = "Rental expires on: " + formattedExpirationDate;
    }

    // Update the user's data in MemberStack with the updated newMemberJSON object
    await memberstack.updateMemberJSON({
      json: newMemberJSON
    });

    // Hide the element with the id "vodOverlay"
    document.getElementById("vodOverlay2").style.display = "none";
  });
});
</script>

Here's a little loom vid on what it looks like when I click the start video button. https://www.loom.com/share/a83c08be4c1e4663887463327337d1ac

And a screenshot of the data in the memberJSON

Nemanja Vasilevski
- February 16, 2023 22:48
John Matias Thank you for your time to send me all this, I have done some tests.

Problem solved successfully 😃

So flow is next

I have a form on CMS page that submits User ID, and Course ID. Now I added Date field as well

Then we have fake submit button that populate date field with current date and submits the form.( this is necessary because we are unlocking courses after 24hours, so we are including time as well, so we need correct time when user is finished with course)

With Make(integromat) we are listening for form submit in Webflow and adding this data in memberstack.

Course id is sent first in airtable where is formatted as an array and date is sent directly.

This way I am getting courses as an array in memberstack metaData and date is replaced on each submit.

So at the end we are comparing submitted date with current date on page load and remove all urls that don’t matching conditions.

Basically, if condition is true remove every href tag except from the first item after checked course(last one in array).
and if not remove all urls except ones that are already checked(visited).

I am not sure if you need code since you are doing same thing.

0
John Matias
- February 16, 2023 22:48
Thanks for sharing Nemanja Vasilevski

0

Please sign in to leave a comment.