Utilisé par plus de 50 000 équipes et agences
128 000 000 $ et plus gagnés
Gratuit jusqu'au lancement. Aucune carte de crédit n'est nécessaire.
Utilisé par plus de 50 000 équipes et agences
128 000 000 $ et plus gagnés
FREE Migration from User Accounts →
Composants
Modèles
Attributs
Intégrations
Testeur de site
Code personnalisé

Scripts des membres

Une solution basée sur les attributs pour ajouter des fonctionnalités à votre site Webflow.
Il suffit de copier un peu de code, d'ajouter quelques attributs et le tour est joué.

Nous vous remercions ! Votre demande a bien été reçue !
Oups ! Un problème s'est produit lors de l'envoi du formulaire.
Besoin d'aide avec MemberScripts ?

Tous les clients de Memberstack peuvent demander de l'aide dans le Slack 2.0. Veuillez noter qu'il ne s'agit pas de fonctionnalités officielles et que le support ne peut être garanti.

Champs personnalisés

#17 - Création d'un lien à partir d'un champ personnalisé

Utilisez des champs personnalisés pour remplir les cibles de liens avec un seul attribut !


<!-- 💙 MEMBERSCRIPT #17 v0.3 💙 ADD CUSTOM FIELD AS A LINK -->
<script>
  document.addEventListener("DOMContentLoaded", function() {
    const memberData = JSON.parse(localStorage.getItem('_ms-mem') || '{}');
    if (!memberData?.id) return;

    document.querySelectorAll('[ms-code-field-link]').forEach(element => {
      const fieldKey = element.getAttribute('ms-code-field-link');
      const fieldValue = memberData.customFields?.[fieldKey]?.trim();

      if (!fieldValue) {
        element.style.display = 'none';
        return;
      }

      try {
        // Add protocol if missing and validate URL
        const url = !/^https?:\/\//i.test(fieldValue) ? 'https://' + fieldValue : fieldValue;
        new URL(url); // Will throw if invalid URL

        element.href = url;
        element.rel = 'noopener noreferrer';
        element.target = '_blank';
      } catch {
        element.style.display = 'none';
      }
    });
  });
</script>
v0.2
Voir le script

<!-- 💙 MEMBERSCRIPT #17 v0.3 💙 ADD CUSTOM FIELD AS A LINK -->
<script>
  document.addEventListener("DOMContentLoaded", function() {
    const memberData = JSON.parse(localStorage.getItem('_ms-mem') || '{}');
    if (!memberData?.id) return;

    document.querySelectorAll('[ms-code-field-link]').forEach(element => {
      const fieldKey = element.getAttribute('ms-code-field-link');
      const fieldValue = memberData.customFields?.[fieldKey]?.trim();

      if (!fieldValue) {
        element.style.display = 'none';
        return;
      }

      try {
        // Add protocol if missing and validate URL
        const url = !/^https?:\/\//i.test(fieldValue) ? 'https://' + fieldValue : fieldValue;
        new URL(url); // Will throw if invalid URL

        element.href = url;
        element.rel = 'noopener noreferrer';
        element.target = '_blank';
      } catch {
        element.style.display = 'none';
      }
    });
  });
</script>
Voir le Memberscript
JSON

#16 - Fin de la session après X minutes d'inactivité

Ce script redirige les utilisateurs inactifs vers une page "Session expirée" après une certaine période d'inactivité. Un compte à rebours est affiché sur la page et se réinitialise en fonction de l'activité de la page.

Add this code before the closing </body> tag any page which needs a countdown timer. 


<!-- 💙 MEMBERSCRIPT #16 v0.2 💙 LOGOUT AFTER X MINUTES OF INACTIVITY -->
<script>
let logoutTimer;
let countdownInterval;
let initialTime;

function startLogoutTimer() {
  // Get the logout time from the HTML element
  const timeElement = document.querySelector('[ms-code-logout-timer]');
  const timeParts = timeElement.textContent.split(':');
  const minutes = parseInt(timeParts[0], 10);
  const seconds = parseInt(timeParts[1], 10);
  const LOGOUT_TIME = (minutes * 60 + seconds) * 1000; // Convert to milliseconds

  // Store the initial time value
  if (!initialTime) {
    initialTime = LOGOUT_TIME;
  }

  // Clear the previous timer, if any
  clearTimeout(logoutTimer);
  clearInterval(countdownInterval);

  let startTime = Date.now();

  // Start a new timer to redirect the user after the specified time
  logoutTimer = setTimeout(() => {
    window.location.href = "/expired";
    startLogoutTimer(); // Start the logout timer again
  }, LOGOUT_TIME); 

  // Start a countdown timer
  countdownInterval = setInterval(() => {
    let elapsed = Date.now() - startTime;
    let remaining = LOGOUT_TIME - elapsed;
    updateCountdownDisplay(remaining);
  }, 1000); // update every second
}

function updateCountdownDisplay(remainingTimeInMs) {
  // convert ms to MM:SS format
  let minutes = Math.floor(remainingTimeInMs / 1000 / 60);
  let seconds = Math.floor((remainingTimeInMs / 1000) % 60);
  minutes = minutes < 10 ? "0" + minutes : minutes;
  seconds = seconds < 10 ? "0" + seconds : seconds;

  const timeElement = document.querySelector('[ms-code-logout-timer]');
  timeElement.textContent = `${minutes}:${seconds}`;
}

// Call this function whenever the user interacts with the page
function resetLogoutTimer() {
  const timeElement = document.querySelector('[ms-code-logout-timer]');
  timeElement.textContent = formatTime(initialTime); // Reset to the initial time
  startLogoutTimer();
}

function formatTime(timeInMs) {
  let minutes = Math.floor(timeInMs / 1000 / 60);
  let seconds = Math.floor((timeInMs / 1000) % 60);
  minutes = minutes < 10 ? "0" + minutes : minutes;
  seconds = seconds < 10 ? "0" + seconds : seconds;
  return `${minutes}:${seconds}`;
}

// Call this function when the user logs in
function cancelLogoutTimer() {
  clearTimeout(logoutTimer);
  clearInterval(countdownInterval);
}

// Start the timer when the page loads
startLogoutTimer();

// Add event listeners to reset timer on any page activity
document.addEventListener('mousemove', resetLogoutTimer);
document.addEventListener('keypress', resetLogoutTimer);
document.addEventListener('touchstart', resetLogoutTimer);

</script>

Add this code to your /expired page before the closing </body> tag.


<!-- 💙 MEMBERSCRIPT #16 v0.2 💙 LOGOUT AFTER X MINUTES OF INACTIVITY -->
<script>
window.addEventListener('load', () => {
  window.$memberstackDom.getCurrentMember().then(async ({ data: member }) => {   
    if (member) {
      try {
        await window.$memberstackDom.logout();
        console.log('Logged out successfully');
        
        setTimeout(() => {
          location.reload();
        }, 1000); // Refresh the page 1 second after logout

      } catch (error) {
        console.error(error);
      }
    }
  });
});
</script>
v0.2
Voir le script

Add this code before the closing </body> tag any page which needs a countdown timer. 


<!-- 💙 MEMBERSCRIPT #16 v0.2 💙 LOGOUT AFTER X MINUTES OF INACTIVITY -->
<script>
let logoutTimer;
let countdownInterval;
let initialTime;

