How to implement week completion indicators in Webflow using Memberstack custom fields and JavaScript? Answered

May 02, 2025 14:50
2 comments

Hey all, I am stuck with a, i guess, easy request.

We are having a course built with MS + Webflow which are in total 6 weeks with sub-categories in each week. After finishing a week i want an icon to indicate that a week has been completed.

My idea: Creating custom fields for each week and if you click the last button of the last sub-category a custom field is set to "true". Then check via JS if that field is true and if so, show the image of a checkmark.

So far, I am able to set my custom field to "true" based on the click of the button. But I am not able to show that icon im memberstack based on the member custom field in the backend. Anyone has an idea how to do so? I am sure that, maybe not that use case, but the check of a custom field has been done before and is possible. Anyone could help 🙂?

Comments

2 comments

Chukwudi Onyekwere
- May 02, 2025 14:51
Hi Steffen,Here’s how you can approach this:1. Set Up the Custom Field in Memberstack
First, ensure that the custom field in Memberstack is set up correctly. You’re already setting it to true via the button click, which is great.2. Retrieve the Custom Field in JavaScript
You're already using window.$memberstackDom.getCurrentMember() to retrieve the member data, which is perfect. You'll just need to adjust the code to check the specific custom field (e.g., for each week) and show the checkmark icon when that field is set to true.3. Add the Checkmark Icon Conditionally
Once you get the custom field (like week1Completed or week2Completed), you can conditionally show the checkmark icon based on its value.Here’s an example:
```
<script>
document.addEventListener("DOMContentLoaded", function() {
    window.$memberstackDom.getCurrentMember().then(async ({ data: member }) => {
        if (member) {
            // Replace 'week1Completed' with the actual field for your week
            const week1Completed = member.customFields.week1Completed;

            // Check if the week is marked as completed
            if (week1Completed === true) {
                // Show the checkmark icon by changing the display property
                document.getElementById("checkmarkIcon").style.display = "block";
            } else {
                document.getElementById("checkmarkIcon").style.display = "none";
            }

            // You can log the result for debugging
            console.log("Week 1 Completed: ", week1Completed);
        }
    });
});
</script>
```
4. HTML Structure
Make sure you have a hidden checkmark icon in your HTML to show it when the condition is met. For example:
```
<img id="checkmarkIcon" src="path-to-checkmark-icon.png" style="display: none;" alt="Checkmark Icon">
```
This way, when the custom field for the week is set to true, the checkmark icon will be shown, and when it's not, it will remain hidden.This will allow you to confirm that the correct fields are being returned, and you can adjust your logic to match the specific week’s custom field you want to track.
0
Steffen Schwager
- May 02, 2025 14:52
awesome Chukwudi Onyekwere! Somehow i still had struggles with the if statement as my custom field is a string but i found a workaround to check if the field is empty or not. Thank you!

0

Please sign in to leave a comment.