[Code] Display an Element Based on Metadata

Updated February 28, 2023 18:12
7 comments

In this article, Nicolas will show us how to conditionally show/hide elements based on a member's Metadata.

Note - Unless you were specifically looking for a way to hide content with Metadata, I recommend checkout out these more popular methods of show/hiding content first: Gate pages & folders based on plans or gate individual elements based on plans.

💡 This approach works best with metadata items that have boolean (true or false) values.

<script>
// paste in body of global site scripts
function conditionallyRenderElement({ key, value, id }) {
  let element = document.getElementById(id)
  if(!key) { 
    element.style.display = "none" 
  } else {
    element.style.display = key.includes(value) ? "block" : "none";
  }
}

window.$memberstackDom.getCurrentMember().then(({ data: member }) => {
  if (member && member.metaData) { 
    // the specific metadata key/id you want to inspect
    let key = member.metaData["subscribed"] // EDIT THIS
    // the value of the metadata you want to check for
    let value = "true" // EDIT THIS
    // id of element to show or hide conditionally 
    let id = "discover-slider" // EDIT THIS
    conditionallyRenderElement({ key, value, id })
  }
});
</script>

Usage:

Replace the placeholder entries for key, value and id inside of the getCurrentMember method.

Key: The id/key for the metadata you want to check for.
Value: The text value that the metadata key should equal
Id: The ID of the element that you want to conditionally show or hide

Comments

7 comments

Nicholas Platt
- January 25, 2023 16:09
Hey! This is great. Is there any way you could show an example of how to set this up based on attributes or id in webflow?

1
Duncan from Memberstack
- January 26, 2023 13:44
Hey Nicholas Platt 👋 I'll follow up by end of next week with a video. I'm going to see if a coworker if available to help out with this first ...

0
Nicholas Platt
- February 05, 2023 20:22
Hey Duncan from Memberstack, check in on this if you have any videos

0
Mauro Arancibia
- August 28, 2024 05:47
I'd really like to know if the ms field could be a dynamic field from a CMS collection

0
Duncan from Memberstack
- August 28, 2024 13:56
Mauro Arancibia Can you explain what that would allow you to accomplish and why that's important for you project? I will try to help find a solution.

1
Mauro Arancibia
- August 28, 2024 15:03
I want to configure a dynamic field from a collection list to a specific metadata key or ID for inspection. Essentially, I’m looking to display a list of "Seminars" based on user attendance. If a user has attended (indicated by a non-empty field in Memberstack), they should be able to see it.

The Memberstack field are actually the same than the dynamic fields from the CMS.

0
Memberstack Team
- August 29, 2024 15:27
Oooo interesting! You want to populate a select input with values saved to the member. Very cool. I recommend using JSON or custom fields for this. And you might have better luck creating a new script from scratch using Reybot or another AI product.

0

Please sign in to leave a comment.

[Code] Display an Element Based on Metadata

Usage:

Similar Articles

Was this article helpful?

Comments