function startLogoutTimer() {
  // Get the logout time from the HTML element
  const timeElement = document.querySelector('[ms-code-logout-timer]');
  const timeParts = timeElement.textContent.split(':');
  const minutes = parseInt(timeParts[0], 10);
  const seconds = parseInt(timeParts[1], 10);
  const LOGOUT_TIME = (minutes * 60 + seconds) * 1000; // Convert to milliseconds

  // Store the initial time value
  if (!initialTime) {
    initialTime = LOGOUT_TIME;
  }

  // Clear the previous timer, if any
  clearTimeout(logoutTimer);
  clearInterval(countdownInterval);

  let startTime = Date.now();

  // Start a new timer to redirect the user after the specified time
  logoutTimer = setTimeout(() => {
    window.location.href = "/expired";
    startLogoutTimer(); // Start the logout timer again
  }, LOGOUT_TIME); 

  // Start a countdown timer
  countdownInterval = setInterval(() => {
    let elapsed = Date.now() - startTime;
    let remaining = LOGOUT_TIME - elapsed;
    updateCountdownDisplay(remaining);
  }, 1000); // update every second
}

function updateCountdownDisplay(remainingTimeInMs) {
  // convert ms to MM:SS format
  let minutes = Math.floor(remainingTimeInMs / 1000 / 60);
  let seconds = Math.floor((remainingTimeInMs / 1000) % 60);
  minutes = minutes < 10 ? "0" + minutes : minutes;
  seconds = seconds < 10 ? "0" + seconds : seconds;

  const timeElement = document.querySelector('[ms-code-logout-timer]');
  timeElement.textContent = `${minutes}:${seconds}`;
}

// Call this function whenever the user interacts with the page
function resetLogoutTimer() {
  const timeElement = document.querySelector('[ms-code-logout-timer]');
  timeElement.textContent = formatTime(initialTime); // Reset to the initial time
  startLogoutTimer();
}

function formatTime(timeInMs) {
  let minutes = Math.floor(timeInMs / 1000 / 60);
  let seconds = Math.floor((timeInMs / 1000) % 60);
  minutes = minutes < 10 ? "0" + minutes : minutes;
  seconds = seconds < 10 ? "0" + seconds : seconds;
  return `${minutes}:${seconds}`;
}

// Call this function when the user logs in
function cancelLogoutTimer() {
  clearTimeout(logoutTimer);
  clearInterval(countdownInterval);
}

// Start the timer when the page loads
startLogoutTimer();

// Add event listeners to reset timer on any page activity
document.addEventListener('mousemove', resetLogoutTimer);
document.addEventListener('keypress', resetLogoutTimer);
document.addEventListener('touchstart', resetLogoutTimer);

</script>

Add this code to your /expired page before the closing </body> tag.


<!-- 💙 MEMBERSCRIPT #16 v0.2 💙 LOGOUT AFTER X MINUTES OF INACTIVITY -->
<script>
window.addEventListener('load', () => {
  window.$memberstackDom.getCurrentMember().then(async ({ data: member }) => {   
    if (member) {
      try {
        await window.$memberstackDom.logout();
        console.log('Logged out successfully');
        
        setTimeout(() => {
          location.reload();
        }, 1000); // Refresh the page 1 second after logout

      } catch (error) {
        console.error(error);
      }
    }
  });
});
</script>
Voir le Memberscript
UX

#15 - Rafraîchir la page après une durée définie au clic

Actualiser la page au bout d'un certain temps lorsqu'un élément est cliqué.


<!-- 💙 MEMBERSCRIPT #15 v0.1 💙 TRIGGER REFRESH ON CLICK -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  document.addEventListener("click", function(event) {
    const clickedElement = event.target.closest('[ms-code-refresh]');

    if (clickedElement) {
      const refreshDelay = parseInt(clickedElement.getAttribute('ms-code-refresh'));

      if (!isNaN(refreshDelay)) {
        setTimeout(function() {
          location.reload();
        }, refreshDelay);
      }
    }
  });
});
</script>
v0.1
Voir le script

<!-- 💙 MEMBERSCRIPT #15 v0.1 💙 TRIGGER REFRESH ON CLICK -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  document.addEventListener("click", function(event) {
    const clickedElement = event.target.closest('[ms-code-refresh]');

    if (clickedElement) {
      const refreshDelay = parseInt(clickedElement.getAttribute('ms-code-refresh'));

      if (!isNaN(refreshDelay)) {
        setTimeout(function() {
          location.reload();
        }, refreshDelay);
      }
    }
  });
});
</script>
Voir le Memberscript
UX

#14 - Créer un état de chargement au clic

Simuler un état de chargement personnalisé lorsqu'un élément est cliqué.


<!-- 💙 MEMBERSCRIPT #14 v0.1 💙 CREATE LOADING STATE ON CLICK -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous" ></script>
<script>
$(document).ready(function() {

    // Bind click event to elements with ms-code-loading-trigger attribute
    $(document).on('click', '[ms-code-loading-trigger]', function() {
        // Get the value of ms-code-loading-trigger attribute
        var triggerValue = $(this).attr("ms-code-loading-trigger");

        // Find the matching loading element
        var loadingElement = $("[ms-code-loading-element='" + triggerValue + "']");
        
        // Find the matching subject element
        var subjectElement = $("[ms-code-loading-subject='" + triggerValue + "']");

        // Show the loading element (with flex display), append it to the subject element
        loadingElement.css('display', 'flex').appendTo(subjectElement);

        // After 5 seconds (5000 milliseconds), hide the loading element
        setTimeout(function() {
            loadingElement.hide();
        }, 5000);
    });
});
</script>
v0.1
Voir le script

<!-- 💙 MEMBERSCRIPT #14 v0.1 💙 CREATE LOADING STATE ON CLICK -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous" ></script>
<script>
$(document).ready(function() {

    // Bind click event to elements with ms-code-loading-trigger attribute
    $(document).on('click', '[ms-code-loading-trigger]', function() {
        // Get the value of ms-code-loading-trigger attribute
        var triggerValue = $(this).attr("ms-code-loading-trigger");

        // Find the matching loading element
        var loadingElement = $("[ms-code-loading-element='" + triggerValue + "']");
        
        // Find the matching subject element
        var subjectElement = $("[ms-code-loading-subject='" + triggerValue + "']");

        // Show the loading element (with flex display), append it to the subject element
        loadingElement.css('display', 'flex').appendTo(subjectElement);

        // After 5 seconds (5000 milliseconds), hide the loading element
        setTimeout(function() {
            loadingElement.hide();
        }, 5000);
    });
});
</script>
Voir le Memberscript
JSON
Visibilité conditionnelle

#13 - Filtrer les groupes d'éléments JSON

Affichez des listes filtrées à vos membres sur la base d'une propriété JSON !


