Loads immediately This is faster, so if ONLY logged in members will be on the page, use this.
Copy Script
<!-- 💙 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.
Copy Script
<!-- 💙 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>
.png)
