I figured it out myself.
If anyone is reading this I can help you do this too, I figure there are probably more people out there looking to do this same thing: Mark as complete functional buttons, as well as completion percentage displayed as a progress bar using webflow cms items with dynamic JSON values from current memberstack user.
Works on multiple levels of hierarchy; mine has Course, Module, and Lesson structure, so both Courses and Modules have their own completion percentage display, even though modules live inside courses. Also updates in live time, so as they click to mark something complete, it updates across the site.
email email@example.com to get help with this.
I haven't found a comprehensive way to do this with low-to-no code. Some JS is ok, but the site we are building is in webflow, so any custom code would preferably be no larger than the usual memberstack API stuff, plus a script to calculate the percentage based on current member JSON data.
I have seen some posts online having to do with custom js that constructs the course manually by JSON groups and values, then does the math, but... one, I havent been able to get those to work; and two, we need this to be able to live inside of a cms collection on webflow so that when we add to it or change it, the code (and the math) don't break.
Essentially needs to be completely dynamic. Even if that means the custom code lives in an embed that pulls the code from rich text elements inside of collections.
What we need is to
- pull current user json data for course modules completed (right now that json group looks like: xxmodule1-lesson1: true [where xx is a manually generated 2-letter code to identify the course])
- pull the total number of lessons in a module [and # of modules in a course] from the cms in webflow
- do the math (so if: 10 lessons in module 1 [via cms data entry]; current user json data shows 2 lessons marked complete [via memberstack json]; then 2/10 = 0.2 [or 20%])
- then display that value as a % of width on a webflow div (where the outer div width is 100% and the inner div called 'fill' represents the progress bar, so that it's width is set to 20% to match the math from the custom code)
- and work for items in a collection so that uniformity can be achieved
This must be possible because other sites like kajabi and teachable have this feature and it only makes sense that the user json data is driving whatever script makes it work.
I do have a working code that adds a combo class to buttons that mark items in the course as complete, that fully functions with memberstack and elements inside a webflow cms collection, where the data attribute value is actually pulled from a custom field inside the collection, and accurately shows items marked as complete via custom styling on webflow to match the json data in the backend of memberstack. I can share this code with you if it helps, but what I'm saying is this does work with dynamic collection items. I suppose the hard part is making it do math on dynamic items.
The deadline for this project is coming up in a few weeks and this feature is at the top of our list. We would definitely pay for in-depth help on this, as this issue likely requires more time and skill than most forum quick-fixes. Email Blake at gfxblake(at)gmail(dot)com for this kind of thing.