<!-- 💙 MEMBERSCRIPT #13 v0.2 💙 FILTER ITEM GROUPS FROM JSON BASED ON ATTRIBUTE VALUE -->
<script>
(function() {
  const memberstack = window.$memberstackDom;
  let member;

  const fetchMemberJSON = async function() {
    member = await memberstack.getMemberJSON();
    return member;
  }

  const filterItems = async function(printList) {
    const filterAttr = printList.getAttribute('ms-code-list-filter');
    if (!filterAttr) return;

    const filters = filterAttr.split(',').map(filter => filter.trim());
    const jsonGroup = printList.getAttribute('ms-code-print-list');
    const items = member.data && member.data[jsonGroup] ? Object.values(member.data[jsonGroup]) : [];

    const itemContainer = document.createElement('div');
    const placeholder = printList.querySelector(`[ms-code-print-item="${jsonGroup}"]`);
    const itemTemplate = placeholder.outerHTML;

    items.forEach(item => {
      const newItem = document.createElement('div');
      newItem.innerHTML = itemTemplate;
      const itemElements = newItem.querySelectorAll('[ms-code-item-text]');

      let skipItem = false;
      filters.forEach(filter => {
        const exclude = filter.startsWith('!');
        const filterKey = exclude ? filter.substring(1) : filter;
        if ((exclude && item.hasOwnProperty(filterKey)) || (!exclude && !item.hasOwnProperty(filterKey))) {
          skipItem = true;
        }
      });

      if (skipItem) return; // Skip this item

      itemElements.forEach(itemElement => {
        const jsonKey = itemElement.getAttribute('ms-code-item-text');
        const value = item && item[jsonKey] ? item[jsonKey] : '';
        itemElement.textContent = value;
      });

      const itemKey = Object.keys(member.data[jsonGroup]).find(k => member.data[jsonGroup][k] === item);
      newItem.firstChild.setAttribute('ms-code-item-key', itemKey);

      itemContainer.appendChild(newItem.firstChild);
    });

    printList.innerHTML = itemContainer.innerHTML;
  };

  // Fetch member JSON
  let intervalId = setInterval(async () => {
    member = await fetchMemberJSON();
    if (member && member.data) {
      clearInterval(intervalId);
      const printLists = document.querySelectorAll('[ms-code-print-list]');
      printLists.forEach(filterItems);
    }
  }, 500);

  // Add click event listener to elements with ms-code-update="json"
  const updateButtons = document.querySelectorAll('[ms-code-update="json"]');
  updateButtons.forEach(button => {
    button.addEventListener("click", async function() {
      // Fetch member JSON on each click
      let intervalIdClick = setInterval(async () => {
        member = await fetchMemberJSON();
        if (member && member.data) {
          clearInterval(intervalIdClick);
          const printLists = document.querySelectorAll('[ms-code-print-list]');
          printLists.forEach(filterItems);
        }
      }, 500);
    });
  });
})();
</script>
v0.2
Voir le script

<!-- 💙 MEMBERSCRIPT #13 v0.2 💙 FILTER ITEM GROUPS FROM JSON BASED ON ATTRIBUTE VALUE -->
<script>
(function() {
  const memberstack = window.$memberstackDom;
  let member;

  const fetchMemberJSON = async function() {
    member = await memberstack.getMemberJSON();
    return member;
  }

  const filterItems = async function(printList) {
    const filterAttr = printList.getAttribute('ms-code-list-filter');
    if (!filterAttr) return;

    const filters = filterAttr.split(',').map(filter => filter.trim());
    const jsonGroup = printList.getAttribute('ms-code-print-list');
    const items = member.data && member.data[jsonGroup] ? Object.values(member.data[jsonGroup]) : [];

    const itemContainer = document.createElement('div');
    const placeholder = printList.querySelector(`[ms-code-print-item="${jsonGroup}"]`);
    const itemTemplate = placeholder.outerHTML;

    items.forEach(item => {
      const newItem = document.createElement('div');
      newItem.innerHTML = itemTemplate;
      const itemElements = newItem.querySelectorAll('[ms-code-item-text]');

      let skipItem = false;
      filters.forEach(filter => {
        const exclude = filter.startsWith('!');
        const filterKey = exclude ? filter.substring(1) : filter;
        if ((exclude && item.hasOwnProperty(filterKey)) || (!exclude && !item.hasOwnProperty(filterKey))) {
          skipItem = true;
        }
      });

      if (skipItem) return; // Skip this item

      itemElements.forEach(itemElement => {
        const jsonKey = itemElement.getAttribute('ms-code-item-text');
        const value = item && item[jsonKey] ? item[jsonKey] : '';
        itemElement.textContent = value;
      });

      const itemKey = Object.keys(member.data[jsonGroup]).find(k => member.data[jsonGroup][k] === item);
      newItem.firstChild.setAttribute('ms-code-item-key', itemKey);

      itemContainer.appendChild(newItem.firstChild);
    });

    printList.innerHTML = itemContainer.innerHTML;
  };

  // Fetch member JSON
  let intervalId = setInterval(async () => {
    member = await fetchMemberJSON();
    if (member && member.data) {
      clearInterval(intervalId);
      const printLists = document.querySelectorAll('[ms-code-print-list]');
      printLists.forEach(filterItems);
    }
  }, 500);

  // Add click event listener to elements with ms-code-update="json"
  const updateButtons = document.querySelectorAll('[ms-code-update="json"]');
  updateButtons.forEach(button => {
    button.addEventListener("click", async function() {
      // Fetch member JSON on each click
      let intervalIdClick = setInterval(async () => {
        member = await fetchMemberJSON();
        if (member && member.data) {
          clearInterval(intervalIdClick);
          const printLists = document.querySelectorAll('[ms-code-print-list]');
          printLists.forEach(filterItems);
        }
      }, 500);
    });
  });
})();
</script>
Voir le Memberscript
JSON

#12 - Ajouter des éléments à des groupes JSON sur simple clic

Ajoutez un élément/une propriété aux éléments JSON précédemment créés en un seul clic !


<!-- 💙 MEMBERSCRIPT #12 v0.1 💙 ADD ITEM TO JSON GROUP ON CLICK -->
<script>
  document.addEventListener("DOMContentLoaded", function() {
    const memberstack = window.$memberstackDom;

    // Add click event listener to the document
    document.addEventListener("click", async function(event) {
      const target = event.target;

      // Check if the clicked element has ms-code-update-json-item attribute
      const updateJsonItem = target.closest('[ms-code-update-json-item]');
      if (updateJsonItem) {
        const key = updateJsonItem.closest('[ms-code-item-key]').getAttribute('ms-code-item-key');
        const jsonGroup = updateJsonItem.closest('[ms-code-print-list]').getAttribute('ms-code-print-list');

        // Retrieve the current member JSON data
        const member = await memberstack.getMemberJSON();

        if (member.data && member.data[jsonGroup] && member.data[jsonGroup][key]) {
          // Get the value to be added to the item in the member JSON
          const updateValue = updateJsonItem.getAttribute('ms-code-update-json-item');
          // Update the member JSON with the new value
          member.data[jsonGroup][key][updateValue] = true;

          // Update the member JSON using the Memberstack SDK
          await memberstack.updateMemberJSON({
            json: member.data
          });

          // Optional: Display a success message or perform any other desired action
          console.log('Member JSON updated successfully');
        } else {
          console.error(`Could not find item with key: ${key}`);
        }
      }

      // Check if the clicked element has ms-code-update attribute
      const updateButton = target.closest('[ms-code-update="json"]');
      if (updateButton) {
        // Add a delay
        await new Promise(resolve => setTimeout(resolve, 500));

        // Retrieve the current member JSON data
        const member = await memberstack.getMemberJSON();

        // Save the member JSON as a local storage item
        localStorage.setItem("memberJSON", JSON.stringify(member));

        // Optional: Display a success message or perform any other desired action
        console.log('Member JSON saved to local storage');
      }
    });
  });
</script>
v0.1
Voir le script

<!-- 💙 MEMBERSCRIPT #12 v0.1 💙 ADD ITEM TO JSON GROUP ON CLICK -->
<script>
  document.addEventListener("DOMContentLoaded", function() {
    const memberstack = window.$memberstackDom;

    // Add click event listener to the document
    document.addEventListener("click", async function(event) {
      const target = event.target;

      // Check if the clicked element has ms-code-update-json-item attribute
      const updateJsonItem = target.closest('[ms-code-update-json-item]');
      if (updateJsonItem) {
        const key = updateJsonItem.closest('[ms-code-item-key]').getAttribute('ms-code-item-key');
        const jsonGroup = updateJsonItem.closest('[ms-code-print-list]').getAttribute('ms-code-print-list');

        // Retrieve the current member JSON data
        const member = await memberstack.getMemberJSON();

        if (member.data && member.data[jsonGroup] && member.data[jsonGroup][key]) {
          // Get the value to be added to the item in the member JSON
          const updateValue = updateJsonItem.getAttribute('ms-code-update-json-item');
          // Update the member JSON with the new value
          member.data[jsonGroup][key][updateValue] = true;

          // Update the member JSON using the Memberstack SDK
          await memberstack.updateMemberJSON({
            json: member.data
          });

          // Optional: Display a success message or perform any other desired action
          console.log('Member JSON updated successfully');
        } else {
          console.error(`Could not find item with key: ${key}`);
        }
      }

      // Check if the clicked element has ms-code-update attribute
      const updateButton = target.closest('[ms-code-update="json"]');
      if (updateButton) {
        // Add a delay
        await new Promise(resolve => setTimeout(resolve, 500));

        // Retrieve the current member JSON data
        const member = await memberstack.getMemberJSON();

        // Save the member JSON as a local storage item
        localStorage.setItem("memberJSON", JSON.stringify(member));

        // Optional: Display a success message or perform any other desired action
        console.log('Member JSON saved to local storage');
      }
    });
  });
