Probleme script CSS Elementor

[aymericapp]

Détails techniques

Version du forum : AwesomeBB
Poste occupé : Membre
Navigateur(s) concerné(s) : Internet Explorer
Personnes concernées par le problème : Moi uniquement
Lien du forum : https://habbodreams.net

Description du problème

Bonjour, je me permet de poster ce message car je suis actuellement en train de créer mon site FAN pour un jeu. J'utilise une api externe public pour afficher des badges depuis le jeu ( extension utiliser : WpGetApi ) Mon site : HabboDreams.net
J'ai récemment payer un codeur sur la plateforme ComeUp pour m'ecrire un script pour modifier le design de l'affichage des badges en utilisant un Tooltip ( voir sur le site quand on survol le contenair "Derniers Badges FR"). Ne voulant pas repayer, je me suis dis que j'allais le refaire pour l'affichage des derniers meuble du jeu de la meme facon mais, probleme, cela m'affiche un code erreur. Voici les 2 code en question, le premier qui marche et le 2eme qui ne marche pas.

Code:

<br>
<br>
<br>
<?php
$data = wpgetapi_endpoint( 'badges', 'badges', array('debug' => false) );

echo '<div class="BadgesFR">';
foreach ($data['result'] as $result) {
   echo '
      <div class="Badge">
         <p class="BadgeFR_tooltip tooltip_' . $result['guid'] . '">' . $result['name'] . '</p>
         <img class="BadgeFR BadgeFR_ID_' . $result['guid'] . '" src="' . $result['image'] . '">
      </div>
   ';
}
echo '</div>';
?>
<br>
<style>
   .elementor-226 .elementor-element.elementor-element-534ba53 {
      z-index: unset !important;
   }
   
   .Badge {
      position: relative;
      display: inline-block;
      width: 50px;
      height: 50px;
      border-radius: 5px;
      z-index: 2 !important;
   }
   
   .Badge img {
      width: 40px;
      height: 40px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
   }
   
   .Badge.hover {
      cursor: pointer;
      background: #333;
   }
      
   .BadgeFR_tooltip {
      display: none;
      position: absolute;
      top: -90%;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      background: #333;
      color: white;
      border-radius: 5px;
      white-space: nowrap;
      padding: 5px 10px;
      z-index: 2 !important;
   }
   
   .BadgeFR_tooltip::before {
      content: "";
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 10px solid #333;
      position: absolute;
      bottom: -9px;
      left: 50%;
      transform: translateX(-50%);
   }
</style>
<script>
   const badgesFR = document.querySelectorAll(".BadgeFR");
   const tooltips = document.querySelectorAll(".BadgeFR_tooltip");
   
   badgesFR.forEach((badge) => {
      badge.addEventListener("mouseover", () => {
         let id = badge.classList[1].replace("BadgeFR_ID_", "");
         
         tooltips.forEach((tooltip) => {            
            if(tooltip.classList.contains("tooltip_" + id)) {
               badge.closest(".Badge").classList.add("hover");
               tooltip.style.display = "inline-block";
            }
         });
      });
      
      badge.addEventListener("mouseout", () => {
         badge.closest(".Badge").classList.remove("hover");
         tooltips.forEach((tooltip) => {            
            tooltip.style.display = "none";
         });
      })
   })
</script>

Code:

<br>
<br>
<br>
<?php
wpgetapi_endpoint( 'furni', 'furni', array('debug' => false) );

echo '<div class="furni">';
foreach ($data['result']['furni'] as $result) {
   echo '
      <div class="furni">
         <p class="furni_tooltip tooltip_' . $result['guid'] . '">' . $result['name'] . '</p>
         <img class="furni Furni_ID_' . $result['guid'] . '" src="' . $result['icon'] . '">
      </div>
   ';
}
echo '</div>';
?>
<br>
<style>
   .elementor-226 .elementor-element.elementor-element-f75c634 {
      z-index: unset !important;
   }
   
   .furni {
      position: relative;
      display: inline-block;
      width: 50px;
      height: 50px;
      border-radius: 5px;
      z-index: 2 !important;
   }
   
   .furni img {
      width: 40px;
      height: 40px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
   }
   
   .furni.hover {
      cursor: pointer;
      background: #333;
   }
      
   .furni_tooltip {
      display: none;
      position: absolute;
      top: -90%;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      background: #333;
      color: white;
      border-radius: 5px;
      white-space: nowrap;
      padding: 5px 10px;
      z-index: 2 !important;
   }
   
   .furni_tooltip::before {
      content: "";
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 10px solid #333;
      position: absolute;
      bottom: -9px;
      left: 50%;
      transform: translateX(-50%);
   }
</style>
<script>
   const furni = document.querySelectorAll(".furni");
   const tooltips = document.querySelectorAll(".furni_tooltip");
   
   furni.forEach((furni) => {
      furni.addEventListener("mouseover", () => {
         let id = furni.classList[1].replace("furni_ID_", "");
         
         tooltips.forEach((tooltip) => {            
            if(tooltip.classList.contains("tooltip_" + id)) {
               furni.closest(".furni").classList.add("hover");
               tooltip.style.display = "inline-block";
            }
         });
      });
      
      furni.addEventListener("mouseout", () => {
         furni.closest(".furni").classList.remove("hover");
         tooltips.forEach((tooltip) => {            
            tooltip.style.display = "none";
         });
      })
   })
</script>

J'utilise l'extension CodeSnippet pour intégrer du code dans l'editeur elementor.

Voici le code erreur afficher :
Warning: Undefined variable $data in /htdocs/wp-content/plugins/code-snippets/php/front-end/class-frontend.php(210) : eval()'d code on line 10

Warning: Trying to access array offset on value of type null in /htdocs/wp-content/plugins/code-snippets/php/front-end/class-frontend.php(210) : eval()'d code on line 10

Warning: Trying to access array offset on value of type null in /htdocs/wp-content/plugins/code-snippets/php/front-end/class-frontend.php(210) : eval()'d code on line 10

Warning: foreach() argument must be of type array|object, null given in /htdocs/wp-content/plugins/code-snippets/php/front-end/class-frontend.php(210) : eval()'d code on line 10

J'ai bien remplacer l'appel foreach avec la template API generer par mon extension WpGetApi ainsi que tous les champs Badge - Badge FR ... par Furni et le code elementor en allant dans inspecter css dans mon navigateur.

Quelqu'un pourait-il m'aider svp ?

En espèrant de l'aide, Cordialement.

[Toryudo]

Bienvenue sur le forum de support de Forumactif Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser : L'importance de garder secret l'email de fondation, Sécurité : ce qu'il ne faut pas faire, Liste des questions et réponses fréquentes, Liste des trucs et astuces, La fonction rechercher N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.

Le Forum des Forums est basé sur l'entraide de la communauté des administrateurs et utilisateurs de forums Forumactif. Nous sommes désolés, mais nous ne sommes pas compétents en la matière. Ce sujet est par conséquent verrouillé.