Modal only once per session

Attributes
9

Thank you!

Can you please test this code?

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'modal',
    (modalInstances) => {
      console.log('Modal successfully loaded!');

      // Function to set a session cookie
      function setCookie(name, value) {
        document.cookie = `${name}=${value};path=/`;
      }

      // Function to get a cookie value by name
      function getCookie(name) {
        const cookies = document.cookie.split(';');
        for (let cookie of cookies) {
          const [cookieName, cookieValue] = cookie.split('=');
          if (cookieName.trim() === name) {
            return cookieValue.trim();
          }
        }
        return null;
      }

      // Function to show the modal
      function showModal() {
        console.log('Displaying modal');
        const modal = document.querySelector('.fs_modal-2_popup');
        const loader = document.querySelector('.page-loader_wrapper');

        if (!loader || !modal) {
          console.error('Required elements not found');
          return;
        }

        // Add an event listener to detect when the loader has been hidden
        const loaderObserver = new MutationObserver((mutationsList, observer) => {
          for (let mutation of mutationsList) {
            if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
              if (loader.style.opacity === '0') {
                console.log('Loader has been hidden');
                document.querySelector('[fs-modal-element="open"]').click();
                observer.disconnect(); // Stop observing after the loader has been hidden
              }
            }
          }
        });

        loaderObserver.observe(loader, { attributes: true });

        // Add an event listener to detect when the modal is closed
        const modalObserver = new MutationObserver((mutationsList, observer) => {
          for (let mutation of mutationsList) {
            if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
              if (modal.style.display === 'none') {
                console.log('Modal has been hidden');
                // Set the session cookie to indicate the modal has been shown and closed
                setCookie('modalDisplayed', 'true');
                observer.disconnect(); // Stop observing after the modal is closed
              }
            }
          }
        });

        modalObserver.observe(modal, { attributes: true });
      }

      const modalDisplayed = getCookie('modalDisplayed');
      if (!modalDisplayed) {
        showModal();
      } else {
        console.log('Modal has already been displayed in this session.');
      }
    },
  ]);
</script>
1 Like