</script>
Voir le Memberscript
Visibilité conditionnelle

#11 - Ouvrir automatiquement la fenêtre modale de connexion

Montrer à tous les visiteurs déconnectés une fenêtre modale de connexion immédiatement après la visite de la page. Les Memberstack personnalisés et par défaut fonctionnent.


<!-- 💙 MEMBERSCRIPT #11 v0.1 💙 SHOW LOGIN MODAL IF MEMBER IS NOT LOGGED IN -->

<!-- KEEP THIS FOR DEFAULT MEMBERSTACK MODAL -->
<script>
function handleRedirect(redirect) {
  if (redirect && (window.location.pathname !== redirect)) return window.location.href = redirect;
  window.location.reload()
}

$memberstackDom.getCurrentMember().then(async ({
  data
}) => {
  if (!data) {
    const {
      data
    } = await $memberstackDom.openModal("login");
    handleRedirect(data.redirect)
  }
})
</script>

<!-- KEEP THIS FOR YOUR OWN CUSTOM MODAL -->
<script>
$memberstackDom.getCurrentMember().then(({ data }) => {
  if (!data) {
    const loginModal = document.querySelector('[ms-code-modal="login"]');
    if (loginModal) {
      loginModal.style.display = "flex";
    }
  }
});
</script>
v0.2
Voir le script

<!-- 💙 MEMBERSCRIPT #11 v0.1 💙 SHOW LOGIN MODAL IF MEMBER IS NOT LOGGED IN -->

<!-- KEEP THIS FOR DEFAULT MEMBERSTACK MODAL -->
<script>
function handleRedirect(redirect) {
  if (redirect && (window.location.pathname !== redirect)) return window.location.href = redirect;
  window.location.reload()
}

$memberstackDom.getCurrentMember().then(async ({
  data
}) => {
  if (!data) {
    const {
      data
    } = await $memberstackDom.openModal("login");
    handleRedirect(data.redirect)
  }
})
</script>

<!-- KEEP THIS FOR YOUR OWN CUSTOM MODAL -->
<script>
$memberstackDom.getCurrentMember().then(({ data }) => {
  if (!data) {
    const loginModal = document.querySelector('[ms-code-modal="login"]');
    if (loginModal) {
      loginModal.style.display = "flex";
    }
  }
});
</script>
Voir le Memberscript
Visibilité conditionnelle

#10 - Afficher/supprimer un élément en fonction d'un champ personnalisé

Vérifier si un membre a rempli un champ personnalisé. Si c'est le cas, l'élément cible est affiché. 


<!-- 💙 MEMBERSCRIPT #10 v0.2 💙 HIDE ELEMENTS IF CUSTOM FIELD IS BLANK -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Get the `_ms-mem` object from the local storage
  const msMem = JSON.parse(localStorage.getItem('_ms-mem'));

  // Get all the elements that have the `ms-code-customfield` attribute
  const elements = document.querySelectorAll('[ms-code-customfield]');

  // Iterate over each element
  elements.forEach(element => {
    // Get the value of the `ms-code-customfield` attribute
    const customField = element.getAttribute('ms-code-customfield');

    // If customField starts with '!', we invert the logic
    if (customField.startsWith('!')) {
      const actualCustomField = customField.slice(1); // remove the '!' from the start

      // If the custom field is empty, remove the element from the DOM
      if (msMem.customFields && msMem.customFields[actualCustomField]) {
        element.parentNode.removeChild(element);
      }
    } else {
      // Check if the user has the corresponding custom field in Memberstack
      if (!msMem.customFields || !msMem.customFields[customField]) {
        // If the custom field is empty, remove the element from the DOM
        element.parentNode.removeChild(element);
      }
    }
  });
});
</script>
v0.2
Voir le script

<!-- 💙 MEMBERSCRIPT #10 v0.2 💙 HIDE ELEMENTS IF CUSTOM FIELD IS BLANK -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Get the `_ms-mem` object from the local storage
  const msMem = JSON.parse(localStorage.getItem('_ms-mem'));

  // Get all the elements that have the `ms-code-customfield` attribute
  const elements = document.querySelectorAll('[ms-code-customfield]');

  // Iterate over each element
  elements.forEach(element => {
    // Get the value of the `ms-code-customfield` attribute
    const customField = element.getAttribute('ms-code-customfield');

    // If customField starts with '!', we invert the logic
    if (customField.startsWith('!')) {
      const actualCustomField = customField.slice(1); // remove the '!' from the start

      // If the custom field is empty, remove the element from the DOM
      if (msMem.customFields && msMem.customFields[actualCustomField]) {
        element.parentNode.removeChild(element);
      }
    } else {
      // Check if the user has the corresponding custom field in Memberstack
      if (!msMem.customFields || !msMem.customFields[customField]) {
        // If the custom field is empty, remove the element from the DOM
        element.parentNode.removeChild(element);
      }
    }
  });
});
</script>
Voir le Memberscript
Marketing

#9 - Compte à rebours réel, basé sur l'utilisateur

Définir dynamiquement un compte à rebours par utilisateur et masquer les éléments lorsque le temps est écoulé.


<!-- 💙 MEMBERSCRIPT #9 v0.1 💙 COUNTDOWN BY USER -->
<script>
// Step 1: Get the current date and time
const currentDate = new Date();

// Step 2: Calculate the new date and time based on the attribute values
const addTime = (date, unit, value) => {
  const newDate = new Date(date);
  switch (unit) {
    case 'hour':
      newDate.setHours(newDate.getHours() + value);
      break;
    case 'minute':
      newDate.setMinutes(newDate.getMinutes() + value);
      break;
    case 'second':
      newDate.setSeconds(newDate.getSeconds() + value);
      break;
    case 'millisecond':
      newDate.setMilliseconds(newDate.getMilliseconds() + value);
      break;
  }
  return newDate;
};

// Retrieve attribute values and calculate the new date and time
const hourAttr = document.querySelector('[ms-code-time-hour]');
const minuteAttr = document.querySelector('[ms-code-time-minute]');
const secondAttr = document.querySelector('[ms-code-time-second]');
const millisecondAttr = document.querySelector('[ms-code-time-millisecond]');

const countdownDateTime = localStorage.getItem('countdownDateTime');
let newDate;

if (countdownDateTime) {
  newDate = new Date(countdownDateTime);
} else {
  newDate = currentDate;
  if (hourAttr.hasAttribute('ms-code-time-hour')) {
    const hours = parseInt(hourAttr.getAttribute('ms-code-time-hour'));
    newDate = addTime(newDate, 'hour', isNaN(hours) ? 0 : hours);
  }
  if (minuteAttr.hasAttribute('ms-code-time-minute')) {
    const minutes = parseInt(minuteAttr.getAttribute('ms-code-time-minute'));
    newDate = addTime(newDate, 'minute', isNaN(minutes) ? 0 : minutes);
  }
  if (secondAttr.hasAttribute('ms-code-time-second')) {
    const seconds = parseInt(secondAttr.getAttribute('ms-code-time-second'));
    newDate = addTime(newDate, 'second', isNaN(seconds) ? 0 : seconds);
  }
  if (millisecondAttr.hasAttribute('ms-code-time-millisecond')) {
    const milliseconds = parseInt(millisecondAttr.getAttribute('ms-code-time-millisecond'));
    newDate = addTime(newDate, 'millisecond', isNaN(milliseconds) ? 0 : milliseconds);
  }

  localStorage.setItem('countdownDateTime', newDate);
}

