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