1. Memberstack 2.0
  2. Guides & Tutorials
  3. Code Snippets

[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.