Jump to content

js ne fonctionne pas dans mon tpl


amz83
 Share

Recommended Posts

Bonjour,

 

j'ai codé un ptit module (vraiment basique) pour faire un pop up au clic afin de pouvoir renvoyer aux différents pdf (brochures)

 

tout fonctionne sur mon test (quand je l'execute avec notepad++).

 

Mais lorsque je l'ai exporté sur mon ftp, bah le js ne s'active pas, et j'ai l'impression que le css non plus... 

 

En effet le contenu du pop up est en visibility: hidden; mais pourtant on le voit de base.

 

lorsque l'on clic sur l'image, le pop up ne fonctionne pas, 

 

bref les images seront plus parlantes. (je vous joint en piece jointe ce que ça devrait faire et ce que ça fait vraiment.

 

et voici le code:

<html>

<body>

<div class="popup" onclick="myFunction()"> <img src="/../../img/Catevapd.jpg" name="cata" />
  <span class="popuptext" id="myPopup">
		
		<span class="taille1"> Retrouvez toutes nos gammes de produit! séléctionnez le lien Fr ou EN en fonction de vos préférences </br></br>
		Find here all our product range, select Fr or EN link according to you preference. </span>
  
		<span class="taille"> <img src="/../../img/brochureledfr.jpg" style="padding-bottom:3px;"></br> Led </br> <a href="http://www.desineo.fr/img/BrochureLED.pdf" target="_blank" >FR </a> 
		 <a href="http://www.desineo.fr/img/brochureLEDen.pdf" target="_blank" style="padding-left:15px;">       EN</a></span>
  
		 <span class="taille"> <img src="/../../img/Page1.jpg" style="padding-bottom:3px;"></br>Hammam </br><a href="http://www.desineo.fr/img/CatalogueHammam2.pdf" target="_blank" > FR </a> 
		 <a href="http://www.desineo.fr/img/hammamen.pdf" target="_blank" style="padding-left:15px;">       EN </a></span>
		 
		 <span class="taille"> <img src="plvbodyclean.jpg" style="padding-bottom:3px;"></br>Bodyclean </br><a href="http://www.desineo.fr/img/PLV_bodyclean.pdf" target="_blank" > FR </a> 
		 <a href="http://www.desineo.fr/img/bodycleanen.pdf" target="_blank" style="padding-left:15px;">       EN </a></span>
		 
		 <span class="taille"> <img src="plvintense.jpg" style="padding-bottom:3px;"></br>Intense </br><a href="http://www.desineo.fr/img/plvintense.pdf" target="_blank" > FR </a> 
		 <a href="http://www.desineo.fr/img/intenseen.pdf" target="_blank" style="padding-left:15px;">       EN </a></span>
		 
		  <span class="taille"> <img src="plvkgt.jpg" style="padding-bottom:3px;"></br>KGT </br><a href="http://www.desineo.fr/img/kgt.pdf" target="_blank" > FR </a> 
		 <a href="http://www.desineo.fr/img/kgten.pdf" target="_blank" style="padding-left:15px;">       EN </a></span>
		 
		 <span class="taille"> <img src="plvpw1b.jpg" style="padding-bottom:3px;"></br>Purewave </br><a href="http://www.desineo.fr/img/purewave.pdf" target="_blank" > FR </a> 
		 <a href="http://www.desineo.fr/img/purewaveen.pdf" target="_blank" style="padding-left:15px;">       EN </a></span>
		 
		 <span class="taille"> <img src="plvvalstorm.jpg" style="padding-bottom:3px;"></br>Valstorm </br><a href="http://www.desineo.fr/img/plvvalstorm.pdf" target="_blank" > FR </a> 
		 <a href="http://www.desineo.fr/img/vallstormen.pdf" target="_blank" style="padding-left:15px;">       EN </a></span>
		 
		 <span class="taille"> <img src="plvvitech.jpg" style="padding-bottom:3px;"></br>Vitech </br><a href="http://www.desineo.fr/img/PLVvitech.pdf" target="_blank" > FR </a> 
		 <a href="http://www.desineo.fr/img/vitechen.pdf" target="_blank" style="padding-left:15px;">       EN </a></span>
		 
		 <span class="taillecat"> <img src="Catevapd2.png" style="padding-bottom:3px;"></br>notre catalogue </br><a href="http://www.desineo.fr/img/Catalogue%20Desineo.pdf" target="_blank" > FR </a> 
		 <a href="http://www.desineo.fr/img/Catalogue%20Desineo.pdf" target="_blank" style="margin-left:125px;">       EN </a></span>
  
  
  </span>
  
  <div class="clear"></div>
  
</div>

<script type="text/javascript">
// When the user clicks on <div>, open the popup
function myFunction() {
    var popup = document.getElementById('myPopup');
    popup.classList.toggle('show');
}
</script>
</body>
</html>
.clear{
	
	clear:both;
}




body{
	
	font-family: roboto;

}

/* Popup container */


.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
	text-align: center;
	margin-top:70%;
	margin-left:10%;
}

/* The actual popup (appears on top) */
.popup .popuptext {
    visibility: hidden;
    width: 780px;
    background-color: #fcfcfc;
    color: #2c7796;
    text-align: center;
    float:left;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    ;
	border: #2c7796 5px solid;
	border-left: #2c7796 3px solid;
	border-right: #2c7796 3px solid;
	border-top: #2c7796 3px solid;
	
	
}

/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
	float:left;
    top: 100%;
    left: 50%;
    ;
    border-width: 5px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
	
}

.popup .taille1{
	
	color:#333;
	text-decoration:none;
	float:left;
	margin-left:3%;
	text-align:center;
	padding-top:5%;
	
	
}

