MemberScript bugs - Hiding Content Answered

• 

  Julian Galluzzo

  • November 14, 2023 16:24
  1. This usually only happens on page refresh, not first load. But, the only way around that would be to have the content hidden by default in webflow, then to use JavaScript to show it after a few seconds. I would say it's not worth it due to the pains it causes with development. You can put the script in the head if you haven't yet, it makes it faster but there is still a flash.
  2. What console errors, if any, are you getting?
  0
• 

  Marcus Francis

  • November 14, 2023 16:24

  Julian Galluzzo

  

  0
• 

  Julian Galluzzo

  • November 14, 2023 16:25

  Have you also tried using the second one (loads after member object)?

  I find some projects have issues with one and then work with the other, not sure why

  0
• 

  Marcus Francis

  • November 14, 2023 16:27

  Yeah I started with that one and switched because the delay

  0
• 

  Marcus Francis

  • November 14, 2023 16:27

  the "Ninja Online" project is located in the 1st folder in the workspace '2023 Creator Capitol'

  0
• 

  Julian Galluzzo

  • November 14, 2023 16:28

  Hey Marcus Francis!

  I seem to have fixed it, it is working beautifully now. Please check out this loom for details

  https://www.loom.com/share/aa272587ed1d40e8b657bcb217247d99

  0
• 

  Marcus Francis

  • November 14, 2023 16:28

  Thanks Julian Galluzzo! For the optimized code you mentioned, is that the one on the favorites page settings or the one I had in the global component embed?

  Secondly, if I will allow people to save things on multiple pages is it best practice to keep it as a global component embed and get rid of the page settings one?

  0
• 

  Julian Galluzzo

  • November 14, 2023 16:29

  It is! And its in the component embed

  0
• 

  Marcus Francis

  • November 14, 2023 16:29

  🙏

  0
• 

  Marko Guzvic

  • November 14, 2023 16:30

  Julian Galluzzo I am having the same issue. Can you please tell me what have you done on his website to speed it up? I can add you to the workspace, but if it’s easier for you just let me know. Thanks!

  On safari it’s instant, but on chrome it’s the same story
  0
• 

  Julian Galluzzo

  • November 14, 2023 16:30

  Marko Guzvic 2 things:

  1. There were a lot of instances of duplicate code
  2. I swapped the code with this one here

  <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

  0
• 

  Marko Guzvic

  • November 14, 2023 16:34

  Julian Galluzzo I’ve just now seen this.

  This works perfectly!! Loads in less than a second!

  Please change the code in #24 so others can use it as well.

  0
• 

  Julian Galluzzo

  • November 14, 2023 16:35

  Awesome!! And I will Marko Guzvic

  0

Please sign in to leave a comment.