How to filter a Memberstack CMS collection with Jetboost without loading all items in the DOM? Answered
Hi guys,
Could you please advise if I use Jetboost to filter CMS collection for a Memberstack user via Search initiation, will all CMS items be loaded in the DOM? I'd like to avoid that to enhance security.
I don't want all list items to load in the background, but I only need part of a collection to load and display. This one is critical for the project.
Comments
8 comments
If you have “Add search query to the URL?” in Jetboost set to “Yes” (Step 4 in Booster Settings), and then you perform the search using the query param you should be ok. At least it shouldn’t load anything more than the collection’s initial items (also set in Jetboost, which could be 0 initially).
Hey Olha Shulha,
I am not sure how exactly the filter system is enabled on your site, but generally speaking while upon search the non-matching elements are removed from the DOM, it might take a split second to actually filter it out from all the collection items. So, I was under the impression that technically all the items are loaded for a split second and then are filtered based on the search.
But with Noah's suggestion, I am curious is there a setting available in Jetboost which lets us show 0 items on initial load and then populate based on the search query in the URL?
I was testing the free version with the search query based URL and could see that all items load initially for a second and then are filtered, so I am curious to know if there's a powerup available to avoid this.
https://www.memberstack.com/scripts/liking-saving-cms-items - In case you have the collection list in a user specific template page and want to use Webflow's native filter to filter it out based on some field from the CMS, I believe that will load only the items that you matches the filter you set up. Have you tested that out?
Thanks a lot, Noah Raskin!
A J That’s not what I’m gonna do.
I’ll put the CMS collection list on a regular page, not a user-specific page, and then I’ll filter the collection based on a custom field value from Memberstack users.
I've used this approach before with this code
<script>function codeToRun1() {// Add your custom Memberstack-dependent code herewindow.$memberstackDom.getCurrentMember().then(({ data: member }) => {if (member) {// Get the Memberstack member IDconst memberID = member.id; // Select all CMS items on the pageconst cmsItems = document.querySelectorAll('.cms-item'); // Loop through CMS items and hide those that don't match the member IDcmsItems.forEach(item => {const itemMemberID = item.getAttribute('data-member-id');if (itemMemberID !== memberID) {item.style.display = 'none';}});} else {// Redirect logged-out users to the login pagewindow.location.href = '/log-in'; // Replace '/log-in' with the URL of your login page}});}if (window.$memberstackReady) {// Run the code immediately if Memberstack is already readycodeToRun1();} else {// Wait for Memberstack to be ready if it's not alreadydocument.addEventListener("memberstack.ready", codeToRun1);}</script>But I need a secure option now
Okay for starters, you could set the item's visiblity to none by default and have the code set it to block if it matches the member ID. But that is just a visual tip to not let users see all items for a split second, if you have sensitive data you would need something else.
Do you have a members collection in your site?
Will it work for the project that non-matching elements are removed from the DOM or do you not want it to load it at all when the page initially loads?
A J Yes, my main concern is that the full CMS list is visible in the browser console.
No, I won't have the members' collection on the website as the client wants to avoid extra Whalesync cost.
but I might sync MemberStack users with the members CMS collection through Zapier. My users won't be edited/updated a lot, so I consider this type of integration.
Regarding removing from the DOM, it might work as it's a least partly secure...Can I do it with JS?
An ideal solution won't load all items at all
Yeah, you can remove elements from DOM by combining the approach shared in this memberscript, there the element is removed by checking whether a custom field is filled out, but for your use-case, you can combine it with the check that if the member ID matches, keep it as it is, if not remove it (instead of setting it's display property). Visually you can keep all items display to none and have the code set it to block only when the filter matches.
Thank you so much A J, I appreciate your help a lot!
You could research on server-side filtering approaches for your project, but am not sure if that complexity is necessary for your project. The suggested solution might bring you closer to a simple solution. I would have suggested 'Hosted content' feature if the structure was not a collection item / dynamic in nature and plan based.
Alternatively Webflow filtering would have helped if the element was placed in a user-specific page etc. But yeah, hope it gave you some idea.
Welcome 😇
Please sign in to leave a comment.