Criando mapa SVG com links abrindo Popup com Jetengine e Jetpopup

Códigos e etapas:

1 – Criar post type para gerar o conteúdo
2 – Criar um metafield para gerar um ID único para cada conteúdo
3 – Criar o popup e configurá-lo para que abra o conteúdo via Ajax
4 – Criar um card ou Listing e um botão padrão do elementor e associá-lo ao metafiled ID que você escolheu dentro do post type
5 – Na página onde estiver o código do mapa criar o listing grid chamando esses posts
6 – Seguir a lógica abaixo:

// Links do mapa SVG

<a data-target="id1"></a>
<a data-target="id2"></a>
<a data-target="id3"></a>

// Formato do botão criado no linting ou card

<a class="elementor-button elementor-size-xs" role="button" id="id1">Botão Oculto 1</a>
<a class="elementor-button elementor-size-xs" role="button" id="id2">Botão oculto 2</a>
<a class="elementor-button elementor-size-xs" role="button" id="id3">Botão Oculto 3</a>

// Javascript que simulará o clique dos links no mapa e os botões que ficarão oculto chamando o Popup com o conteúdo dinâmico

<script>
document.addEventListener('DOMContentLoaded', function() {
  const triggerLinks = document.querySelectorAll('a[data-target]');

  triggerLinks.forEach(function(triggerLink) {
    triggerLink.addEventListener('click', function(event) {
      event.preventDefault();
      let targetElement = event.target;
      
      // Encontrar o elemento 'a' se o evento de clique veio de um elemento filho
      while (targetElement && targetElement.tagName.toLowerCase() !== 'a') {
        targetElement = targetElement.parentElement;
      }

      if (targetElement) {
        const targetId = targetElement.getAttribute('data-target');
        const hiddenButton = document.getElementById(targetId);
        if (hiddenButton) {
          hiddenButton.click();
        }
      }
    });
  });
});
</script>