Display Element If Custom Field Is Set
Check if a member has filled out a custom field. If yes, set the target element to display.
You can also do the inverse. Check if a member has filled out a custom field. If yes, remove the target element from the page.
Similar Articles
Lock Pages & Folders with Gated Content →
Display an element based on Plans and Gated Content →
Display and element based on Metadata →
Display and element based on Free Trials →
Keywords: Gated content attributes, hidden content attributes, show/hide, show element, hide element, visibility
Comments
9 comments
Hi Duncan from Memberstack
There's a bug with your example here:
window.$memberstackDom.getCurrentMember().then(({ data: member }) =>{ if (member && member.customFields["favorite-color"] == null) {
const elem = document.getElementById('favoriteColor')
elem.style.display='none';
}
});
The null doesn't actually work, I had to replace it with "".
I let the team know 🤔 Will get this tested ASAP.
Hey Duncan,
I was wondering if you could also put an example of how to set this up here as well.
Best,
Nicholas
Great suggestion! Yes, I'll see what we can do 😁
Hey Duncan from Memberstack, Hope you're doing well. I was wondering if there was any update on this as well.
I am also having trouble with this code.
Video pending 👍 Nicolas Scott is working on it for us 🙏
Hey Nicolas Scott, I was wondering if there was any update on this?
Hey Duncan from Memberstack, checking in on this.
Nicholas Platt I had the same issue and ended up finding an easier way.
Just assign a custom attribute to the webflow elements you want to conditionally show based on a ms-custom field value. So in my case I have two elements with attributes of data-cohort=1 and data-cohort-2. Then just use this snippet below which just loops through the page and shows the elements that match my custom field which has matching values of 1 or 2. Granted it's simple criteria but works perfectly.
<script>
window.$memberstackDom.getCurrentMember().then(({ data: member }) => {
if (member && member.customFields) {
let cohort_value = member.customFields["cohort"]
const rows=document.querySelectorAll('[data-cohort]');
rows.forEach(item => {
if (item.getAttribute('data-cohort') !== cohort_value){ item.style.display="none";}
})
}
});
</script>
Please sign in to leave a comment.