How to make mark as complete button work in Webflow with updated MemberStack 2.0 API?

Shamil Dibirov asked September 18, 2023 00:24

Answered

Hi everyone! I am trying to replicate the functionality from this video: https://youtu.be/nv_ZVGinWoU?si=k_cgY16cG9jPZ9Tj

Here is a code source: https://gist.github.com/mackenziechild/c42e28f46c6fb31cf466596ebffadad9

But it is 3 years old, and it seems like after Memberstack update to 2.0 a lot of things changed, so the code did not work for me. So I tried to redo it using the documentation, but it still does not work, can you please check the code I created and let me know what is wrong?

<script src="https://static.memberstack.com/scripts/v1/memberstack.js" data-memberstack-app="app_clhd9rg8q00at0uj4388s74hx"></script>

<script>

const memberstack = window.$memberstackDom;

memberstack.getCurrentMember().then(({ data: member }) => {

//Checking if member

if (member) {

let memberJson = await memberstack.getMemberJSON();

// If no metadata.video exists, create it in MemberStack

memberJson.jobs = memberJson.jobs || [];

// Defines the webflow video ID to a const of itemID (Pull this from the CMS)

const itemID = "Item ID"

// If they have the item ID in their profile, hide the form, show the 'completed button'

if(metadata.jobs.includes(itemID)){

document.getElementById('mark-as-watched').style.display = 'none';

document.getElementById('video-complete').style.display = 'block';

// When the button is clicked, if the itemID doesn't exist on their profile

// add it, then push the metadata to MemberStack.

$('#mark-as-watched').click(function(){

if(memberJson.jobs.indexOf(itemID) === -1){

memberJson.jobs.push(itemID);

await memberstack.updateMemberJSON({json: memberJson});

}

});

console.log(await memberstack.getMemberJSON());

} else {

console.log("Something Else");

}

})

</script>

1 comment

Duncan from Memberstack September 20, 2023 18:40

Hi Shamil! Here's the updated code for Memberstack 2.0:

<script src="https://static.memberstack.com/scripts/v1/memberstack.js" data-memberstack-app="app_clhd9rg8q00at0uj4388s74hx"></script>

<script>
// Initializing the Memberstack instance
const memberstack = window.$memberstackDom;

memberstack.getCurrentMember().then(({ data: member }) => {
  // Checking if member exists
  if (member) {
    let memberJson = await memberstack.getMemberJSON();

    // If no metadata.video exists, create it in MemberStack
    memberJson.jobs = memberJson.jobs || [];

    // Defines the webflow video ID to a const of itemID (Pull this from the CMS)
    const itemID = "Item ID";

    // If they have the item ID in their profile, hide the form, show the 'completed button'
    if (metadata.jobs.includes(itemID)) {
      document.getElementById('mark-as-watched').style.display = 'none';
      document.getElementById('video-complete').style.display = 'block';

      // When the button is clicked, if the itemID doesn't exist on their profile
      // add it, then push the metadata to MemberStack.
      $('#mark-as-watched').click(async function() {
        if (memberJson.jobs.indexOf(itemID) === -1) {
          memberJson.jobs.push(itemID);
          await memberstack.updateMemberJSON({ json: memberJson });
        }
      });

      console.log(await memberstack.getMemberJSON());
    } else {
      console.log("Something Else");
    }
  }
});
</script>

Please note the following changes:

The initialization of the Memberstack instance is now done using window.$memberstackDom.
The await keyword is used inside the then callback, which means the callback function is now an async function.
The updateMemberJSON method is used to update the member's JSON data.

Make sure to test this updated code in a development environment before deploying it to production to ensure everything works as expected.

Please sign in to leave a comment.