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 →
Comments
3 comments
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?
Hey Duncan Hamra, check in on this if you have any videos
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 ...
Please sign in to leave a comment.