#20 - Save & Unsave CMS Items v0.3

Allow your members to like/unlike CMS items and save to their JSON!

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.

View demo

Optimized For Dynamic Content

This is usually what you will want to use - it works with over 100 CMS Items using Finsweet CMS Load.


<!-- 💙 MEMBERSCRIPT #20 v0.3 💙 SAVE & UNSAVE CMS ITEMS (OPTIMIZED FOR DYNAMIC CONTENT SUPPORT) -->
<script>
document.addEventListener("DOMContentLoaded", async function() {
  const memberstack = window.$memberstackDom;
  const memberData = (await memberstack.getMemberJSON()).data || {};

  const updateButtonVisibility = function(button, savedItems) {
    const itemId = button.getAttribute('ms-code-save-child');
    const isItemSaved = savedItems.includes(itemId);
    button.style.display = isItemSaved ? 'none' : 'block';
    const action = isItemSaved ? 'block' : 'none';
    button.closest('[ms-code-save]').querySelectorAll(`[ms-code-unsave-child="${itemId}"]`).forEach(unsaveButton => {
      unsaveButton.style.display = action;
    });
  };

  const toggleLikeButton = async function(button, jsonGroup, savedItems) {
    const itemId = button.getAttribute('ms-code-save-child');
    const itemIndex = savedItems.indexOf(itemId);

    if (itemIndex > -1) {
      savedItems.splice(itemIndex, 1); // Remove item from saved list
    } else {
      savedItems.push(itemId); // Add item to saved list
    }

    memberData[jsonGroup] = savedItems; // Directly modify the memberData to ensure updates are propagated correctly

    await memberstack.updateMemberJSON({ json: memberData });
    updateButtonVisibility(button, savedItems);
  };

  const initializeButtons = function(buttons, action) {
    buttons.forEach(button => {
      const jsonGroup = button.getAttribute('ms-code-save') || button.closest('[ms-code-save]').getAttribute('ms-code-save');
      const savedItems = memberData[jsonGroup] || [];
      if (action === 'update') updateButtonVisibility(button, savedItems);
      button.removeEventListener('click', buttonClickHandler); // Prevent multiple bindings
      button.addEventListener('click', buttonClickHandler);
    });
  };

  function buttonClickHandler(event) {
    event.preventDefault();
    const button = event.currentTarget;
    const jsonGroup = button.getAttribute('ms-code-save') || button.closest('[ms-code-save]').getAttribute('ms-code-save');
    const savedItems = memberData[jsonGroup] || [];
    toggleLikeButton(button, jsonGroup, savedItems);
  }

  const observeDOMChanges = function() {
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        mutation.addedNodes.forEach(node => {
          if (node.nodeType === 1 && (node.matches('[ms-code-save-child]') || node.querySelector('[ms-code-save-child]'))) {
            const saveButtons = node.querySelectorAll('[ms-code-save-child]');
            const unsaveButtons = node.querySelectorAll('[ms-code-unsave-child]');
            initializeButtons(saveButtons, 'update');
            initializeButtons(unsaveButtons, 'attach');
          }
        });
      });
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
  };

  const saveButtons = document.querySelectorAll('[ms-code-save-child]');
  const unsaveButtons = document.querySelectorAll('[ms-code-unsave-child]');

  initializeButtons(saveButtons, 'update');
  initializeButtons(unsaveButtons, 'attach');
  observeDOMChanges(); // Start observing changes in the document
});
</script>

‍

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.


<!-- 💙 MEMBERSCRIPT #20.1 v0.2 💙 SAVE & UNSAVE CMS ITEMS AFTER MEMBERSTACK LOAD -->
<script>
const memberstack = window.$memberstackDom;

const updateButtonVisibility = async function(button, jsonGroup) {
  const itemId = button.getAttribute('ms-code-save-child');
  const member = await memberstack.getMemberJSON();

  const savedItems = member.data && member.data[jsonGroup] ? member.data[jsonGroup] : [];
  const isItemSaved = savedItems.includes(itemId);

  const saveButton = button;
  const parentElement = button.closest('[ms-code-save]');
  const unsaveButtons = parentElement.querySelectorAll(`[ms-code-unsave-child="${itemId}"]`);

  unsaveButtons.forEach(unsaveButton => {
    if (isItemSaved) {
      saveButton.style.display = 'none';
      unsaveButton.style.display = 'block';
    } else {
      saveButton.style.display = 'block';
      unsaveButton.style.display = 'none';
    }
  });
};

const toggleLikeButton = async function(button, jsonGroup) {
  const itemId = button.getAttribute('ms-code-save-child');
  const member = await memberstack.getMemberJSON();

  if (!member.data) {
    member.data = {};
  }

  if (!member.data[jsonGroup]) {
    member.data[jsonGroup] = [];
  }

  const isItemSaved = member.data[jsonGroup].includes(itemId);

  const parentElement = button.closest('[ms-code-save]');
  const unsaveButtons = parentElement.querySelectorAll(`[ms-code-unsave-child="${itemId}"]`);

  if (isItemSaved) {
    member.data[jsonGroup] = member.data[jsonGroup].filter(item => item !== itemId);
    button.style.display = 'block';
    unsaveButtons.forEach(unsaveButton => {
      unsaveButton.style.display = 'none';
    });
  } else {
    member.data[jsonGroup].push(itemId);
    button.style.display = 'none';
    unsaveButtons.forEach(unsaveButton => {
      unsaveButton.style.display = 'block';
    });
  }

  await memberstack.updateMemberJSON({
    json: member.data
  });

  updateButtonVisibility(button, jsonGroup);
};

memberstack.getCurrentMember().then(({ data }) => {
  if (data) {
    // Member is logged in
    const saveButtons = document.querySelectorAll('[ms-code-save-child]');

    saveButtons.forEach(button => {
      const jsonGroup = button.getAttribute('ms-code-save') || button.closest('[ms-code-save]').getAttribute('ms-code-save');
      updateButtonVisibility(button, jsonGroup);
      button.addEventListener('click', async function(event) {
        event.preventDefault();
        await toggleLikeButton(button, jsonGroup);
      });
    });

    const unsaveButtons = document.querySelectorAll('[ms-code-unsave-child]');

    unsaveButtons.forEach(button => {
      const jsonGroup = button.getAttribute('ms-code-save') || button.closest('[ms-code-save]').getAttribute('ms-code-save');
      button.addEventListener('click', async function(event) {
        event.preventDefault();
        const parentElement = button.closest('[ms-code-save]');
        const saveButton = parentElement.querySelector(`[ms-code-save-child="${button.getAttribute('ms-code-unsave-child')}"]`);
        await toggleLikeButton(saveButton, jsonGroup);
      });
    });
  } else {
    // If member is not logged in
  }
});
</script>

Description

Attribute

No items found.

#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.

‍

Creating the Make.com Scenario

1. Download the JSON blueprint below to get stated.

Download File

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.

How to Build a Bookmark Feature in Webflow

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.

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.

Take me to the Scripts

Read full documentation

Button Text

Something not working as expected?