// Step 4: Update the text of the elements to show the continuous countdown
const countdownElements = [hourAttr, minuteAttr, secondAttr, millisecondAttr];

const updateCountdown = () => {
  const currentTime = new Date();
  const timeDifference = newDate - currentTime;

  if (timeDifference > 0) {
    const timeParts = [
      Math.floor(timeDifference / (1000 * 60 * 60)) % 24, // Hours
      Math.floor(timeDifference / (1000 * 60)) % 60, // Minutes
      Math.floor(timeDifference / 1000) % 60, // Seconds
      Math.floor(timeDifference) % 1000, // Milliseconds
    ];

    // Update the text of the elements with the countdown values
    countdownElements.forEach((element, index) => {
      const timeValue = timeParts[index];
      if (index === 3) {
        element.innerText = timeValue.toString().padStart(2, '0').slice(0, 2); // Display only two digits for milliseconds
      } else {
        element.innerText = timeValue < 10 ? `0${timeValue}` : timeValue;
      }
    });

    // Update the countdown every 10 milliseconds
    setTimeout(updateCountdown, 10);
  } else {
    // Countdown has reached zero or has passed
    countdownElements.forEach((element) => {
      element.innerText = '00';
    });

    // Remove elements with ms-code-countdown="hide-on-end" attribute
    const hideOnEndElements = document.querySelectorAll('[ms-code-countdown="hide-on-end"]');
    hideOnEndElements.forEach((element) => {
      element.remove();
    });

    // Optionally, you can perform additional actions or display a message when the countdown ends
  }
};

// Start the countdown
updateCountdown();
</script>
v0.1
Voir le script

<!-- 💙 MEMBERSCRIPT #9 v0.1 💙 COUNTDOWN BY USER -->
<script>
// Step 1: Get the current date and time
const currentDate = new Date();

// Step 2: Calculate the new date and time based on the attribute values
const addTime = (date, unit, value) => {
  const newDate = new Date(date);
  switch (unit) {
    case 'hour':
      newDate.setHours(newDate.getHours() + value);
      break;
    case 'minute':
      newDate.setMinutes(newDate.getMinutes() + value);
      break;
    case 'second':
      newDate.setSeconds(newDate.getSeconds() + value);
      break;
    case 'millisecond':
      newDate.setMilliseconds(newDate.getMilliseconds() + value);
      break;
  }
  return newDate;
};

// Retrieve attribute values and calculate the new date and time
const hourAttr = document.querySelector('[ms-code-time-hour]');
const minuteAttr = document.querySelector('[ms-code-time-minute]');
const secondAttr = document.querySelector('[ms-code-time-second]');
const millisecondAttr = document.querySelector('[ms-code-time-millisecond]');

const countdownDateTime = localStorage.getItem('countdownDateTime');
let newDate;

if (countdownDateTime) {
  newDate = new Date(countdownDateTime);
} else {
  newDate = currentDate;
  if (hourAttr.hasAttribute('ms-code-time-hour')) {
    const hours = parseInt(hourAttr.getAttribute('ms-code-time-hour'));
    newDate = addTime(newDate, 'hour', isNaN(hours) ? 0 : hours);
  }
  if (minuteAttr.hasAttribute('ms-code-time-minute')) {
    const minutes = parseInt(minuteAttr.getAttribute('ms-code-time-minute'));
    newDate = addTime(newDate, 'minute', isNaN(minutes) ? 0 : minutes);
  }
  if (secondAttr.hasAttribute('ms-code-time-second')) {
    const seconds = parseInt(secondAttr.getAttribute('ms-code-time-second'));
    newDate = addTime(newDate, 'second', isNaN(seconds) ? 0 : seconds);
  }
  if (millisecondAttr.hasAttribute('ms-code-time-millisecond')) {
    const milliseconds = parseInt(millisecondAttr.getAttribute('ms-code-time-millisecond'));
    newDate = addTime(newDate, 'millisecond', isNaN(milliseconds) ? 0 : milliseconds);
  }

  localStorage.setItem('countdownDateTime', newDate);
}

// Step 4: Update the text of the elements to show the continuous countdown
const countdownElements = [hourAttr, minuteAttr, secondAttr, millisecondAttr];

const updateCountdown = () => {
  const currentTime = new Date();
  const timeDifference = newDate - currentTime;

  if (timeDifference > 0) {
    const timeParts = [
      Math.floor(timeDifference / (1000 * 60 * 60)) % 24, // Hours
      Math.floor(timeDifference / (1000 * 60)) % 60, // Minutes
      Math.floor(timeDifference / 1000) % 60, // Seconds
      Math.floor(timeDifference) % 1000, // Milliseconds
    ];

    // Update the text of the elements with the countdown values
    countdownElements.forEach((element, index) => {
      const timeValue = timeParts[index];
      if (index === 3) {
        element.innerText = timeValue.toString().padStart(2, '0').slice(0, 2); // Display only two digits for milliseconds
      } else {
        element.innerText = timeValue < 10 ? `0${timeValue}` : timeValue;
      }
    });

    // Update the countdown every 10 milliseconds
    setTimeout(updateCountdown, 10);
  } else {
    // Countdown has reached zero or has passed
    countdownElements.forEach((element) => {
      element.innerText = '00';
    });

    // Remove elements with ms-code-countdown="hide-on-end" attribute
    const hideOnEndElements = document.querySelectorAll('[ms-code-countdown="hide-on-end"]');
    hideOnEndElements.forEach((element) => {
      element.remove();
    });

    // Optionally, you can perform additional actions or display a message when the countdown ends
  }
};

// Start the countdown
updateCountdown();
</script>
Voir le Memberscript
Marketing

#8 - Copier dans le presse-papiers

Permettre aux visiteurs de copier des éléments tels que des codes de réduction dans leur presse-papiers en un seul clic.


<!-- 💙 MEMBERSCRIPT #8 v0.1 💙 SIMPLE COPY ELEMENT TO CLIPBOARD -->
<script>
// Step 1: Click the element with the attribute ms-code-copy="trigger"
const triggerElement = document.querySelector('[ms-code-copy="trigger"]');
triggerElement.addEventListener('click', () => {
  // Step 2: Copy text from the element with the attribute ms-code-copy="subject" to the clipboard
  const subjectElement = document.querySelector('[ms-code-copy="subject"]');
  const subjectText = subjectElement.innerText;

  // Create a temporary textarea element to facilitate the copying process
  const tempTextArea = document.createElement('textarea');
  tempTextArea.value = subjectText;
  document.body.appendChild(tempTextArea);

  // Select the text within the textarea and copy it to the clipboard
  tempTextArea.select();
  document.execCommand('copy');

  // Remove the temporary textarea
  document.body.removeChild(tempTextArea);
});
</script>
v0.1
Voir le script

