Locking of content based on date Answered

Post author
Nemanja Vasilevski

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

  • Comment author
    Alastair Budge

    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
  • Comment author
    Nemanja Vasilevski

    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
  • Comment author
    Julian Galluzzo

    This should be possible with some custom code, just looking into it now

    0
  • Comment author
    Nemanja Vasilevski

    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
  • Comment author
    Julian Galluzzo

    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
  • Comment author
    John Matias

    Interesting use case! Watching to see if I can learn something from this thread. 🍿

    0
  • Comment author
    Ben Sabic

    John Matias I forgot the butter for my popcorn, can I borrow some?

    0
  • Comment author
    Nemanja Vasilevski

    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
  • Comment author
    Julian Galluzzo

    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
  • Comment author
    Nemanja Vasilevski

    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
  • Comment author
    Julian Galluzzo

    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
  • Comment author
    John Matias

    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

    0
  • Comment author
    Nemanja Vasilevski

    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
  • Comment author
    John Matias

    Thanks for sharing Nemanja Vasilevski

    0

Please sign in to leave a comment.