This script has been deprecated! ⚠️
To add liking and saving to your site, we've released a new script which is better & more reliable! To check it out, head to Memberscript #106
Erlauben Sie Ihren Mitgliedern, CMS-Elemente zu mögen/abzulehnen und in ihrem JSON zu speichern!
View demo projectOptimized For Dynamic Content
This is usually what you will want to use - it works with over 100 CMS Items using Finsweet CMS Load.
Using Finsweet CMS Load
If you do have over 100 CMS items, please watch this video.
Loads after member object
If both logged in & logged out visitors will be on the page with this script, using this method will prevent errors.
Creating the Make.com Scenario
1. Download the JSON blueprint below to get stated.
2. Navigate to Make.com and Create a New Scenario...
3. Click the small box with 3 dots and then Import Blueprint...
4. Upload your file and voila! You're ready to link your own accounts.
Need help with this MemberScript?
All Memberstack customers can ask for assistance in the 2.0 Slack. Please note that these are not official features and support cannot be guaranteed.
Join the 2.0 Slack#20.1 - New version released
This new version is another option which will load the script AFTER the member object has loaded. This is a better script for pages which both visitors and members will be viewing.
v0.2 - Fixed strange behavior
Having multiple of the same list on a page caused an issue with button visibility.
v0.3 - Performance improvements + dynamic content support
Changes have been made which drastically improves the loading speed, along with allowing dynamic content from pagination.
Wie man eine Lesezeichenfunktion in Webflow erstellt
Memberscripts needed
https://www.memberstack.com/scripts/like-unlike-cms-items
Tutorial
Cloneable
https://webflow.com/made-in-webflow/website/like-and-favorite-cms-items
Why/When would need to Build a Bookmark in Webflow?
- On an eCommerce site where users can save products that they’re interested in for further reviewing or buying them at a later date.
- On a social platform where users can save their favorite posts.
- So users can save their favorite content on a website for easy access.
- So users can curate custom lists of content or products that they can share.
Whether you’re building an eCommerce site, a social media platform, a content website and so on, one key functionality that needs to be present on your site is the ability to save content in a list – a wishlist, bookmarks list, favorites list, etc.
We’re going to be looking at how you can add this functionality on a Webflow site and display a toast notification informing the user of the action they’ve just performed – e.g “Product added to wishlist.”
Building a bookmark feature in Webflow
To set things up, we’re going to use MemberScript #20 – Save & Unsave CMS Items. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.
Creating the CMS Collection
First off, you need to create a CMS Collection of all the items displayed on your page. For each item in the collection, you’ll need to add an Item ID field where you’ll paste each item’s specific ID.
On the design side, each CMS item will need to contain a wrap for two buttons, one for saving the item and one for removing it from the user’s list. This wrapper will need to use the attribute ms-code-save=”VALUE”, where the value can be anything you want depending on what you’re actually calling the action (e.g. save, favorite, bookmark, etc.).
The buttons will also need their own attributes, as such:
- The remove button needs to use ms-code-unsave-child and for the value, select the Item ID from the dropdown menu. Additionally, you’ll need to add the attribute ms-code-toast-trigger=”2” in order to trigger the corresponding toast notification when users click on this button.
- The save button needs to use ms-code-save-child and for the value, select the Item ID again from the dropdown menu. For the corresponding toast notification to trigger, you’ll also need to add ms-code-toast-trigger=”1”.
Making it work
Now that you’ve created your CMS Collection and you’ve styled the items on the page, you just need to add the MemberScript #20 custom code to your page, before the closing body tag.
Now you can save and unsave items on the frontend while displaying a toast notification for each action you perform.
Schlussfolgerung
That’s all there is to it, your users can now add or remove items to their wishlist, bookmarks list, or any other type of list.
If you want to use our demo project to get you started, just click the button below to add it to your project.