<!-- 💙 MEMBERSCRIPT #8 v0.1 💙 SIMPLE COPY ELEMENT TO CLIPBOARD -->
<script>
// Step 1: Click the element with the attribute ms-code-copy="trigger"
const triggerElement = document.querySelector('[ms-code-copy="trigger"]');
triggerElement.addEventListener('click', () => {
  // Step 2: Copy text from the element with the attribute ms-code-copy="subject" to the clipboard
  const subjectElement = document.querySelector('[ms-code-copy="subject"]');
  const subjectText = subjectElement.innerText;

  // Create a temporary textarea element to facilitate the copying process
  const tempTextArea = document.createElement('textarea');
  tempTextArea.value = subjectText;
  document.body.appendChild(tempTextArea);

  // Select the text within the textarea and copy it to the clipboard
  tempTextArea.select();
  document.execCommand('copy');

  // Remove the temporary textarea
  document.body.removeChild(tempTextArea);
});
</script>
Voir le Memberscript
Visibilité conditionnelle

#7 - Éléments de chargement à retardement

Retarder l'apparition des éléments pendant une durée déterminée afin de donner à la page le temps de se mettre à jour avec les données correctes concernant les membres.


<!-- 💙 MEMBERSCRIPT #7 v0.1 💙 DELAY LOADING ELEMENTS -->
<script>
  document.addEventListener("DOMContentLoaded", function() {
    const elementsToDelay = document.querySelectorAll('[ms-code-delay]');

    elementsToDelay.forEach(element => {
      element.style.visibility = "hidden"; // Hide the element initially
    });

    setTimeout(function() {
      elementsToDelay.forEach(element => {
        element.style.visibility = "visible"; // Make the element visible after the delay
        element.style.opacity = "0"; // Set the initial opacity to 0
        element.style.animation = "fadeIn 0.5s"; // Apply the fadeIn animation
        element.addEventListener("animationend", function() {
          element.style.opacity = "1"; // Set opacity to 1 at the end of the animation
        });
      });
    }, 1000);
  });
</script>
<style>
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
</style>
v0.1
Voir le script

<!-- 💙 MEMBERSCRIPT #7 v0.1 💙 DELAY LOADING ELEMENTS -->
<script>
  document.addEventListener("DOMContentLoaded", function() {
    const elementsToDelay = document.querySelectorAll('[ms-code-delay]');

    elementsToDelay.forEach(element => {
      element.style.visibility = "hidden"; // Hide the element initially
    });

    setTimeout(function() {
      elementsToDelay.forEach(element => {
        element.style.visibility = "visible"; // Make the element visible after the delay
        element.style.opacity = "0"; // Set the initial opacity to 0
        element.style.animation = "fadeIn 0.5s"; // Apply the fadeIn animation
        element.addEventListener("animationend", function() {
          element.style.opacity = "1"; // Set opacity to 1 at the end of the animation
        });
      });
    }, 1000);
  });
</script>
<style>
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
</style>
Voir le Memberscript
JSON

#6 - Créer des groupes d'éléments à partir du JSON des membres

Afficher des groupes JSON aux membres connectés en utilisant un élément placeholder construit dans le Webflow.


<!-- 💙 MEMBERSCRIPT #6 v0.1 💙 CREATE ITEM GROUPS FROM JSON -->
<script>
document.addEventListener("DOMContentLoaded", async function() {
  const memberstack = window.$memberstackDom;

  // Function to display nested/sub items
  const displayNestedItems = async function(printList) {
    const jsonGroup = printList.getAttribute('ms-code-print-list');
    const placeholder = printList.querySelector(`[ms-code-print-item="${jsonGroup}"]`);
    if (!placeholder) return;

    const itemTemplate = placeholder.outerHTML;
    const itemContainer = document.createElement('div'); // Create a new container for the items

    const member = await memberstack.getMemberJSON();
    const items = member.data && member.data[jsonGroup] ? Object.values(member.data[jsonGroup]) : [];
    if (items.length === 0) return; // If no items, exit the function

    items.forEach(item => {
      if (Object.keys(item).length === 0) return;

      const newItem = document.createElement('div');
      newItem.innerHTML = itemTemplate;
      const itemElements = newItem.querySelectorAll('[ms-code-item-text]');
      itemElements.forEach(itemElement => {
        const jsonKey = itemElement.getAttribute('ms-code-item-text');
        const value = item && item[jsonKey] ? item[jsonKey] : '';
        itemElement.textContent = value;
      });

      // Add item key attribute
      const itemKey = Object.keys(member.data[jsonGroup]).find(k => member.data[jsonGroup][k] === item);
      newItem.firstChild.setAttribute('ms-code-item-key', itemKey);

      itemContainer.appendChild(newItem.firstChild);
    });

    // Replace the existing list with the new items
    printList.innerHTML = itemContainer.innerHTML;
  };

  // Call displayNestedItems function on initial page load for each instance
  const printLists = document.querySelectorAll('[ms-code-print-list]');
  printLists.forEach(printList => {
    displayNestedItems(printList);
  });

  // Add click event listener to elements with ms-code-update="json"
  const updateButtons = document.querySelectorAll('[ms-code-update="json"]');
  updateButtons.forEach(button => {
    button.addEventListener("click", async function() {
      // Add a delay of 500ms
      await new Promise(resolve => setTimeout(resolve, 500));
      printLists.forEach(printList => {
        displayNestedItems(printList);
      });
    });
  });
});
</script>
v0.2
Voir le script

<!-- 💙 MEMBERSCRIPT #6 v0.1 💙 CREATE ITEM GROUPS FROM JSON -->
<script>
document.addEventListener("DOMContentLoaded", async function() {
  const memberstack = window.$memberstackDom;

  // Function to display nested/sub items
  const displayNestedItems = async function(printList) {
    const jsonGroup = printList.getAttribute('ms-code-print-list');
    const placeholder = printList.querySelector(`[ms-code-print-item="${jsonGroup}"]`);
    if (!placeholder) return;

    const itemTemplate = placeholder.outerHTML;
    const itemContainer = document.createElement('div'); // Create a new container for the items

    const member = await memberstack.getMemberJSON();
    const items = member.data && member.data[jsonGroup] ? Object.values(member.data[jsonGroup]) : [];
    if (items.length === 0) return; // If no items, exit the function

    items.forEach(item => {
      if (Object.keys(item).length === 0) return;

      const newItem = document.createElement('div');
      newItem.innerHTML = itemTemplate;
      const itemElements = newItem.querySelectorAll('[ms-code-item-text]');
      itemElements.forEach(itemElement => {
        const jsonKey = itemElement.getAttribute('ms-code-item-text');
        const value = item && item[jsonKey] ? item[jsonKey] : '';
        itemElement.textContent = value;
      });

      // Add item key attribute
      const itemKey = Object.keys(member.data[jsonGroup]).find(k => member.data[jsonGroup][k] === item);
      newItem.firstChild.setAttribute('ms-code-item-key', itemKey);

      itemContainer.appendChild(newItem.firstChild);
    });

    // Replace the existing list with the new items
    printList.innerHTML = itemContainer.innerHTML;
  };

  // Call displayNestedItems function on initial page load for each instance
  const printLists = document.querySelectorAll('[ms-code-print-list]');
  printLists.forEach(printList => {
    displayNestedItems(printList);
  });

  // Add click event listener to elements with ms-code-update="json"
  const updateButtons = document.querySelectorAll('[ms-code-update="json"]');
  updateButtons.forEach(button => {
    button.addEventListener("click", async function() {
      // Add a delay of 500ms
      await new Promise(resolve => setTimeout(resolve, 500));
      printLists.forEach(printList => {
        displayNestedItems(printList);
      });
    });
  });
});
</script>
Voir le Memberscript
JSON

#5 - Remplir du texte à partir d'un simple élément JSON

Utilisez Member JSON pour mettre à jour le texte de n'importe quel élément de votre page.


