[Code] Display an Element Based on Metadata

Article author
Duncan from Memberstack

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

Similar Articles

Lock Pages & Folders with Gated Content → 

Display an element based on Custom Fields →

Display an element based on Plans and Gated Content →

Display and element based on Metadata →

Display and element based on Free Trials →

Was this article helpful?

Comments

7 comments

  • Comment author
    Nicholas Platt

    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
  • Comment author
    Duncan from Memberstack

    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
  • Comment author
    Nicholas Platt

    Hey Duncan from Memberstack, check in on this if you have any videos

    0
  • Comment author
    Mauro Arancibia

    I'd really like to know if the ms field could be a dynamic field from a CMS collection

    0
  • Comment author
    Duncan from Memberstack

    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
  • Comment author
    Mauro Arancibia
    Ā 

    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
  • Comment author
    Memberstack Team

    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.