.popup .taille{
	
	color:#333;
	text-decoration:none;
	float:left;
	margin-left:10%;
	text-align:center;
	padding-top:5%;
	
	
}

.popup .taille a{
	
	color:#333;
	text-decoration:none;
	float:left;
	margin-left:10%;
	text-align:center;
	margin-left:15px;
	
	
}

.popup .taille a:hover{
	
	color:#2c7796;
	text-decoration:none;
	float:left;
	margin-left:10%;
	text-align:center;
	margin-left:15px;
	
	
}

.popup .taillecat{
	padding-top:5%;
	color:#333;
	text-decoration:none;
	float:left;
	margin-left:35%;
	text-align:center;
	
	
}

.popup .taillecat a{
	
	color:#333;
	text-decoration:none;
	float:left;
	margin-left:35%;
	text-align:center;
	margin-left:15px;
	
	
}

.popup .taillecat a:hover{
	
	color:#2c7796;
	text-decoration:none;
	float:left;
	margin-left:35%;
	text-align:center;
	margin-left:15px;
	
	
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

post-1235210-0-59054000-1482403181_thumb.jpg

post-1235210-0-96325500-1482403187_thumb.jpg

Share this post


Link to post
Share on other sites

Ok bon bah pk pas mais ce que je voulais savoir c'est si mon code était ok au niveau du script etc (pour prestashop 1.5.3.1) voirsi il manquait pas un truc a rajouter pour que ça marche lorsque c'est sur le serveur, si tu me dis que c'est juste le cache a changer, je le ferais.

 

merci

Share this post


Link to post
Share on other sites

Non sur 1.5.3.1 on n'a pas acces a vide rle cache de base, faut faire soit la manip dans le ftp en supprimant tout a la main dans /smarty/cache et smarty/compile

 

ou alors y'a une manip sur le BO mais je la connais pas. Je te joint un screen.

 

post-1235210-0-15287900-1482412923_thumb.jpg

 

Share this post


Link to post
Share on other sites

Ok, je l'ai fait, je l'ai enregistré et j'ai ctrl + f5 sur ma page mais bon, ça a rien changé. vous pouvez allez voir si vous voulez: www.desineo.fr 

 

(c'est à gauche vous pouvez pas le rater c'est très moche du coup).

 

cordialement. desineo

Share this post


Link to post
Share on other sites

corrige déjà:

 

var popup = document.getElementById('myPopup');
popup.classList.toggle('show');

 

tu ne peux pas cliquer sur un élément pour l'afficher si à la base il est caché.

il faut mettre id='myPopup' sur l'img et afficher/cacher le span qui est juste après l'img

Share this post


Link to post
Share on other sites

ok donc, j'ai changé comme tu ma dit j'ai remonté le id="mypopup";

<div class="popup" onclick="myFunction()"> <img onmouseover="cata.src='/img/Catevapd2.png'"  onmouseout="cata.src='/img/Catevapd.jpg' " src="/../../img/Catevapd.jpg" name="cata" id="myPopup" />
  <span class="popuptext" >

ça donne ça. 

 

donc la j'ai plus que l'image mais quand je clique sur l'image rien ne se passe.

enfin la classe popup change(je le vois dans l'inspecteur) mais n'affiche pas le popup. 

 

j'ai donc pensé a un problème de z-index mais rien n'y fait (2,1000000)le popup ne s'affiche toujours pas, comment faire?

Share this post


Link to post
Share on other sites

j'ai crée un module de base en php et j’appelle une page tpl mais je suis un débutant donc ça doitpas etre la meilleur façon:

class cataloguepdf extends Module
{
	public function __construct()
	{
		$this->name = 'cataloguepdf';
		$this->version = '1.0.0';
		$this->author = 'AGERON Arthur le meilleur des stagiaires';
		$this->tab = 'front_office_features';
		$this->need_instance = 0;

		parent::__construct();

		$this->displayName = $this->l('catalogue pdf');
		$this->description = $this->l('catalogue pdf ouvert dans un nouvel onglet ehhh oui.');
	}

	public function install()
	{
		return (parent::install() && $this->registerHook('displayLeftColumn'));
	}

	public function uninstall()
	{

		return parent::uninstall();
	}

	public function hookdisplayLeftColumn($params)
	{
		 $this->context->controller->addCSS($this->_path.'cataloguepdf.css', 'all');
		 $this->context->controller->addJS($this->_path.'cataloguepdf.js');
		return $this->display(__FILE__, 'cataloguepdf.tpl');
	}
}

?>

Share this post


Link to post
Share on other sites

Mes pistes : 

 

1) Regarde si tu passes bien dans la méthode "hookdisplayLeftColumn". 

 

Si c'est pas le cas essaye de mettre un d majuscule (hookDisplayLeftColumn), si c'est tjr pas le cas check si tu as bien une left column sur ta page Presta. 

 

2) Si c'est bien le cas. Essaye de voir si ton code est bien chargé dans la page

 

Si ton code est pas chargé, c'est que c'est p'tet pas les bonne méthode pour charger du JS/CSS...

 

3) Tu peux peut être aussi se greffer à un autre hook (genre un hook header)...

 

4) Désactive ton cache pour voir si le pb vient de là.

 

Courage !

Share this post


Link to post
Share on other sites

Ooooooooooooooooooooook c'est bon j'ai viré le cache manuellement via le ftp ça ma pris 45 min mais ça fonctionne!

 

Ouf ce n'était pas un problème de code, juste de cache ^^.

 

Merci de votre aide au final! 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More