<!-- 💙 MEMBERSCRIPT #5 v0.1 💙 FILL TEXT BASED ON SIMPLE ITEM IN JSON -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  const memberstack = window.$memberstackDom;

  // Function to fill text elements with attribute ms-code-fill-text
  const fillTextElements = async function() {
    // Retrieve the current member JSON data
    const member = await memberstack.getMemberJSON();

    // Fill text elements with attribute ms-code-fill-text
    const textElements = document.querySelectorAll('[ms-code-fill-text]');
    textElements.forEach(element => {
      const jsonKey = element.getAttribute('ms-code-fill-text');
      const value = member.data && member.data[jsonKey] ? member.data[jsonKey] : '';
      element.textContent = value;
    });
  };

  // Function to handle script #4 event
  const handleScript4Event = async function() {
    // Add a delay of 500ms
    await new Promise(resolve => setTimeout(resolve, 500));
    await fillTextElements();
  };

  // Add click event listener to elements with ms-code-update="json"
  const updateButtons = document.querySelectorAll('[ms-code-update="json"]');
  updateButtons.forEach(button => {
    button.addEventListener("click", handleScript4Event);
  });

  // Call fillTextElements function on initial page load
  fillTextElements();
});
</script>

‍

v0.1
Voir le script

<!-- 💙 MEMBERSCRIPT #5 v0.1 💙 FILL TEXT BASED ON SIMPLE ITEM IN JSON -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  const memberstack = window.$memberstackDom;

  // Function to fill text elements with attribute ms-code-fill-text
  const fillTextElements = async function() {
    // Retrieve the current member JSON data
    const member = await memberstack.getMemberJSON();

    // Fill text elements with attribute ms-code-fill-text
    const textElements = document.querySelectorAll('[ms-code-fill-text]');
    textElements.forEach(element => {
      const jsonKey = element.getAttribute('ms-code-fill-text');
      const value = member.data && member.data[jsonKey] ? member.data[jsonKey] : '';
      element.textContent = value;
    });
  };

  // Function to handle script #4 event
  const handleScript4Event = async function() {
    // Add a delay of 500ms
    await new Promise(resolve => setTimeout(resolve, 500));
    await fillTextElements();
  };

  // Add click event listener to elements with ms-code-update="json"
  const updateButtons = document.querySelectorAll('[ms-code-update="json"]');
  updateButtons.forEach(button => {
    button.addEventListener("click", handleScript4Event);
  });

  // Call fillTextElements function on initial page load
  fillTextElements();
});
</script>

‍

Voir le Memberscript
JSON

#4 - Mettre à jour le JSON des membres dans le stockage local au moment du clic

Ajoutez cet attribut à tout bouton/élément qui doit déclencher une mise à jour JSON après un court délai.


<!-- 💙 MEMBERSCRIPT #4 v0.1 💙 UPDATE MEMBER JSON IN LOCAL STORAGE ON BUTTON CLICK -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  const updateButtons = document.querySelectorAll('[ms-code-update="json"]');

  updateButtons.forEach(button => {
    button.addEventListener("click", async function() {
      const memberstack = window.$memberstackDom;

      // Add a delay
      await new Promise(resolve => setTimeout(resolve, 500));

      // Retrieve the current member JSON data
      const member = await memberstack.getMemberJSON();

      // Save the member JSON as a local storage item
      localStorage.setItem("memberJSON", JSON.stringify(member));
    });
  });
});
</script>
v0.1
Voir le script

<!-- 💙 MEMBERSCRIPT #4 v0.1 💙 UPDATE MEMBER JSON IN LOCAL STORAGE ON BUTTON CLICK -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  const updateButtons = document.querySelectorAll('[ms-code-update="json"]');

  updateButtons.forEach(button => {
    button.addEventListener("click", async function() {
      const memberstack = window.$memberstackDom;

      // Add a delay
      await new Promise(resolve => setTimeout(resolve, 500));

      // Retrieve the current member JSON data
      const member = await memberstack.getMemberJSON();

      // Save the member JSON as a local storage item
      localStorage.setItem("memberJSON", JSON.stringify(member));
    });
  });
});
</script>
Voir le Memberscript
JSON

#3 - Enregistrer le JSON des membres dans le stockage local lors du chargement de la page

Créer un objet localstorage contenant le JSON du membre connecté au chargement de la page


<!-- 💙 MEMBERSCRIPT #3 v0.1 💙 SAVE JSON TO LOCALSTORAGE ON PAGE LOAD -->
<script>
document.addEventListener("DOMContentLoaded", async function() {
  const memberstack = window.$memberstackDom;
  
  // Retrieve the current member JSON data
  const member = await memberstack.getMemberJSON();

  // Save the member JSON as a local storage item
  localStorage.setItem("memberJSON", JSON.stringify(member));
});
</script>
v0.1
Voir le script

<!-- 💙 MEMBERSCRIPT #3 v0.1 💙 SAVE JSON TO LOCALSTORAGE ON PAGE LOAD -->
<script>
document.addEventListener("DOMContentLoaded", async function() {
  const memberstack = window.$memberstackDom;
  
  // Retrieve the current member JSON data
  const member = await memberstack.getMemberJSON();

  // Save the member JSON as a local storage item
  localStorage.setItem("memberJSON", JSON.stringify(member));
});
</script>
Voir le Memberscript
JSON

#2 - Ajouter des groupes d'éléments au JSON des membres

Permet aux membres d'ajouter des éléments/groupes imbriqués à leur JSON de membre.


<!-- 💙 MEMBERSCRIPT #2 v0.1 💙 ADD ITEM GROUPS TO MEMBER JSON -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  const msCodeForm2 = document.querySelector('[ms-code="form2"]');
  const jsonList = msCodeForm2.getAttribute("ms-code-json-list");

  msCodeForm2.addEventListener('submit', async function(event) {
    event.preventDefault(); // Prevent the default form submission

    // Retrieve the current member JSON data
    const memberstack = window.$memberstackDom;
    const member = await memberstack.getMemberJSON();

    // Create a new member.data object if it doesn't already exist
    if (!member.data) {
      member.data = {};
    }

    // Check if the friends group already exists
    if (!member.data[jsonList]) {
      // Create a new friends group object
      member.data[jsonList] = {};
    }

    // Retrieve the input values for creating the subgroup
    const inputs = msCodeForm2.querySelectorAll('[ms-code-json-name]');
    const subgroup = {};
    inputs.forEach(input => {
      const jsonName = input.getAttribute('ms-code-json-name');
      const newItem = input.value;
      subgroup[jsonName] = newItem;
    });

    // Generate a unique key for the new subgroup prefixed with the main group name
    const timestamp = Date.now();
    const subgroupKey = `${jsonList}-${timestamp}`;

    // Create the new subgroup within the friends group
    member.data[jsonList][subgroupKey] = subgroup;

    // Update the member JSON with the new data
    await memberstack.updateMemberJSON({
      json: member.data
    });

    // Log a message to the console
    console.log(`New subgroup with key ${subgroupKey} has been created within ${jsonList} group.`);

    // Reset the input values
    inputs.forEach(input => {
      input.value = "";
    });
  });
});
</script>
v0.1
Voir le script

