← All Scripts

#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

Loads immediately

This is faster, so if ONLY logged in members will be on the page, use this.


<!-- 💙 MEMBERSCRIPT #20 v0.3 💙 SAVE & UNSAVE CMS ITEMS -->
<script>
document.addEventListener("DOMContentLoaded", async function() {
  const memberstack = window.$memberstackDom;
  const member = await memberstack.getMemberJSON();

  const updateButtonVisibility = function(button, jsonGroup, memberData) {
    const itemId = button.getAttribute('ms-code-save-child');
    const savedItems = memberData && memberData[jsonGroup] ? memberData[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');

    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, member.data);
  };

  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, member.data);
    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);
    });
  });
});
</script>

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

Changes have been made which drastically improves the loading speed.

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.