Jetengine listing grid change 'Not Found' notification to popup alert

gistfile1.txt

Add this code to your snippet plugins, and create a HTML snippet and paste the code there, dont forget to set it to Footer.
Watch the tutorial here: https://www.youtube.com/watch?v=0kopy4pBMEY
_______________________________________________________-


<style>
  #customOverlay {
    position: fixed;
    top: 100%; /* Initially set the top to 100% */
    left: 0;
    width: 100% !important;
    height: 100%;
    background: #E4E3E38A;
    z-index: 999;
    display: none;
    backdrop-filter: blur(10px); /* Add blur effect to the background */
    animation: fadeInUp 0.3s ease forwards; /* Animation to fade in from bottom */
  }

  @keyframes fadeInUp {
    from {
      top: 100%; /* Start from the bottom */
      opacity: 0; /* Start with opacity 0 */
    }
    to {
      top: 0; /* Move to the top */
      opacity: 1; /* Fade in with full opacity */
    }
  }

  /* Animation to fade out towards bottom */
  @keyframes fadeOutDown {
    from {
      top: 0; /* Start from the top */
      opacity: 1; /* Start with opacity 1 */
    }
    to {
      top: 100%; /* Move towards the bottom */
      opacity: 0; /* Fade out with opacity 0 */
    }
  
  }

  #customPopupWindow {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    padding: 20px;
    background: white;
    border: none;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
    display: none; 
    text-align: center; 
    border-radius: 10px;
  }

  #customPopupContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #customPopupMessage {
    margin-top: 0;
    margin-bottom: 15px; /* Space between message and button */
  }

  #customPopupOkButton {
    padding: 5px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    margin-top: 15px; /* Add space below the message */
  }

  .highlight {
    background-color: #ffff27;
    padding: 2px 4px 2px 4px;
    margin: 2px;
    border-radius: 4px;
  }

  /* Responsive adjustments */
  @media screen and (max-width: 768px) {
    #customPopupWindow {
      width: 80%; /* Set width to 80% for phones */
    }
  }

  @media screen and (min-width: 767px) and (max-width: 1024px) {
    #customPopupWindow {
      width: 70%; /* Set width to 70% for tablets */
    }
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        mutation.addedNodes.forEach(function(node) {
          if (node.nodeType === 1 && (node.matches('.jet-listing-not-found') || node.querySelector('.jet-listing-not-found'))) {
            var noFoundElement = node.matches('.jet-listing-not-found') ? node : node.querySelector('.jet-listing-not-found');
            var listingGridItems = document.querySelectorAll('.jet-listing-grid__items');
            if (noFoundElement && listingGridItems.length > 0) {
              var overlay = document.createElement('div');
              overlay.id = 'customOverlay';
              document.body.appendChild(overlay);

              var customPopup = document.createElement('div');
              customPopup.id = 'customPopupWindow';
              var searchedWord = document.querySelector('.jet-search-filter__input')?.value || ''; 
              var message = noFoundElement.textContent.trim(); // Fetch the "No Results Found" message
              customPopup.innerHTML = `<p id="customPopupMessage">${message} "<span class="highlight">${searchedWord}</span>"</p><button id="customPopupOkButton">Ok</button>`;
              document.body.appendChild(customPopup);

              overlay.style.display = 'block';
              customPopup.style.display = 'block';

              // Hide the default "No Results Found" message
              noFoundElement.style.display = 'none';

document.getElementById('customPopupOkButton').addEventListener('click', function() {
    // Start fade-out animation for overlay
    document.getElementById('customOverlay').style.animation = 'fadeOutDown 0.3s ease forwards';

    // Start fade-out animation for custom popup window
    customPopup.style.animation = 'fadeOutDown 0.3s ease forwards';

    // After the animation completes, remove elements
    setTimeout(function() {
        overlay.remove();
        customPopup.remove();
        // Clear the search input
        document.querySelector('.jet-search-filter__input').value = '';
        // Reload the page with AJAX
        window.location.reload();
    }, 300); // Adjust the time according to your animation duration
});


            }
          }
        });
      });
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
  });
</script>