<!-- 💙 MEMBERSCRIPT #2 v0.1 💙 ADD ITEM GROUPS TO MEMBER JSON -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  const msCodeForm2 = document.querySelector('[ms-code="form2"]');
  const jsonList = msCodeForm2.getAttribute("ms-code-json-list");

  msCodeForm2.addEventListener('submit', async function(event) {
    event.preventDefault(); // Prevent the default form submission

    // Retrieve the current member JSON data
    const memberstack = window.$memberstackDom;
    const member = await memberstack.getMemberJSON();

    // Create a new member.data object if it doesn't already exist
    if (!member.data) {
      member.data = {};
    }

    // Check if the friends group already exists
    if (!member.data[jsonList]) {
      // Create a new friends group object
      member.data[jsonList] = {};
    }

    // Retrieve the input values for creating the subgroup
    const inputs = msCodeForm2.querySelectorAll('[ms-code-json-name]');
    const subgroup = {};
    inputs.forEach(input => {
      const jsonName = input.getAttribute('ms-code-json-name');
      const newItem = input.value;
      subgroup[jsonName] = newItem;
    });

    // Generate a unique key for the new subgroup prefixed with the main group name
    const timestamp = Date.now();
    const subgroupKey = `${jsonList}-${timestamp}`;

    // Create the new subgroup within the friends group
    member.data[jsonList][subgroupKey] = subgroup;

    // Update the member JSON with the new data
    await memberstack.updateMemberJSON({
      json: member.data
    });

    // Log a message to the console
    console.log(`New subgroup with key ${subgroupKey} has been created within ${jsonList} group.`);

    // Reset the input values
    inputs.forEach(input => {
      input.value = "";
    });
  });
});
</script>
Voir le Memberscript
JSON

#1 - Ajouter des éléments au JSON des membres

Permettre aux membres d'enregistrer des éléments simples dans leur JSON sans écrire de code.


<!-- 💙 MEMBERSCRIPT #1 v0.1 💙 ADD INDIVIDUAL ITEMS TO MEMBER JSON -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  const forms = document.querySelectorAll('[ms-code="form1"]');
  
  forms.forEach(form => {
    const jsonType = form.getAttribute("ms-code-json-type");
    const jsonList = form.getAttribute("ms-code-json-list");

    form.addEventListener('submit', async function(event) {
      event.preventDefault(); // Prevent the default form submission

      // Retrieve the current member JSON data
      const memberstack = window.$memberstackDom;
      const member = await memberstack.getMemberJSON();

      // Create a new member.data object if it doesn't already exist
      if (!member.data) {
        member.data = {};
      }

      if (jsonType === "group") {
        // Check if the group already exists
        if (!member.data[jsonList]) {
          // Create a new group object
          member.data[jsonList] = {};
        }

        // Iterate over the inputs with ms-code-json-name attribute
        const inputs = form.querySelectorAll('[ms-code-json-name]');
        inputs.forEach(input => {
          const jsonName = input.getAttribute('ms-code-json-name');
          const newItem = input.value;
          member.data[jsonList][jsonName] = newItem;
        });

        // Log a message to the console for group type
        console.log(`Item(s) have been added to member JSON with group key ${jsonList}.`);
      } else if (jsonType === "array") {
        // Check if the array already exists
        if (!member.data[jsonList]) {
          // Create a new array
          member.data[jsonList] = [];
        }

        // Retrieve the input values for the array type
        const inputs = form.querySelectorAll('[ms-code-json-name]');
        inputs.forEach(input => {
          const jsonName = input.getAttribute('ms-code-json-name');
          const newItem = input.value;
          member.data[jsonList].push(newItem);
        });

        // Log a message to the console for array type
        console.log(`Item(s) have been added to member JSON with array key ${jsonList}.`);
      } else {
        // Retrieve the input value and key for the basic item type
        const input = form.querySelector('[ms-code-json-name]');
        const jsonName = input.getAttribute('ms-code-json-name');
        const newItem = input.value;
        member.data[jsonName] = newItem;

        // Log a message to the console for basic item type
        console.log(`Item ${newItem} has been added to member JSON with key ${jsonName}.`);
      }

      // Update the member JSON with the new data
      await memberstack.updateMemberJSON({
        json: member.data
      });

      // Reset the input values
      const inputs = form.querySelectorAll('[ms-code-json-name]');
      inputs.forEach(input => {
        input.value = "";
      });
    });
  });
});
</script>
v0.1
Voir le script

<!-- 💙 MEMBERSCRIPT #1 v0.1 💙 ADD INDIVIDUAL ITEMS TO MEMBER JSON -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  const forms = document.querySelectorAll('[ms-code="form1"]');
  
  forms.forEach(form => {
    const jsonType = form.getAttribute("ms-code-json-type");
    const jsonList = form.getAttribute("ms-code-json-list");

    form.addEventListener('submit', async function(event) {
      event.preventDefault(); // Prevent the default form submission

      // Retrieve the current member JSON data
      const memberstack = window.$memberstackDom;
      const member = await memberstack.getMemberJSON();

      // Create a new member.data object if it doesn't already exist
      if (!member.data) {
        member.data = {};
      }

      if (jsonType === "group") {
        // Check if the group already exists
        if (!member.data[jsonList]) {
          // Create a new group object
          member.data[jsonList] = {};
        }

        // Iterate over the inputs with ms-code-json-name attribute
        const inputs = form.querySelectorAll('[ms-code-json-name]');
        inputs.forEach(input => {
          const jsonName = input.getAttribute('ms-code-json-name');
          const newItem = input.value;
          member.data[jsonList][jsonName] = newItem;
        });

        // Log a message to the console for group type
        console.log(`Item(s) have been added to member JSON with group key ${jsonList}.`);
      } else if (jsonType === "array") {
        // Check if the array already exists
        if (!member.data[jsonList]) {
          // Create a new array
          member.data[jsonList] = [];
        }

        // Retrieve the input values for the array type
        const inputs = form.querySelectorAll('[ms-code-json-name]');
        inputs.forEach(input => {
          const jsonName = input.getAttribute('ms-code-json-name');
          const newItem = input.value;
          member.data[jsonList].push(newItem);
        });

        // Log a message to the console for array type
        console.log(`Item(s) have been added to member JSON with array key ${jsonList}.`);
      } else {
        // Retrieve the input value and key for the basic item type
        const input = form.querySelector('[ms-code-json-name]');
        const jsonName = input.getAttribute('ms-code-json-name');
        const newItem = input.value;
        member.data[jsonName] = newItem;

        // Log a message to the console for basic item type
        console.log(`Item ${newItem} has been added to member JSON with key ${jsonName}.`);
      }

      // Update the member JSON with the new data
      await memberstack.updateMemberJSON({
        json: member.data
      });

      // Reset the input values
      const inputs = form.querySelectorAll('[ms-code-json-name]');
      inputs.forEach(input => {
        input.value = "";
      });
    });
  });
});
</script>
Voir le Memberscript
Nous n'avons pas trouvé de scripts pour cette recherche... veuillez réessayer.
Slack

Besoin d'aide avec MemberScripts ? Rejoignez notre communauté Slack de plus de 5 500 membres ! 🙌

Les MemberScripts sont une ressource communautaire de Memberstack - si vous avez besoin d'aide pour les faire fonctionner avec votre projet, rejoignez le Slack de Memberstack 2.0 et demandez de l'aide !

Rejoignez notre Slack
Vitrine

Découvrez les entreprises qui ont réussi avec Memberstack

Ne vous contentez pas de nous croire sur parole, consultez les entreprises de toutes tailles qui font confiance à Memberstack pour leur authentification et leurs paiements.

Voir tous les exemples de réussite
Même Webflow utilise Memberstack !
Un logo de l'entreprise présentée

Webflow Conf

Learn why Webflow chose Memberstack to power the Webflow Conf!
Un logo de l'entreprise présentée

Bibliothèque Relume

Découvrez comment Dan et Adam ont transformé leur agence de Webflow en un SAAS à succès.
Un logo de l'entreprise présentée

DesignJoy

Découvrez comment Brett gagne plus de 1 000 000 $ par an en tant que designer solo.
Commencer à construire

Commencez à construire vos rêves

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.

Démarrer l'essai gratuit

Essayez Memberstack gratuitement

Essai 100 % gratuit et illimité - mise à niveau uniquement lorsque vous êtes prêt à vous lancer. Aucune carte de crédit n'est requise.
Commencer gratuitement
50 000 Clones & Likes
300+ Posts | 10k Clics
125 millions de dollars traités
Plus de 100 commentaires
G2