Div's on a webflow page Answered
Hi guys, was wondering if anyone could help me with this.
I am trying to filter available div's on a webflow page via a memberstack field. Essentially I want to check if they have a category listed in a custom field and then filter posts based on their category selections. One thing to note is that the custom field contains an array.
Am I doing it wrong? I keep getting errors instead of any form of success. It also is not filtering items at all currently.
Any help would be much appreciated 🙂
<!-- Filter posts by category preference -->
<script>
window.$memberstackDom.getCurrentMember().then(({ data: member }) => {
if (member) {
const currentMemberId = member.id;
const elementsWithMemberId = document.querySelectorAll(`[creator-id="${currentMemberId}"]`);
const categoryTrueElement = document.querySelector('[category-offered="true"]');
const categoryFalseElement = document.querySelector('[category-offered="false"]');
const requiredCategory = '(Dynamically linked WebflowCMS field)'; // Replace with your required category
// Convert the category custom field string into an array
const categoryOfferings = document.querySelector('[data-ms-member="category"]').getAttribute('data-ms-data');
const categoryOfferingsArray = categoryOfferings ? categoryOfferings.split(',').map(item => item.trim()) : [];
// Check if the member has the required category
const hasRequiredCategory = categoryOfferings.includes(requiredCategory);
console.log('Member:', member);
console.log('Required category:', requiredCategory);
console.log('Has Required category:', hasRequiredCategory);
console.log('category:', categoryOfferings);
if (elementsWithMemberId.length > 0 && hasRequiredCategory) {
categoryTrueElement.style.display = 'flex';
categoryFalseElement.style.display = 'none';
} else {
categoryTrueElement.style.display = 'none';
categoryFalseElement.style.display = 'flex';
}
}
});
</script>
Fixed thanks to the memberstack bot.
Here was the missing code, it seems to say that the $memberstackDom. method is no longer valid.
<script>
document.addEventListener("DOMContentLoaded", async function() {
// shortens reference to Memberstack
const memberstack = window.$memberstackDom;
memberstack.getCurrentMember().then(async ({ data: member }) => {
if (member) {
const currentMemberId = member.id;
......... (rest of code)
Comments
4 comments
Josh Lopez looks like your bot came in handy here!
Thanks for sharing Shadi 🙏
Tyler Bell I think the memberstack bot is going to be super important tool for new users that have questions.
It will also relieve some of the workload of your support team to tend to more serious support issues.
Overall would rate the bot 10/10 (still has occasional truncation issues, no idea why though seeing as the token count limit Josh setup is super high) 🌝
I am using this memberstack review webflow template as the basis for my own site to ensure users can only leave 1 review https://www.memberstack.com/webflow-templates/review-website-template
Here is a live site in case you want to see what I mean 🙂
https://test-5e68bc.webflow.io/company/webflow
In the images below you'll see that both divs are first visable before eventually 1 of them disapears from screen (once the '/before body' code has been processed)
Is there a way to prevent both div's from loading on page before 1 of them disappears?
The iteration of this that I am using on my own site actually has 4+ div's on page load that disappear once the before body code is done running, which is much more noticable to users.
Solved by setting the initial state to "none"
Please sign in to leave a comment.