Ivon Filho

Ivon Filho

Olá, procurando web designer freelancer para seu projeto?

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>
Rolar para cima

Vamos Conversar?

Melhorar sua performance digital é o nosso desafio. Colecionamos cases de sucesso e queremos fazer o mesmo pela sua marca. Envie uma mensagem pra gente!

Blog

Web Designer Freelancer Brasília DF

Sobre

Apaixonado por WordPress, Ivon Filho atua como web designer e desenvolvedor front-end desde 2010.

Trabalhando como freelancer, atende desde pequenas a grandes empresas que procuram por serviços de excelente qualidade a um custo acessível, além de agências que precisam terceirizar essas demandas.

Criação de sites em WordPress e desenvolvimento de plugins e temas personalizados são as especialidades da “casa”! O verdadeiro conceito de “feito à mão”.

Experiências

Website Developer

Viva Pixel
Freelancer

Website Developer

Conectando Pessoas
2013 – 2016 - 3 anos

Website Developer

7 Pontos Agência Integrada
2012 – 2013 - 1 ano

Formação

Universidade Paulista

Comunicação e Mídias Digitais
2009 – 2011