Connecting CMS items to User Accounts

Design help CMS
1

Hello! I’m currently exploring ways to have a CMS item reference a user account in some form so when a user is logged in, on their profile page, I can display all (and only) the CMS items that are tied to their account. Has anyone found any good solutions or workarounds for this?

I’m currently looking at using AirTable as a database after watching @rileyrichter’s video and figuring out how to fetch and update based on IDs hopefully.

2

Hi Jesse,

You might need to draw a system diagram to explain what you’re storing in AirTable and what you’re storing the the CMS.

In terms of wiring though, the main problem is that with Memberships there is no UserID available to you client-side, which means you don’t really have anything to filter your results with.

If nocodeapi → Airtable allows you to easily filter ( you pass it e.g. the logged in users email, and the API returns AirTable data filtered to that email ). then you can use Sygnal’s user info lib to formuate that API call.

If you really want to use the UserID there is an approach I use to acquire that here.

1 Like
3

It’s doable, but it’s an uphill battle. Webflow Memberships (user accounts) and the Webflow CMS are two separate data stores that are not linked together in any way. Have you looked at something like Memberstack instead? It makes things much more straightforward. @DuncanHamra

2 Likes
4

Thanks @ChrisDrit! I have used Memberstack for a previous project before. I initially thought if I ended up using something like Airtable as a CMS rather than the Webflow CMS as a database, I wasn’t sure if I would get a lot of benefits from using memberstack for the accounts part, but the more I’m looking into this, the more I’m thinking it’s the route I’ll probably go down

1 Like
5

I used the Sygnal library to fetch the email address of the currently logged-in user. Subsequently, I used a custom script that utilizes the data-email attribute associated with each CMS item to filter items based on the fetched user data.

Script -

<script>
window.sa5 = window.sa5 || [];
window.sa5.push(['userInfoChanged', (user) => {
    if (user && user.email) {
        filterCmsItems(user.email);
    }
}]);

function filterCmsItems(userEmail) {
    console.log('Logged-in User Email:', userEmail);

    const cmsItems = document.querySelectorAll('.cards-item');
    console.log('Total CMS items found:', cmsItems.length);

    cmsItems.forEach((item, index) => {
        const itemEmail = item.getAttribute('data-email');
        if (!itemEmail) {
            console.warn(`No data-email attribute found for item at index ${index}`);
            return;
        }

        if (itemEmail !== userEmail) {
            item.style.display = 'none';
            console.log(`Hiding item at index ${index} with email: ${itemEmail}`);
        } else {
            console.log(`Displaying item at index ${index} with email: ${itemEmail}`);
        }
    });
}
</script>

You will need to change .cards-item if you have different class.

1 Like