Comment créer une fonctionnalité de signet dans Webflow

Ce billet vous apprendra comment construire une fonctionnalité de logs de membres dans webflow, ce qu'est une fonctionnalité de logs de membres et quand / pourquoi vous pourriez vouloir utiliser les logs de membres dans votre projet.

November 29, 2023
TABLE DES MATIÈRES
Ovidiu

Comment créer une fonctionnalité de signet dans Webflow

Les registres des membres sont nécessaires

https://www.memberstack.com/scripts/like-unlike-cms-items

Tutoriel

Clonable

https://webflow.com/made-in-webflow/website/like-and-favorite-cms-items

Why/When would need to Build a Bookmark in Webflow?

  1. On an eCommerce site where users can save products that they’re interested in for further reviewing or buying them at a later date.
  2. On a social platform where users can save their favorite posts.
  3. So users can save their favorite content on a website for easy access.
  4. 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.

Conclusion

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.

Emmenez-moi aux Scripts

Ajoutez des adhésions à votre projet Webflow en quelques minutes.

En savoir plus

Plus de 200 composants Webflow clonables gratuits. Aucune inscription n'est nécessaire.

Voir la bibliothèque

Ajoutez des adhésions à votre projet React en quelques minutes.

Commencer
Qu'est-ce que Memberstack ?

Auth & paiements pour les sites Webflow

Ajoutez des logins, des abonnements, du contenu à accès limité, et plus encore à votre site Webflow - facile et entièrement personnalisable.

En savoir plus
Commencer à construire

Essayez Memberstack et découvrez ce que vous pouvez construire !

Memberstack est 100% gratuit jusqu'à ce que vous soyez prêt à vous lancer - alors, qu'attendez-vous ? Créez votre première application et commencez à construire dès aujourd'hui.