Skip to main content

Starts at 0:05, after the intro.

Lesson 4 of 5 · 4:27 · Intermediate · Webflow

Build a saved items list

Let members save CMS items to a favorites list stored in Data Tables.

Where this fits

You just saved form data into Data Tables. Now you’ll use one to let members save CMS items with a single click.

By the end of this lesson you can

  • Set up a favorites table with a member reference, item name and CMS ID
  • Add a CMS ID field to your Webflow collection
  • Wire up a save button and a saved items list with data attributes
  • Show an empty state when nothing is saved yet

Lesson notes

How it works

How a saved items list works with Data Tables

Each time a member saves a CMS item, MemberScript #215 creates one record in a favorites table: who saved it, the item's name and the item's CMS ID. Unsaving deletes that record. Because the list lives in Memberstack, it follows the member to any page and any device.

On a page with your saved list, the script asks Data Tables for all of the member's favorites on load, 100 records per request, and keeps them in memory. It then marks every matching button on the page as saved. That's why the same item shows as saved in both lists, and why the page doesn't call the API once per item.

Set up the favorites table

In the dashboard, create a table called favorites. If you name it something else, change tableName at the top of the script to your table key.

  1. Add a member reference field (key member) so each record knows who saved it.
  2. Add a text field for the item name (key item_name) and one for the CMS ID (key item). The script writes to these keys.
  3. Set the rules: any member can create, members can read and delete only their own records, and update is admin only.

Wire up the collection lists

In your Webflow collection, add a CMS ID field and fill it with each item's ID, by hand or in bulk. Then paste MemberScript #215 into the page or site body code.

Use two collection lists. The first shows every item. The second gets data-favorites-list and shows only what the member saved: the script hides any item in it that isn't in their favorites.

Inside both lists, the save button gets data-favorite-button, plus data-item-id bound to the CMS ID field and data-item-name bound to the name. Saved buttons get the is-saved class, and the script's CSS fills the icon with savedColor. That CSS targets the classes favorite_button and favorite_icon, so use those class names or edit the CSS. Add an element with data-empty-state to show when nothing is saved yet.

Before you move on

0 of 5

Tick these off on your own site. Done with all of them? You’re ready for the next lesson.

Up next: To finish the journey, you’ll use a Data Table to build a member directory anyone can search.

Chapters

Common questions

How do I let members save Webflow CMS items to favorites?

Use MemberScript #215 with a Memberstack Data Table. Each click on a button with data-favorite-button creates or deletes a record holding the item's CMS ID.

Why store favorites in Data Tables instead of member JSON?

Each saved item is its own record with owner-only rules, and saving or removing one doesn't rewrite the member's whole JSON object.

Does it slow down pages for members with lots of saves?

The script loads all saved items in pages of 100 and updates the buttons from that list in memory, so it doesn't make one request per item.

Keep going

Checked against the Memberstack docs

TranscriptAuto-generated captions
  1. 0:01

    Hey, Mad Memberstack here and welcome to members script 215. In this video, we are going to build a save and unsave feature, but instead of saving your items to the member JSON, we are going to save them to members text data tables. So, users will be able to save an item like this and that item will appear saved on any page. In this case, I’ve added my save section over here, but you can add the section to any page. Right, let me show you what you need to set up inside of members stack as well

  2. 0:31

    in as well as inside of Webflow. So firstly inside of members stack you are going to need a table called favorites. So you can title your table whatever you want and then you are going to set the following rules. Any member can create and then only members can read and delete their own records and update rule is set to admin only. In your table you are going to have the following fields. We’re going to have a member reference field because we want to know who saved a particular item and then what item was saved. So the item name and then we’re

  3. 1:03

    going to have the item um CMS ID over here. Okay. So a sample record would look something like this. So inside of Webflow you are going to need to set up your Webflow CMS collection. In this case, we have blog posts. But one thing you do need to add inside of your collection is a CMS ID. You can simply when you have records, you’ll have to copy the CMS ID into this field or you can bulk automate um adding the CMS ID to all of your records. Once

  4. 1:36

    you’ve set that all up, you are now going to need members script 215. And you can either add that sitewide on a specific page depending on your specific use case. And that script should look something like this. On the page itself, you are going to set up your save and unsave feature. Okay. So, you’re going to have two collection lists. The first collection list is going to be the collection list that shows all of your items, whether they are saved or unsaved. And then the second collection

  5. 2:07

    list over here is going to show all of your collection all of your items that a particular user has saved. So the first collection list will have the attribute of data favorites all and then within the collection list you are going to style and add all of your items. Within the items you are going to add a favorites button. So you can simply just copy and paste this button to your collections. This button is going to have the following attributes. You’re going to have data favorite button and

  6. 2:39

    then data item ID is going to be set to that CMS ID and then data item name is going to be set to that CMS items name. You’re going to do the same for the saved yeah the saved collection list over here. This list will have the attribute of data favorites list and then the favorite button will have the same attributes of I can delete this one will have the same attributes of data favorite button and then data item ID is still set to CMS ID and then data item

  7. 3:12

    name is set to name. We also have an empty state over here with the attribute of data and state and that will show when a user does not have any saved items. Okay. And lastly, going back into the script, if you created a table inside of Memberstack and did not name it favorites, inside of the script, you just change the table key over here. And you can simply get the table key inside of your table here. Copy it and paste it there. You can also customize the color of your save button. In this case, mine

  8. 3:45

    is orange. And that is the fill that that button would get. So you style it here. You can change the icon color over here. And then you will set the fill color over here. And say a user has over 100 records. This um script does use pagionation to request for records in a few calls and then update the UI from that memory list. So avoiding pinging the API multiple times in order to fetch

  9. 4:15

    a user’s um saved items. Okay. And that is it. If you have any questions on this, please feel free to reach out in the Slack 2.0 channel. Bye.

This is v1 of Memberstack University, built from the tutorials we’ve put so much work into over the years. We’d like to make a more organized series.