How to fix MemberScript bugs with content hiding on page load and capture visitor URL in Webflow form? Answered

Post author
Marcus Francis

Had a couple MemberScript bugs. Anyone experience this?

  1. Is there a script that truly lets you hide content on load / page refresh? Both skeleton and timed display memberScripts will still reveal content for a split sec before covering it.
  2. Currently using script #20.2 (loads immediately) when Saving and Unsaving items. This seems to work fine with Safari however, on Chrome there’s a massive delay. How would I go about fixing this bug?

Quick Screen Recording: https://www.loom.com/share/a0e909933aee4d919837f46eed907da5?sid=db6dbb05-e2f8-421e-88fe-b5952691c49b

Comments

18 comments

  • Comment author
    Julian Galluzzo
    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
  • Comment author
    Marcus Francis

    Julian Galluzzo

    0
  • Comment author
    Julian Galluzzo

    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
  • Comment author
    Marcus Francis

    Yeah I started with that one and switched because the delay

    0
  • Comment author
    Marcus Francis

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

    0
  • Comment author
    Julian Galluzzo

    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
  • Comment author
    Marcus Francis

    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
  • Comment author
    Julian Galluzzo

    It is! And its in the component embed

    0
  • Comment author
    Marcus Francis

    🙏

    0
  • Comment author
    Marko Guzvic

    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
  • Comment author
    Julian Galluzzo

    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
  • Comment author
    Marko Guzvic

    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
  • Comment author
    Julian Galluzzo

    Awesome!! And I will Marko Guzvic

    0
  • Comment author
    Table Talks undefined

    Hey guys. Is there some sort of memberscript that captures the url of the visitor in a webflow form?

    0
  • Comment author
    A J

    Hey Table Talks undefined, I am aware that there is this memberscript which stores and pre-fills the form based on the URL parameters of the visitor, maybe you can tweak the code a bit depending on your requirement to solve your use-case.

    0
  • Comment author
    Table Talks undefined

    Thanks for the response. Not much of a coder. Is there a place i can find a tweaked code to....

    1. Capture the full url
    2. Find the attribute to capture the full url
    3. Or a way to tweak the attributes to capture slugs as opposed to identifiers (eg.. www.xyz.com/blog/cat and im looking to extract "cat"
    0
  • Comment author
    A J

    Hey Table Talks undefined, I am not sure if there is a ready-made resource available for this, however I have tweaked this memberscript to fit for your use-case.

    You can clone this memberscript demo in your site and instead of pre-filling parameters, you can fill slug / URL as per your use-case.

    To do this, instead of Invite code field as shown in the script tutorial, I have added 2 fields URL and Slug in the form and it has the attribute ms-code-prefill-param="url" and ms-code-prefill-param="slug" respectively so that I don't need to change the code much. Feel free to tweak the code or attributes if you want for your reference.

    And then I have added this code instead of the whole memberscript in the Before </body> section of the page where I have the form setup.

    <script>
    function prefillInputs() {
    const url = window.location.href;
    const inputElements = document.querySelectorAll('[ms-code-prefill-param]'); inputElements.forEach((inputElement) => {
    const paramKey = inputElement.getAttribute('ms-code-prefill-param');
    if (paramKey === 'url') {
    inputElement.value = url;
    } else if (paramKey === 'slug') {
    const cleanedUrl = url.endsWith('/') ? url.slice(0, -1) : url;
    const slug = cleanedUrl.substring(cleanedUrl.lastIndexOf('/') + 1);
    inputElement.value = slug;
    }
    });
    }
    prefillInputs();
    </script>
    And that's it, once I save and publish it, I am able to see the URL or the slug pre-fill in the form as shown in the screenshot.
     
    Hope this helps
    0
  • Comment author
    Table Talks undefined

    Hey @AJ thanks for this response.. 🙏

    0

Please sign in to leave a comment.